项目简介

Chrome控制MCP服务器是一个基于Model Context Protocol (MCP) 构建的应用后端，旨在为AI助手提供高效、语义化的Web浏览能力。与传统的基于屏幕截图的方法不同，该服务器通过直接分析和操作DOM（文档对象模型），使AI助手能够更深入地理解网页结构和内容，从而实现更智能的Web交互。

主要功能点

DOM实时监控：通过DOM Mutation Observers实时跟踪网页动态内容变化。
语义化DOM分析：深入理解网页结构和内容，提取语义信息。
结构化内容提取：从网页中提取结构化的内容，方便AI助手理解和处理。
表单处理：准确识别和操作网页表单，支持数据填写和提交。
导航管理：可靠处理复杂的网页导航场景，控制页面跳转和历史记录。
错误恢复：具备完善的错误处理机制和恢复策略，提高系统稳定性。
安全机制：支持API密钥认证和速率限制，保障服务安全。
智能缓存：采用基于DOM变动的智能缓存失效机制，优化性能。

安装步骤

克隆仓库:

git clone https://github.com/needsupport/chrome-control-mcp-implementation.git
cd chrome-control-mcp-implementation

安装依赖:
```
npm install
```
构建项目:
```
npm run build
```

启动服务器:

npm start

或使用便捷脚本:

./start-chrome-mcp.sh

服务器配置

MCP客户端需要配置以下信息以连接到Chrome控制MCP服务器：

{
  "serverName": "chrome-control-mcp",
  "command": "npm",
  "args": ["start"],
  "env": {
    "PORT": "3001",                         // (可选) 服务器端口，默认为 3001
    "CHROME_DEBUGGING_PORT": "9222",        // (可选) Chrome 调试端口，默认为 9222，确保Chrome浏览器以远程调试模式启动
    "DEBUG": "false",                       // (可选) 启用调试模式，默认为 false
    "LOG_LEVEL": "info",                    // (可选) 日志级别 (debug, info, warn, error)，默认为 info
    "AUTH_ENABLED": "false",                // (可选) 启用API密钥认证，默认为 false，生产环境建议启用
    "API_KEYS": "",                         // (可选) 逗号分隔的有效API密钥列表，启用认证后必须配置
    "GENERATE_API_KEY_ON_STARTUP": "true",  // (可选) 启动时生成API密钥，默认为 true，首次启动方便获取密钥
    "RATE_LIMIT_ENABLED": "false",          // (可选) 启用速率限制，默认为 false，防止滥用
    "RATE_LIMIT_REQUESTS": "100",           // (可选) 速率限制窗口内的最大请求数，默认为 100
    "RATE_LIMIT_WINDOW": "60000"            // (可选) 速率限制时间窗口（毫秒），默认为 60000 (1分钟)
    // ... 更多环境变量配置请参考仓库README.md
  }
}

注意:

确保Chrome浏览器已启动并开启远程调试模式，可以通过在Chrome中打开 'chrome://inspect/#devices' 查看是否已启用远程调试。
如果启用了API密钥认证 ('AUTH_ENABLED: "true"'), 请配置 'API_KEYS' 或在首次启动时查看控制台输出的自动生成的API密钥，并在MCP客户端配置API密钥。

基本使用方法

服务器提供基于JSON-RPC 2.0协议的API接口，客户端可以通过HTTP POST请求与服务器进行通信。

示例 (使用 JavaScript 'fetch'):

fetch('http://localhost:3001', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY' // 如果启用了API密钥认证
  },
  body: JSON.stringify({
    jsonrpc: '2.0',
    method: 'navigate', // 调用 'navigate' 方法
    params: { url: 'https://example.com' }, // 传递参数 { url: 'https://example.com' }
    id: 1 // 请求ID，用于匹配响应
  })
})
.then(response => response.json())
.then(data => {
  console.log('服务器响应:', data);
});

请参考仓库中的 'examples' 目录和 'src/chrome/chrome-api.ts' 文件了解更多API方法和使用示例。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息