🚀 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: 当前URLstatus: 状态（正在加载、已停止等）
execute_script
在指定标签页中执行JavaScript代码。
参数
tabId: 标签页唯一标识符script: 要执行的JavaScript代码
返回值
- 执行结果：
success: 是否成功（布尔值）result: 执行返回的结果
captureScreenshot
捕获指定标签页的截图。
参数
tabId: 标签页唯一标识符path: 截图保存路径
返回值
- 图片文件路径或错误信息
captureNetworkEvents
监控并捕获指定标签页中的网络事件。
参数
tabId: 标签页唯一标识符duration: 捕捉时长（秒）filters: 可选的类型和URL模式过滤器
返回值
- 网络事件日志数组，包含每个事件的详细信息：
type: 事件类型url: 请求或响应的URLtimeStamp: 时间戳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许可证。