AI导哈

Chrome工具MCP服务器

一个通过Chrome DevTools协议提供远程控制Chrome标签页功能的MCP服务器，支持执行JavaScript、捕获截图、监控网络流量等操作。

  • by nicholmikey
  • TypeScript
  • 本地部署
  • 52 星标
  • 更新于
在 GitHub 查看 nicholmikey/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

  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"
  }
}

工具

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，则接近无损压缩
  2. PNG回退：
    • 仅在WebP处理失败时使用
    • 包括最大压缩和调色板优化
  3. 尺寸限制：
    • 最大尺寸：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：点击触发的控制台消息数组

许可证

麻省理工学院

相关 MCP