Chrome ツール MCP サーバー

Name: Chrome Tools MCP Server
Author: nicholmikey

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

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

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

Related MCP server: MCP-Undetected-Chromedriver

特徴

Chromeタブを一覧表示する
タブでJavaScriptを実行する
スクリーンショットをキャプチャする
ネットワークトラフィックを監視する
タブからURLへ移動する
DOM要素のクエリ
コンソール出力キャプチャで要素をクリックする

インストール

npm install @nicholmikey/chrome-tools

構成

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

{ "chrome-tools": { "command": "node", "args": ["path/to/chrome-tools/dist/index.js"], "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "direct", "CHROME_ERROR_HELP": "custom error message" } } }

環境変数

CHROME_DEBUG_URL : Chromeのリモートデバッグインターフェースが利用できるURL（デフォルト: http://localhost:9222 ）
CHROME_CONNECTION_TYPE : ログ記録の接続タイプ識別子（例：「direct」、「ssh-tunnel」、「docker」）
CHROME_ERROR_HELP : 接続に失敗したときに表示されるカスタムエラーメッセージ

セットアップガイド

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

リモートデバッグを有効にして 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
MCP 設定を構成します。
{ "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "direct" } }

WSL セットアップ

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

リモートデバッグを有効にして Windows で Chrome を起動する
SSH トンネルを作成します。
ssh -N -L 9222:localhost:9222 windowsuser@host
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 を実行する場合:

Chrome コンテナを起動します。
docker run -d --name chrome -p 9222:9222 chromedp/headless-shell
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 : スクロール可能なページ全体をキャプチャする

画像処理:

WebP 最適化 (プライマリフォーマット):
- 最初の試み: 品質80、高圧縮のWebP
- 2 回目の試行: 1 回目の試行が 1 MB を超える場合は、品質 60 の WebP とほぼロスレス圧縮
PNGフォールバック:
- WebP処理が失敗した場合にのみ使用される
- 最大限の圧縮とカラーパレットの最適化が含まれています
サイズ制約:
- 最大サイズ: 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 : クリックによってトリガーされるコンソールメッセージの配列

ライセンス

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

One-click Deploy

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

How are these scores calculated?

Resources

Need Help?

Report Issue

Reddit Discussion

Related Servers

Chrome Tools MCP Server