Chrome Tools MCP 服务器

一个 MCP 服务器，提供通过 Chrome 开发者工具协议与 Chrome 交互的工具。该服务器能够远程控制 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": "自定义错误消息"
    }
  }
}

环境变量

• 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 优化 (主要格式):
   • 首次尝试: WebP，质量为 80，高压缩率
   • 第二次尝试: 如果首次尝试超过 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