Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

chrome-cdp — Claude Code skill: what it does, how to install

Connects AI coding agents to an active Chrome browser session using DevTools Protocol. Useful for inspecting open tabs, clicking elements, and taking viewport screenshots.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pasky/chrome-cdp-skill --skill chrome-cdp -a claude-code
Open on GitHub

What chrome-cdp does

The skill drives a local Chrome, Chromium, Brave, or Edge session via the scripts/cdp.mjs script. It connects directly over WebSocket to the browser debugging port without needing Puppeteer or external drivers. The CLI lists open targets with list, navigates URLs, reads accessibility trees using snap, and captures viewport screenshots via shot.

DOM interactions include click, coordinate clicks with clickxy, and text input through type. The type command uses Input.insertText, making it work reliably even in cross-origin iframes. Captured screenshots cover only the visible viewport, so page coordinates must be divided by the device pixel ratio when targeting specific elements.

Using this skill requires Node.js 22+ for built-in WebSocket support and remote debugging enabled at chrome://inspect/#remote-debugging. A background daemon maintains the active debugging session and automatically exits after 20 minutes of inactivity.

What it helps with

  • inspect and list active browser tabs by target ID
  • take viewport screenshots from a live Chrome session
  • send keystrokes into cross-origin iframe input fields
  • click elements using CSS selectors or exact coordinates

Example prompts for the agent

  • List open tabs in Chrome and show their target IDs
  • Take a screenshot of target 6BE827FA and check the layout
  • Click the submit button on the active tab using CDP

How to install chrome-cdp

1Skills CLI (Vercel)

npx skills add pasky/chrome-cdp-skill --skill chrome-cdp -a claude-code

2Manually: put the files in place

~/.claude/skills/chrome-cdp/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/chrome-cdp/

Similar

pinchtab pinchtab This skill uses PinchTab to control browser sessions, inspect page controls, fill forms, and export page output. Use it when an agent needs to act through a browser. Claude Code CX Codex Cursor +1 892installs e2e tester-army Writes, runs, and debugs web and mobile end-to-end tests with the e2e test runner, combining agent goals with exact Playwright assertions and device checks. Claude Code CX Codex Cursor +1 1,200installs exa-search K-Dense-AI Skill for searching scientific and technical content via Exa with text extraction from pages and PDFs in batches. Supports filtering by publication category and academic domains. Claude Code CX Codex Cursor +1 1,700installs browser browserbase Automates browser navigation via the browse CLI. Useful for data extraction, filling forms, and navigating sites behind bot protection. Claude Code CX Codex Cursor +1 5,900installs browseros-neo browseros-ai Routes website tasks to BrowserOS neo, using a browser with a persistent profile and active account sessions. Use it for forms, downloads, page checks, and account actions. Claude Code CX Codex Cursor +1 604installs tavily-best-practices tavily-ai This skill gives an agent guidance for Tavily web search, content extraction, site crawling, and research. Use it when adding current web data to an agent workflow or RAG system. Claude Code CX Codex Cursor +1 20,600installs agent-browser vercel-labs A CLI skill for browser control: it opens pages, fills forms, clicks buttons, and tests web apps. Use it when an agent needs to act inside a website. Claude Code CX Codex Cursor +1 1,200,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. Claude Code Claude.ai 186,758installs

Questions about chrome-cdp

How to install chrome-cdp in Claude Code?

Run npx skills add pasky/chrome-cdp-skill --skill chrome-cdp -a claude-code in your terminal.

What does chrome-cdp do?

It lets the AI inspect, debug, and control open pages in Chrome via direct Chrome DevTools Protocol WebSocket commands without Puppeteer.

What are the prerequisites for chrome-cdp?

You need Node.js 22 or newer and a Chromium-based browser with remote debugging toggled on at chrome://inspect/#remote-debugging.

Source text

SKILL.md · MIT 
---
name: chrome-cdp
description: Interact with local Chrome browser session (only on explicit user approval after being asked to inspect, debug, or interact with a page open in Chrome)
---

# Chrome CDP

Lightweight Chrome DevTools Protocol CLI. Connects directly via WebSocket — no Puppeteer, works with 100+ tabs, instant connection.

## Prerequisites

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

## Commands

All commands use `scripts/cdp.mjs`. The `<target>` is a **unique** targetId prefix from `list`; copy the full prefix shown in the `list` output (for example `6BE827FA`). The CLI rejects ambiguous prefixes.

### List open pages

```bash
scripts/cdp.mjs list
```

### Take a screenshot

```bash
scripts/cdp.mjs shot <target> [file]    # default: screenshot-<target>.png in runtime dir
```

Captures the **viewport only**. Scroll first with `eval` if you need content below the fold. Output includes the page's DPR and coordinate conversion hint (see **Coordinates** below).

### Accessibility tree snapshot

```bash
scripts/cdp.mjs snap <target>
```

### Evaluate JavaScript

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

> **Watch out:** avoid index-based selection (`querySelectorAll(...)[i]`) across multiple `eval` calls when the DOM can change between them (e.g. after clicking Ignore, card indices shift). Collect all data in one `eval` or use stable selectors.

### Other commands

```bash
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)
```

## Coordinates

`shot` saves an image at native resolution: image pixels = CSS pixels × DPR. CDP Input events (`clickxy` etc.) take **CSS pixels**.

```
CSS px = screenshot image px / DPR
```

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

## Tips

- Prefer `snap --compact` over `html` for page structure.
- Use `type` (not eval) to enter text in cross-origin iframes — `click`/`clickxy` to focus first, then `type`.
- Chrome shows an "Allow debugging" modal once per tab on first access. A background daemon keeps the session alive so subsequent commands need no further approval. Daemons auto-exit after 20 minutes of inactivity.

© pasky · MIT · pasky/chrome-cdp-skill

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor