Chrome MCP サーバー

Chrome DevTools プロトコル (CDP) を通じて Chrome ブラウザインスタンスをきめ細かく制御できるモデルコンテキストプロトコル (MCP) サーバー。

前提条件

Bun （推奨）またはNode.js（v14以上）
リモートデバッグが有効になっている Chrome ブラウザ

設定

Bunのインストール

Bun をインストールします (まだインストールされていない場合)。

# macOS, Linux, or WSL
curl -fsSL https://bun.sh/install | bash

# Windows (using PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

# Alternatively, using npm
npm install -g bun

リモートデバッグを有効にして Chrome を起動します。付属のスクリプトを使用すると、OS を自動的に検出し、正しいコマンドで Chrome を起動できます。
# Make the script executable chmod +x start-chrome.sh # Run the script ./start-chrome.sh
または、リモートデバッグを使用して Chrome を手動で起動します。
# macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 # Windows start chrome --remote-debugging-port=9222 # Linux google-chrome --remote-debugging-port=9222
依存関係をインストールします:

bun install

サーバーを起動します。

bun start

ホットリロードを使用した開発の場合:

bun dev

サーバーはデフォルトでポート3000で起動します。PORT環境変数PORT設定することでこれを変更できます。

このMCPサーバーを使用するようにRoo Codeを構成する

この Chrome MCP サーバーを Roo Code で使用するには:

Roo Codeの設定を開く
次の MCP 設定構成ファイルに移動します。
- macOS: ~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json
- Windows: %APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\cline_mcp_settings.json
- Linux: ~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json
mcpServersオブジェクトに次の構成を追加します。

{
  "mcpServers": {
    "chrome-control": {
      "url": "http://localhost:3000/sse-cursor",
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

ファイルを保存し、Roo Code を再起動して変更を適用します。
Roo Code の Chrome MCP ツールを使用してブラウザを制御できるようになりました。

利用可能なツール

サーバーはブラウザ制御用に次のツールを提供します。

ナビゲート

特定の URL に移動します。

パラメータ:

url (文字列): 移動するURL

クリック

特定の座標をクリックします。

パラメータ:

x (数値): X座標
y (数値): Y座標

タイプ

現在のフォーカスにテキストを入力します。

パラメータ:

text (文字列): 入力するテキスト

クリック要素

ページ情報内のインデックスで要素をクリックします。

パラメータ:

selector （文字列）：要素のインデックス（例：最初の要素の場合は「0」）

テキスト取得

CSS セレクターを使用して要素のテキストコンテンツを取得します。

パラメータ:

selector （文字列）：要素を見つけるためのCSSセレクター

ページ情報を取得する

インタラクティブな要素やテキストノードを含むページに関するセマンティック情報を取得します。

ページ状態を取得する

URL、タイトル、スクロール位置、ビューポートサイズなどの現在のページの状態を取得します。

使用法

サーバーはSSEトランスポートを使用したモデルコンテキストプロトコルを実装しています。サーバーへの接続は次のURLから行えます。

SSEエンドポイント: http://localhost:3000/sse-cursor
メッセージエンドポイント: http://localhost:3000/message?sessionId=...

Roo Code と併用する場合、MCP 設定ファイルの構成によって接続が自動的に処理されます。

発達

ホットリロードを使用して開発モードでサーバーを実行するには:

bun dev

これは、Bun の組み込み監視モードを使用して、ファイルが変更されたときにサーバーを自動的に再起動します。

ライセンス

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