Chrome Tools MCP 服务器

一个通过 Chrome 的 DevTools 协议提供与 Chrome 交互工具的 MCP 服务器。该服务器能够远程控制 Chrome 标签页，包括执行 JavaScript、截取屏幕截图、监控网络流量等。

为什么使用这样的 MCP 服务器？

当您需要手动配置浏览器进入某种状态后再让像 Cline 这样的 AI 工具对其进行操作时，这种类型的 MCP 服务器非常有用。您还可以使用此工具监听并将网络事件拉入其上下文中。

功能

• 列出 Chrome 标签页
• 在标签页中执行 JavaScript
• 截取屏幕截图
• 监控网络流量
• 导航到指定 URL
• 查询 DOM 元素
• 点击元素并捕获控制台输出

安装

npm install @nicholmikey/chrome-tools

配置

可以通过您的 MCP 设置中的环境变量来配置服务器：

{
  "chrome-tools": {
    "command": "node",
    "args": ["path/to/chrome-tools/dist/index.js"],
    "env": {
      "CHROME_DEBUG_URL": "http://localhost:9222",
      "CHROME_CONNECTION_TYPE": "direct",
      "CHROME_ERROR_HELP": "custom error message"
    }
  }
}

环境变量

• CHROME_DEBUG_URL: Chrome 远程调试接口可用的 URL（默认：http://localhost:9222）
• CHROME_CONNECTION_TYPE: 用于日志记录的连接类型标识符（例如："direct"、"ssh-tunnel"、"docker"）
• CHROME_ERROR_HELP: 当连接失败时显示的自定义错误消息

设置指南

本地设置（Windows/Mac/Linux）

1. 启动带有远程调试功能的 Chrome：

   # Windows
   "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
   
   # Mac
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   
   # Linux
   google-chrome --remote-debugging-port=9222
   

2. 配置 MCP 设置：

   {
     "env": {
       "CHROME_DEBUG_URL": "http://localhost:9222",
       "CHROME_CONNECTION_TYPE": "direct"
     }
   }
   

WSL 设置

在 WSL 中运行时，您需要设置 SSH 隧道以连接到在 Windows 上运行的 Chrome：

1. 启动带有远程调试功能的 Windows 上的 Chrome
2. 创建 SSH 隧道：

   ssh -N -L 9222:localhost:9222 windowsuser@host
   

3. 配置 MCP 设置：

   {
     "env": {
       "CHROME_DEBUG_URL": "http://localhost:9222",
       "CHROME_CONNECTION_TYPE": "ssh-tunnel",
       "CHROME_ERROR_HELP": "确保 SSH 隧道正在运行: ssh -N -L 9222:localhost:9222 windowsuser@host"
     }
   }
   

Docker 设置

在 Docker 中运行 Chrome 时：

1. 启动 Chrome 容器：

   docker run -d --name chrome -p 9222:9222 chromedp/headless-shell
   

2. 配置 MCP 设置：

   {
     "env": {
       "CHROME_DEBUG_URL": "http://localhost:9222",
       "CHROME_CONNECTION_TYPE": "docker"
     }
   }
   

工具

list_tabs

列出所有可用的 Chrome 标签页。

execute_script

在指定标签页中执行 JavaScript 代码。
参数：

• tabId: Chrome 标签页的 ID
• script: 要执行的 JavaScript 代码

capture_screenshot

为指定标签页截取屏幕截图，并自动优化以便于 AI 模型处理。
参数：

• tabId: Chrome 标签页的 ID
• format: 图像格式 (jpeg/png) - 注意：这仅用于初始捕获。最终输出使用 WebP 格式，如果不可用则回退到 PNG
• quality: JPEG 质量 (1-100) - 注意：仅用于初始捕获
• fullPage: 捕获整个可滚动页面

图像处理：

1. WebP 优化（主要格式）:
   • 第一次尝试：质量为 80 的 WebP 和高压缩努力
   • 第二次尝试：如果第一次尝试超过 1MB，则使用质量为 60 的 WebP 和接近无损压缩
2. PNG 回退：
   • 仅在 WebP 处理失败时使用
   • 包括最大压缩和调色板优化
3. 尺寸限制：
   • 最大尺寸：900x600（保持纵横比）
   • 最大文件大小：1MB
   • 如果需要，逐步减小尺寸

capture_network_events

监控并捕获指定标签页中的网络事件。
参数：

• tabId: Chrome 标签页的 ID
• duration: 捕获持续时间（秒）
• filters: 可选的类型和 URL 模式过滤器

load_url

导航到指定的 URL。
参数：

• tabId: Chrome 标签页的 ID
• url: 要加载的 URL

query_dom_elements

查询并与 CSS 选择器匹配的 DOM 元素检索详细信息。
参数：

• tabId: Chrome 标签页的 ID
• selector: 用于查找元素的 CSS 选择器
  返回：
• 包含以下属性的 DOM 元素数组：
  • nodeId: 节点的唯一标识符
  • tagName: HTML 标签名
  • textContent: 元素的文本内容
  • attributes: 包含所有元素属性的对象
  • boundingBox: 元素的位置和尺寸
  • isVisible: 元素是否可见
  • ariaAttributes: 用于辅助功能的 ARIA 属性

click_element

点击一个 DOM 元素并捕获由点击触发的所有控制台输出。
参数：

• tabId: Chrome 标签页的 ID
• selector: 用于查找要点击元素的 CSS 选择器
  返回：
• 包含以下内容的对象：
  • message: 成功/失败消息
  • consoleOutput: 由点击触发的控制台消息数组

许可证

MIT