Chrome ツール MCP サーバー

DevToolsプロトコルを介してChromeを操作するためのツールを提供するMCPサーバー。このサーバーは、JavaScriptの実行、スクリーンショットのキャプチャ、ネットワークトラフィックの監視など、Chromeタブのリモート制御を可能にします。

なぜこのような MCP サーバーを使用するのでしょうか?

このタイプのMCPサーバーは、ClineのようなAIツールにブラウザを操作させる前に、ブラウザを特定の状態に手動で設定する必要がある場合に便利です。また、このツールを使ってネットワークイベントをリッスンし、コンテキストに取り込むこともできます。

特徴

• Chromeタブを一覧表示する

• タブでJavaScriptを実行する

• スクリーンショットをキャプチャする

• ネットワークトラフィックを監視する

• タブからURLへ移動する

• DOM要素のクエリ

• コンソール出力キャプチャで要素をクリックする

インストール

構成

サーバーは、MCP 設定の環境変数を通じて構成できます。

環境変数

• CHROME_DEBUG_URL : Chromeのリモートデバッグインターフェースが利用できるURL（デフォルト: http://localhost:9222 ）

• CHROME_CONNECTION_TYPE : ログ記録の接続タイプ識別子（例：「direct」、「ssh-tunnel」、「docker」）

• CHROME_ERROR_HELP : 接続に失敗したときに表示されるカスタムエラーメッセージ

セットアップガイド

ネイティブセットアップ（Windows/Mac/Linux）

1. リモート デバッグを有効にして Chrome を起動します。

   # Windows "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 # Mac /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 # Linux google-chrome --remote-debugging-port=9222

2. MCP 設定を構成します。

   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "direct" } }

WSL セットアップ

WSL で実行する場合は、Windows で実行されている Chrome に接続するための SSH トンネルを設定する必要があります。

1. リモートデバッグを有効にして Windows で Chrome を起動する

2. SSH トンネルを作成します。

   ssh -N -L 9222:localhost:9222 windowsuser@host

3. MCP 設定を構成します。

   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "ssh-tunnel", "CHROME_ERROR_HELP": "Make sure the SSH tunnel is running: ssh -N -L 9222:localhost:9222 windowsuser@host" } }

Dockerのセットアップ

Docker で Chrome を実行する場合:

1. Chrome コンテナを起動します。

   docker run -d --name chrome -p 9222:9222 chromedp/headless-shell

2. MCP 設定を構成します。

   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "docker" } }

ツール

リストタブ

利用可能なすべての Chrome タブを一覧表示します。

スクリプト実行

指定されたタブで JavaScript コードを実行します。パラメータ:

• tabId : ChromeタブのID

• script : 実行するJavaScriptコード

キャプチャスクリーンショット

指定されたタブのスクリーンショットをキャプチャし、AI モデルでの使用に合わせて自動的に最適化します。パラメータ:

• tabId : ChromeタブのID

• format : 画像フォーマット (jpeg/png) - 注: これは最初のキャプチャのみに使用されます。最終出力ではWebPとPNGフォールバックが使用されます。

• quality : JPEG品質 (1-100) - 注: 最初のキャプチャのみ

• fullPage : スクロール可能なページ全体をキャプチャする

画像処理:

1. WebP 最適化 (プライマリ フォーマット):

   • 最初の試み: 品質80、高圧縮のWebP

   • 2 回目の試行: 1 回目の試行が 1 MB を超える場合は、品質 60 の WebP とほぼロスレス圧縮

2. PNGフォールバック:

   • WebP処理が失敗した場合にのみ使用される

   • 最大限の圧縮とカラーパレットの最適化が含まれています

3. サイズ制約:

   • 最大サイズ: 900x600 (アスペクト比を維持)

   • 最大ファイルサイズ: 1MB

   • 必要に応じて段階的にサイズを縮小

ネットワークイベントのキャプチャ

指定されたタブからのネットワーク イベントを監視およびキャプチャします。パラメータ:

• tabId : ChromeタブのID

• duration : キャプチャする秒数

• filters : オプションのタイプとURLパターンのフィルター

ロードURL

指定された URL にタブを移動します。パラメータ:

• tabId : ChromeタブのID

• url : 読み込むURL

クエリDOM要素

CSSセレクタに一致するDOM要素に関する詳細情報を照会して取得します。パラメータ：

• tabId : ChromeタブのID

• selector : 要素を見つけるためのCSSセレクター 戻り値:

• 次のプロパティを含む DOM 要素の配列:

  • nodeId : ノードの一意の識別子

  • tagName : HTMLタグ名

  • textContent : 要素のテキストコンテンツ

  • attributes : すべての要素属性を含むオブジェクト

  • boundingBox : 要素の位置と寸法

  • isVisible : 要素が表示されているかどうか

  • ariaAttributes : アクセシビリティのためのARIA属性

クリック要素

DOM 要素をクリックし、クリックによってトリガーされたコンソール出力をキャプチャします。パラメータ:

• tabId : ChromeタブのID

• selector : クリックする要素を見つけるための CSS セレクター 戻り値:

• 以下を含むオブジェクト:

  • message : 成功/失敗メッセージ

  • consoleOutput : クリックによってトリガーされるコンソールメッセージの配列

ライセンス

マサチューセッツ工科大学