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 浏览器
• Cursor 编辑器，带有 Claude 3.7 Sonnet

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 控制您的浏览器：

使用浏览器导航到 https://example.com

可用命令

• navigate：在浏览器中打开一个 URL
• 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": ["/绝对路径到你的/Browser-MCP/index.js"]
       }
     }
   }
   

   将 /绝对路径到你的/ 替换为您实际下载项目的路径
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 扩展程序