Chrome Tools MCP Server - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

Chrome Tools MCP Server 是一个通过 Chrome DevTools 协议与 Chrome 浏览器交互的 MCP 服务器，主要用于远程控制 Chrome 标签页。

核心功能

• 列出 Chrome 标签页
• 在标签页中执行 JavaScript
• 捕获屏幕截图
• 监控网络流量
• 导航标签页到指定 URL
• 查询 DOM 元素
• 点击元素并捕获控制台输出

适用场景

• 在 AI 工具操作前手动配置浏览器状态
• 监听和拉取网络事件到上下文中

工具列表

• list_tabs: 列出所有可用的 Chrome 标签页
• execute_script: 在指定标签页中执行 JavaScript 代码
• capture_screenshot: 捕获指定标签页的屏幕截图，并自动优化以供 AI 模型使用
• capture_network_events: 监控并捕获指定标签页的网络事件
• load_url: 导航标签页到指定 URL
• query_dom_elements: 查询并检索匹配 CSS 选择器的 DOM 元素的详细信息
• click_element: 点击 DOM 元素并捕获点击触发的控制台输出

常见问题解答

• 如何配置 Chrome 以启用远程调试？
• 在启动 Chrome 时添加 --remote-debugging-port=9222 参数
• 如何在 WSL 中连接到 Windows 上的 Chrome？
• 设置 SSH 隧道：ssh -N -L 9222:localhost:9222 windowsuser@host
• 如何在 Docker 中运行 Chrome？
• 使用命令：docker run -d --name chrome -p 9222:9222 chromedp/headless-shell

使用教程

使用依赖

• 安装 Node.js
• 安装 Chrome 浏览器

安装教程

bash
npm install @nicholmikey/chrome-tools

配置

在 MCP 设置中通过环境变量配置服务器：
json
{
"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. 启动 Chrome 并启用远程调试：
   ```bash
   # 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 设置：json
{
"env": {
"CHROME_DEBUG_URL": "http://localhost:9222",
"CHROME_CONNECTION_TYPE": "direct"
}
}
3. 运行工具命令进行调试，例如：bash
node path/to/chrome-tools/dist/index.js list_tabs
```