Chrome Browser Control

🚀 Chrome MCP サーバー

Chromeブラウザのインスタンスを細かく制御できるモデルコンテキストプロトコル（MCP）サーバーです。Chromeデバッグツールプロトコル（CDP）を通じて実現されています。

🚀 クイックスタート

✨ 前提条件

• Bun（推奨）またはNode.js（v14以上）
• リモートデバッグ機能を有効にしたChromeブラウザ

📦 インストール

Bunのインストール

1. Bunをインストールします（未インストールの場合）：

# macOS、Linux または WSL
curl -fsSL https://bun.sh/install | bash

# Windows（PowerShellを使用）
powershell -c "irm bun.sh/install.ps1 | iex"

# または npm を使用
npm install -g bun

2. 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環境変数を設定することでポートを変更できます。

💻 この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",
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

4. ファイルを保存し、Roo Codeを再起動して変更を適用します。
5. これでRoo Code内でChrome MCPツールを使用してブラウザを制御できます。

✨ 利用可能なツール

サーバーは、ブラウザ制御に以下のツールを提供します：

navigate

特定のURLにナビゲートします。

パラメーター：

• url（文字列）：ナビゲートするURL

click

指定された座標でクリックします。

パラメーター：

• x（数値）：X軸座標
• y（数値）：Y軸座標

type

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

パラメーター：

• text（文字列）：入力するテキスト

clickElement

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

パラメーター：

• selector（文字列）：要素インデックス（例：「0」は最初の要素を表します）

getText

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

パラメーター：

• selector（文字列）：要素を検索するためのCSSセレクター

getPageInfo

ページのセマンティック情報（対話型要素やテキストノードを含む）を取得します。

getPageState

現在のページ状態（URL、タイトル、ロード完了の有無など）を取得します。

🔧 開発に関する説明

開発モードを起動するには、Bunを使用します：

bun dev

このコマンドはホットリロード機能を有効にし、開発中にコードをリアルタイムで更新するのに便利です。