Chrome桥
MCP服务器，通过WebSocket桥和Chrome扩展程序将Claude Code连接到Chrome。专为ChromeOS（Crostini）构建，适用于任何Chrome平台。
为什么选择Chrome桥？
Claude Code有几个浏览器自动化工具。以下是它们的比较：
| Chrome桥 | Chrome中的克劳德 | Chrome DevTools MCP | 剧作家MCP |
|---|
| ChromeOS/克罗斯蒂尼 | 是 | 否 | 否 | 否 |
| 连接 | WebSocket | 本机消息 | CDP(--remote-debugging-port) | 单独的浏览器实例 |
| 工具 | 31 | ~15 | 完整CDP | ~20 |
| 使用真实浏览器 | 是 | 是 | 是（带标志） | 否（独立会话） |
| 共享您的登录信息 | 是 | 是 | 是 | 否 |
| 需要付费计划 | 否 | 是（专业/Max/团队） | 否 | 否 |
| 开发者工具 （性能、网络、DOM） | 是 | 否 | 是（完整） | 否 |
| A11y审计 | 是 | 否 | 否 | 不 |
| 媒体模拟 | 是 | 否 | 是 | 是 |
| GIF录制 | 否 | 是 | 否 | 否 |
| 断点/分析 | 否 | 否 | 是 | 否 |
| 对话框处理 | 否 | 是 | 是 | 有 |
| 无头/CI | 否 | 否 | 是 |
简言之Chrome Bridge是适用于ChromeOS的唯一选项，拥有31个专门的web开发工具，完全自主运行，无需付费计划。代价是没有GIF录制，没有CDP级调试，也没有对话处理。
建筑
Claude Code MCP Server Chrome Extension
- MCP 服务器 (
server/)：Node.js，通过stdio与Claude Code通信，通过WebSocket与扩展通信 - Chrome 扩展 (
extension/)：Manifest V3，使用Chrome API执行命令并返回结果 - 所有页面脚本都通过运行
chrome.scripting.executeScript （主世界）。不 chrome.debugger （在ChromeOS上损坏）。
工具（31）
核心（8）
| 工具 | 说明 |
|---|
get_status | 检查Chrome扩展程序是否已连接 |
get_tabs | 列出所有打开的Chrome标签页 |
navigate | 将选项卡导航到URL |
screenshot | 将可见选项卡捕获为PNG |
execute_js | 在页面上下文中执行JavaScript（隔离世界，主回退） |
click | 通过CSS选择器单击元素 |
type_text | 在输入元素中键入文本 |
read_page | 读取页面内容（文本、HTML或可访问性树） |
DevTools（9）
| 工具 | 说明 |
|---|
get_page_info | 获取元标签、脚本、样式表、链接、表单 |
get_storage | 读取本地存储、会话存储、Cookie |
get_performance | 导航时间、绘画指标、内存、资源 |
query_dom | 具有属性、rect、计算样式的查询元素 |
modify_dom | 设置/删除属性、类、样式、文本内容 |
inject_css | 将CSS规则注入选项卡 |
read_console | 捕获控制台消息（日志/警告/错误/信息/调试） |
monitor_network | 监控XHR并获取请求 |
create_tab | 创建一个新选项卡，可选地使用URL |
导航和表格（4）
| 工具 | 说明 |
|---|
wait_for_element | 轮询，直到出现选择器（带可见性检查） |
scroll_to | 滚动到元素或坐标，固定标题有偏移 |
fill_form | 使用与React兼容的事件批量填充表单字段 |
set_storage | 写入/删除/清除本地存储、会话存储、Cookie |
视觉与响应（3）
| 工具 | 说明 |
|---|
viewport_resize | 将窗口大小调整为预设（移动设备/平板电脑/台式机）或自定义大小 |
full_page_screenshot | 滚动并捕获整页作为多个PNG |
highlight_elements | 在匹配的元素上添加彩色叠加 |
分析（3）
| 工具 | 说明 |
|---|
accessibility_audit | 审核缺失的alt、空链接、标题层次结构、ARIA、对比度、表单标签 |
check_links | 查找断开的链接（带超时的HEAD/GET、范围过滤） |
measure_spacing | 测量两个元素之间的像素距离、间隙和重叠 |
互动（2）
| 工具 | 说明 |
|---|
hover | 将鼠标悬停在元素上（mouseenter/mouseover/mousemove） |
press_key | 按带有修饰符的键盘键（Ctrl/Shift/Alt/Meta） |
环境（2）
| 工具 | 说明 |
|---|
watch_dom | 属性/子列表/字符的MutationObserver数据更改 |
emulate_media | 覆盖更喜欢配色方案、减少运动、打印模式 |
安装
git clone git@github.com:frsorrentino/chrome-bridge.git
cd chrome-bridge
./install.sh
或手动：
# 1. Install dependencies
npm install
# 2. Load the Chrome extension
# - Open chrome://extensions
# - Enable "Developer mode"
# - Click "Load unpacked" and select the extension/ folder
# 3. Register the MCP server in Claude Code
claude mcp add --scope user chrome-bridge node /full/path/to/chrome-bridge/server/index.js
用法
安装后，这些工具在Claude Code中自动可用。该扩展通过端口8765上的WebSocket连接到MCP服务器。
通过扩展弹出图标或调用 get_status 工具。
环境变量
| 变量 | 默认值 | 描述 |
|---|
CHROME_BRIDGE_PORT | 8765 | WebSocket服务器端口 |
测试
# Stop any running MCP server on port 8765 first
node test/test-devtools.js
需要加载并激活Chrome扩展程序。测试脚本启动自己的WebSocket服务器，在 example.com，并运行所有23个测试用例。
项目结构
chrome-bridge/
server/
index.js # Entry point: MCP server + WebSocket
protocol.js # Message types, timeouts, command builder
tools.js # MCP tool registrations (Zod schemas)
ws-manager.js # WebSocket server manager
extension/
manifest.json # Chrome MV3 manifest
service-worker.js # Command handlers, Chrome APIs
popup.html/js/css # Connection status popup
icons/ # Extension icons
test/
test-devtools.js # End-to-end test suite (23 tests)
技术说明
execute_js 默认情况下使用ISOLATED世界（绕过CSP页面），并使用MAIN世界回退chrome.debugger 未使用（不适用于ChromeOS）- 有状态的工具(
read_console, monitor_network, watch_dom)在第一次调用时注入monkey补丁，并在选项卡导航/关闭时自动清理 full_page_screenshot 和 check_links 超时120秒； wait_for_element 60年代
许可证
麻省理工学院
