AI导哈

浏览器自动化控制服务

一个通过Chrome DevTools协议提供浏览器自动化控制的服务，支持页面导航、JavaScript执行、截图等功能，适用于开发测试和自动化任务。

  • by availsthlm
  • Shell
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 availsthlm/chrome-devtools-mcp-server

使用说明

Chrome DevTools MCP服务器

一个模型上下文协议（MCP）服务器，提供与Chrome DevTools协议交互的工具。这允许您通过Claude Desktop以编程方式控制Chrome浏览器实例，浏览网页，执行JavaScript，截图等。

🚀 快速开始

非技术用户（推荐）

这有什么作用：通过Claude Desktop使用简单的语音命令控制Chrome浏览器，如“导航到google.com”或“截图”！

  1. 下载：点击绿色的“代码”按钮→ “下载ZIP”→ 提取到桌面
  2. 一键安装:
    • 苹果电脑：双击 easy-setup.sh
    • 视窗：双击 easy-setup.bat
  3. 重新启动克劳德桌面
  4. 开始使用：在Claude中说“连接到我的Chrome浏览器”！

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

技术用户

# Clone and start with Docker (recommended)
git clone <repository-url>
cd chrome-devtools-mcp-server
docker-compose up -d

# Or manual installation
npm install && npm run build && npm start

特性

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

安装选项

选项1:Docker（推荐）

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

# Start everything
docker-compose up -d

# Check status
docker-compose ps

# View logs
docker-compose logs -f

# Stop
docker-compose down

选项2：手动安装

  1. 启用调试启动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

  2. 安装和构建:

    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

示例用法

自然地和克劳德谈谈：

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

故障排除

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

  1. 安装Docker桌面 （安装脚本将指导您）
  2. 重新启动计算机 Docker安装后
  3. 再次运行安装程序: ./easy-setup.sh 或 easy-setup.bat

“克劳德无法连接到Chrome”

  1. 完全重新启动克劳德桌面
  2. 检查Docker是否正在运行: docker-compose ps
  3. 请尝试重新连接：在Claude中说“连接到Chrome”

Chrome调试问题

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

还有问题吗？

# Check status
./start-docker.sh status

# View logs
docker-compose logs -f

# Complete restart
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           # Main server implementation
├── build/                 # Compiled JavaScript
├── docker/               # Docker configuration
├── easy-setup.sh         # One-click setup script
├── docker-compose.yml    # Service orchestration
└── package.json          # Dependencies and scripts

添加新工具

  1. 在中添加工具定义 setupToolHandlers()
  2. 实现处理程序方法
  3. 在CallToolRequestSchema处理程序中添加案例

安装什么

当您运行简单的设置时：

  • Docker桌面：在容器中安全运行Chrome
  • Chrome DevTools服务器：将Claude连接到Chrome
  • 克劳德配置：自动配置克劳德桌面

卸载

# Remove Docker containers and data
./start-docker.sh clean

# Optional: Uninstall Docker Desktop
# Delete this folder

许可证

MIT许可证-有关详细信息，请参阅许可证文件

🎯 目标：让每个人都可以通过Claude的自然语言访问浏览器自动化！

相关 MCP