Chrome Tools

🚀 Chrome 工具 MCP 服务器

Chrome 工具 MCP 服务器是一个可通过 Chrome 的 DevTools 协议进行交互的工具。借助该服务器，你能够远程控制 Chrome 标签页，实现执行 JavaScript、截取屏幕截图、监控网络流量等操作。

🚀 快速开始

Chrome 工具 MCP 服务器允许你借助 Chrome 的 DevTools 协议与 Chrome 进行交互。它可以实现远程控制 Chrome 标签页，执行 JavaScript 代码、截取屏幕截图、监控网络流量等功能。

✨ 主要特性

• 列出 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"
    }
  }
}

环境变量说明

不同环境安装说明

本地环境

1. 打开终端并运行以下命令：

   npm install @nicholmikey/chrome-tools
   

2. 在项目目录中创建一个配置文件 config.json，并在其中添加以下内容：

   {
     "chrome-tools": {
       "command": "node",
       "args": ["path/to/chrome-tools/dist/index.js"],
       "env": {
         "CHROME_DEBUG_URL": "http://localhost:9222"
       }
     }
   }
   

3. 启动服务器：

   node index.js
   

WSL 环境

1. 在 WSL 中安装 Node.js 和 npm。
2. 安装 chrome - tools 包：

   npm install @nicholmikey/chrome-tools
   

3. 创建配置文件并启动服务器，与本地环境相同。

Docker 环境

1. 创建一个 Dockerfile，内容如下：

   FROM node:latest
   WORKDIR /app
   COPY package.json .
   RUN npm install
   COPY . .
   CMD ["node", "index.js"]
   

2. 构建 Docker 镜像：

   docker build -t chrome-tools .
   

3. 运行容器：

   docker run --name chrome-tools-container -p 9222:9222 chrome-tools
   

💻 使用示例

基础用法

以下是一些常用操作的代码示例：

列出标签页

listTabs()

执行脚本

executeScript(tabId, script)

截取屏幕截图

captureScreenshot(tabId)

监控网络流量

monitorNetworkTraffic(tabId, duration, filters)

导航到 URL

navigateToUrl(tabId, url)

查询 DOM 元素

querySelectorElements(tabId, selector)

单击元素

clickElement(tabId, selector)

📄 许可证

本项目采用 MIT 许可证。