Chrome Tools MCP Server

Chrome 工具 MCP 服务器

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

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

这种类型的 MCP 服务器在您需要手动配置浏览器使其处于特定状态，以便让 Cline 等 AI 工具对其进行操作时非常有用。您还可以使用此工具监听网络事件并将其提取到其上下文中。

特征

• 列出 Chrome 标签页
• 在标签页中执行 JavaScript
• 截取屏幕截图
• 监控网络流量
• 将标签页导航至 URL
• 查询 DOM 元素
• 使用控制台输出捕获单击元素

安装

配置

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

环境变量

• 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": "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
2. 配置 MCP 设置：
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "docker" } }

工具

列表标签

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

执行脚本

在指定选项卡中执行 JavaScript 代码。参数：

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

捕获屏幕截图

截取指定标签页的屏幕截图，并自动针对 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
   • 如果需要，逐渐减小尺寸

捕获网络事件

监控并捕获指定选项卡的网络事件。参数：

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

加载网址

将标签页导航至指定的 URL。参数：

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

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

执照

麻省理工学院