Chrome Debug MCP Playwright

Chrome Debug MCP Playwright

一个使用 Playwright 进行浏览器自动化的模型上下文协议（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

快速开始

// Launch browser
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// Use GM functions
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// Intercept requests
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

文档

• 命令 - 详细的命令文档和示例
• COMMANDS.md 中提供了完整的命令列表和使用示例

核心功能

浏览器管理

// Launch browser
tool browser launch_browser --url "https://example.com"

// Create new tab
tool browser create_tab --url "https://example.com"

// Switch between tabs
tool browser switch_tab --index 1

Greasemonkey API

// Add custom styles
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// Store data
tool browser gm_setValue --key "setting" --value "test"

// Make cross-origin requests
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

资源拦截

// Block image loading
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// Log all CSS requests
tool browser intercept_requests --patterns ["*.css"] --action "log"

实现细节

日志系统

• 将所有调试输出重定向到日志文件
• 为日志条目添加时间戳
• 将日志整理在 logs 目录中
• 简洁的界面输出

错误处理

• 详细的错误日志记录
• 出错时进行适当的清理
• 资源管理

依赖项

• 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。

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Chrome Debug MCP 服务

一个用于控制 Chrome 的模型上下文协议（MCP）服务，支持调试功能、用户脚本注入和扩展程序。

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

功能

Chrome 控制

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

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

页面自动化

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

标签页管理

• 列出所有打开的标签页及其 ID 和 URL
• 使用指定的 URL 打开新标签页
• 按 ID 关闭标签页
• 在标签页之间切换
• 跟踪并管理多个标签页状态

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

调试功能

• 通过 Chrome DevTools Protocol (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 Code Extension

安装 Roo Code Extension

1. 打开 Visual Studio Code
2. 转到扩展（Ctrl+Shift+X）
3. 搜索“Roo Code”
4. 点击安装

设置 Chrome Debug MCP Server

1. 克隆此仓库：

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

2. 安装依赖：

   npm install
   

3. 构建项目：

   npm run build
   

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

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

用法

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload) ======= 有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload) ======= 有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload) ======= 有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload) ======= 有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload) ======= 有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload) ======= 有关所有可用命令、工具和函数的完整参考，请参阅 COMMANDS.md。

parent of 64acbb3 (Add files via upload)

基本 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
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

页面交互示例

点击元素

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: "search query",
    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: "tab-id-from-list-tabs"
  }
})

关闭标签页

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

依赖项

本项目使用以下开源软件包：

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

许可证

本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。

贡献

有关如何参与贡献的详情，请参阅我们的贡献指南。

致谢

• Chrome DevTools Protocol
• Greasemonkey API <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD
• Model Context Protocol

parent of 8a57443 (Merge pull request #4 from robertheadley/feature/puppeteer-commands) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload)