mcpField
C
chrome-cdp

chrome-cdp

github.com/pasky開発3.3k2.1k 回インストール17 週間前に更新
リポジトリ

chrome-cdp について

chrome-cdpは、Chrome DevTools Protocolでブラウザーを操作する軽量なNode.jsコマンドラインツールです。WebSocketで直接接続し、Puppeteerを使わずにページの調査やブラウザー操作を行えます。

主な機能

  1. 01開いているページの一覧表示
  2. 02ビューポートのスクリーンショット撮影
  3. 03アクセシビリティツリーの確認
  4. 04JavaScript実行とHTML取得
  5. 05移動、クリック、入力、ネットワーク時間の確認

活用シーン

  1. 01デバッグ時のページ構造の確認
  2. 02レビュー用のビューポート撮影
  3. 03クロスオリジンiframe内の要素操作
  4. 04リソースタイミングデータの収集

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pasky/chrome-cdp-skill --skill chrome-cdp

インストール後、Claude Code で/chrome-cdpを入力して読み込まれたか確認します。

同梱ファイルscripts/cdp.mjs

詳細

Chrome CDP

軽量な Chrome DevTools Protocol CLI です。WebSocket 経由で直接接続するため、Puppeteer は不要で、100 個以上のタブに対応し、瞬時に接続できます。

前提条件

  • リモートデバッグを有効にした Chrome（または Chromium、Brave、Edge、Vivaldi）：chrome://inspect/#remote-debugging を開き、スイッチを切り替えます
  • Node.js 22 以降（組み込みの WebSocket を使用します）
  • ブラウザーの DevToolsActivePort が標準以外の場所にある場合は、CDP_PORT_FILE にそのフルパスを設定します

コマンド

すべてのコマンドで scripts/cdp.mjs を使用します。<target> は list で取得する、一意の targetId プレフィックスです。list の出力に表示されるプレフィックス全体をコピーしてください（例：6BE827FA）。CLI は曖昧なプレフィックスを拒否します。

開いているページを一覧表示する
scripts/cdp.mjs list
スクリーンショットを撮る
scripts/cdp.mjs shot <target> [file]    # default: screenshot-<target>.png in runtime dir

キャプチャされるのはビューポートのみです。表示範囲より下のコンテンツが必要な場合は、先に eval でスクロールしてください。出力には、ページの DPR と座標変換のヒントが含まれます（下記の座標を参照）。

アクセシビリティツリーのスナップショット
scripts/cdp.mjs snap <target>
JavaScript を評価する
scripts/cdp.mjs eval <target> <expr>

注意： DOM が変化する可能性がある場合（たとえば、Ignore をクリックした後にカードのインデックスがずれる場合）は、複数回の eval 呼び出しにまたがってインデックスベースの選択（querySelectorAll(...)[i]）を行わないでください。すべてのデータを 1 回の eval で収集するか、安定したセレクターを使用してください。

その他のコマンド
scripts/cdp.mjs html    <target> [selector]   # full page or element HTML
scripts/cdp.mjs nav     <target> <url>         # navigate and wait for load
scripts/cdp.mjs net     <target>               # resource timing entries
scripts/cdp.mjs click   <target> <selector>    # click element by CSS selector
scripts/cdp.mjs clickxy <target> <x> <y>       # click at CSS pixel coords
scripts/cdp.mjs type    <target> <text>         # Input.insertText at current focus; works in cross-origin iframes unlike eval
scripts/cdp.mjs loadall <target> <selector> [ms]  # click "load more" until gone (default 1500ms between clicks)
scripts/cdp.mjs evalraw <target> <method> [json]  # raw CDP command passthrough
scripts/cdp.mjs open    [url]                  # open new tab (each triggers Allow prompt)
scripts/cdp.mjs stop    [target]               # stop daemon(s)

座標

shot はネイティブ解像度で画像を保存します。画像のピクセル数 = CSS ピクセル × DPR です。CDP の入力イベント（clickxy など）で指定するのはCSS ピクセルです。

CSS px = screenshot image px / DPR

shot は現在のページの DPR を出力します。一般的な Retina（DPR=2）の場合は、スクリーンショットの座標を 2 で割ってください。

ヒント

  • ページ構造を確認するには、html よりも snap --compact を優先してください。
  • クロスオリジン iframe にテキストを入力するには、eval ではなく type を使用してください。先に click／clickxy でフォーカスしてから、type を実行します。
  • Chrome では、初回アクセス時にタブごとに 1 回、「デバッグを許可」モーダルが表示されます。バックグラウンドデーモンがセッションを維持するため、以降のコマンドでは再度の承認は不要です。デーモンは 20 分間操作がないと自動終了します。

コメント

Markdown 対応