Chrome开发工具MCP服务器

Name: Chrome开发工具MCP服务器
Author: availsthlm

作者：availsthlm3 星标更新：2025-05-27

安装使用来源：spider==github.com

项目介绍

Chrome DevTools MCP 服务器

这是一个提供与 Chrome DevTools 协议交互工具的 Model Context Protocol (MCP) 服务器。这允许您通过 Claude Desktop 对 Chrome 浏览器实例进行编程控制，包括导航网页、执行 JavaScript、截图等功能。

🚀 快速开始

非技术人员用户（推荐）

功能简介：通过简单的语音命令如“导航到 google.com”或“截图”来控制 Chrome 浏览器！

下载：点击绿色的“Code”按钮 → “Download ZIP” → 解压到桌面
一键安装：
- Mac：双击 easy-setup.sh
- Windows：双击 easy-setup.bat
重启 Claude Desktop
开始使用：在 Claude 中说“连接我的 Chrome 浏览器”

需要帮助？请参阅下方的故障排除

技术人员用户

# 使用 Docker 克隆并启动（推荐）
git clone <repository-url>
cd chrome-devtools-mcp-server
docker-compose up -d

# 或手动安装
npm install && npm run build && npm start

功能

🌐 浏览器控制：导航 URL，点击元素，填写表单
📸 截图：捕获整个页面或特定元素
🔧 JavaScript 执行：在浏览器上下文中运行自定义脚本
📱 设备模拟：测试移动/平板视图
🔍 网络监控：跟踪请求和响应
📝 控制台访问：查看浏览器控制台日志
🔗 多连接管理：管理多个 Chrome 实例

安装选项

选项 1：Docker（推荐）

最简单且最可靠的方法——包括 Chrome 和所有依赖项：

# 启动所有服务
docker-compose up -d

# 检查状态
docker-compose ps

# 查看日志
docker-compose logs -f

# 停止
docker-compose down

选项 2：手动安装

启用调试模式启动 Chrome：

# macOS/Linux
google-chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=/tmp/chrome-debug

# Windows
chrome.exe --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=c:\temp\chrome-debug

安装和构建：
```
npm install
npm run build
npm start
```

与 Claude Desktop 的配置

Docker 设置

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "docker",
      "args": [
        "exec",
        "chrome-devtools-mcp-server",
        "node",
        "/app/build/index.js"
      ]
    }
  }
}

手动设置

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "node",
      "args": ["/path/to/chrome-devtools-mcp-server/build/index.js"]
    }
  }
}

可用工具

工具	描述	参数
`connect_chrome`	连接到 Chrome DevTools	`host`, `port`, `connectionId`
`list_tabs`	列出所有浏览器标签页	-
`navigate_to_url`	导航到一个 URL	`url`
`execute_javascript`	运行 JavaScript 代码	`code`
`get_page_content`	获取 HTML 内容	-
`take_screenshot`	截取屏幕截图	`format`, `quality`
`set_device_emulation`	模拟移动设备	`width`, `height`, `mobile`
`get_network_requests`	监控网络流量	-
`get_console_logs`	访问控制台日志	-
`disconnect_chrome`	关闭连接	`connectionId`

示例用法

只需自然地与 Claude 对话：

“连接我的 Chrome 浏览器”
“导航到 amazon.com”
“截取当前页面的屏幕截图”
“让浏览器看起来像 iPhone”
“执行 JavaScript 点击登录按钮”
“获取页面标题和所有链接”

故障排除

“未找到 Docker”或“连接失败”

安装 Docker Desktop（安装脚本会引导您完成）
重新启动计算机（安装 Docker 后）
再次运行安装：./easy-setup.sh 或 easy-setup.bat

“Claude 无法连接到 Chrome”

完全重启 Claude Desktop
检查 Docker 是否正在运行：docker-compose ps
尝试再次连接：在 Claude 中说“连接 Chrome”

Chrome 调试问题

仅一个进程可以使用端口 9222 — 关闭其他 Chrome 调试会话
检查 Chrome 是否正在运行：导航至 http://localhost:9222
重启 Docker 容器：docker-compose restart

仍然存在问题？

# 检查状态
./start-docker.sh status

# 查看日志
docker-compose logs -f

# 完全重启
docker-compose down && docker-compose up -d

测试

运行全面测试套件：

./run-comprehensive-tests.sh

这将测试所有组件并提供完整的状态报告。

安全注意事项

⚠️ 重要：

仅用于您控制的 Chrome 实例
不要将端口 9222 暴露给不受信任的网络
使用临时用户数据目录进行测试
调试端口提供了对浏览器的完全访问权限

开发

使用 TypeScript 构建，并包含：

@modelcontextprotocol/sdk 用于 MCP 协议
chrome-remote-interface 用于 Chrome DevTools 协议

项目结构

├── src/index.ts           # 主服务器实现
├── build/                 # 编译后的 JavaScript
├── docker/               # Docker 配置
├── easy-setup.sh         # 一键安装脚本
├── docker-compose.yml    # 服务编排
└── package.json          # 依赖项和脚本

添加新工具

在 setupToolHandlers() 中添加工具定义
实现处理方法
在 CallToolRequestSchema 处理程序中添加情况

安装了什么

运行一键安装后：

Docker Desktop：安全地在容器中运行 Chrome
Chrome DevTools 服务器：连接 Claude 到 Chrome
Claude 配置：自动配置 Claude Desktop

卸载

# 移除 Docker 容器和数据
./start-docker.sh clean

# 可选：卸载 Docker Desktop
# 删除此文件夹

许可证

MIT 许可证 - 详情见 LICENSE 文件

🎯 目标：通过自然语言与 Claude 使浏览器自动化对所有人开放！