Yetibrowser Mcp

重要

このプロジェクトはアーカイブされています。Claude や Codex などの AI エージェントにブラウザー制御機能がなかったため、その課題を解決する目的で開発されましたが、現在は専用の MCP ベースのソリューションがなくても、エージェントにこれらの機能が組み込まれています。

YetiBrowser MCP

YetiBrowser MCP は、Browser MCP ワークフローを完全なオープンソースで実装したものです。Node ベースの MCP サーバーを Chrome／Firefox 拡張機能と連携させることで、Codex／Claude Code、Cursor、Windsurf、MCP Inspector、自作ツールなどの Model Context Protocol クライアントが、データをすべてお使いのマシン内に保持し、監査可能な状態で、実際のブラウザータブを自動操作できます。

YetiBrowser MCP を選ぶ理由

• 透明性が高く、自由に改変できます ― バイナリのダウンロードはありません。すべてのコンポーネントを調査、フォーク、拡張できます。
• ローカル優先 ― 拡張機能は localhost の MCP サーバーとのみ通信するため、閲覧データがお使いのデバイスの外部に送信されることはありません。
• クロスブラウザー対応 ― 共通ロジックにより Chrome と Firefox の両方のパッケージが動作します（Firefox ビルドは、Manifest V3 のサポート改善待ちのため、Mozilla が完全な MV3 API を提供するまでは接続時の操作が制限される可能性があります）。
• 開発者向けツール ― デバッグと QA 向けに、より詳細なコンソールキャプチャ、DOM 差分、ページ状態のダンプ、全ページのスクリーンショットを提供します。
• 本番環境で使いやすい ― IDE ワークフローへのパッケージ化、公開、統合のためのスクリプトとドキュメントを用意しています。

リポジトリの構成

• packages/shared ― メッセージとツールスキーマの共有 TypeScript 定義です。
• packages/server ― MCP クライアントと実行中のブラウザータブをつなぐ MCP サーバーです。
• extensions/shared ― 拡張機能の共通ソース（バックグラウンド／ポップアップ）とアセットです。
• extensions/chrome / extensions/firefox ― ブラウザーごとのパッケージ化レイヤーです。
• docs/ ― ワークスペースコマンド、公開チェックリスト、機能に関するメモです。
• scripts/ ― リリース用 ZIP を作成する package-extensions.sh などのヘルパーユーティリティです。

利用可能な MCP ツール

• browser_snapshot ― 現在のページのアクセシビリティ重視のスナップショットを取得します
• browser_snapshot_diff ― 直近 2 件のスナップショットを比較し、DOM／ARIA の変更点を表示します
• browser_navigate ― 接続中のタブで新しい URL を読み込み、更新されたスナップショットを返します
• browser_go_back / browser_go_forward ― MCP との同期を保ちながら、閲覧履歴を移動します
• browser_wait ― 指定した秒数だけ自動操作を一時停止します
• browser_wait_for ― 続行前にセレクターが表示される（任意で可視状態になる）まで待機します
• browser_press_key ― フォーカス中の要素でキーボードのキー入力をシミュレートします
• browser_click ― CSS セレクターで指定した要素をクリックします
• browser_hover ― 対象の要素にポインターを重ねます
• browser_drag ― ソート可能な UI やドラッグ＆ドロップ UI で、要素をドロップ先へドラッグします
• browser_type ― 編集可能な要素にテキストを入力します（任意で Enter キーを押して送信できます）
• browser_fill_form ― 1 回の呼び出しで複数の入力欄／選択欄／チェックボックス／ラジオボタンに値を入力します
• browser_select_option ― <select> 要素で 1 つ以上の選択肢を選びます
• browser_screenshot ― DevTools プロトコルを使用して、ビューポートまたは全ページのスクリーンショットを取得します
• browser_get_console_logs ― スタックトレース付きのエラーを含め、直近のコンソール出力を返します
• browser_page_state ― 接続中のページのフォーム、ストレージキー、Cookie をダンプします
• browser_connection_info ― ブリッジの WebSocket ポート、接続状態、拡張機能のバージョンを報告します
• browser_evaluate ― ページ内でカスタム JavaScript を実行し、JSON としてシリアライズ可能な結果を返します
• browser_handle_dialog ― alert／confirm／prompt ダイアログを、任意のプロンプトテキストを指定して承諾または閉じます

MCP ブラウザー拡張機能のインストール

Chrome ブラウザー

• 最新の Chrome ブラウザー拡張機能をこちらからインストールします：https://chromewebstore.google.com/detail/hpedknkjljpopinabjjmljgckhlancni?utm_source=item-share-cb
• YetiBrowser MCP Server を複数起動している場合を除き、接続モードは Automatic のままにします

Firefox ブラウザー（現在利用できません）

• Firefox の安定版では Manifest v3 の機能が限られているため、Nightly ビルド以外でも完全にサポートされるようになるまで、Firefox 拡張機能の提供を保留しています。

MCP サーバーのインストール

Codex CLI

• ~/.codex/config.toml を編集して、MCP エントリーを追加します。

  [mcp_servers.yetibrowser-mcp]
  command = "npx"
  args = ["-y", "@yetidevworks/server"]
  

• codex CLI コマンドを再起動すると、/mcp ツールの一覧に yetibrowser-mcp が表示されます。
• 特定のポートを指定する場合は、args エントリーを次の形式にします：args = ["-y", "@yetidevworks/server", "--ws-port", "9010"]

Claude Code

• 拡張機能がインストールされ、タブに接続されていることを確認してから、npx -y @yetidevworks/server で MCP サーバーを起動します（または、ローカルでビルドした CLI を実行します）。
• サーバーのエントリーを ~/Library/Application Support/Claude/claude_desktop_config.json に追加します（docs/publishing.md の例を参照してください）。
• claude を再起動して新しい MCP サーバーを読み込ませます。拡張機能が接続されると、/mcp ツールメニューに yetibrowser-mcp が表示されます。

その他の MCP 対応クライアント

• 任意の MCP クライアントから、CLI（npx -y @yetidevworks/server）を起動して接続できます。または、特定のポートを指定することもできます。例：npx -y @yetidevworks/server --ws-port 9010。
• サーバーは標準の MCP トランスポートを stdio 経由で公開するため、タブが接続されたときに上記のコマンドを実行するには、クライアントがサポートする任意の設定方法を使用してください。

MCP Inspector

• コーディングエージェントを使わずにテストやデバッグを行うためのツールです。
• npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010 を実行すると、YetiBrowser MCP ブラウザー拡張機能と連携して MCP サーバーを実行・検査できます。

トラブルシューティング

• CLI は空きポートが見つかるまでポート 9010-9020 を順に確認し、次のポートに進むときに switched to とログに出力します。特定のポートに固定するには、代わりに --ws-port <port> を渡してください。
• ブラウザー拡張機能のポップアップも同じ動作をします。CLI のポートを追跡するには「Automatic」のままにするか、「Manual」を選択して browser_connection_info または CLI のログに表示されたポートを入力し、上書きしてください。
• 接続ポートについて、AI ツールにそのまま質問してください。たとえば、what is the yetibrowser mcp connction info? と尋ね、報告されたポートを手動ポートに設定します。

ドキュメントとビルドスクリプト

• ワークスペースのコマンドは docs/workspace-commands.md に記載されています。
• 公開手順（npm と拡張機能ストア）については docs/publishing.md を参照してください。
• スクリーンショットの動作については docs/screenshot.md に記載されています。
• ./scripts/package-extensions.sh で配布用の Chrome／Firefox 向け zip を生成できます（artifacts/ に出力されます）。
• リポジトリレベルのプライバシーポリシーは PRIVACY.md にあります。