浏览器自动化工具

正在编码。。。

概述

CodingBaby Browser MCP是一个强大的工具，它使Cursor中的Claude 3.7 Sonnet等AI助手能够控制Chrome浏览器进行自动化任务。该工具通过基于WebSocket的通信协议弥合了人工智能和网络浏览器交互之间的差距。

特性

• 浏览器自动化：以编程方式控制Chrome浏览器浏览网站、填写表单和执行点击
• 电脑屏幕截图工具：截取整个页面或特定区域的屏幕截图
• 多标签支持：创建、列出、选择和关闭浏览器选项卡
• 表单交互：键入文本，按键，然后选择表单元素
• 批处理命令：按顺序执行多个浏览器操作
• 视口控制：调整浏览器窗口大小以进行响应式测试

建筑

该项目由两个主要部分组成：

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

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

安装

先决条件

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

MCP工具设置

1. 在光标中，转到设置→ 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：在浏览器中打开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. 您可以通过右键单击扩展图标，选择“检查”并打开console选项卡来查看控制台日志
7. 更改扩展代码，然后单击扩展卡上的刷新图标以应用更改

在游标中调试MCP服务器

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

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

   cd Browser-MCP
   npm install
   

3. 在光标中，转到设置→ 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状态图标检查光标MCP日志
• 添加 console.error() 用于更详细日志记录的代码语句
• 从终端手动运行MCP服务器以获得完整的控制台输出

故障排除

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

许可证

麻省理工学院

链接

• 官方网站： www.codingbaby.fun
• NPM包： @sydney辅助/编码婴儿浏览器mcp
• Chrome扩展程序： CodingBaby扩展