Skip to main content
Glama
enesjakozh

Chrome Debug MCP Server

by robertheadley
GitHub
JavaScript
42
  • Linux
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

発達

前提条件

  • 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 プロファイル拡張機能のサポート

  • 選択的拡張機能の有効化/無効化

インストール

前提条件

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

  1. Visual Studio Codeを開く

  2. 拡張機能へ移動（Ctrl+Shift+X）

  3. 「Roo Code」を検索

  4. インストールをクリック

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

  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": [] } } }

使用法

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

利用可能なすべてのコマンド、ツール、および関数の完全なリファレンスについては、 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 の親（アップロードでファイルを追加）

Deploy Server
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

デバッグ機能を使用して Chrome ブラウザを制御し、モデル コンテキスト プロトコルを通じてページの自動化、拡張機能の管理、ユーザー スクリプトの挿入を可能にします。

  1. 特徴
    1. コアブラウザ機能
    2. Greasemonkey API サポート
    3. リソース管理
    4. デバッグ機能
  2. インストール
    1. クイックスタート
      1. ドキュメント
        1. コア機能
          1. ブラウザ管理
          2. グリースモンキーAPI
          3. リソースインターセプション
        2. 実装の詳細
          1. ログシステム
          2. エラー処理
        3. 依存関係
          1. 発達
            1. 前提条件
            2. 設定
          2. ライセンス
            1. 貢献
              1. 謝辞
                1. Robert Headley によるオリジナルのchrome-debug-mcpに基づいています。
                  1. Chrome デバッグ MCP サーバー
                    1. <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
                      1. 特徴
                    2. <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
                      1. ページ自動化
                      2. タブ管理
                      3. デバッグ機能
                      4. ユーザースクリプトのサポート
                      5. 拡張機能の統合
                      6. インストール
                      7. 使用法
                    3. <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
                      1. 基本的なChromeの起動
                      2. カスタムプロファイルで起動
                      3. ユーザースクリプトを挿入する
                      4. JavaScriptを評価する
                      5. コンソールログを取得する
                    4. <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド <<<<<<< ヘッド
                      1. ページインタラクションの例
                      2. タブ管理の例
                      3. 依存関係
                      4. ライセンス
                      5. 貢献
                      6. 謝辞

                    Related Resources

                    Related MCP Servers

                    • Chrome Tools MCP Server

                      nicholmikey
                      A
                      security
                      A
                      license
                      A
                      quality
                      An MCP server that provides tools for interacting with Chrome through its DevTools Protocol, enabling remote control of Chrome tabs to execute JavaScript, capture screenshots, monitor network traffic, and more.
                      Last updated -
                      194
                      48
                      MIT License
                      • Linux
                      • Apple

                    • BrowserTools MCP

                      oenius
                      A
                      security
                      A
                      license
                      A
                      quality
                      A browser monitoring and interaction tool that enables AI applications to capture and analyze browser data through a Chrome extension, supporting functions like console monitoring, screenshots, DOM analysis, and website auditing.
                      Last updated -
                      14
                      68
                      2
                      MIT License

                    • Chrome MCP Server

                      lxe
                      -
                      security
                      F
                      license
                      -
                      quality
                      A Model Context Protocol server that enables AI assistants to control Chrome browsers through the Chrome DevTools Protocol, allowing for navigation, clicking, typing, and extracting page information.
                      Last updated -
                      42
                      • Apple
                      • Linux

                    • Chrome Debug MCP Server

                      Rainmen-xia
                      A
                      security
                      A
                      license
                      A
                      quality
                      A Model Context Protocol server that connects to Chrome debugging ports, enabling browser automation with persistent login sessions.
                      Last updated -
                      10
                      29
                      8
                      MIT License
                      • Apple
                      • Linux

                    View all related MCP servers

                    Appeared in Searches

                    New MCP Servers

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/robertheadley/chrome-debug-mcp'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server