关键词

语义网页浏览DOM操作AI助手网页自动化上下文服务

项目简介

Chrome Control MCP Server 是一个 MCP (Model Context Protocol) 服务器的实现，它利用 Chrome 浏览器 API，为 AI 助手（如 Claude）提供网页的语义理解能力。与传统的基于截图的网页浏览方式不同，该服务器允许 AI 通过结构化的 DOM 信息来理解和操作网页，从而实现更高效、更精确的网页交互。

主要功能点

  • 语义 DOM 分析: 构建网页的结构化语义表示，使 AI 能够理解网页内容和结构。
  • 高效浏览: 无需依赖截图即可提取网页内容，提高处理效率。
  • 交互式导航: 基于语义识别网页元素，并进行交互操作。
  • 可靠的元素选择: 提供多种策略来查找和操作网页元素，保证操作的可靠性。
  • 缓存优化: 智能缓存系统，提升服务器性能和响应速度。
  • 完善的错误处理: 提供健壮的错误管理机制，保证服务器稳定运行。
  • 详细日志记录: 提供全面的日志系统，方便问题排查和调试。
  • 丰富的API方法: 提供基础方法（如页面导航、内容获取、JS执行、元素点击、截图、关闭标签页）和语义理解方法（如结构化内容获取、语义分析、文本元素查找、可点击元素查找、语义元素点击、表单填充、执行搜索）。

安装步骤

  1. 安装 Node.js 和 npm: 确保你的系统已安装 Node.js (16+) 和 npm 或 yarn。
  2. 克隆仓库: 使用 'git clone https://github.com/needsupport/chrome-control-mcp' 命令克隆仓库到本地。
  3. 安装依赖: 在仓库根目录下运行 'npm install' 或 'yarn install' 安装项目依赖。
  4. 构建项目: 运行 'npm run build' 命令编译 TypeScript 代码。
  5. 启动服务器脚本授权: 运行 'chmod +x start-custom-mcp.sh' 命令为启动脚本添加执行权限。

服务器配置

为了让 MCP 客户端连接到 Chrome Control MCP Server，你需要配置客户端的服务器连接信息。以下是一个 JSON 格式的配置示例，你需要根据实际情况填写 'command' 和 'args' 字段：

{
  "serverName": "chrome-control-mcp",
  "command": "./start-custom-mcp.sh",
  "args": [],
  "options": {
    "transport": "http-jsonrpc"
  },
  "description": "Chrome Control MCP Server 提供网页语义理解和控制能力"
}

配置参数说明:

  • serverName: 服务器名称，可以自定义，用于在 MCP 客户端中标识该服务器。例如 '"chrome-control-mcp"'。
  • command: 启动服务器的命令。根据仓库 'README.md' 和 'start-custom-mcp.sh' 脚本，这里应配置为 '"./start-custom-mcp.sh"'，指向服务器启动脚本的路径。 请确保此路径相对于 MCP 客户端的工作目录是正确的。
  • args: 启动命令的参数列表。本例中，服务器启动脚本不需要额外的命令行参数，所以配置为空数组 '[]'。 你可以通过修改 'start-custom-mcp.sh' 脚本或 'custom-mcp-server.js' 文件来配置服务器端口等参数，如果需要通过命令行参数传递，则在此处配置。
  • options.transport: 指定 MCP 客户端与服务器通信的传输协议。根据仓库分析，该服务器使用 HTTP JSON-RPC 协议，因此配置为 '"http-jsonrpc"'。
  • description: 服务器描述，用于在 MCP 客户端界面显示服务器的功能描述信息，方便用户理解服务器用途。例如 '"Chrome Control MCP Server 提供网页语义理解和控制能力"'。

注意: MCP 客户端需要能够执行 'command' 指定的启动脚本。请确保脚本路径正确，且客户端运行环境具备执行脚本的权限。

基本使用方法

  1. 启动服务器: 在仓库根目录下，运行 './start-custom-mcp.sh' 命令启动 Chrome Control MCP Server。 确保 Chrome 浏览器已安装，并且远程调试端口已启用（默认端口 9222）。如果需要手动启动 Chrome 并启用远程调试，可以使用命令 'google-chrome --remote-debugging-port=9222'。

  2. 使用 MCP 客户端: 配置好 MCP 客户端的服务器连接信息后，客户端即可通过 JSON-RPC 协议与 Chrome Control MCP Server 进行通信，调用服务器提供的 API 方法，例如 'navigate' (导航到指定 URL), 'getStructuredContent' (获取网页结构化内容), 'clickElement' (点击网页元素) 等。

  3. 示例请求: 以下是一个使用 'curl' 发送 'navigate' 请求的示例：

    curl -X POST -H "Content-Type: application/json" -d '{"jsonrpc": "2.0", "method": "navigate", "params": {"url": "https://example.com"}, "id": 1}' http://localhost:3001

    更多 API 方法和参数请参考仓库 'README.md' 文件中的 "API Methods" 部分和示例代码。

调试

  • Debug 模式: 设置环境变量 'DEBUG=true' 运行 './start-custom-mcp.sh' 启动服务器，启用详细日志输出。
  • 日志文件: 服务器日志默认保存在 './logs/chrome-mcp.log' 文件中。可以使用 'tail -f logs/chrome-mcp.log' 命令实时查看日志。
  • Chrome 连接问题: 确保 Chrome 浏览器已启动并开启远程调试端口 (9222)。
  • 端口冲突: 如果端口 3001 被占用，可以通过设置环境变量 'PORT=端口号' 来修改服务器端口。

信息

分类

AI与计算

访问项目