Chrome MCP サーバー

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

前提条件

• Bun （推奨）またはNode.js（v14以上）

• リモートデバッグが有効になっている Chrome ブラウザ

Related MCP server: Cloudflare Playwright MCP

設定

Bunのインストール

1. 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

2. リモート デバッグを有効にして 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

3. 依存関係をインストールします:

bun install

4. サーバーを起動します。

bun start

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

bun dev

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

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

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

1. Roo Codeの設定を開く

2. 次の 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

3. mcpServersオブジェクトに次の構成を追加します。

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

4. ファイルを保存し、Roo Code を再起動して変更を適用します。

5. 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 の組み込み監視モードを使用して、ファイルが変更されたときにサーバーを自動的に再起動します。

ライセンス

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