Chrome Tools MCP Server

🚀 ChromeツールMCPサーバー

ChromeのDevToolsプロトコルを通じて、Chromeタブをリモートで制御するためのツールを提供するMCPサーバーです。このサーバーは、タブ内でJavaScriptを実行したり、スクリーンショットをキャプチャしたり、ネットワークトラフィックを監視したりする機能をサポートしています。

🚀 クイックスタート

このMCPサーバーは、手動でブラウザを特定の状態に設定し、その後ClineなどのAIツールで操作する必要がある場合に非常に便利です。また、このツールを使用して、ネットワークイベントを監視し、そのコンテキストに抽出することもできます。

✨ 主な機能

• 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_PROXY_ENABLED": true
    }
  }
}

セットアップガイド

1. Node.jsとnpmのインストール

Node.jsとnpmがインストールされていることを確認します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install --lts

2. chrome-toolsのインストール

プロジェクトディレクトリで以下のコマンドを実行します。

npm install @nicholmikey/chrome-tools

3. MCPサーバーの起動

以下の設定ファイルを作成して実行します。

const { MCP } = require('@nicholmikey/mcp');
const server = new MCP.Server({
  port: 3000,
  workers: 2
});

server.start();

ツール説明

list_tabs

すべてのChromeタブを一覧表示します。

戻り値

• 各タブの詳細情報を含む配列：
  • id: タブの一意の識別子
  • title: タイトル
  • url: 現在のURL
  • status: 状態（読み込み中、停止など）

execute_script

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

パラメータ

• tabId: タブの一意の識別子
• script: 実行するJavaScriptコード

戻り値

• 実行結果：
  • success: 成功したかどうか（ブール値）
  • result: 実行の戻り値

captureScreenshot

指定されたタブのスクリーンショットをキャプチャします。

パラメータ

• tabId: タブの一意の識別子
• path: スクリーンショットの保存先パス

戻り値

• 画像ファイルのパスまたはエラーメッセージ

captureNetworkEvents

指定されたタブ内のネットワークイベントを監視してキャプチャします。

パラメータ

• tabId: タブの一意の識別子
• duration: キャプチャ期間（秒）
• filters: オプションのタイプとURLパターンのフィルター

戻り値

• 各イベントの詳細情報を含むネットワークイベントログの配列：
  • type: イベントのタイプ
  • url: リクエストまたはレスポンスのURL
  • timeStamp: タイムスタンプ
  • size: データサイズ

load_url

指定されたタブを新しいURLにナビゲートします。

パラメータ

• tabId: タブの一意の識別子
• url: ロードするターゲットURL

query_dom_elements

CSSセレクタを使用してDOM要素をクエリし、詳細情報を取得します。

パラメータ

• tabId: タブの一意の識別子
• selector: CSSセレクタ文字列

戻り値

• 各要素が以下を含む要素の配列：
  • nodeId: ノードの一意の識別子
  • tagName: HTMLタグ名
  • textContent: テキストコンテンツ
  • attributes: 属性オブジェクト
  • boundingBox: レイアウトの位置とサイズ
  • isVisible: 可視かどうか
  • ariaAttributes: ARIA属性

click_element

CSSセレクタを使用して要素を見つけ、クリック操作を実行し、コンソール出力をキャプチャします。

パラメータ

• tabId: タブの一意の識別子
• selector: CSSセレクタ文字列

戻り値

• 操作結果：
  • message: 成功または失敗のメッセージ
  • consoleOutput: クリックによってトリガーされたコンソール出力の配列

📄 ライセンス

MIT