Chromium Bridge

Chromium Bridge

ロシア語版

Chromium ベースのブラウザーと Claude Code をつなぐブリッジです。公式の 「Claude in Chrome」拡張機能は一部の Chromium ブラウザー（Arc、Vivaldi など）でも接続できますが、自動化が停止してしまいます。この拡張機能のツールは タブグループ API を基盤としており、これらのブラウザーでは利用できないか、正常に 動作しないためです。このブリッジは標準の chrome.tabs ／ chrome.scripting ／ chrome.debugger のみを使用するため、 拡張機能を読み込める Chromium ブラウザーであればどれでも動作します。

デモ

ブリッジ経由で Claude がブラウザーを操作し、Wikipedia を開いて検索語を入力し、 記事に移動します。

アーキテクチャ

Claude Code ⇄ (stdio MCP) ⇄ server/index.mjs ⇄ (WebSocket, 127.0.0.1:8929) ⇄ extension in the browser
                                   ⇅ (WebSocket /chat)
                            chat panel (popup on the extension icon)

• extension/ — MV3 拡張機能です。サービスワーカーがローカルサーバーへの WebSocket 接続を維持し、そのコマンド（タブ、ナビゲーション、ページテキスト、 スクリーンショット、クリック、フォーム入力）を実行します。アイコンをクリックすると チャットパネル（chat.html）が開きます。これは拡張機能アイコンに固定された ポップアップです。
• server/ — MCP サーバー（stdio）です。browser_* ツールを Claude Code に公開し、拡張機能に転送します。chrome-extension://… Origin からの WS 接続のみを受け付けるため、通常のウェブページからは接続できません。 また、/chat チャネルも提供します。パネルからのメッセージは、組み込みツール （Bash、Read など）を無効にした状態で、Claude Agent SDK（Claude Code のログインを 通じて認証）を介して、同じ browser_* ツールを使用して実行されます。

チャットパネル

「Claude in Chrome」のサイドパネルに相当する機能です。拡張機能のアイコンをクリックするとポップアップが開きます（chrome.sidePanel はどこでもサポートされているわけではないため使用しません）。チャットからブラウザーを操作できます。タブの一覧表示、ページの読み取り、スクリーンショットの撮影、クリックが可能です。

パネルの UI はデフォルトで英語です。ブラウザーの UI 言語がロシア語の場合は、自動的にロシア語に切り替わります。下部バーの言語セレクター（Auto／English／Русский）で自動検出を上書きできます。ページ上のバッジも同じ選択に従います。

• ポップアップはフォーカスを失うと（ページをクリックすると）閉じます。これはブラウザーの動作です。会話のコンテキストは失われません。パネルは session_id を記憶し、サーバーは Agent SDK の resume を介して会話を再開します。ポップアップが閉じた時点で進行中のターンは中断されます。
• サーバーの実行中のみ動作します（通常は chromium-bridge MCP を使用するアクティブな Claude Code セッションが必要です）。サーバーが実行されていない場合、パネルには「Server unavailable」と表示されます。
• パネルヘッダーのモデル選択メニュー：「Default」では ~/.claude/settings.json のモデルが使われます（/model で設定したモデルです。SDK セッションは Claude Code の設定を直接読み取らないため、サーバーがモデルを明示的に渡します）。それ以外の項目は固定の上書き設定です。モデルの切り替えは実行中に反映され（setModel）、記憶されます。起動時に上書きするには、サーバー環境に CHROMIUM_BRIDGE_CHAT_MODEL=sonnet を設定します。ポートは CHROMIUM_BRIDGE_PORT（デフォルトは 8929）です。これはサーバー側のみの設定です。拡張機能は常に 8929 に接続するため、ポートを変更する場合は extension/sw.js と extension/chat.js の WS_URL も編集してください。
• チャット履歴：ヘッダーの 🕓 ボタンを押すと、過去の会話が一覧表示されます（パネルの localStorage に保存され、直近 30 件が保持されます）。
• 各ターンの後に使用状況が表示されます。ターンのトークン数（↑ 入力。キャッシュを含む／↓ 出力）と、累積セッションコスト（$）が表示されます。サブスクリプションの場合、これは見積もりであり、別途請求される金額ではありません。
• エージェントが作業中に撮影したスクリーンショットは、チャットフィード内に表示されます（クリックで拡大）。履歴には保存されません（localStorage の容量には限りがあります）。
• クリップボードから画像を貼り付けることができます（入力欄で Cmd+V、1 メッセージにつき最大 5 枚）。モデルは画像を認識できますが、履歴にはマーカーのみが残ります。
• 「Ask before acting」モード（入力欄の上にあるチェックボックス）：読み取り操作（タブ、テキスト、スクリーンショット、コンソール、ネットワーク）は確認なしで進みます。一方、変更を伴う操作（クリック／入力／ナビゲーション／JS／フォーム／タブを閉じる／ファイルのアップロード）は「Allow / Deny」カードでの確認を待ちます。拒否された場合、エージェントはその旨を受け取り、会話を続けます。この切り替えはセッションを作り直さず、すぐに適用されます（Agent SDK の canUseTool を使用）。

ページ上の表示

Claude がタブ上で操作すると（パネル経由または Claude Code 経由）：

• ページの端がオレンジ色に光り、「✳ Claude is working…」バッジが表示されます。最後の操作から 2.5 秒後にフェードアウトします。
• 仮想カーソル（オレンジ色の矢印）が操作対象の位置まで移動し、クリック時にはリングが点滅します。操作がない状態が 3.5 秒続くと消えます。

スクリーンショットにはどちらも表示されません。画像に写り込んで、座標を使って作業する際にモデルを混乱させないためです。スクリプトを挿入できないページ（chrome:// など）では、表示は通知なしでスキップされます。

インストール

1. 拡張機能：このリポジトリをクローンし、chrome://extensions を開き（正しいスペース／プロフィールで開いてください）、「Developer mode」を有効にして、「Load unpacked」をクリックし、extension/ フォルダーを選択します。

2. MCP サーバー — 次のいずれかの方法でインストールします：

   • npm を使用する場合：claude mcp add -s user chromium-bridge -- npx chromium-bridge
   • クローンしたリポジトリからインストールする場合：cd server && npm install を実行し、その後 claude mcp add -s user chromium-bridge -- node "$(pwd)/index.mjs" を実行します。

   セッション開始時に読み込まれます。拡張機能をインストールした後、Claude Code のセッションを再起動してください。

   その他の MCP クライアントでは、以下を設定に追加してください：

   {
     "mcpServers": {
       "chromium-bridge": {
         "command": "npx",
         "args": ["chromium-bridge"]
       }
     }
   }
   

3. 確認：browser_status ツールから {"connected": true} が返ることを確認してください。

ツール

v0.5 時点。

ツール	機能
browser_status	拡張機能への接続を確認します
browser_tabs_list	タブの一覧を表示します（ID、タイトル、URL）
browser_tab_create / browser_tab_close	タブを開く／閉じる
browser_navigate	URL に移動します。履歴を移動するには back／forward を指定します
browser_page_text	ページのタイトル、URL、表示されているテキストを取得します
browser_computer	CDP 経由でマウス操作、キーボード操作、スクリーンショットを行います。座標または ref によるクリック、ドラッグ、ホバー、入力、キーの組み合わせ、スクロール、拡大した領域のスクリーンショット、待機に対応しています
browser_read_page	ref ID を含むアクセシビリティツリーを取得します（filter=interactive）
browser_find	テキスト／ロールで要素を検索し、ref を返します
browser_form_input	セレクターまたは ref で input／textarea／select／checkbox／contenteditable の値を設定します
browser_click	CSS セレクターで DOM クリックを実行します（通常の .click()）
browser_upload_file	ファイルを <input type="file"> に設定します
browser_javascript	ページ上で JS を実行します（await に対応）
browser_console_messages	タブのコンソールを取得します（正規表現フィルター対応）
browser_network_requests	タブのネットワークリクエストを取得します（正規表現フィルター対応）
browser_resize_window	ウィンドウサイズを変更します
browser_gif_start / browser_gif_stop	タブの GIF を記録してファイルに保存します。長時間の記録では、シナリオ全体を収めるためにフレームレートが自動的に半分になります

基本的なタブ操作を除き、すべて chrome.debugger（CDP）経由で動作します。 スクリーンショットの撮影にタブのアクティブ化は不要です。クリックは実際のマウスイベントで、 コンソールとネットワークの情報は、タブに対する最初の CDP 接続時から収集されます。

制限事項

• 拡張機能は 1 つのブラウザープロファイルにインストールされます。自動化したいプロファイルにインストールしてください。
• サーバーの実行中は、定期的な ping によって拡張機能のサービスワーカーが起動状態に保たれます。それでもワーカーがスリープしている場合（例：サーバー起動直後）は、キープアライブのアラームによって約 30 秒以内に起動し、サーバーはエラーになる前に最大 12 秒間再接続を待ちます。
• 信頼モデル：WS サーバーは 127.0.0.1 で待ち受け、Origin が chrome-extension://… ではない接続を拒否するため、Web ページからの接続は防がれます。拡張機能ごとの区別はせず、ブラウザー以外のローカルプロセスは Origin ヘッダーを偽装できます。ほとんどのローカル開発ツールと同様、ユーザー権限で実行されるものはすべて信頼されます。共有マシンではブリッジを実行しないでください。
• 最初の CDP 操作時に、ブラウザーに「Chromium Bridge started debugging this browser」というバーが表示されます。これは正常です。デバッガーが制御手段として使われています。バーを閉じるとデバッガーの接続が解除されます（次の操作時に再接続されます）。
• コンソールとネットワークの情報は遡って記録されません。タブに初めて接続した後の情報のみ記録されます。
• ポート 8929 は 1 つのセッションが使用します。2 つ目の Claude Code セッションを並行して起動し、独自の WS サーバーを開始することはできません（拡張機能は最初のセッションで使用され続けます）。

ライセンス

MIT