Yetibrowser MCP

🚀 YetiBrowser MCP

YetiBrowser MCPは、Browser MCPワークフローの完全なオープンソース実装です。これは、NodeベースのMCPサーバーとChrome/Firefox拡張機能をリンクし、Model Context Protocolクライアント（Codex/Claude Code、Cursor、Windsurf、MCP Inspector、または独自のツール）が実際のブラウザタブを自動化できるようにします。その際、すべてのデータはあなたのマシン上に留まり、監査可能です。

🤔 なぜYetiBrowser MCPを選ぶのか？

• 透明でハック可能 – バイナリダウンロードはありません。すべてのコンポーネントを検査、フォーク、拡張できます。
• ローカルファースト – 拡張機能はローカルホストのMCPサーバーとのみ通信し、閲覧データは決してあなたのデバイスを離れません。
• クロスブラウザ – 共通のロジックでChromeとFirefoxの両方のパッケージが動作します（Firefoxビルドは、Manifest V3の完全なサポートが必要です。Mozillaが完全なMV3 APIを提供するまで、接続UXは制限される場合があります）。
• 開発者向けツール – デバッグと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を操作します。
• browser_type – 編集可能な要素にテキストを入力します（オプションでEnterキーで送信）。
• browser_fill_form – 単一の呼び出しで複数の入力フィールド/セレクトボックス/チェックボックス/ラジオボタンを入力します。
• browser_select_option – <select>要素で1つまたは複数のオプションを選択します。
• browser_screenshot – DevToolsプロトコルを使用してビューポートまたは全ページのスクリーンショットを取得します。
• browser_get_console_logs – 最近のコンソール出力を返し、スタックトレース付きのエラーも含みます。
• browser_page_state – 接続されたページのフォーム、ストレージキー、およびクッキーをダンプします。
• 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サーバーを複数インスタンス実行していない限り、接続モードを自動に設定してください。

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

• Firefoxの安定版でのManifest v3の機能が限られているため、Firefox拡張機能は完全なサポートが一般的に利用可能になるまで保留されています（Nightlyビルド以外）。

📦 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に追加します（の例を参照）。
• 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のポートを追跡します。または、「手動」を選択し、browser_connection_infoまたはCLIログで報告されたポートを入力して上書きできます。
• AIツールに接続ポートを尋ねることができます。例：what is the yetibrowser mcp connction info?と尋ね、報告されたポートを手動ポートに設定します。

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

• ワークスペースコマンドはに記載されています。
• 公開手順（npm + 拡張機能ストア）はに記載されています。
• スクリーンショットの動作はに記載されています。
• ./scripts/package-extensions.shを使用して、配布可能なChrome/FirefoxのZIPファイルを生成します（出力先はartifacts/）。
• リポジトリレベルのプライバシーポリシーはにあります。