de en es ja ko ru zh

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 Agent MCP

快速入门

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 installed

license - permissive license

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/robhicks/browser-mcp-bridge'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

URL: https://glama.ai/mcp/servers/robhicks/browser-mcp-bridge?locale=zh-CN