Chrome Debug MCP Playwright

Chrome Debug MCP Playwright

site icon
2025.03.19 22
JavaScript浏览器自动化调试工具用户脚本支持浏览器自动化开发效率
Chrome Debug MCP 是一个基于 Model Context Protocol (MCP) 实现的浏览器自动化工具,支持 Playwright 和完整的 Greasemonkey API。它提供了丰富的浏览器控制、页面交互、调试和用户脚本注入功能,适用于自动化测试、网页爬虫和浏览器扩展开发等场景。
View on GitHub

Overview

基本能力

产品定位

Chrome Debug MCP 是一个用于浏览器自动化和调试的工具,支持通过 MCP 协议控制 Chrome 浏览器,提供丰富的页面交互和调试功能。

核心功能

  1. 浏览器管理
  2. 启动和管理 Chrome 浏览器
  3. 支持多标签页操作(创建、切换、关闭)
  4. 页面导航和交互
  5. 截图捕获

  6. Greasemonkey API 支持

  7. GM_addStyle:CSS 注入
  8. GM_getValue/GM_setValue:数据存储
  9. GM_deleteValue:存储清理
  10. GM_notification:桌面通知
  11. GM_setClipboard:剪贴板操作
  12. GM_xmlhttpRequest:跨域请求

  13. 资源管理

  14. 网络请求拦截
  15. 请求阻塞、修改和日志记录
  16. 资源类型过滤

  17. 调试功能

  18. 详细的日志系统
  19. 日志文件组织
  20. 干净的界面输出

适用场景

  • 自动化测试
  • 网页爬虫
  • 浏览器扩展开发
  • 用户脚本注入
  • 页面调试和监控

工具列表

  1. 浏览器工具
  2. launch_browser:启动浏览器
  3. create_tab:创建新标签页
  4. switch_tab:切换标签页
  5. intercept_requests:拦截请求

  6. Greasemonkey 工具

  7. gm_addStyle:注入 CSS
  8. gm_setValue/gm_getValue:数据存储
  9. gm_xmlhttpRequest:跨域请求

  10. 调试工具

  11. evaluate:执行 JavaScript
  12. get_console_logs:获取控制台日志

常见问题解答

  • 如何启动 Chrome 浏览器? 使用 launch_browser 工具,指定 executablePathurl 参数。
  • 如何注入用户脚本? 使用 launch_chrome 工具时,指定 userscriptPath 参数。
  • 如何拦截网络请求? 使用 intercept_requests 工具,指定 patternsaction 参数。

使用教程

使用依赖

  1. Node.js:v14 或更高版本 bash # 安装 Node.js https://nodejs.org/

  2. Chrome 浏览器 bash # 安装 Chrome https://www.google.com/chrome/

  3. Visual Studio Code 和 Roo Code 扩展 bash # 安装 Roo Code 扩展 https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline

安装教程

  1. 克隆仓库 bash git clone https://github.com/yourusername/chrome-debug-mcp.git cd chrome-debug-mcp

  2. 安装依赖 bash npm install

  3. 构建项目 bash npm run build

  4. 配置 Roo Code 在 cline_mcp_settings.json 中添加配置: json { "mcpServers": { "chrome-debug": { "command": "node", "args": ["path/to/chrome-debug-mcp/build/index.js"], "disabled": false, "alwaysAllow": [] } } }

调试方式

  1. 启动 Chrome 浏览器 javascript use_mcp_tool({ server_name: "chrome-debug", tool_name: "launch_chrome", arguments: { executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", url: "https://example.com" } })

  2. 执行 JavaScript javascript use_mcp_tool({ server_name: "chrome-debug", tool_name: "evaluate", arguments: { expression: "document.title" } })

  3. 获取控制台日志 javascript use_mcp_tool({ server_name: "chrome-debug", tool_name: "get_console_logs", arguments: { clear: true } })

许可证

该项目遵循 Other 开源许可条款,请参阅 Other 了解完整条款。