Chrome Tools MCP

Chrome工具MCP服务器

一个MCP服务器，通过其DevTools协议提供与Chrome交互的工具。此服务器支持远程控制Chrome选项卡，包括执行JavaScript、捕获屏幕截图、监控网络流量等。

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

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

特性

• 列出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隧道”、“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

1. 配置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

1. 配置MCP设置：

   {
     "env": {
       "CHROME_DEBUG_URL": "http://localhost:9222",
       "CHROME_CONNECTION_TYPE": "ssh-tunnel",
       "CHROME_ERROR_HELP": "Make sure the SSH tunnel is running: ssh -N -L 9222:localhost:9222 windowsuser@host"
     }
   }

Docker设置

在Docker中运行Chrome时：

1. 启动Chrome容器：

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

1. 配置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）-注意：这仅适用于初始捕获。最终输出使用带PNG回退的WebP
• quality：JPEG质量（1-100）-注意：仅适用于首次拍摄
• fullPage：捕获完整的可滚动页面

图像处理：

1. WebP优化（主要格式）：

- 第一次尝试：WebP质量为80，压缩效果高 - 第二次尝试：WebP质量为60，如果第一次尝试超过1MB，则接近无损压缩

1. PNG回退：

- 仅在WebP处理失败时使用 - 包括最大压缩和调色板优化

1. 尺寸限制：

- 最大尺寸：900x600（保持纵横比） - 最大文件大小：1MB - 如有需要，逐步减小尺寸

捕获网络事件

从指定选项卡监视和捕获网络事件。 参数：

• 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：点击触发的控制台消息数组

许可证

麻省理工学院