JinDaGe - Chrome Tools MCP Server MCP Details

article

README

🚀 Chrome工具MCP服务器

Chrome工具MCP服务器借助Chrome的DevTools协议，提供了一系列用于远程控制Chrome标签页的工具。该服务器具备在标签页中执行JavaScript、捕获截图、监控网络流量等实用功能。

🚀 快速开始

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

✨ 主要特性

列出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_PROXY_ENABLED": true
    }
  }
}

设置步骤

1. 安装Node.js和npm

确保已安装Node.js和npm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install --lts

2. 安装chrome-tools

在项目目录中运行：

npm install @nicholmikey/chrome-tools

3. 启动MCP服务器

创建并运行以下配置文件：

const { MCP } = require('@nicholmikey/mcp');
const server = new MCP.Server({
  port: 3000,
  workers: 2
});

server.start();

📚 详细文档

list_tabs

列出所有Chrome标签页。

返回值

数组，包含每个标签页的详细信息：
- id: 标签页唯一标识符
- title: 标题
- url: 当前URL
- status: 状态（正在加载、已停止等）

execute_script

在指定标签页中执行JavaScript代码。

参数

tabId: 标签页唯一标识符
script: 要执行的JavaScript代码

返回值

执行结果：
- success: 是否成功（布尔值）
- result: 执行返回的结果

captureScreenshot

捕获指定标签页的截图。

参数

tabId: 标签页唯一标识符
path: 截图保存路径

返回值

图片文件路径或错误信息

captureNetworkEvents

监控并捕获指定标签页中的网络事件。

参数

tabId: 标签页唯一标识符
duration: 捕捉时长（秒）
filters: 可选的类型和URL模式过滤器

返回值

网络事件日志数组，包含每个事件的详细信息：
- type: 事件类型
- url: 请求或响应的URL
- timeStamp: 时间戳
- size: 数据大小

load_url

将指定标签页导航至新的URL。

参数

tabId: 标签页唯一标识符
url: 要加载的目标URL

query_dom_elements

通过CSS选择器查询并获取DOM元素的详细信息。

参数

tabId: 标签页唯一标识符
selector: CSS选择器字符串

返回值

元素数组，每个元素包含：
- nodeId: 节点唯一标识符
- tagName: HTML标签名
- textContent: 文本内容
- attributes: 属性对象
- boundingBox: 布局位置和尺寸
- isVisible: 是否可见
- ariaAttributes: ARIA属性

click_element

通过CSS选择器定位元素并执行点击操作，同时捕获控制台输出。

参数

tabId: 标签页唯一标识符
selector: CSS选择器字符串

返回值

操作结果：
- message: 成功或失败消息
- consoleOutput: 点击触发的控制台输出数组

📄 许可证

本项目采用MIT许可证。

Chrome Tools MCP Server