UStackUStack
Open Claude in Chrome icon

Open Claude in Chrome

Open Claude in Chromeは、Claude CodeをChromiumブラウザに接続するオープンソースのクリーンルーム実装。公式のドメイン制限なし。

Open Claude in Chrome

Open Claude in Chromeとは?

Open Claude in Chromeは、「Claude in Chrome」ブラウザ拡張の完全オープンソースによるクリーンルーム再実装です。Claude CodeをChromiumベースのブラウザにブラウザオートメーションと同一のMCP(Model Context Protocol)ツールセットで接続します。

主な目的は、公式拡張で記述されたドメイン制限なしにブラウザナビゲーションとページ内アクションを提供し、プロジェクトが主張する機能とパフォーマンスの同等性を維持することです。

主な機能

  • ドメイン制限リストなし: 公式拡張(カテゴリ別に58ドメインをブロック)と異なり、Open Claude in Chromeはどこへでもナビゲートすることを意図しています。
  • クリーンルーム再実装(オープンソース、MITライセンス): ソースコードはMITライセンスで公開されています。
  • 任意のChromiumブラウザで動作: デフォルトでChromeとEdgeをサポートし、Brave、Arc、Opera、Vivaldiなどの追加Chromiumブラウザも記載されています。
  • Claude in Chromeと同じ18のMCPツール: プロジェクトは18のツールエンドポイントをリストし、公式拡張と同一と位置づけています。
  • 3つのコンポーネントによるブラウザオートメーションアーキテクチャ: 拡張(Manifest V3、CDPベースオートメーション)、MCPサーバー(Claude Codeが起動するNode.jsプロセス)、MCPサーバーと拡張を接続するネイティブメッセージングホストブリッジ。

Open Claude in Chromeの使い方

  1. 前提条件を準備: Node.js v18+ をインストールし、サポートされるChromiumブラウザをインストール。Claude Code v2.0.73+ も使用してください。
  2. 拡張の依存関係をインストール:
    • cd host
    • npm install
    • cd ..
  3. 拡張をロード:
    • ブラウザの拡張ページを開く(例: chrome://extensionsbrave://extensionsedge://extensions)。
    • 開発者モードを有効化。
    • パッケージ化されていないものを読み込むをクリックし、extension/ディレクトリを選択。
    • 拡張名の下に表示される拡張IDをコピー。
  4. ネイティブメッセージングホストを登録:
    • ./install.sh <your-extension-id> を実行。
    • 複数ブラウザを使用する場合、複数IDを渡す(リポジトリに例が記載)。
  5. ブラウザを再起動: ブラウザは起動時にネイティブメッセージングホスト設定を読み込みます。
  6. Claude CodeにMCPを追加:
    • 実行: claude mcp add open-claude-in-chrome -- node /absolute/path/to/host/mcp-server.js
    • リポジトリでは絶対パスをecho "node $(pwd)/host/mcp-server.js"で確認することを推奨。
  7. 確認: 新しいClaude Codeセッションを開始し、reddit.comなどのサイトへのナビゲーションをテスト。リポジトリにスクリーンショットベースの確認手順が記載。

ユースケース

  • 公式拡張でブロックされたサイトの閲覧: 公式拡張が特定のドメイン(リポジトリに銀行、投資、決済/送金、ギャンブル、デートなどを列挙)をブロックする場合、Open Claude in Chromeはそれらのドメインへのナビゲーションを許可することを意図。
  • ページコンテンツの読み取りと抽出: get_page_textなどのツールを使用してメイン記事やページテキストを抽出。クイックレビューや要約などのワークフローをサポート。
  • ウェブフォームとの対話: form_inputを使用して要素参照でフォーム値を設定。構造化データ入力タスクに便利。
  • 閲覧セッション内のクライアントサイドオートメーション: read_page(アクセシビリティツリー)、find(テキスト/属性による要素検索)、navigate/back/forwardなどのアクションで複数ステップのページを進める。
  • 自動化閲覧中のデバッグや検査: read_console_messagesread_network_requestsなどのツールでコンソール出力やネットワークアクティビティを確認。

FAQ

Q: どのブラウザがサポートされていますか?
A: プロジェクトはカテゴリでChromeとEdgeのみを述べていますが、「任意のChromiumブラウザ」をサポートし、Brave、Arc、Opera、Vivaldiなどの例を挙げています。

Q: ネイティブメッセージングホストを正しくインストールするには?
A: ブラウザの拡張ページに表示される拡張IDで./install.shを実行。複数ブラウザの場合、全ての関連拡張IDを渡す。その後、Claude Code使用前にブラウザを再起動。

Q: Open Claude in ChromeをClaude Codeに接続するには?
A: Claude CodeでMCPとして追加: claude mcp add open-claude-in-chrome -- node /absolute/path/to/host/mcp-server.jshost/mcp-server.jsの絶対パスを使用)。

Q: 拡張が接続されない場合の対処は?
A: リポジトリでは拡張のロードと有効化確認、./install.shの正しい拡張IDでの実行、ブラウザの完全再起動、ブラウザのNativeMessagingHostsディレクトリにネイティブメッセージングホストマニフェストの存在確認を推奨。MCPサーバー追加時に絶対パスを使用することも記載。

Q: Open Claude in Chromeは公式拡張と同じブラウザツールを含みますか?
A: リポジトリは18 MCPツールをリストし、Claude in Chromeの「同じ18 MCPツール」としています。

代替案

  • 公式「Claude in Chrome」拡張機能を使用: 一般的なClaudeのブラウザ内ワークフローに一致しますが、リポジトリでは公式拡張機能にドメイン制限リストが含まれていることを強調しています。
  • 他のAIブラウザ自動化アプローチ: LLMをプロトコルやエージェントフレームワーク経由でブラウザ自動化と統合するツールを探してください(主な違いはMCPスタイルのツール公開を使用するか、およびブラウザ制限の扱いです)。
  • 汎用ブラウザ自動化(非LLM): 自動化フレームワークはLLMツール層なしでページをナビゲート・操作できますが、MCP統合で説明されるようなLLM向けツールセットは提供しません。
Open Claude in Chrome | UStack