使用说明

铬MCP桥

A. 安全模型上下文协议（MCP）服务器，使Claude Code能够通过具有基于令牌的身份验证的Chrome扩展桥来控制任何基于Chromium的浏览器。

🔐 安全

此网桥使用基于令牌的身份验证来防止未经授权的访问。只有具有有效访问令牌的连接才能控制您的浏览器。

┌─────────────┐                    ┌──────────────┐                    ┌─────────────┐
│             │   MCP Protocol     │              │   WebSocket        │             │
│ Claude Code │◄──────────────────►│  MCP Server  │◄──────────────────►│  Extension  │
│             │                    │  (w/ Token)  │   (w/ Token)       │  in Browser │
└─────────────┘                    └──────────────┘                    └─────────────┘
                                          │                                    │
                                          ▼                                    ▼
                                   Token Required                      Token Required
                                   (--token=XXX)                       (Saved in popup)

防护措施：

✅ 试图连接到WebSocket的恶意网站
✅ 未经授权的浏览器自动化尝试
✅ 中间人攻击（仅限本地主机）

快速开始

1.生成访问令牌

首先，生成一个安全访问令牌：

node generate-token.cjs

这将输出一个令牌和配置指令。 保存此令牌 -步骤2和3需要它。

2.安装依赖关系并构建

npm install
npm run build

3.安装Chrome扩展程序

按照以下步骤在Chrome浏览器中安装扩展程序：

分步安装：

第一步： 打开Chrome浏览器并导航到扩展程序页面：

类型 chrome://extensions/ 在地址栏中，按Enter键
或者点击三点菜单（⋮）→更多工具→ 扩展

第二步： 启用开发人员模式

在中查找“开发人员模式”切换 右上角 页面的
单击切换按钮将其转动开（它应该变成蓝色/启用）

步骤3： 加载扩展

启用开发人员模式后，您将看到三个新按钮出现：“加载解包”、“打包扩展”和“加载解包扩展”
点击 “未包装装载” 按钮

步骤4： 选择扩展目录

文件浏览器将打开
导航到克隆此存储库的位置
选择 extension/ 文件夹（不是其中的任何文件，而是文件夹本身）
点击“选择文件夹”或“打开”

步骤5： 配置访问令牌

单击工具栏中的Chrome MCP Bridge扩展图标
粘贴 访问令牌 您在步骤1中生成了“访问令牌”字段
点击 “保存令牌并连接”
成功后，您应该看到“✓已连接并已验证”

身份验证前：

身份验证成功后：

4.添加到克劳德代码

您需要在Claude Code的配置文件中手动配置MCP服务器：

第一步： 找到您的Claude Code配置文件：

macOS/Linux: ~/.config/claude-code/claude_desktop_config.json
视窗: %APPDATA%\claude-code\claude_desktop_config.json

第二步： 编辑配置文件并添加chrome mcp桥条目：

{
  "mcpServers": {
    "chrome-mcp-bridge": {
      "command": "node",
      "args": [
        "/absolute/path/to/chrome-mcp-bridge/dist/index.js",
        "--token=YOUR_TOKEN_HERE"
      ]
    }
  }
}

重要提示：

替换 /absolute/path/to/chrome-mcp-bridge 该项目的实际绝对路径
替换 YOUR_TOKEN_HERE 使用您在步骤1中生成的令牌
如果您配置了其他MCP服务器，请将此条目添加到现有的 mcpServers 对象

步骤3： 验证配置：

claude mcp list

你应该看看 chrome-mcp-bridge 在MCP服务器列表中。

5.重新启动克劳德代码

重新启动Claude Code以使更改生效。MCP服务器现在将需要令牌来接受连接。

特性

🔐 安全：基于令牌的身份验证可防止未经授权的访问
打开页面：导航到新选项卡或窗口中的URL
关闭页面：关闭特定选项卡或当前选项卡
截图：捕获可见区域或整页屏幕截图
滚动：程序化滚动页面
查找文本：搜索并突出显示页面中的文本
选项卡管理：获取当前选项卡信息并列出所有选项卡
单击元素：使用CSS选择器或XPath单击元素
填写表格：一次填写多个表单字段
获取页面内容：使用元数据提取渲染的HTML、文本或两者

令牌身份验证的工作原理

令牌生成：运行 node generate-token.cjs 创建加密安全的64字符十六进制令牌
MCP服务器：通过以下方式传递令牌 --token=XXX 争论。服务器验证所有传入的WebSocket连接
扩展：将令牌存储在Chrome存储中。每次WebSocket连接尝试时发送令牌
身份验证流程:
- 扩展连接到WebSocket服务器
- 分机发送 {type: "auth", token: "xxx"} 消息
- 服务器验证令牌并返回成功/失败
- 只有经过身份验证的连接才能发送浏览器命令

如果令牌验证失败，WebSocket连接立即关闭。

建筑

Claude Code ←→ MCP Server ←→ WebSocket ←→ Chrome Extension ←→ Browser

该系统由三个部分组成：

MCP服务器 (src/index.ts)：实现MCP协议并向Claude Code公开工具
WebSocket网桥：促进服务器和扩展之间的实时通信
Chrome 扩展 (extension/)：执行浏览器自动化命令

可用工具

1. `browser_open_page`

在浏览器中打开一个新页面。

{
  "url": "https://example.com",
  "active": true,        // optional, default: true
  "newWindow": false     // optional, default: false
}

2. `browser_close_page`

关闭浏览器选项卡。

{
  "tabId": 123  // optional, closes active tab if not provided
}

3. `browser_screenshot`

截取当前页面的屏幕截图。

{
  "tabId": 123,          // optional, uses active tab if not provided
  "format": "png",       // optional, "png" or "jpeg", default: "png"
  "quality": 90,         // optional, for JPEG only (0-100), default: 90
  "fullPage": false,     // optional, capture full scrollable page, default: false
  "saveToFile": false,   // optional, save to disk, default: false
  "cwd": "/path/to/dir", // required if saveToFile is true
  "filename": "screenshot.png" // optional, auto-generated if not provided
}

4. `browser_scroll`

将页面滚动到特定位置。

{
  "tabId": 123,          // optional, uses active tab if not provided
  "x": 0,                // optional, horizontal position, default: 0
  "y": 500,              // optional, vertical position, default: 0
  "behavior": "smooth"   // optional, "smooth" or "auto", default: "smooth"
}

5. `browser_find`

查找并突出显示页面中的文本。

{
  "tabId": 123,           // optional, uses active tab if not provided
  "text": "search term",
  "highlightAll": false   // optional, default: false
}

6. `browser_get_current_tab`

获取有关当前活动选项卡的信息。

// No parameters required

7. `browser_list_tabs`

列出浏览器中所有打开的选项卡。

// No parameters required

8. `browser_click`

使用CSS选择器或XPath单击页面中的元素。

{
  "tabId": 123,                  // optional, uses active tab if not provided
  "selector": "#submit-button",  // CSS selector or XPath
  "selectorType": "css",         // optional, "css" or "xpath", default: "css"
  "waitForElement": true,        // optional, default: true
  "timeout": 5000                // optional, default: 5000ms
}

9. `browser_fill_form`

一次填写多个表单字段。

{
  "tabId": 123,              // optional, uses active tab if not provided
  "fields": [
    {
      "selector": "#username",
      "selectorType": "css", // optional, default: "css"
      "value": "user@example.com",
      "clear": true          // optional, default: true
    },
    {
      "selector": "#password",
      "value": "mypassword"
    }
  ],
  "waitForElements": true,   // optional, default: true
  "timeout": 5000            // optional, default: 5000ms
}

10. `browser_get_page_content`

加载后获取渲染的页面内容。可以提取HTML、文本或两者以及元数据。

{
  "tabId": 123,              // optional, uses active tab if not provided
  "format": "html",          // optional, "html", "text", or "both", default: "html"
  "includeMetadata": true    // optional, includes page metadata, default: true
}

退货：

超文本标记语言：页面的完整渲染HTML（如果格式为“HTML”或“两者都有”）
文本：可见文本内容（如果格式为“文本”或“两者都有”）
元数据：页面标题、URL、域、描述、Open Graph标签、规范URL、语言、字符集
tabInfo：选项卡ID、URL、标题、状态、收藏夹URL

示例用法

提示： 为确保Claude Code使用Chrome MCP Bridge工具，请在提示中提及“Chrome MCP Bridge”或“使用Chrome MCP-Bridge”。

以下是一个使用Chrome MCP Bridge和Claude Code的真实示例：

User: Using chrome mcp bridge, open https://github.com in the browser

Claude: [Uses browser_open_page tool]
I've opened GitHub in your browser.

User: Take a screenshot of the current page with chrome mcp bridge

Claude: [Uses browser_screenshot tool]
Here's a screenshot of the current page: [displays screenshot]

User: Fill in the search box with "machine learning" using chrome mcp bridge

Claude: [Uses browser_fill_form tool]
I've filled in the search box with "machine learning".

User: Click the search button

Claude: [Uses browser_click tool]
I've clicked the search button.

User: Get the page content as text using chrome mcp bridge

Claude: [Uses browser_get_page_content tool with format: "text"]
Here's the text content of the page with metadata:
- Title: Search results for "machine learning"
- Text content: [displays visible text from page]

发展

项目结构

chrome-mcp-bridge/
├── src/
│   └── index.ts           # MCP server implementation
├── extension/
│   ├── manifest.json      # Extension configuration
│   ├── background.js      # Service worker (WebSocket client)
│   ├── popup.html         # Extension popup UI
│   ├── popup.js           # Popup logic
│   └── icons/             # Extension icons
├── dist/                  # Compiled TypeScript output
├── package.json
├── tsconfig.json
└── README.md

故障排除

扩展显示“未经身份验证”

检查令牌已保存：打开扩展弹出窗口并验证令牌字段是否有值
验证令牌匹配：确保扩展中的令牌与Claude Code MCP配置中使用的令牌匹配
重新生成令牌：如果不确定，请运行 node generate-token.cjs 创建新令牌并更新两者：
- 扩展弹出窗口：粘贴新令牌，然后单击“保存令牌并连接”
- Claude代码配置：编辑 claude_desktop_config.json 并更新 --token=XXX args数组中的值

扩展未连接

检查MCP服务器是否正在运行（应使用克劳德代码自动启动）
验证WebSocket服务器正在侦听端口8765
检查扩展弹出窗口-应显示“✓已连接并已验证”
查看浏览器控制台： chrome://extensions/ → 详情→ “检查视图：服务人员”
检查控制台日志中的身份验证错误

MCP服务器无法启动

如果你看到 ❌ ERROR: No authentication token provided!:

您必须通过提供令牌 --token=XXX 论点
生成一个： node generate-token.cjs
将其添加到Claude Code配置中，如输出所示

扩展日志

要查看扩展日志，请执行以下操作：

首选 chrome://extensions/
查找“Chrome MCP桥”
点击“详细信息”
点击“检查视图：服务人员”
控制台将显示连接状态和错误

端口已在使用中

如果端口8765已在使用中，请修改：

src/index.ts：更改 WS_PORT 恒定
extension/background.js：更改 WS_SERVER_URL 恒定

卸载

要从克劳德代码中删除：

编辑您的Claude Code配置文件(~/.config/claude-code/claude_desktop_config.json)
移除 chrome-mcp-bridge 入口从 mcpServers 对象
重新启动Claude代码

许可证

麻省理工学院

贡献

欢迎投稿！请在GitHub上打开问题或PR。

使用说明

铬MCP桥

🔐 安全

快速开始

1.生成访问令牌

2.安装依赖关系并构建

3.安装Chrome扩展程序

分步安装：

4.添加到克劳德代码

5.重新启动克劳德代码

特性

令牌身份验证的工作原理

建筑

可用工具

1. browser_open_page

2. browser_close_page

3. browser_screenshot

4. browser_scroll

5. browser_find

6. browser_get_current_tab

7. browser_list_tabs

8. browser_click

9. browser_fill_form

10. browser_get_page_content