본문으로 건너뛰기
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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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/polywise6622026년 6월 11일 업데이트

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/polywise6622026년 6월 11일 업데이트

css

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

MatrixAges/polywise6622026년 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/polywise6622026년 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/polywise6622026년 6월 11일 업데이트

i18n

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

MatrixAges/polywise6622026년 6월 11일 업데이트

MatrixAges의 스킬 모두 보기

이 스킬의 문제 신고