Ghost Bridge — 零重启 Chrome 调试桥接器

技能简介

Ghost Bridge 是一款专为 MCP 客户端设计的 Chrome 调试桥接工具，让 AI 能够直接接管用户当前正在使用的浏览器会话，而无需重启独立的浏览器实例。它通过 Chrome 扩展 + WebSocket 守护进程的架构，在 AI 与真实浏览器之间建立持久连接，支持页面结构检查、截图、网络流量监控、元素定位与操作等工具，是 AI 前端调试与网页自动化场景的利器。

传统浏览器 AI 工具每次都会启动一个全新的独立浏览器，而 Ghost Bridge 连接的是用户已有的 Chrome 标签页——保留了登录状态、已复现的 Bug、进行中的操作流和真实 UI 状态，AI 从此可以"看见"你正在看的东西。

核心能力

• 零重启桥接：无需启动独立 Chrome，AI 直接接管用户当前浏览器会话
• 多标签管理：可将多个 Chrome 标签绑定为具名目标（如 cases、app），AI 可跨标签操作不同页面
• 语义化元素定位：支持按 role/name、label、placeholder、text、test ID、CSS 选择器定位元素
• 批量操作原子化：支持 locate → act → wait → snapshot 在一次调用中完成，减少 AI 轮询次数
• Shadow DOM & iframe 支持：可穿透 Shadow DOM 和同源 iframe 定位元素
• 网络流量监控：捕获并检查页面发出的网络请求与响应
• 页面脚本提取：从生产打包文件中搜索和提取 JavaScript 源码
• MCP 协议原生：以 stdio 模式运行，兼容 Claude Code、Codex、Cursor 等所有 MCP 客户端
• 多 Tab 共享传输：同一 Chrome transport 可跨多个 MCP 客户端共享使用

安装配置

安装 Ghost Bridge

npm install -g ghost-bridge
ghost-bridge init

ghost-bridge init 会自动检测并写入以下客户端配置：

• Claude Code: ~/.claude/settings.json 或 ~/.claude.json
• Codex: ~/.codex/config.toml
• Cursor: ~/.cursor/mcp.json
• Antigravity: ~/.gemini/antigravity/mcp.json

加载 Chrome 扩展

1. 打开 chrome://extensions
2. 启用开发者模式
3. 点击加载已解压的扩展程序
4. 选择 ~/.ghost-bridge/extension

或运行命令自动打开：

ghost-bridge extension --open

连接到 Chrome

1. 点击 Ghost Bridge 扩展图标
2. 点击 Connect
3. 等待状态变为 ON
4. 打开 MCP 客户端开始工作

手动 MCP 配置（未自动检测时）

Claude Code（~/.claude.json）：

{
  "mcpServers": {
    "ghost-bridge": {
      "command": "/absolute/path/to/node",
      "args": ["/absolute/path/to/global/node_modules/ghost-bridge/dist/server.js"]
    }
  }
}

使用步骤

第一步：初始化并连接

ghost-bridge init
ghost-bridge extension --open
# 在 Chrome 扩展页面加载 ~/.ghost-bridge/extension
# 点击扩展图标 → Connect → 等待状态变为 ON

第二步：让 AI 检查当前页面

在 Claude Code 中输入：

Analyze the current page

Ghost Bridge 会返回页面结构、文本内容、DOM 快照，AI 据此理解页面状态。

第三步：执行页面操作

{
  "target": "app",
  "actions": [
    {
      "locator": { "role": "textbox", "label": "Email" },
      "action": "fill",
      "value": "user@example.com"
    },
    {
      "locator": { "role": "textbox", "label": "Password" },
      "action": "fill",
      "value": "secret"
    },
    {
      "locator": { "role": "button", "name": "Sign in" },
      "action": "click",
      "waitFor": {
        "type": "element",
        "locator": { "text": "Signed in" },
        "state": "visible",
        "timeoutMs": 10000
      }
    }
  ],
  "snapshotAfter": true
}

第四步：跨标签协作

将当前 checklist 标签绑定为 cases
将标题包含 "Orders" 的标签绑定为 app
从 target cases 读取下一条 case，在 target app 上执行操作，然后回 target cases 标记通过或失败

适用场景

• AI 前端调试：让 AI 直接检查和操作真实浏览器中的页面，快速定位布局 Bug、JS 错误
• 自动化网页操作：自动登录、表单填写、点击流程验证，无需录制工具
• 网络请求分析：AI 捕获并分析页面发出的 API 请求与响应数据
• 跨标签工作流：将不同功能标签绑定为具名目标，AI 协调多个标签完成复杂任务
• 生产环境 Debug：复用用户已登录的真实会话，无需模拟认证状态

适用人群

• 前端开发者，使用 AI 辅助调试页面布局和交互问题
• QA 工程师，构建基于 AI 的网页自动化测试流程
• AI 工程师，为 AI Agent 增添真实浏览器操作能力
• 产品经理，用自然语言驱动网页端到端验证

工作原理

Ghost Bridge 由三层组件构成：MCP 客户端（Claude Code/Codex/Cursor） 通过 stdio 与 Session Process（server.js） 通信；Session Process 作为 MCP Client 连接 Ghost Bridge Daemon（常驻 WebSocket 服务，第一次会话时自动启动）；Daemon 与 Chrome Extension（background.js） 通过 WebSocket 通信；扩展通过 Chrome DevTools Protocol（CDP）直接操控浏览器标签页。所有工具调用均通过 CDP 执行，页面操作结果实时返回 AI，全程无需重启浏览器。

官方链接

• npm 页面：https://www.npmjs.com/package/ghost-bridge
• GitHub：https://github.com/learnStop163/ghost-bridge