Browser MCP Bridge

Claude Codeにブラウザへの直接アクセス権を与えます。自然言語を通じて、ページの検査、コンソールエラーの読み取り、ネットワークリクエストの監視、スクリーンショットのキャプチャ、JavaScriptの実行が可能です。

このツールの機能

Browser MCP Bridgeは、Model Context Protocol (MCP) を介してChromeブラウザをClaude Codeに接続します。以下の2つのパーツで構成されています。

1. Chrome拡張機能: ブラウザデータ（ページコンテンツ、DOM、コンソール、ネットワーク、パフォーマンス、アクセシビリティ）をキャプチャします。

2. MCPサーバー: 11種類の専用ツールを通じて、そのデータをClaude Codeに公開します。

接続が完了すると、Claude Codeに対して以下のような指示が可能になります：

• 「このページのアクセシビリティの問題をチェックして」

• 「このページで発生しているコンソールエラーは何？」

• 「失敗したAPIリクエストを見せて」

• 「このページのパフォーマンスを分析して」

• 「現在のページで document.querySelectorAll('a') を実行して」

Related MCP server: Browser Agent MCP

クイックスタート

5分以内にセットアップを完了しましょう：

1. サーバーのインストール

git clone https://github.com/anthropics/browser-mcp-bridge.git
cd browser-mcp-bridge
npm run install-server

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

1. chrome://extensions/ （または edge://extensions/）を開きます。

2. デベロッパーモード（右上のトグル）を有効にします。

3. パッケージ化されていない拡張機能を読み込むをクリックします。

4. このリポジトリの extension/ ディレクトリを選択します。

ツールバーに「Browser MCP Bridge」アイコンが表示されるはずです。

3. Claude Codeの設定

claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

4. サーバーの起動と接続

npm start

次に、Browser MCP Bridge拡張機能のアイコンをクリックし、Connectをクリックします。ステータスインジケーターが緑色に変わるはずです。

これで完了です。Claude Codeがブラウザにアクセスできるようになりました。

プロジェクト構造

browser-mcp-bridge/
├── extension/ # Chrome extension
│ ├── manifest.json # Manifest V3 configuration
│ ├── background.js # Service worker (WebSocket, tab management)
│ ├── content.js # Content script (page data extraction)
│ ├── inject.js # Injected script (console/network interception)
│ ├── popup.html/js # Extension popup (connection management)
│ ├── devtools.html/js # DevTools integration entry point
│ ├── panel.html/js # Custom DevTools panel UI
│ └── icons/ # Extension icons
├── server/ # Node.js MCP server
│ ├── server.js # HTTP MCP server + WebSocket server
│ └── package.json # Server dependencies
├── rust-server/ # Rust MCP server (experimental)
│ ├── src/ # Rust source code
│ ├── Cargo.toml # Rust dependencies
│ └── config.toml # Server configuration
├── browser-mcp-rust-server.service # systemd user service unit
├── install-rust-service.sh # Service install/uninstall script
├── start-rust-server.sh # PM2 launch script for Rust server
├── ecosystem.config.cjs # PM2 process manager config
├── ARCHITECTURE.md # System architecture documentation
├── API_REFERENCE.md # Complete MCP tools reference
├── DATA_OPTIMIZATION.md # Data filtering and pagination guide
└── package.json # Root scripts and orchestration

仕組み

┌─────────────────┐ WebSocket ┌──────────────────┐ HTTP/MCP ┌─────────────────┐
│ Chrome Extension │ ◄──────────────── │ MCP Server │ ◄──────────────── │ Claude Code │
│ │ ws://localhost │ (port 6009) │ http://localhost │ (one or more │
│ • content.js │ :6009/ws │ │ :6009/mcp │ instances) │
│ • background.js │ ─────────────────►│ • 11 MCP tools │ ─────────────────►│ │
│ • inject.js │ │ • Resources │ │ │
│ • DevTools │ │ • Data filtering│ │ │
└─────────────────┘ └──────────────────┘ └─────────────────┘

1. 拡張機能がコンテンツスクリプトとChrome APIを介してブラウザデータをキャプチャします。

2. WebSocket接続がデータをポート6009のMCPサーバーに送信します。

3. Claude Codeが /mcp のHTTPトランスポート経由でサーバーに接続します。

4. 複数のClaude Codeインスタンスが同じサーバーを共有できます。

利用可能なツール

すべてのツールは、特定のタブをターゲットにするためのオプションの tabId パラメーターをサポートしています。完全なパラメータードキュメントについては API_REFERENCE.md を参照してください。

ワークフロー例

コンソールエラーのデバッグ

Claude Codeにこう尋ねます：「ブラウザコンソールに表示されているエラーは何ですか？」

Claude Codeは get_console_messages を使用してエラーや警告を取得し、それらを分析して修正案を提示します。

失敗したAPI呼び出しの分析

こう尋ねます：「失敗したネットワークリクエストを見せて、デバッグを手伝って」

Claude Codeは失敗のみをフィルタリングする get_network_requests を使用して4xx/5xxレスポンスを見つけ、リクエスト/レスポンスボディを検査して手がかりを探します。

アクセシビリティ監査

こう尋ねます：「このページのアクセシビリティの問題をチェックして」

Claude Codeは get_accessibility_tree と get_page_content を呼び出し、ARIA属性、見出し構造、altテキスト、セマンティックHTMLを分析します。

パフォーマンス分析

こう尋ねます：「このページのパフォーマンスはどうですか？何か問題はありますか？」

get_performance_metrics と get_network_requests を使用して、遅いリソース、大きなペイロード、Core Web Vitalsの問題を特定します。

視覚的な検査

こう尋ねます：「現在のページのスクリーンショットを撮って」

capture_screenshot が表示されているタブのPNGまたはJPEGスナップショットを返します。

設定

サーバーポート

サーバーのデフォルトポートは 6009 です。別のポートを使用する場合：

MCP_SERVER_PORT=8080 npm start

ポートを変更した場合は、ポップアップ内の拡張機能のWebSocket URL（ws://localhost:8080/ws）と、Claude CodeのMCP設定を更新してください。

拡張機能の設定

拡張機能アイコンをクリックして以下を行います：

• 接続ステータスの表示

• WebSocketサーバーURLの変更

• 手動でのデータキャプチャのトリガー

• メッセージ統計の表示

PM2での実行（本番環境）

# Start with PM2
npm run pm2:start

# Other PM2 commands
npm run pm2:status # Check status
npm run pm2:logs # View logs
npm run pm2:restart # Restart
npm run pm2:stop # Stop

起動時の自動開始や高度な設定については PM2_GUIDE.md を参照してください。

systemdを使用したRustサーバーの実行（Linux）

Rustサーバーは、自動起動とプロセス監視のためにsystemdユーザーサービスとして管理できます。

クイックセットアップ：

# Build and install the service in one step
./install-rust-service.sh

# Or install without rebuilding (if you already have a release binary)
./install-rust-service.sh --no-build

サービスの管理：

systemctl --user status browser-mcp-rust-server # Check status
journalctl --user -u browser-mcp-rust-server -f # Follow logs
systemctl --user restart browser-mcp-rust-server # Restart
systemctl --user stop browser-mcp-rust-server # Stop

サービスはログイン時に自動開始されます。ログインセッションなしでも開始するには（ヘッドレス/SSHアクセスに便利）：

loginctl enable-linger $USER

アンインストール：

./install-rust-service.sh --uninstall

手動インストール（スクリプトを使用したくない場合）：

# Build the release binary
cd rust-server && cargo build --release

# Copy the service file
mkdir -p ~/.config/systemd/user
cp browser-mcp-rust-server.service ~/.config/systemd/user/

# If your repo is NOT at ~/dev/browser-mcp-bridge, edit the paths:
# systemctl --user edit browser-mcp-rust-server
# and override ExecStart and WorkingDirectory

# Enable and start
systemctl --user daemon-reload
systemctl --user enable --now browser-mcp-rust-server

設定：

サービスはデフォルトで rust-server/config.toml を読み取ります。ポートやその他の設定を変更するには、config.toml を編集して再起動します：

systemctl --user restart browser-mcp-rust-server

ログの詳細度を設定するには RUST_LOG を使用します。デフォルトは info です。ドロップインファイルで上書きします：

systemctl --user edit browser-mcp-rust-server

[Service]
Environment=RUST_LOG=debug

他のクライアント向けのMCP設定

JSON設定を使用するMCPクライアントの場合：

{
 "mcpServers": {
 "browser-mcp": {
 "url": "http://localhost:6009/mcp"
 }
 }
}

開発

サーバー開発

npm run dev # Start with --watch (auto-restart on changes)
DEBUG=* npm start # Verbose logging

拡張機能開発

1. extension/ 内のファイルを変更します。

2. chrome://extensions/ に移動します。

3. Browser MCP Bridge拡張機能の再読み込みボタンをクリックします。

ヘルスチェック

npm run health-check
# or: curl http://localhost:6009/health

新しいツールの追加

1. server.js の ListToolsRequestSchema ハンドラーにツール定義を追加します。

2. server.js の CallToolRequestSchema ハンドラーにツールロジックを実装します。

3. extension/background.js にブラウザ側のハンドラーを追加します。

4. Claude Codeでテストします。

データ最適化

サーバーは、AIエージェントが扱いやすいようにインテリジェントなデフォルト値を実装しています：

• HTML: 50KBで切り捨て（テキストは30KB）

• DOM: 500ノードに制限、スクリプト/スタイルは除外

• コンソール: デフォルトでエラーと警告を返します

• ネットワーク: 50リクエスト、失敗したリクエストを優先、ボディは除外

すべての制限はリクエストごとに設定可能です。フィルタリング、ページネーション、最適化ガイドの詳細は DATA_OPTIMIZATION.md を参照してください。

トラブルシューティング

拡張機能が接続されない

1. サーバーが実行されているか確認します： curl http://localhost:6009/health

2. 拡張機能ポップアップのWebSocket URLがサーバーポートと一致しているか確認します。

3. ブラウザコンソールでエラーを確認します（chrome://extensions/ → エラーリンク）

Claude Codeがツールを見つけられない

1. MCP設定を確認します： claude mcp list

2. サーバーが実行中で正常であることを確認します。

3. サーバーを再追加します： claude mcp remove browser-mcp && claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

ツールからデータが返されない

1. 拡張機能が接続されていることを確認します（ポップアップで緑色のステータス）

2. ブラウザでページに移動します — 拡張機能にはアクティブなページが必要です。

3. タブIDが正しいか確認します（先に get_browser_tabs を使用してください）

サーバーが起動しない

1. Node.jsのバージョンを確認します： node --version （18.0.0以上が必要です）

2. 依存関係をインストールします： npm run install-server

3. ポート6009が使用中か確認します： lsof -i :6009

詳細情報

• ARCHITECTURE.md — システム設計、データフロー、コンポーネントの詳細

• API_REFERENCE.md — すべてのパラメーターを含む完全なMCPツールリファレンス

• DATA_OPTIMIZATION.md — フィルタリング、ページネーション、パフォーマンスチューニング

要件

• Node.js 18.0.0+

• Chrome、Edge、またはChromiumベースのブラウザ

• Claude Code CLI（またはMCP互換クライアント）

ライセンス

MIT

Maintenance

Resources

• GitHub Repository
Need Help?Related Servers