Browser MCP over CDP

CDP を使用した Browser MCP

Chrome DevTools Protocol（CDP）を使用して Chrome ブラウザーを管理する MCP サーバーです

このプロジェクトでは、ブラウザーのタブを操作し、アクセスするためのツールを提供します。ブラウザーは CDP を使用して制御されるため、次のことが可能です。

1. ページを、全体の高さを含むスクリーンショット、アクセシビリティツリー、拡張された詳細な DOM としてエクスポートします
   1. スクリーンショットには、スクロールして表示されている範囲だけでなく、ページ全体が含まれます
   2. アクセシビリティツリーには、関連性の高い部分がほとんど含まれます
   3. 拡張された詳細な DOM には次のものが含まれます
      1. ネストされた iframe、shadow DOM、疑似要素など
      2. 要素ごとに付与されたリスナー（例：onClick、onKeyDown など）。コールバック関数のコードも含まれます（良くも悪くも）
      3. 要素ごとに関連する解決済みスタイル
2. クリック、キー入力、入力値の更新関数を使用してページを操作できます
3. URL を開く、戻る、進む、再読み込みといった基本的な機能でページを移動できます

前提条件

1. NodeJS

ローカルの Chrome で使用する

1. npm install
2. config-example.json の設定を Cloude、VS Code、Cursor など、任意の場所に配置します。
   1. Cloude については https://modelcontextprotocol.io/quickstart/user を参照してください
   2. Cursor については https://docs.cursor.com/context/model-context-protocol#configuring-mcp-servers を参照してください

リモートの Chrome で使用する

1. 「selenoid」ディレクトリ内で次のコマンドを実行し、Selenoid Selenium Hub を起動します。

   docker pull selenoid/vnc_chrome:128.0
   docker pull selenoid/hub
   docker pull aerokube/selenoid-ui
   docker-compose up -d
   

2. config-example.json/mcpServers/browser 内に次の設定を追加して、SELENIUM_HUB_URL env var で Selenium HUB のアドレスを指定します。

   "env": {
       "SELENIUM_HUB_URL": "http://localhost:4444/wd/hub"
   }
   

3. ライブブラウザーを確認するには、http://localhost:8080/ にアクセスします

警告

Selenoid Selenium Hub の設定ではホストの docker.sock を使用するため、Docker を完全に制御できます。

トラブルシューティング

npx @modelcontextprotocol/inspector npx tsx /Users/bogdan/devel/browser-mcp-over-cdp/src/MCP.ts