Chrome调试MCP Playwright

一个基于Playwright的浏览器自动化Model Context Protocol（MCP）实现，完整支持Greasemonkey API。

功能特性

核心浏览器功能

• 浏览器启动与管理
• 多标签页支持（创建/切换/关闭）
• 页面导航与交互
• 截图功能

Greasemonkey API支持

• GM_addStyle：CSS注入
• GM_getValue/GM_setValue：数据存储
• GM_deleteValue：存储清理
• GM_notification：桌面通知
• GM_setClipboard：剪贴板操作
• GM_xmlhttpRequest：跨域请求

资源管理

• 网络请求拦截
• 请求拦截、修改与日志记录
• 资源类型过滤

调试功能

• 详细日志系统
• 日志文件组织
• 清晰的界面输出

安装

npm install chrome-debug-mcp-playwright

快速开始

// 启动浏览器
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// 使用GM函数
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// 拦截请求
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

文档

• 命令文档 - 包含示例的详细命令说明
• 完整命令列表及使用示例见COMMANDS.md

核心功能

浏览器管理

// 启动浏览器
tool browser launch_browser --url "https://example.com"

// 创建新标签页
tool browser create_tab --url "https://example.com"

// 切换标签页
tool browser switch_tab --index 1

Greasemonkey API

// 添加自定义样式
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// 存储数据
tool browser gm_setValue --key "setting" --value "test"

// 发起跨域请求
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

资源拦截

// 阻止图片加载
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// 记录所有CSS请求
tool browser intercept_requests --patterns ["*.css"] --action "log"

实现细节

日志系统

• 所有调试输出重定向到日志文件
• 时间戳记录
• 日志按目录组织
• 清晰的界面输出

错误处理

• 详细的错误日志记录
• 错误时正确清理资源
• 资源管理

依赖项

• Playwright：浏览器自动化
• @modelcontextprotocol/sdk：MCP实现

开发

前提条件

• Node.js 16或更高版本
• npm 7或更高版本

环境搭建

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git
cd chrome-debug-mcp-playwright
npm install

许可证

MIT许可证 - 详情见LICENSE文件。

贡献

欢迎贡献！详见贡献指南。

致谢

基于Robert Headley的原始项目chrome-debug-mcp。

Chrome调试MCP服务器

一个具备调试功能、用户脚本注入和扩展支持的Chrome控制Model Context Protocol（MCP）服务器。

功能特性

Chrome控制

• 使用自定义配置启动Chrome
• 支持自定义Chrome可执行文件路径
• 用户配置文件管理（默认或自定义用户数据目录）
• 扩展支持与管理
• 禁用Chrome的"自动化控制"横幅

页面自动化

• 点击、输入及页面元素交互
• 下拉菜单和表单输入处理
• 悬停及元素等待
• 全页或元素截图
• 页面间导航
• 视口大小设置与设备模拟
• 元素文本与属性提取

标签页管理

• 列出所有打开的标签页及其ID和URL
• 打开指定URL的新标签页
• 通过ID关闭标签页
• 切换标签页
• 跟踪和管理多个标签页状态

调试功能

• 通过Chrome DevTools协议（CDP）远程调试
• 控制台日志捕获与监控
• 页面上下文中的JavaScript评估
• 实时控制台输出流

用户脚本支持

• 向网页注入用户脚本
• Greasemonkey风格API支持：
  • GM_setValue/GM_getValue：持久化存储
  • GM_addStyle：CSS注入
  • GM_xmlhttpRequest：跨域请求
  • GM_openInTab：新标签页创建
  • GM_registerMenuCommand：菜单命令

扩展集成

• 加载未打包扩展
• 维护扩展状态与配置
• 支持默认Chrome配置文件的扩展
• 选择性启用/禁用扩展

安装

前提条件

• Node.js（v14或更高版本）
• Chrome浏览器已安装
• Visual Studio Code
• Roo代码扩展

安装Roo代码扩展

1. 打开Visual Studio Code
2. 进入扩展（Ctrl+Shift+X）
3. 搜索"Roo代码"
4. 点击安装

设置Chrome调试MCP服务器

1. 克隆此仓库：

   git clone https://github.com/yourusername/chrome-debug-mcp.git
   cd chrome-debug-mcp
   

2. 安装依赖项：

   npm install
   

3. 构建项目：

   npm run build
   

4. 在Roo代码中配置： 添加到cline_mcp_settings.json：

   {
     "mcpServers": {
       "chrome-debug": {
         "command": "node",
         "args": ["path/to/chrome-debug-mcp/build/index.js"],
         "disabled": false,
         "alwaysAllow": []
       }
     }
   }
   

使用

基本Chrome启动

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"
  }
})

使用自定义配置文件启动

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    userDataDir: "path/to/chrome/profile",
    disableAutomationControlled: true
  }
})

注入用户脚本

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    url: "https://example.com",
    userscriptPath: "path/to/userscript.js"
  }
})

执行JavaScript评估

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "evaluate",
  arguments: {
    expression: "document.title"
  }
})

获取控制台日志

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "get_console_logs",
  arguments: {
    clear: true
  }
})

页面交互示例

点击元素

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "click",
  arguments: {
    selector: "#submit-button",
    delay: 500
  }
})

输入文本

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "type",
  arguments: {
    selector: "#search-input",
    text: "搜索查询",
    delay: 100
  }
})

下拉选择

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "select",
  arguments: {
    selector: "#country-select",
    value: "US"
  }
})

等待元素

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "wait_for_selector",
  arguments: {
    selector: ".loading-complete",
    visible: true,
    timeout: 5000
  }
})

截图

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "screenshot",
  arguments: {
    path: "screenshot.png",
    fullPage: true
  }
})

设置视口大小

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "set_viewport",
  arguments: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  }
})

标签页管理示例

列出所有标签页

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "list_tabs",
  arguments: {}
})

打开新标签页

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "new_tab",
  arguments: {
    url: "https://example.com"
  }
})

切换标签页

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "switch_tab",
  arguments: {
    tabId: "从list_tabs获取的标签页ID"
  }
})

关闭标签页

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "从list_tabs获取的标签页ID"
  }
})

依赖项

本项目使用以下开源包：

• Puppeteer - Chrome自动化库
• chrome-remote-interface - Chrome DevTools协议客户端
• @modelcontextprotocol/sdk - 服务器实现的MCP SDK

许可证

本项目采用MIT许可证 - 详情见LICENSE文件。

贡献

详见贡献指南了解贡献方式。

致谢

• Chrome DevTools协议
• Greasemonkey API
• Model Context Protocol