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セッションを自ら立ち上げるため、ブラウザの起動フラグは不要で、すべてのプロファイルとクッキーが通常どおり機能します。

機能

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. 拡張機能のアイコンをクリック → Settings → 手順1のトークンを貼り付ける → Save & reconnect

4. アイコンのバッジが緑のONになればOK

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