Chrome デバッグ MCP Playwright
Playwright を使用したブラウザ自動化のためのモデル コンテキスト プロトコル (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
グリースモンキー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"
実装の詳細
ログシステム
- すべてのデバッグ出力はログファイルにリダイレクトされます
- タイムスタンプ付きエントリ
- ログディレクトリに整理
- クリーンなインターフェース出力
エラー処理
- 詳細なエラーログ
- エラーの適切なクリーンアップ
- リソース管理
依存関係
- Playwright: ブラウザ自動化
- @modelcontextprotocol/sdk: MCP 実装
発達
前提条件
設定
git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git
cd chrome-debug-mcp-playwright
npm install
ライセンス
MIT ライセンス - 詳細については LICENSE ファイルを参照してください。
貢献
貢献を歓迎します！詳細については貢献ガイドをご覧ください。
謝辞
Robert Headley によるオリジナルのchrome-debug-mcpに基づいています。
=======
64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加）
Chrome デバッグ MCP サーバー
デバッグ機能、ユーザー スクリプトの挿入、拡張機能のサポートを備えた Chrome を制御するためのモデル コンテキスト プロトコル (MCP) サーバー。
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
=======
64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加)
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加）
特徴
クロームコントロール
- カスタム設定でChromeを起動する
- Chrome のカスタム実行可能パスのサポート
- ユーザー プロファイル管理 (デフォルトまたはカスタム ユーザー データ ディレクトリ)
- 拡張機能のサポートと管理
- Chromeの「自動制御」バナーを無効にする
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
=======
64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加)
ページ自動化
- ページ要素をクリック、入力、操作する
- ドロップダウンとフォーム入力を処理する
- 要素をホバーして待つ
- ページ全体または要素のスクリーンショットを撮る
- ページ間を移動する
- ビューポートのサイズとデバイスのエミュレーションを設定する
- 要素からテキストと属性を抽出する
タブ管理
- 開いているすべてのタブをIDとURLとともに一覧表示します
- 指定したURLで新しいタブを開く
- IDでタブを閉じる
- タブを切り替える
- 複数のタブの状態を追跡および管理する
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加）
デバッグ機能
- Chrome DevTools プロトコル (CDP) によるリモート デバッグ
- コンソールログのキャプチャと監視
- ページコンテキストでの JavaScript 評価
- リアルタイムコンソール出力ストリーミング
ユーザースクリプトのサポート
- ウェブページにユーザースクリプトを挿入する
- Greasemonkey スタイルの API サポート:
- 永続ストレージ用の
GM_setValue / GM_getValue - CSSインジェクション用の
GM_addStyle - クロスオリジンリクエスト用の
GM_xmlhttpRequest - 新しいタブを作成するための
GM_openInTab - メニューコマンドの
GM_registerMenuCommand
拡張機能の統合
- 解凍された拡張機能を読み込む
- 拡張機能の状態と構成を維持する
- デフォルトの Chrome プロファイル拡張機能のサポート
- 選択的拡張機能の有効化/無効化
インストール
前提条件
Roo Code拡張機能のインストール
- Visual Studio Codeを開く
- 拡張機能へ移動（Ctrl+Shift+X）
- 「Roo Code」を検索
- インストールをクリック
Chrome デバッグ MCP サーバーの設定
- このリポジトリをクローンします:
git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp
- 依存関係をインストールします:
- プロジェクトをビルドします。
- Roo Code で設定:
cline_mcp_settings.jsonに追加:{
"mcpServers": {
"chrome-debug": {
"command": "node",
"args": ["path/to/chrome-debug-mcp/build/index.js"],
"disabled": false,
"alwaysAllow": []
}
}
}
使用法
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
利用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親 (アップロードによってファイルを追加) ======= 使用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親 (アップロードによってファイルを追加) ======= 使用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親 (アップロードによってファイルを追加) ======= 使用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親 (アップロードによってファイルを追加) ======= 使用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親 (アップロードによってファイルを追加) ======= 使用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親 (アップロードによってファイルを追加) ======= 使用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 COMMANDS.md を参照してください。
64acbb3 の親（アップロードでファイルを追加）
基本的な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
}
})
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
=======
64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加) ======= 64acbb3 の親 (アップロードによるファイルの追加)
ページインタラクションの例
要素をクリック
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"
}
})
<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加） ======= 64acbb3 の親（アップロードによるファイルの追加）
依存関係
このプロジェクトでは、次のオープンソース パッケージを使用します。
ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細については LICENSE ファイルを参照してください。
貢献
貢献の詳細については、貢献ガイドをご覧ください。
謝辞
8a57443 の親 (robertheadley/feature/puppeteer-commands からのプルリクエスト #4 をマージ) =======
64acbb3 の親（アップロードでファイルを追加）=======
64acbb3 の親（アップロードでファイルを追加）=======
64acbb3 の親（アップロードでファイルを追加）=======
64acbb3 の親（アップロードでファイルを追加）=======
64acbb3 の親（アップロードでファイルを追加）=======
64acbb3 の親（アップロードでファイルを追加）=======
64acbb3 の親（アップロードでファイルを追加）