Chrome Debug MCP Playwright

Chrome Debug MCP Playwright

Playwright を使用したブラウザー自動化のための Model Context Protocol（MCP）実装で、Greasemonkey API を完全にサポートしています。

機能

ブラウザーの主な機能

• ブラウザーの起動と管理
• タブの作成、切り替え、閉じる操作を含む複数タブのサポート
• ページの移動と操作
• スクリーンショットの撮影

Greasemonkey API のサポート

• CSS を挿入する GM_addStyle
• データを保存する GM_getValue/GM_setValue
• 保存データを削除する GM_deleteValue
• デスクトップ通知を表示する GM_notification
• クリップボードを操作する GM_setClipboard
• クロスオリジンリクエストを送信する GM_xmlhttpRequest

リソース管理

• ネットワークリクエストのインターセプト
• リクエストのブロック、変更、ログ記録
• リソースタイプのフィルタリング

デバッグ機能

• 詳細なログシステム
• ログファイルの整理
• すっきりとしたインターフェース出力

インストール

npm install chrome-debug-mcp-playwright

クイックスタート

// Launch browser
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// Use GM functions
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// Intercept requests
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

ドキュメント

• コマンド - 例を含む詳細なコマンドのドキュメント
• 使用例を含むすべてのコマンド一覧は COMMANDS.md を参照してください

主な機能

ブラウザー管理

// Launch browser
tool browser launch_browser --url "https://example.com"

// Create new tab
tool browser create_tab --url "https://example.com"

// Switch between tabs
tool browser switch_tab --index 1

Greasemonkey API

// Add custom styles
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// Store data
tool browser gm_setValue --key "setting" --value "test"

// Make cross-origin requests
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

リソースのインターセプト

// Block image loading
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// Log all CSS requests
tool browser intercept_requests --patterns ["*.css"] --action "log"

実装の詳細

ログシステム

• デバッグ出力はすべてログファイルにリダイレクトされます
• タイムスタンプ付きのエントリー
• logs ディレクトリに整理して保存
• すっきりとしたインターフェース出力

エラー処理

• 詳細なエラーログ
• エラー発生時の適切なクリーンアップ
• リソース管理

依存関係

• Playwright：ブラウザー自動化
• @modelcontextprotocol/sdk：MCP の実装

開発

前提条件

• Node.js 16 以降
• npm 7 以降

セットアップ

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git
cd chrome-debug-mcp-playwright
npm install

ライセンス

MIT License - 詳細は LICENSE ファイルを参照してください。

コントリビューション

コントリビューションを歓迎します！詳細については、コントリビューションガイドを参照してください。

謝辞

Robert Headley によるオリジナルの chrome-debug-mcp をベースにしています。

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Chrome Debug MCP Server

デバッグ機能、ユーザースクリプトの挿入、拡張機能のサポートを備えた、Chrome を制御するための Model Context Protocol（MCP）サーバーです。

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

機能

Chrome の制御

• カスタム設定で Chrome を起動
• カスタム Chrome 実行ファイルパスに対応
• ユーザープロファイル管理（デフォルトまたはカスタムのユーザーデータディレクトリ）
• 拡張機能のサポートと管理
• Chrome の「Automation Controlled」バナーを無効化

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

ページの自動化

• ページ要素のクリック、入力、操作
• ドロップダウンとフォーム入力の処理
• 要素へのホバーと待機
• ページ全体または要素のスクリーンショットを撮影
• ページ間を移動
• ビューポートサイズとデバイスエミュレーションを設定
• 要素からテキストと属性を抽出

タブ管理

• 開いているすべてのタブを ID と URL とともに一覧表示
• 指定した URL で新しいタブを開く
• ID でタブを閉じる
• タブを切り替える
• 複数のタブの状態を追跡、管理

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

デバッグ機能

• Chrome DevTools Protocol（CDP）経由のリモートデバッグ
• コンソールログの取得と監視
• ページコンテキストでの JavaScript 評価
• コンソール出力のリアルタイムストリーミング

ユーザースクリプトのサポート

• Web ページにユーザースクリプトを挿入
• Greasemonkey 形式の API をサポート：
  • GM_setValue/GM_getValue による永続ストレージ
  • GM_addStyle による CSS の挿入
  • GM_xmlhttpRequest によるクロスオリジンリクエスト
  • GM_openInTab による新しいタブの作成
  • GM_registerMenuCommand によるメニューコマンド

拡張機能の統合

• パッケージ化されていない拡張機能を読み込む
• 拡張機能の状態と設定を維持
• デフォルトの Chrome プロファイルの拡張機能をサポート
• 拡張機能の選択的な有効化／無効化

インストール

前提条件

• Node.js（v14 以降）
• Chrome ブラウザーがインストールされていること
• Visual Studio Code
• Roo Code Extension

Roo Code Extension のインストール

1. Visual Studio Code を開きます
2. 拡張機能（Ctrl+Shift+X）に移動します
3. 「Roo Code」を検索します
4. 「インストール」をクリックします

Chrome Debug MCP Server のセットアップ

1. このリポジトリをクローンします：

   git clone https://github.com/yourusername/chrome-debug-mcp.git
   cd chrome-debug-mcp
   

2. 依存関係をインストールします：

   npm install
   

3. プロジェクトをビルドします：

   npm run build
   

4. Roo Code で設定します： cline_mcp_settings.json に追加します：

   {
     "mcpServers": {
       "chrome-debug": {
         "command": "node",
         "args": ["path/to/chrome-debug-mcp/build/index.js"],
         "disabled": false,
         "alwaysAllow": []
       }
     }
   }
   

使用方法

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload) ======= 利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload) ======= 利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload) ======= 利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload) ======= 利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload) ======= 利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload) ======= 利用可能なすべてのコマンド、ツール、関数の完全なリファレンスについては、COMMANDS.mdを参照してください。

parent of 64acbb3 (Add files via upload)

Chrome の基本的な起動

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    url: "https://example.com"
  }
})

カスタムプロファイルで起動

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    userDataDir: "path/to/chrome/profile",
    disableAutomationControlled: true
  }
})

ユーザースクリプトの挿入

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    url: "https://example.com",
    userscriptPath: "path/to/userscript.js"
  }
})

JavaScript の評価

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "evaluate",
  arguments: {
    expression: "document.title"
  }
})

コンソールログの取得

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "get_console_logs",
  arguments: {
    clear: true
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

ページ操作の例

要素をクリック

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "click",
  arguments: {
    selector: "#submit-button",
    delay: 500
  }
})

入力欄に入力

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "type",
  arguments: {
    selector: "#search-input",
    text: "search query",
    delay: 100
  }
})

ドロップダウンから選択

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "select",
  arguments: {
    selector: "#country-select",
    value: "US"
  }
})

要素が表示されるまで待機

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "wait_for_selector",
  arguments: {
    selector: ".loading-complete",
    visible: true,
    timeout: 5000
  }
})

スクリーンショットを撮影

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "screenshot",
  arguments: {
    path: "screenshot.png",
    fullPage: true
  }
})

ビューポートサイズを設定

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "set_viewport",
  arguments: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  }
})

タブ管理の例

すべてのタブを一覧表示

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "list_tabs",
  arguments: {}
})

新しいタブを開く

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "new_tab",
  arguments: {
    url: "https://example.com"
  }
})

タブに切り替える

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "switch_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

タブを閉じる

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

依存関係

このプロジェクトでは、以下のオープンソースパッケージを使用しています。

• Puppeteer - Chrome 自動化ライブラリ
• chrome-remote-interface - Chrome DevTools Protocol クライアント
• @modelcontextprotocol/sdk - サーバー実装用 MCP SDK

ライセンス

このプロジェクトは MIT License の下でライセンスされています。詳細は LICENSE ファイルを参照してください。

コントリビューション

コントリビューションの方法については、コントリビューションガイドを参照してください。

謝辞

• Chrome DevTools Protocol
• Greasemonkey API <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD
• Model Context Protocol

parent of 8a57443 (Merge pull request #4 from robertheadley/feature/puppeteer-commands) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

• Model Context Protocol

parent of 64acbb3 (Add files via upload)