CodingBaby-Browser-MCP

CodingBaby-Browser-MCP

概述

CodingBaby-Browser-MCP 是一个强大的工具，使 Cursor 中的 Claude 3.7 Sonnet 等 AI 助手能够控制 Chrome 浏览器以执行自动化任务。该工具通过基于 WebSocket 的通信协议连接 AI 和网络浏览器交互。

功能特性

• 浏览器自动化：以编程方式控制 Chrome 浏览器以导航网站、填充表单和执行点击操作
• 截图捕获：捕获整个页面或特定区域的截图
• 多标签页支持：创建、列出、选择和关闭浏览器标签页
• 表单交互：输入文本、按下按键和选择表单元素
• 批量命令：按顺序执行多个浏览器操作
• 视口控制：调整浏览器窗口大小以进行响应式测试

架构

该项目由两个主要组件组成：

1. MCP 工具服务：一个 Node.js 服务器，实现了模型上下文协议（MCP），用于与 Cursor 中的 AI 助手通信
2. Chrome 扩展：一个浏览器扩展，接收来自 MCP 服务的命令并控制浏览器

该系统使用 WebSocket（默认端口 9876）在 MCP 服务和 Chrome 扩展之间建立双向通信通道。

安装

前置要求

• Node.js（v14 或更高版本）
• Chrome 浏览器
• 带有 Claude 3.7 Sonnet 的 Cursor 编辑器

MCP 工具设置

1. 在 Cursor 中，转到设置 → MCP
2. 添加新的全局 MCP 服务，配置如下：

{
  "mcpServers": {
    "CodingBaby-Browser-MCP": {
      "command": "npx",
      "args": ["@sydneyassistent/codingbaby-browser-mcp"]
    }
  }
}

Chrome 扩展设置

1. 从 Chrome 网上应用店安装 CodingBaby 扩展
2. 启用该扩展并确保它具有必要的权限

使用

安装后，您可以在 Cursor 中要求 Claude 3.7 控制您的浏览器：

Use the browser to navigate to https://example.com

可用命令

• navigate：在浏览器中打开网址
• click：点击元素
• type：在表单字段中输入文本
• pressKey：模拟键盘操作
• scroll：向任何方向滚动
• takeScreenshot：捕获浏览器内容
• wait：暂停执行指定时间
• setViewport：更改浏览器窗口尺寸
• tabNew、tabList、tabSelect、tabClose：标签页管理
• batch：按顺序执行多个命令
• close：关闭浏览器会话

开发和调试

如果您已下载源代码，可以设置项目以用于开发和调试。

调试 Chrome 扩展

要从源代码加载和调试 Chrome 扩展：

1. 打开 Chrome 并导航至 chrome://extensions/
2. 通过切换右上角的开关启用"开发者模式"
3. 点击"加载已解压的扩展程序"按钮
4. 导航到项目中的 chrome-extension 目录并选择它
5. 扩展现在将以开发者模式加载
6. 您可以通过右键单击扩展图标、选择"检查"并打开控制台标签来查看控制台日志
7. 对扩展代码进行更改，并点击扩展卡上的刷新图标以应用更改

在 Cursor 中调试 MCP 服务

要使用本地 MCP 服务代码进行调试：

1. 克隆或下载存储库到您的本地计算机
2. 导航到项目目录并安装依赖项：

   cd Browser-MCP
   npm install
   

3. 在 Cursor 中，转到设置 → MCP
4. 添加新的 MCP 服务，配置如下：

   {
     "mcpServers": {
       "CodingBaby-Browser-MCP-Dev": {
         "command": "node",
         "args": ["/absolute/path/to/your/Browser-MCP/index.js"]
       }
     }
   }
   

   将 /absolute/path/to/your/ 替换为下载项目的实际路径
5. 点击"刷新"以加载 MCP 服务
6. 现在您可以对 MCP 服务代码进行更改，并在 Cursor 的 MCP 设置中点击"刷新"来重启服务

对于调试，您可以：

• 通过点击 MCP 状态图标检查 Cursor MCP 日志
• 向代码添加 console.error() 语句以进行更详细的日志记录
• 从终端手动运行 MCP 服务以获得完整的控制台输出

故障排除

• 端口冲突：如果端口 9876 已被使用，该工具将尝试自动释放它
• 连接问题：确保 Chrome 扩展已正确安装并启用

许可证

MIT

链接

• 官方网站：www.codingbaby.fun
• NPM 包：@sydneyassistent/codingbaby-browser-mcp
• Chrome 扩展：CodingBaby Extension