Chrome Debug MCP控制台

@robertheadley/chrome-debug-mcp

2 Stars 849 次浏览 robertheadley 更新于 2026-08-23

通过调试功能控制Chrome浏览器，允许通过Model Context Protocol进行页面自动化、扩展管理以及用户脚本注入。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

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

服务介绍

Chrome Debug 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

快速开始

// 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 服务器

一个具有调试功能、用户脚本注入和扩展支持的 Model Context Protocol (MCP) 服务器，用于控制 Chrome。

<<<<<<< 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 的“自动化控制”横幅

<<<<<<< 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 协议 (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 扩展

打开 Visual Studio Code
转到扩展 (Ctrl+Shift+X)
搜索 "Roo Code"
点击安装

设置 Chrome Debug MCP 服务器

克隆此仓库：

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

安装依赖项：
```
npm install
```
构建项目：
```
npm run build
```

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

基本 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 协议客户端
@modelcontextprotocol/sdk - MCP SDK，用于服务器实现

许可证

本项目根据 MIT 许可证发布 - 详情请参阅 LICENSE 文件。

贡献

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

致谢

查看源码项目主页

MCP 服务配置

服务介绍

Chrome Debug MCP Playwright

功能

核心浏览器功能

Greasemonkey API 支持

资源管理

调试功能

安装

快速开始

文档

核心功能

浏览器管理

Greasemonkey API

资源拦截

实现细节

日志系统

错误处理

依赖项

开发

前提条件

设置

许可证

贡献

致谢

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

Chrome Debug MCP 服务器

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

功能

Chrome 控制

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

页面自动化

标签页管理

调试功能

用户脚本支持

扩展集成

安装

前提条件

安装 Roo Code 扩展

设置 Chrome Debug MCP 服务器

使用

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

基本 Chrome 启动

使用自定义配置文件启动

注入用户脚本

评估 JavaScript

获取控制台日志

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

页面交互示例

点击元素

在输入框中输入

从下拉菜单中选择

等待元素出现

截图

设置视口大小

标签页管理示例

列出所有标签页

打开新标签页

切换到标签页

关闭标签页

依赖项

许可证

贡献

致谢

相关 MCP 服务

开源版 与 企业版

企业版（含 FDE 交付）

技能定制开发服务

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

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

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

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

开源版与企业版