de en es ja ko ru zh

Browser MCP Bridge

Name: Browser MCP Bridge
Author: robhicks

by robhicks

Overview Schema Source Related Servers Discussions Admin

Rust

Local

Browser MCP Bridge

让 Claude Code 直接访问您的浏览器。通过自然语言即可检查页面、读取控制台错误、监控网络请求、截取屏幕截图并执行 JavaScript。

功能概述

Browser MCP Bridge 通过 Model Context Protocol (MCP) 将您的 Chrome 浏览器与 Claude Code 连接起来。它由两部分组成：

一个 Chrome 扩展程序，用于捕获浏览器数据（页面内容、DOM、控制台、网络、性能、辅助功能）
一个 MCP 服务器，通过 11 个专用工具将这些数据暴露给 Claude Code

连接后，您可以向 Claude Code 询问如下内容：

“检查此页面的辅助功能问题”
“此页面有哪些控制台错误？”
“向我展示失败的 API 请求”
“分析此页面的性能”
“在当前页面执行 document.querySelectorAll('a')”

Related MCP server: Browser Tools for Claude Code

快速入门

5 分钟内即可完成设置：

1. 安装服务器

git clone https://github.com/anthropics/browser-mcp-bridge.git
cd browser-mcp-bridge
npm run install-server

2. 安装浏览器扩展

打开 chrome://extensions/ (或 edge://extensions/)
启用 开发者模式 (右上角开关)
点击 加载已解压的扩展程序
选择此仓库中的 extension/ 目录

您应该会在工具栏中看到“Browser MCP Bridge”图标。

3. 配置 Claude Code

claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

4. 启动服务器并连接

npm start

然后点击 Browser MCP Bridge 扩展图标并点击 Connect。状态指示灯应变为绿色。

就是这样 — Claude Code 现在可以访问您的浏览器了。

项目结构

browser-mcp-bridge/
├── extension/                 # Chrome extension
│   ├── manifest.json          # Manifest V3 configuration
│   ├── background.js          # Service worker (WebSocket, tab management)
│   ├── content.js             # Content script (page data extraction)
│   ├── inject.js              # Injected script (console/network interception)
│   ├── popup.html/js          # Extension popup (connection management)
│   ├── devtools.html/js       # DevTools integration entry point
│   ├── panel.html/js          # Custom DevTools panel UI
│   └── icons/                 # Extension icons
├── server/                    # Node.js MCP server
│   ├── server.js              # HTTP MCP server + WebSocket server
│   └── package.json           # Server dependencies
├── rust-server/               # Rust MCP server (experimental)
│   ├── src/                   # Rust source code
│   ├── Cargo.toml             # Rust dependencies
│   └── config.toml            # Server configuration
├── browser-mcp-rust-server.service  # systemd user service unit
├── install-rust-service.sh          # Service install/uninstall script
├── start-rust-server.sh             # PM2 launch script for Rust server
├── ecosystem.config.cjs             # PM2 process manager config
├── ARCHITECTURE.md                  # System architecture documentation
├── API_REFERENCE.md           # Complete MCP tools reference
├── DATA_OPTIMIZATION.md       # Data filtering and pagination guide
└── package.json               # Root scripts and orchestration

工作原理

┌─────────────────┐     WebSocket      ┌──────────────────┐      HTTP/MCP      ┌─────────────────┐
│ Chrome Extension │ ◄──────────────── │  MCP Server      │ ◄──────────────── │  Claude Code     │
│                  │   ws://localhost   │  (port 6009)     │   http://localhost │  (one or more    │
│  • content.js    │      :6009/ws     │                  │      :6009/mcp    │   instances)     │
│  • background.js │ ─────────────────►│  • 11 MCP tools  │ ─────────────────►│                  │
│  • inject.js     │                   │  • Resources     │                   │                  │
│  • DevTools      │                   │  • Data filtering│                   │                  │
└─────────────────┘                    └──────────────────┘                    └─────────────────┘

扩展程序通过内容脚本和 Chrome API 捕获浏览器数据
WebSocket 连接将数据发送到 6009 端口的 MCP 服务器
Claude Code 通过 /mcp 的 HTTP 传输方式连接到服务器
多个 Claude Code 实例可以共享同一个服务器

可用工具

工具	描述
`get_page_content`	提取页面文本、HTML 和元数据
`get_dom_snapshot`	获取结构化 DOM 树（可通过 CSS 选择器过滤）
`execute_javascript`	在页面上下文中运行 JavaScript
`get_console_messages`	读取控制台日志、错误和警告
`get_network_requests`	检查 HTTP 请求和响应
`capture_screenshot`	对标签页进行视觉快照
`get_performance_metrics`	获取加载时间和核心网页指标 (Core Web Vitals)
`get_accessibility_tree`	获取辅助功能树
`get_browser_tabs`	列出所有打开的浏览器标签页
`attach_debugger`	将 Chrome DevTools 调试器附加到标签页
`detach_debugger`	从标签页分离调试器

所有工具都支持可选的 tabId 参数以针对特定标签页。有关完整参数文档，请参阅 API _REFERENCE.md。

工作流示例

调试控制台错误

询问 Claude Code：“浏览器控制台中显示了哪些错误？”

Claude Code 将使用 get_console_messages 检索错误和警告，然后进行分析并建议修复方案。

分析失败的 API 调用

询问：“向我展示失败的网络请求并帮我调试它们”

Claude Code 使用带有仅过滤失败请求功能的 get_network_requests 来查找 4xx/5xx 响应，然后检查请求/响应体以寻找线索。

辅助功能审计

询问：“检查此页面的辅助功能问题”

Claude Code 调用 get_accessibility_tree 和 get_page_content 来分析 ARIA 属性、标题结构、替代文本和语义化 HTML。

性能分析

询问：“此页面的性能如何？有什么问题吗？”

使用 get_performance_metrics 和 get_network_requests 来识别缓慢的资源、大型负载和核心网页指标问题。

视觉检查

询问：“截取当前页面的屏幕截图”

capture_screenshot 返回可见标签页的 PNG 或 JPEG 快照。

配置

服务器端口

服务器默认使用 6009 端口。要使用其他端口：

MCP_SERVER_PORT=8080 npm start

如果您更改了端口，请更新弹出窗口中的扩展 WebSocket URL (ws://localhost:8080/ws) 以及您的 Claude Code MCP 配置。

扩展设置

点击扩展图标以：

查看连接状态
更改 WebSocket 服务器 URL
手动触发数据捕获
查看消息统计信息

使用 PM2 运行（生产环境）

# Start with PM2
npm run pm2:start

# Other PM2 commands
npm run pm2:status    # Check status
npm run pm2:logs      # View logs
npm run pm2:restart   # Restart
npm run pm2:stop      # Stop

有关开机自启和高级配置，请参阅 PM2 _GUIDE.md。

使用 systemd 运行 Rust 服务器（Linux）

Rust 服务器可以作为 systemd 用户服务进行管理，以实现自动启动和进程监控。

快速设置：

# Build and install the service in one step
./install-rust-service.sh

# Or install without rebuilding (if you already have a release binary)
./install-rust-service.sh --no-build

管理服务：

systemctl --user status browser-mcp-rust-server     # Check status
journalctl --user -u browser-mcp-rust-server -f      # Follow logs
systemctl --user restart browser-mcp-rust-server     # Restart
systemctl --user stop browser-mcp-rust-server        # Stop

该服务在登录时自动启动。要在没有登录会话的情况下启动它（适用于无头/SSH 访问）：

loginctl enable-linger $USER

卸载：

./install-rust-service.sh --uninstall

手动安装（如果您不想使用脚本）：

# Build the release binary
cd rust-server && cargo build --release

# Copy the service file
mkdir -p ~/.config/systemd/user
cp browser-mcp-rust-server.service ~/.config/systemd/user/

# If your repo is NOT at ~/dev/browser-mcp-bridge, edit the paths:
#   systemctl --user edit browser-mcp-rust-server
# and override ExecStart and WorkingDirectory

# Enable and start
systemctl --user daemon-reload
systemctl --user enable --now browser-mcp-rust-server

配置：

该服务默认读取 rust-server/config.toml。要更改端口或其他设置，请编辑 config.toml 并重启：

systemctl --user restart browser-mcp-rust-server

设置 RUST_LOG 以控制日志详细程度。默认值为 info。使用 drop-in 文件覆盖它：

systemctl --user edit browser-mcp-rust-server

[Service]
Environment=RUST_LOG=debug

其他客户端的 MCP 配置

对于使用 JSON 配置的 MCP 客户端：

{
  "mcpServers": {
    "browser-mcp": {
      "url": "http://localhost:6009/mcp"
    }
  }
}

开发

服务器开发

npm run dev          # Start with --watch (auto-restart on changes)
DEBUG=* npm start    # Verbose logging

扩展开发

修改 extension/ 中的文件
前往 chrome://extensions/
点击 Browser MCP Bridge 扩展上的重新加载按钮

健康检查

npm run health-check
# or: curl http://localhost:6009/health

添加新工具

在 server.js → ListToolsRequestSchema 处理程序中添加工具定义
在 server.js → CallToolRequestSchema 处理程序中实现工具逻辑
在 extension/background.js 中添加浏览器端处理程序
使用 Claude Code 进行测试

数据优化

服务器实现了智能默认设置，以确保 AI 代理能够处理响应：

HTML：截断为 50KB（文本为 30KB）
DOM：限制为 500 个节点，排除脚本/样式
控制台：默认返回错误和警告
网络：50 个请求，失败请求优先排序，排除请求体

所有限制均可按请求配置。有关完整的过滤、分页和优化指南，请参阅 DATA _OPTIMIZATION.md。

故障排除

扩展无法连接

验证服务器是否正在运行：curl http://localhost:6009/health
检查扩展弹出窗口中的 WebSocket URL 是否与服务器端口匹配
在浏览器控制台中查找错误（chrome://extensions/ → 错误链接）

Claude Code 找不到工具

验证 MCP 配置：claude mcp list
检查服务器是否正在运行且健康
重新添加服务器：claude mcp remove browser-mcp && claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

工具未返回数据

确保扩展已连接（弹出窗口中显示绿色状态）
导航到浏览器中的页面 — 扩展需要一个活动页面
检查标签页 ID 是否正确（先使用 get_browser_tabs）

服务器无法启动

检查 Node.js 版本：node --version（需要 18.0.0+）
安装依赖项：npm run install-server
检查 6009 端口是否被占用：lsof -i :6009

要求

Node.js 18.0.0+
Chrome、Edge 或基于 Chromium 的浏览器
Claude Code CLI（或任何兼容 MCP 的客户端）

许可证

MIT

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

sncro A
io.github.scottconfusedgorilla
Live browser debugging for AI assistants — DOM, console, network via MCP.
Browser Automation Developer Tools Monitoring
2
TabfleetOAuth
com.tabfleet
Launch, inspect, control, and share isolated cloud browsers for your agents.
Agent Orchestration Browser Automation
1
chromedevtoolsmcp-mcp
com.clauxel.chromedevtoolsmcp
A paid remote MCP for AI agent browser DevTools MCP, built to return verdicts, receipts, usage logs,
Browser Automation Developer Tools Agent Orchestration
2
Aginx Browser A
net.aginx
Stealth web browser for agents: search, fetch, click, download and type in persistent MCP sessions.
Browser Automation Agent Orchestration
37130

Related MCP Servers

chrome-mcp
Browser Automation Web Scraping
Mehmoodqureshi
A
license
B
quality
A
maintenance
Enables controlling a real Chrome browser from MCP hosts like Claude, with extension-based or CDP fallback, supporting tabs, navigation, interaction, and page reading tools.
Updated 15 hours ago (2026-09-22 14:53 UTC)
40
639 npm
6
MIT
Browser Tools for Claude Code
Browser Automation Web Scraping
ahelme
F
license
Not graded
quality
D
maintenance
Enables browser automation (navigate, screenshot, click, type, etc.) for Claude Code via MCP protocol, with a Chrome extension for configuration.
Updated a year ago (2025-10-06 10:07 UTC)
2
-
debug-mcp-server
Developer Tools Monitoring
developerlabsai
F
license
A
quality
D
maintenance
Bridges web browsers and Claude Code for seamless debugging workflows by receiving debug data from browser widgets and exposing it to Claude Code via MCP protocol.
Updated 10 months ago (2025-11-26 17:54 UTC)
10
-
Claude Chrome MCP
Browser Automation Web Scraping
nonsleepr
A
license
Not graded
quality
D
maintenance
Enables browser automation through the Claude Chrome Extension, allowing agents to navigate websites, fill forms, take screenshots, and debug web apps via standard MCP protocols.
Updated 8 months ago (2026-01-29 01:56 UTC)
1
MIT

Browser MCP Bridge

功能概述

快速入门

1. 安装服务器

2. 安装浏览器扩展

3. 配置 Claude Code

4. 启动服务器并连接

项目结构

工作原理

可用工具

工作流示例

调试控制台错误

分析失败的 API 调用

辅助功能审计

性能分析

视觉检查

配置

服务器端口

扩展设置

使用 PM2 运行（生产环境）

使用 systemd 运行 Rust 服务器（Linux）

其他客户端的 MCP 配置

开发

服务器开发

扩展开发

健康检查

添加新工具

数据优化

故障排除

扩展无法连接

Claude Code 找不到工具

工具未返回数据

服务器无法启动

延伸阅读

要求

许可证

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

chrome-mcp

Browser Tools for Claude Code

debug-mcp-server

Claude Chrome MCP