CodingBaby-Browser-MCP

CodingBaby 浏览器 MCP

描述

配套 Chrome 扩展

可用工具（在 chrome-server.js 中注册）

• navigate：导航到指定 URL。

• click：在网页上指定坐标 (x, y) 处执行点击操作。

• type：在当前聚焦的元素中输入文本。

• press_key：模拟按下键盘上的特定键（例如 'Enter'、'ArrowLeft'）。

• snapshot：捕获当前页面的截图（返回 Base64 编码的图像数据）。

• close：关闭浏览器（或扩展控制的标签页）。

• scroll：在指定方向（上、下、左、右）滚动页面，可选择指定要滚动的元素的选择器。

• take_screenshot：拍摄当前页面的截图（与 snapshot 类似，具体实现差异需验证）。

• save_html：将当前页面的完整 HTML 内容保存到服务器上的临时文件中。

• set_viewport：设置浏览器视口的大小（宽度和高度）。

安装

通过 Smithery 安装

运行（从源代码）

运行（作为已安装的包使用 npx）

注意事项

• 首次调用任何浏览器操作工具时，服务器将自动尝试启动 WebSocket 服务器并等待 Chrome 扩展连接。

• 截图和 HTML 内容将作为响应的一部分返回或保存在服务器本地。

I. Chrome Server MCP 原理介绍

1.1 概述

1.2 核心原理

1. MCP 服务器：基于 Node.js 的服务器，提供标准化的 MCP 接口，允许 AI 助手调用浏览器控制功能。

2. WebSocket 通信：使用 WebSocket 协议在 MCP 服务器与 Chrome 扩展之间建立双向实时通信通道。

3. Chrome 扩展：安装在 Chrome 浏览器中的扩展，接收来自 MCP 服务器的命令并执行浏览器操作。

4. 命令翻译：将 AI 助手的高级命令翻译为 Chrome 扩展可理解的低级浏览器操作。

1.3 优势

• 更高权限：作为 Chrome 扩展运行，拥有更高的浏览器权限。

• 反机器人规避：使用真实的 Chrome 浏览器和用户会话，有效绕过许多网站的反机器人机制。

• 更接近真实用户行为：操作模拟真实用户交互，减少被检测的可能性。

• 会话持久性：可以保持登录状态和 Cookies，便于访问需要认证的页面。

• 轻量级部署：只需在浏览器中安装扩展，无需单独启动浏览器实例或 WebDriver。

II. Chrome Server MCP 功能

2.1 主要功能

1. 网页导航 (navigate)：打开 URL、前进/后退等。

2. 元素点击 (click)：通过坐标点击页面上的元素。

3. 文本输入 (type)：在表单、输入框等中输入文本。

4. 按键模拟 (press_key)：模拟键盘操作。

5. 页面滚动 (scroll)：向上、下、左、右滚动页面内容。

6. 截图捕获 (snapshot, take_screenshot)：获取当前页面的截图。

7. HTML 保存 (save_html)：保存当前页面的 HTML 内容。

8. 浏览器关闭 (close)：关闭当前浏览器会话/标签页。

2.2 技术实现

• 端口监听：服务器在端口 9876 上启动 WebSocket 服务器，等待 Chrome 扩展连接。

• 消息格式：使用 JSON 格式进行通信，包括命令类型、参数和请求 ID。

• 异步响应：每个请求都有唯一的 ID，以确保请求和响应的正确匹配。

• 错误处理：包含超时和错误处理机制，确保通信稳定性。

• 会话管理：能够管理多个浏览器标签页会话（取决于扩展的实现）。

III. DOM Analyzer MCP 介绍

3.1 DOM Analyzer 核心功能

1. 按文本搜索 (search_by_text)：查找包含特定文本的元素。

2. 按选择器搜索 (search_by_selector)：使用 CSS 选择器查找元素。

3. 按 XPath 搜索 (search_by_xpath)：使用 XPath 表达式查找元素。

4. 按正则表达式搜索 (search_by_regex)：查找匹配正则表达式的文本内容。

5. 页面分析 (analyze_page)：自动分析页面结构并提取关键信息。

6. 保存 HTML (save_html)：将 HTML 内容保存到临时文件中，供后续分析。

IV. Chrome Server MCP 与 DOM Analyzer 的联合使用

4.1 联合使用原理

1. Chrome Server 负责浏览器控制和页面导航。

2. DOM Analyzer 负责页面内容的详细分析和数据提取。

4.2 典型工作流程

4.3 示例步骤

步骤 1：导航到目标页面

步骤 2：保存页面 HTML

步骤 3：使用 DOM Analyzer 分析页面

步骤 4：根据分析结果执行操作

4.4 高级用例

1. 智能表单填写：使用 DOM Analyzer 识别表单字段，然后使用 Chrome Server 填写。

2. 内容监控：定期检查网页内容变化并触发通知。

3. 多步骤流程自动化：自动化登录、导航和数据提取等任务。

4. 智能爬虫：创建理解页面结构并智能导航的爬虫。

5. 数据提取与清洗：使用 DOM Analyzer 选择器精确提取数据并结构化。

V. 安装与配置

5.1 先决条件

• Node.js 16+

• Chrome 浏览器

• 安装并启用配套的 Chrome 扩展（Chrome MCP Extension）。

5.2 设置步骤

1. 设置 Chrome Server MCP（如果从源代码运行）：
或安装包：npm install @sydneyassistent/chrome-server

2. 设置 DOM Analyzer（参考其自身的文档/设置）。

3. 在您的环境中注册 MCP 工具（例如 Cursor）：
编辑 .cursor/mcp.json 以添加/更新服务器配置：