Chrome 调试 MCP 剧作家

使用 Playwright 实现浏览器自动化的模型上下文协议 (MCP)，并完全支持 Greasemonkey API。

特征

核心浏览器功能

• 浏览器启动和管理

• 具有创建/切换/关闭功能的多选项卡支持

• 页面导航和交互

• 屏幕截图

Greasemonkey API 支持

• GM_addStyle 用于 CSS 注入

• GM_getValue/GM_setValue 用于数据存储

• GM_deleteValue 用于存储清理

• GM_notification 用于桌面通知

• GM_setClipboard 用于剪贴板操作

• GM_xmlhttpRequest 用于跨域请求

资源管理

• 网络请求拦截

• 请求阻止、修改和记录

• 资源类型过滤

调试功能

• 详细日志系统

• 日志文件组织

• 清洁接口输出

Related MCP server: Yandex Browser MCP Server

安装

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"

实现细节

日志系统

• 所有调试输出重定向到日志文件

• 带时间戳的条目

• 组织在日志目录中

• 清洁接口输出

错误处理

• 详细的错误日志记录

• 正确清理错误

• 资源管理

依赖项

• 剧作家：浏览器自动化

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

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

Chrome 调试 MCP 服务器

用于控制 Chrome 的模型上下文协议 (MCP) 服务器，具有调试功能、用户脚本注入和扩展支持。

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

特征

Chrome 控件

• 使用自定义配置启动 Chrome

• 支持自定义 Chrome 可执行文件路径

• 用户配置文件管理（默认或自定义用户数据目录）

• 扩展支持和管理

• 禁用 Chrome 的“自动化控制”横幅

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

页面自动化

• 单击、键入并与页面元素交互

• 处理下拉菜单和表单输入

• 悬停并等待元素

• 截取整个页面或元素的屏幕截图

• 在页面之间导航

• 设置视口大小和设备模拟

• 从元素中提取文本和属性

标签管理

• 列出所有打开的标签页及其 ID 和 URL

• 使用指定的 URL 打开新标签页

• 按 ID 关闭标签页

• 在标签页之间切换

• 跟踪和管理多个选项卡状态

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

调试功能

• 通过 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 代码

• 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": []
       }
     }
   }

用法

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

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

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）

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

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

页面交互示例

单击元素

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

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

依赖项

该项目使用以下开源包：

• Puppeteer - Chrome 自动化库

• chrome-remote-interface - Chrome DevTools 协议客户端

• @modelcontextprotocol/sdk - 用于服务器实现的 MCP SDK

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE 文件。

贡献

有关贡献的详细信息，请参阅我们的贡献指南。

致谢

• Chrome DevTools 协议

• Greasemonkey API <<<<<<< HEAD <<<<<<< HEAD <<<<<<<< HEAD <<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

• 模型上下文协议

8a57443 的父级（来自 robertheadley/feature/puppeteer-commands 的合并请求 #4）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）=======

• 模型上下文协议

64acbb3 的父级（通过上传添加文件）