de en es ja ko ru zh

Browser MCP Bridge

Name: Browser MCP Bridge
Author: robhicks

by robhicks

Overview Schema Source Related Servers Discussions Admin

Rust

Local

Browser MCP Bridge

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

このツールの機能

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

Chrome拡張機能: ブラウザデータ（ページコンテンツ、DOM、コンソール、ネットワーク、パフォーマンス、アクセシビリティ）をキャプチャします。
MCPサーバー: 11種類の専用ツールを通じて、そのデータをClaude Codeに公開します。

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

「このページのアクセシビリティの問題をチェックして」
「このページで発生しているコンソールエラーは何？」
「失敗したAPIリクエストを見せて」
「このページのパフォーマンスを分析して」
「現在のページで document.querySelectorAll('a') を実行して」

Related MCP server: Browser Tools for Claude Code

クイックスタート

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

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

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

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

chrome://extensions/ （または edge://extensions/）を開きます。
デベロッパーモード（右上のトグル）を有効にします。
パッケージ化されていない拡張機能を読み込むをクリックします。
このリポジトリの 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│                   │                  │
└─────────────────┘                    └──────────────────┘                    └─────────────────┘

拡張機能がコンテンツスクリプトとChrome APIを介してブラウザデータをキャプチャします。
WebSocket接続がデータをポート6009のMCPサーバーに送信します。
Claude Codeが /mcp のHTTPトランスポート経由でサーバーに接続します。
複数のClaude Codeインスタンスが同じサーバーを共有できます。

利用可能なツール

ツール	説明
`get_page_content`	ページのテキスト、HTML、メタデータを抽出
`get_dom_snapshot`	構造化されたDOMツリーを取得（CSSセレクターでフィルタリング可能）
`execute_javascript`	ページコンテキストでJavaScriptを実行
`get_console_messages`	コンソールログ、エラー、警告を読み取り
`get_network_requests`	HTTPリクエストとレスポンスを検査
`capture_screenshot`	タブの視覚的なスナップショットを撮影
`get_performance_metrics`	読み込み時間とCore Web Vitalsを取得
`get_accessibility_tree`	アクセシビリティツリーを取得
`get_browser_tabs`	開いているすべてのブラウザタブを一覧表示
`attach_debugger`	Chrome DevToolsデバッガーをタブにアタッチ
`detach_debugger`	タブからデバッガーをデタッチ

すべてのツールは、特定のタブをターゲットにするためのオプションの 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

拡張機能開発

extension/ 内のファイルを変更します。
chrome://extensions/ に移動します。
Browser MCP Bridge拡張機能の再読み込みボタンをクリックします。

ヘルスチェック

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

新しいツールの追加

server.js の ListToolsRequestSchema ハンドラーにツール定義を追加します。
server.js の CallToolRequestSchema ハンドラーにツールロジックを実装します。
extension/background.js にブラウザ側のハンドラーを追加します。
Claude Codeでテストします。

データ最適化

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

HTML: 50KBで切り捨て（テキストは30KB）
DOM: 500ノードに制限、スクリプト/スタイルは除外
コンソール: デフォルトでエラーと警告を返します
ネットワーク: 50リクエスト、失敗したリクエストを優先、ボディは除外

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

トラブルシューティング

拡張機能が接続されない

サーバーが実行されているか確認します： curl http://localhost:6009/health
拡張機能ポップアップのWebSocket URLがサーバーポートと一致しているか確認します。
ブラウザコンソールでエラーを確認します（chrome://extensions/ → エラーリンク）

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

MCP設定を確認します： claude mcp list
サーバーが実行中で正常であることを確認します。
サーバーを再追加します： claude mcp remove browser-mcp && claude mcp add --scope user --transport http browser-mcp http://127.0.0.1:6009/mcp

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

拡張機能が接続されていることを確認します（ポップアップで緑色のステータス）
ブラウザでページに移動します — 拡張機能にはアクティブなページが必要です。
タブIDが正しいか確認します（先に get_browser_tabs を使用してください）

サーバーが起動しない

Node.jsのバージョンを確認します： node --version （18.0.0以上が必要です）
依存関係をインストールします： npm run install-server
ポート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

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

sncro A
io.github.scottconfusedgorilla
Live browser debugging for AI assistants — DOM, console, network via MCP.
Browser Automation Developer Tools Monitoring
2
TabfleetOAuth
com.tabfleet
Launch, inspect, control, and share isolated cloud browsers for your agents.
Agent Orchestration Browser Automation
1
chromedevtoolsmcp-mcp
com.clauxel.chromedevtoolsmcp
A paid remote MCP for AI agent browser DevTools MCP, built to return verdicts, receipts, usage logs,
Browser Automation Developer Tools Agent Orchestration
2
Aginx Browser A
net.aginx
Stealth web browser for agents: search, fetch, click, download and type in persistent MCP sessions.
Browser Automation Agent Orchestration
37130

Related MCP Servers

chrome-mcp
Browser Automation Web Scraping
Mehmoodqureshi
A
license
B
quality
A
maintenance
Enables controlling a real Chrome browser from MCP hosts like Claude, with extension-based or CDP fallback, supporting tabs, navigation, interaction, and page reading tools.
Updated 15 hours ago (2026-09-22 14:53 UTC)
40
639 npm
6
MIT
Browser Tools for Claude Code
Browser Automation Web Scraping
ahelme
F
license
Not graded
quality
D
maintenance
Enables browser automation (navigate, screenshot, click, type, etc.) for Claude Code via MCP protocol, with a Chrome extension for configuration.
Updated a year ago (2025-10-06 10:07 UTC)
2
-
debug-mcp-server
Developer Tools Monitoring
developerlabsai
F
license
A
quality
D
maintenance
Bridges web browsers and Claude Code for seamless debugging workflows by receiving debug data from browser widgets and exposing it to Claude Code via MCP protocol.
Updated 10 months ago (2025-11-26 17:54 UTC)
10
-
Claude Chrome MCP
Browser Automation Web Scraping
nonsleepr
A
license
Not graded
quality
D
maintenance
Enables browser automation through the Claude Chrome Extension, allowing agents to navigate websites, fill forms, take screenshots, and debug web apps via standard MCP protocols.
Updated 8 months ago (2026-01-29 01:56 UTC)
1
MIT

Browser MCP Bridge

このツールの機能

クイックスタート

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

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

3. Claude Codeの設定

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

プロジェクト構造

仕組み

利用可能なツール

ワークフロー例

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

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

アクセシビリティ監査

パフォーマンス分析

視覚的な検査

設定

サーバーポート

拡張機能の設定

PM2での実行（本番環境）

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

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

開発

サーバー開発

拡張機能開発

ヘルスチェック

新しいツールの追加

データ最適化

トラブルシューティング

拡張機能が接続されない

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

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

サーバーが起動しない

詳細情報

要件

ライセンス

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

chrome-mcp

Browser Tools for Claude Code

debug-mcp-server

Claude Chrome MCP