正在编码。。。
概述
CodingBaby Browser MCP是一个强大的工具，它使Cursor中的Claude 3.7 Sonnet等AI助手能够控制Chrome浏览器进行自动化任务。该工具通过基于WebSocket的通信协议弥合了人工智能和网络浏览器交互之间的差距。
特性
- 浏览器自动化：以编程方式控制Chrome浏览器浏览网站、填写表单和执行点击
- 电脑屏幕截图工具：截取整个页面或特定区域的屏幕截图
- 多标签支持：创建、列出、选择和关闭浏览器选项卡
- 表单交互：键入文本，按键，然后选择表单元素
- 批处理命令：按顺序执行多个浏览器操作
- 视口控制：调整浏览器窗口大小以进行响应式测试
建筑
该项目由两个主要部分组成：
- MCP工具服务器：一个实现模型上下文协议（MCP）的Node.js服务器，用于与Cursor中的AI助手通信
- Chrome 扩展：从MCP服务器接收命令并控制浏览器的浏览器扩展
系统使用WebSocket（默认端口9876）在MCP服务器和Chrome扩展程序之间建立双向通信通道。
安装
先决条件
- Node.js（v14或更高版本）
- Chrome浏览器
- 带Claude 3.7 Sonnet的光标编辑器
MCP工具设置
- 在光标中，转到设置→ MCP
- 使用以下配置添加新的全局MCP服务器：
{
"mcpServers": {
"CodingBaby-Browser-MCP": {
"command": "npx",
"args": ["@sydneyassistent/codingbaby-browser-mcp"]
}
}
}Chrome扩展程序设置
- 从Chrome网上商店安装CodingBaby扩展程序
- 启用扩展并确保其具有必要的权限
用法
安装后，您可以在Cursor中让Claude 3.7控制您的浏览器：
Use the browser to navigate to https://example.com可用命令
navigate：在浏览器中打开URLclick：点击元素type：在表单字段中输入文本pressKey：模拟键盘操作scroll：向任何方向滚动takeScreenshot：捕获浏览器内容wait：在指定时间内暂停执行setViewport：更改浏览器窗口尺寸tabNew,tabList,tabSelect,tabClose：选项卡管理batch：按顺序执行多个命令close：关闭浏览器会话
开发与调试
如果您已经下载了源代码，则可以出于开发和调试目的设置项目。
调试Chrome扩展程序
要从源代码加载和调试Chrome扩展程序，请执行以下操作：
- 打开Chrome浏览器并导航到
chrome://extensions/ - 通过切换右上角的开关启用“开发人员模式”
- 点击“加载解包”按钮
- 导航到
chrome-extension项目中的目录并选择它 - 扩展现在将以开发人员模式加载
- 您可以通过右键单击扩展图标，选择“检查”并打开console选项卡来查看控制台日志
- 更改扩展代码，然后单击扩展卡上的刷新图标以应用更改
在游标中调试MCP服务器
要使用本地MCP服务器代码进行调试：
- 克隆或下载存储库到本地计算机
- 导航到项目目录并安装依赖项：
cd Browser-MCP
npm install- 在光标中，转到设置→ MCP
- 添加具有以下配置的新MCP服务器：
{
"mcpServers": {
"CodingBaby-Browser-MCP-Dev": {
"command": "node",
"args": ["/absolute/path/to/your/Browser-MCP/index.js"]
}
}
}替换 /absolute/path/to/your/ 带有下载项目的实际路径
- 点击“刷新”加载MCP服务器
- 现在，您可以更改MCP服务器代码，并通过单击Cursor的MCP设置中的“刷新”重新启动服务器
对于调试，您可以：
- 通过单击MCP状态图标检查光标MCP日志
- 添加
console.error()用于更详细日志记录的代码语句 - 从终端手动运行MCP服务器以获得完整的控制台输出
故障排除
- 端口冲突：如果端口9876已在使用中，该工具将尝试自动释放它
- 连接问题：确保Chrome扩展程序已正确安装并启用
许可证
麻省理工学院
链接
- 官方网站： www.codingbaby.fun
- NPM包： @sydney辅助/编码婴儿浏览器mcp
- Chrome扩展程序： CodingBaby扩展