本文へ移動
cccskills
無料GitHub で公開

chrome-cdp

Interacts with local browser via Chrome DevTools Protocol (only triggered after user explicitly requests to inspect, debug, or interact with pages open in Chrome)

インストール方法を見る

含まれるファイル(2)

  • SKILL.md3.1 KB
  • scripts/cdp.mjs31.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Chrome CDP

Lightweight Chrome DevTools Protocol CLI. Direct connection via WebSocket, no Puppeteer required, supports 100+ tabs, instant connection.

Prerequisites

  • Chrome (or Chromium, Brave, Edge, Vivaldi) with remote debugging enabled: open chrome://inspect/#remote-debugging and turn on the switch
  • Node.js 22+ (uses built-in WebSocket)
  • If the browser's DevToolsActivePort is in a non-standard location, set CDP_PORT_FILE to its full path

Commands

All commands use scripts/cdp.mjs. <target> is the unique targetId prefix from list output; copy the full prefix shown (e.g., 6BE827FA). CLI rejects ambiguous prefixes.

List Open Pages

scripts/cdp.mjs list

Screenshot

scripts/cdp.mjs shot <target> [file]    # Default: screenshot-<target>.png in runtime directory

Only captures the viewport. If content outside the viewport is needed, use eval to scroll first. Output includes page DPR and coordinate transformation hints (see Coordinates section below).

Accessibility Tree Snapshot

scripts/cdp.mjs snap <target>

Execute JavaScript

scripts/cdp.mjs eval <target> <expr>

Note: Avoid using index-based selections (querySelectorAll(...)[i]) across multiple eval calls, as DOM may change between calls (e.g., after ignoring clicks, indices shift). Collect all data in one eval or use stable selectors.

Other Commands

scripts/cdp.mjs html    <target> [selector]   # Full page or element HTML
scripts/cdp.mjs nav     <target> <url>         # Navigate and wait for load complete
scripts/cdp.mjs net     <target>               # Resource timing entries
scripts/cdp.mjs click   <target> <selector>    # Click element via CSS selector
scripts/cdp.mjs clickxy <target> <x> <y>       # Click at CSS pixel coordinates
scripts/cdp.mjs type    <target> <text>         # Type text at current focus; works in cross-origin iframes
scripts/cdp.mjs loadall <target> <selector> [ms]  # Repeatedly click "load more" until it disappears (default 1500ms interval)
scripts/cdp.mjs evalraw <target> <method> [json]  # Raw CDP command passthrough
scripts/cdp.mjs open    [url]                  # Open new tab (allows prompt per trigger)
scripts/cdp.mjs stop    [target>               # Stop daemon

Coordinates

shot saves images at native resolution: image pixels = CSS pixels × DPR. CDP Input events (clickxy etc.) use CSS pixels.

CSS px = Screenshot pixels / DPR

shot prints DPR for the current page. Typical Retina (DPR=2): divide screenshot coordinates by 2.

Tips

  • Prefer snap --compact over html for viewing page structure.
  • For typing text in cross-origin iframes, use type (not eval) — first focus with click/clickxy, then type.
  • Chrome shows "Allow debugging" modal on first access to each tab. Background daemon keeps session alive, subsequent commands don't need re-approval. Daemon auto-exits after 20 minutes of inactivity.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Maintain package-level `agentmap.md` files as outline-level maps of the real file tree and core responsibilities. Use when package structure or responsibility boundaries change and the corresponding `agentmap.md` must be created or updated.

日本語の概要は準備中です。原文の説明を表示しています。

MatrixAges/polywise6632026年6月11日 更新

Guides the generation, reading, and updating of agentmap.md files. This skill ensures a consistent and up-to-date codebase map for AI Agents.

日本語の概要は準備中です。原文の説明を表示しています。

MatrixAges/polywise6632026年6月11日 更新

css

無料

Guides styling implementation using TailwindCSS + CSS Modules. Triggered when handling component styles, layout design, or CSS patterns.

日本語の概要は準備中です。原文の説明を表示しています。

MatrixAges/polywise6632026年6月11日 更新

Specialized for translating document files and their content into English. Triggered when localization, translation, or converting Chinese documents to English is requested.

日本語の概要は準備中です。原文の説明を表示しています。

MatrixAges/polywise6632026年6月11日 更新

Guides using eRPC (electron-tRPC) for inter-process communication (IPC) between Electron main and renderer processes. Triggered when handling Electron IPC or tRPC-based systems.

日本語の概要は準備中です。原文の説明を表示しています。

MatrixAges/polywise6632026年6月11日 更新

i18n

無料

Guides internationalization (i18n) implementation using i18next with TypeScript. Triggered when handling localization, translation files, or multilingual support.

日本語の概要は準備中です。原文の説明を表示しています。

MatrixAges/polywise6632026年6月11日 更新

MatrixAges のスキルをすべて見る

このスキルの問題を報告する