OpenCode in Chrome

让你的本地 opencode 代理查看并控制浏览器——标签页、点击、JS、截图。

Anton Petnitsky · github.com/Mukller · LinkedIn

opencode 的 Claude-in-Chrome 替代方案：Chrome 扩展 + 带 MCP 接口的本地桥接。代理可以完全控制你的实时浏览器——包括已登录的会话，无需 --remote-debugging-port，也无需云端。一切通过 localhost 完成。

┌──────────────────┐   WebSocket    ┌─────────────────┐    stdio/MCP    ┌──────────┐
│ Chrome extension │◄──────────────►│  bridge (Node)  │◄───────────────►│ opencode │
│  chrome.debugger │  127.0.0.1     │  ws + mcp       │                 │          │
└──────────────────┘                └─────────────────┘                 └──────────┘

关键技巧：扩展程序通过 chrome.debugger 自行启动 CDP 会话——因此无需浏览器启动标志，所有配置文件和 Cookie 都照常工作。

功能

Related MCP server: @nimbus21.ai/chrome-devtools-mcp

安装

1. 桥接

git clone https://github.com/Mukller/opencode-chrome.git
cd opencode-chrome
npm install
node bridge/bridge.mjs

首次启动时，桥接会打印一个令牌并将其保存到 ~/.opencode-chrome/token。

2. 扩展

1. 打开 chrome://extensions → 启用开发者模式

2. 加载已解压的扩展程序 → 选择 extension/ 文件夹

3. 点击扩展图标 → 设置 → 粘贴步骤 1 中的令牌 → 保存并重新连接

4. 图标徽章应变为绿色 ON

3. 连接到 opencode

在 ~/.config/opencode/opencode.json（或项目配置）中：

{
  "mcp": {
    "chrome": {
      "type": "local",
      "command": ["node", "<путь до репо>/bridge/bridge.mjs"],
      "enabled": true
    }
  }
}

重启 opencode——代理将看到 chrome_* 工具。

桥接环境变量：OPENCODE_CHROME_PORT（默认 8766）、OPENCODE_CHROME_TOKEN（使用固定令牌而不是文件）。

安全

• WS 服务器仅监听 127.0.0.1，拒绝外部连接。

• 握手需要令牌；令牌无效 = 连接关闭。

• 扩展仅执行来自已连接桥接的命令；活动操作期间，黄色“调试已开始”横幅会显示所有内容。

已知限制

• 只要标签页上存在活动的 CDP 会话，Chrome 就会显示“扩展程序已开始调试此浏览器”信息栏——这是无需 devtools 标志即可访问的代价。

• 当 Chrome 空闲时，扩展的 Service Worker 会休眠；桥接只是等待重新连接（自动重连）。

测试

npm test        # E2E: фейковое расширение + MCP-клиент против реального моста

许可证

MIT © Anton Petnitsky