Skip to main content
Glama

Claude Browser

VS Code 内に複数の永続的なブラウザータブを備え、MCP 経由で Claude から操作できます。

あるエディターグループでは GitHub を開き、別のグループでは Claude ターミナルを開きます。再起動後もサインイン状態が維持されます。エディターを離れることなく、Claude に今見ているのと同じページを読ませたりクリックさせたりできます。

機能

  • タブは1つではなく複数。 各ブラウザータブはエディタータブなので、分割、グループ間のドラッグ、前回の場所への再オープンが可能です。

  • セッションは永続します。 Cookie とローカルストレージは再起動後も保持され、すべてのタブで共有されるため、Slack へのサインインは一度で十分です。

  • フレーム表示を拒否するサイトでも動作します。 GitHub、Slack、Google はすべて X-Frame-Options: DENY を送信するため、組み込みの Simple Browser では表示できません。

  • Claude が操作します。 拡張機能は MCP エンドポイントをホストし、タブの一覧表示、ナビゲーション、ページのスナップショット、クリック、入力、コンソールの読み取りを行うツールを提供します。

  • 実際の DOM です。 ブラウザーのビデオストリームではありません。入力遅延はネイティブで、テキスト選択や検索ウィジェットも機能し、音声も再生されます。

Related MCP server: Glance

始め方

yarn install
yarn build

F5 を押して拡張機能開発ホストを起動し、コマンドパレットから Claude Browser: Open Browser Tab を実行します。

Claude に操作させるには、同じウィンドウでターミナルを開いて claude を実行します。拡張機能はエンドポイントをワークスペースの .mcp.json に書き込むため、ツールはすでに利用可能です。手動で登録したい場合は Claude Browser: Show MCP Endpoint を実行します。

コマンド

コマンド

機能

Claude Browser: Open Browser Tab

新しいタブで URL を開きます。

Claude Browser: Open Browser Tab to the Side

現在のグループの隣のグループで同じ操作を行います。

Claude Browser: Open Bookmarked Site

claudeBrowser.bookmarks から選択します。

Claude Browser: Reload Active Tab

フォーカス中のタブを再読み込みします。

Claude Browser: Zoom In / Zoom Out / Reset Zoom

エディターではなくページのみを拡大縮小します。サイトごとに記憶されます。

Claude Browser: Open Active Tab in System Browser

現在の URL を OS に渡します。

Claude Browser: Sign Out of Everything

保存された Cookie とミラーリングされたストレージを消去します。

Claude Browser: Show MCP Endpoint

エンドポイント URL と claude mcp add コマンドを表示します。

Claude Browser: Show Log

出力チャネルを開きます。

設定

設定

既定値

目的

claudeBrowser.homepage

https://github.com

URL が指定されないときに開かれます。

claudeBrowser.bookmarks

GitHub, Slack

ブックマークビューに表示するサイト。

claudeBrowser.proxyPort

41998

プロキシ用のループバックポート。変更するとページストレージがリセットされます。

claudeBrowser.mcpPort

41999

MCP エンドポイント用のループバックポート。

claudeBrowser.writeWorkspaceMcpConfig

true

エンドポイントをワークスペースの .mcp.json に書き込みます。

claudeBrowser.allowScriptEvaluation

true

evaluate_script ツールを公開します。

claudeBrowser.mirrorLocalStorage

true

各サイトのローカルストレージを拡張機能のストレージにコピーします。

仕組み

VS Code の webview はサンドボックス化された iframe であり、開いておきたいサイトはフレーム表示を拒否します。そこで拡張機能はローカル書き換えプロキシを実行します。各サイトは github.com.s.localhost:41998 のような独自のループバックオリジンから配信され、その際にフレーム表示ヘッダーとトランスポートヘッダーが書き換えられます。Cookie はブラウザーにまったく到達せず、プロキシが保持して上流に再添付します。これが __Host- プレフィックス付きセッション Cookie が異なるオリジンから配信されても生存できる唯一の方法です。すべてのページに小さなシムが注入され、ネットワーク呼び出しを再ルーティングし、ナビゲーションをプロキシ上に保ち、MCP ツールからのコマンドを実行します。

詳細と、このアプローチでできないことは docs/ にあります。

ドキュメント

  • Architecture — 構成要素とそれらの連携方法

  • Proxy — オリジンマッピング、ヘッダー書き換え、ページシム

  • Persistence — セッションの保存場所と永続化の範囲

  • MCP — ツールとその接続方法

  • Security — 脅威モデルとリクエストガード

  • Limitations — 動作しないこととその理由

  • Development — ビルド、テスト、リリース

Related MCP Connectors

Related MCP Servers