Chrome デバッグ MCP Playwright

Playwright を使用したブラウザ自動化のためのモデルコンテキストプロトコル (MCP) 実装。完全な Greasemonkey API サポート付き。

特徴

コアブラウザ機能

ブラウザの起動と管理
作成/切り替え/閉じる機能を備えたマルチタブのサポート
ページナビゲーションとインタラクション
スクリーンショットキャプチャ

Greasemonkey API サポート

CSSインジェクション用のGM_addStyle
データ保存用のGM_getValue/GM_setValue
ストレージクリーンアップ用のGM_deleteValue
デスクトップ通知用の GM_notification
クリップボード操作用のGM_setClipboard
クロスオリジンリクエスト用のGM_xmlhttpRequest

リソース管理

ネットワーク要求の傍受
リクエストのブロック、変更、およびログ記録
リソースタイプのフィルタリング

デバッグ機能

詳細なログシステム
ログファイルの構成
クリーンなインターフェース出力

Related MCP server: BrowserTools MCP

インストール

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 実装

発達

前提条件

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 ファイルを参照してください。

貢献

貢献を歓迎します！詳細については貢献ガイドをご覧ください。

謝辞

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 プロファイル拡張機能のサポート
選択的拡張機能の有効化/無効化

インストール

前提条件

Node.js (v14以上)
Chromeブラウザがインストールされている
ビジュアルスタジオコード
Rooコード拡張機能

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

依存関係をインストールします:
```
npm install
```
プロジェクトをビルドします。
```
npm run build
```

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 の親（アップロードでファイルを追加）

基本的な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 の親（アップロードによるファイルの追加）

依存関係

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

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

ライセンス

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

貢献

貢献の詳細については、貢献ガイドをご覧ください。

謝辞

Chrome DevTools プロトコル
Greasemonkey API <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
モデルコンテキストプロトコル

8a57443 の親 (robertheadley/feature/puppeteer-commands からのプルリクエスト #4 をマージ) =======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）=======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）=======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）=======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）=======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）=======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）=======

モデルコンテキストプロトコル

64acbb3 の親（アップロードでファイルを追加）

Chrome デバッグ MCP Playwright

特徴

コアブラウザ機能

Greasemonkey API サポート

リソース管理

デバッグ機能

インストール

クイックスタート

ドキュメント

コア機能

ブラウザ管理

グリースモンキーAPI

リソースインターセプション

実装の詳細

ログシステム

エラー処理

依存関係

発達

前提条件

設定

ライセンス

貢献

謝辞

Robert Headley によるオリジナルのchrome-debug-mcpに基づいています。

Chrome デバッグ MCP サーバー

<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド

特徴

クロームコントロール

<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド

ページ自動化

タブ管理

デバッグ機能

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

拡張機能の統合

インストール

前提条件

Roo Code拡張機能のインストール

Chrome デバッグ MCP サーバーの設定

使用法

<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド

基本的なChromeの起動

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

ユーザースクリプトを挿入する

JavaScriptを評価する

コンソールログを取得する

<<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド

ページインタラクションの例

要素をクリック

入力欄に入力

ドロップダウンから選択

要素を待つ

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

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

タブ管理の例

すべてのタブを一覧表示

新しいタブを開く

タブに切り替える

タブを閉じる

依存関係

ライセンス

貢献

謝辞

Resources

Appeared in Searches

Latest Blog Posts

MCP directory API