Chrome Tools MCP Server

这是一个通过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": "自定义错误信息"
    }
  }
}

环境变量

• 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，则使用WebP，质量60，接近无损压缩
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