关键词

Chrome控制浏览器自动化DevTools协议网页截图JavaScript执行

Chrome Tools MCP Server 使用说明

项目简介

Chrome Tools MCP Server 是一个基于 Model Context Protocol (MCP) 构建的后端服务，旨在为LLM客户端提供操作Chrome浏览器的能力。它通过 Chrome DevTools Protocol (CDP) 与 Chrome 浏览器进行通信，允许LLM客户端远程控制浏览器行为，例如获取网页内容、执行JavaScript、进行截图、监听网络事件等。

主要功能点

  • 标签页管理: 列出当前 Chrome 浏览器所有打开的标签页。
  • JavaScript 执行: 在指定的标签页中执行 JavaScript 代码，并返回执行结果。
  • 网页截图: 截取指定标签页的屏幕截图，并进行优化处理，以便于AI模型理解和使用。支持全页截图，并自动压缩和调整图片大小。
  • 网络事件监控: 监控指定标签页的网络请求事件（包括 XHR 和 Fetch），并捕获请求和响应的详细信息。
  • URL 加载: 控制指定标签页导航到指定的 URL 地址。
  • DOM 元素查询: 根据 CSS 选择器查询指定标签页中的 DOM 元素，并返回元素的详细信息，例如标签名、文本内容、属性、位置、可见性等。
  • 元素点击: 模拟点击指定标签页中的 DOM 元素，并捕获点击后产生的控制台输出信息。

安装步骤

  1. 安装 npm 包: 在你的 MCP 客户端环境中，使用 npm 安装 '@nicholmikey/chrome-tools' 包。 
    npm install @nicholmikey/chrome-tools

服务器配置

在 MCP 客户端的服务器配置中，你需要添加 'chrome-tools' 服务器的配置信息。以下是一个示例配置，你需要根据你的实际环境进行调整。

{
  "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 浏览器已启动并开启远程调试功能，端口为 9222"
    }
  }
}

配置参数说明:

  • '"chrome-tools"': 服务器名称，在MCP客户端中用于标识和调用此服务器。
  • '"command": "node"': 启动服务器的命令，这里使用 Node.js 解释器。
  • '"args": ["path/to/chrome-tools/dist/index.js"]': 启动命令的参数，指向 'chrome-tools' 服务器的入口文件 'dist/index.js'。 注意: 你需要将 'path/to/chrome-tools' 替换为 '@nicholmikey/chrome-tools' 包的实际安装路径。通常如果你在项目根目录下安装，路径可能是 'node_modules/@nicholmikey/chrome-tools/dist/index.js'。
  • '"env"': 环境变量配置，用于配置 'chrome-tools' 服务器的运行时环境。
    • '"CHROME_DEBUG_URL": "http://localhost:9222"': Chrome 远程调试接口的 URL。 默认值为 'http://localhost:9222'。 你需要确保 Chrome 浏览器启动时已通过 '--remote-debugging-port=9222' 参数开启远程调试，并且端口与这里配置的一致。
    • '"CHROME_CONNECTION_TYPE": "direct"': 连接类型标识符，用于日志记录，可以设置为 'direct', 'ssh-tunnel', 'docker' 等，方便区分不同的连接方式。
    • '"CHROME_ERROR_HELP": "请确保 Chrome 浏览器已启动并开启远程调试功能，端口为 9222"': 自定义错误提示信息，当连接 Chrome 失败时，会显示此信息帮助用户排查问题。

重要提示: 使用 Chrome Tools MCP Server 前，请确保已经启动 Chrome 浏览器，并开启了远程调试功能。 根据 README.md 提供的指引，你需要根据你的操作系统，使用相应的命令启动 Chrome，并指定 '--remote-debugging-port=9222' 参数。 例如：

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

基本使用方法

配置完成后，在 MCP 客户端中，你可以通过服务器名称 '"chrome-tools"' 调用该服务器提供的工具。

例如，调用 'list_tabs' 工具列出所有 Chrome 标签页:

{
  "server": "chrome-tools",
  "tool": "list_tabs",
  "parameters": {}
}

调用 'capture_screenshot' 工具截取指定 'tabId' 的屏幕截图:

{
  "server": "chrome-tools",
  "tool": "capture_screenshot",
  "parameters": {
    "tabId": "YOUR_TAB_ID"  // 替换为实际的标签页 ID
  }
}

更多工具的使用方法和参数，请参考仓库 README.md 文档中 "Tools" 章节的详细描述。

信息

分类

开发者工具

访问项目