Drive Chrome via the DevTools Protocol from JavaScript. An agent skill from browser-use/browser-harness-js.

MITAuto-check: notesDevelopment

Install Cdp

skills CLI
$ npx skills add browser-use/browser-harness-js --skill cdp -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install browser-use/browser-harness-js cdp --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cdp
GitHub stars
489
Token cost
~3.3k tokens
SKILL.md length
1,131 words
Files
33
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Drive Chrome via the DevTools Protocol from JavaScript. An agent skill from browser-use/browser-harness-js.

  • Works in 5 steps: Try await session.connect() first (no… → If auto-detect fails with No running… → Tick "Discover network targets" in… → …
  • The user wants to automate
  • SKILL.md covers Setup (once, first use), How to use, CLI commands and API surface inside snippets, plus 5 more sections
  • Calls npx, osascript and bun

What it does

Cdp is an agent skill from browser-use/browser-harness-js. Drive Chrome via the DevTools Protocol from JavaScript. Run JS snippets through the browser-harness-js CLI — it auto-spawns a long-lived bun HTTP server holding a fully-typed CDP Session, and every call (browser-harness-js 'await session.Page.navigate(...)') executes against the same persistent connection. Session, active target, and globals survive across calls. Use when the user wants to automate, script, or inspect a Chrome browser via CDP — single tab or multi-tab, attach to existing Chrome or to a new one…

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 34 other files (for example `README.md`, `interaction-skills/connection.md` and `interaction-skills/cookies.md`).

It sits in Development. It works with JavaScript. The repository describes itself as: Self-healing browser harness that enables LLMs to complete any task. The licence is MIT.

When your agent uses it

  • The user wants to automate
  • Inspect a Chrome browser via CDP — single tab
  • Attach to existing Chrome
  • A new one launched with --remote-debugging-port

Example prompts

  • “await session.Page.navigate(...)”
  • “/cdp”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Try await session.connect() first (no args) — auto-detect handles every Chromium-based browser via DevToolsActivePort. If it returns…
  2. If auto-detect fails with No running browser with remote debugging detected, the user needs to turn it on. Open the inspect page
  3. Tick "Discover network targets" in chrome://inspect, then click Allow when Chrome prompts.
  4. If auto-detect picks the wrong browser (multiple running, you want a specific one): list them with await detectBrowsers(), then await…
  5. If session.connect() returns No detected browser accepted a connection, the user has remote-debugging on but hasn't clicked Allow yet…

What it can do on your machine

Read from SKILL.md and the folder at commit 2d9a5ed. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • osascript
    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Cdp loads about 3.3k tokens when it runs. Until then it costs about 141 tokens; SKILL.md has 1,131 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~141
When it runs · the whole SKILL.md, loaded when a task matches
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteRuns commands with sudoSKILL.md:23
    # Linux without sudo (ensure ~/.local/bin is on PATH)

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from browser-use/browser-harness-js at commit 2d9a5ed, republished under its MIT licence (© browser-use). 1,131 words, ~3,290 tokens.

Download SKILL.mdSave it as .claude/skills/cdp/SKILL.md (or your agent's skills folder). This skill also uses 32 other files; get the full folder from GitHub.
name
cdp
description
Drive Chrome via the DevTools Protocol from JavaScript. Run JS snippets through the `browser-harness-js` CLI — it auto-spawns a long-lived bun HTTP server holding a fully-typed CDP `Session`, and every call (`browser-harness-js 'await session.Page.navigate(...)'`) executes against the same persistent connection. Session, active target, and globals survive across calls. Use when the user wants to automate, script, or inspect a Chrome browser via CDP — single tab or multi-tab, attach to existing Chrome or to a new one launched with --remote-debugging-port.

CDP — browser-harness-js skill

Custom codegen'd CDP SDK (every method from browser_protocol.json + js_protocol.json gets a typed wrapper) plus a tiny HTTP server that holds one persistent CDP Session. The browser-harness-js CLI auto-starts the server on first use and forwards JS snippets to it.

The SDK lives in the skill's sdk/ directory. In the rest of this doc, <skill-dir> refers to wherever npx skills add installed the skill (Claude Code: ~/.claude/skills/cdp; Cursor: ~/.cursor/skills/cdp; other agents vary). The CLI should be on PATH as browser-harness-js.

Setup (once, first use)

npx skills add drops the skill into your agent's skills directory but does NOT put the CLI on PATH. Before the first call, verify it's reachable and symlink it into any directory on your PATH if not:

bash
# macOS (Apple Silicon + Homebrew)
command -v browser-harness-js >/dev/null || ln -sf <skill-dir>/sdk/browser-harness-js /opt/homebrew/bin/browser-harness-js

# macOS (Intel) / most Linux — may need sudo
command -v browser-harness-js >/dev/null || ln -sf <skill-dir>/sdk/browser-harness-js /usr/local/bin/browser-harness-js

# Linux without sudo (ensure ~/.local/bin is on PATH)
command -v browser-harness-js >/dev/null || { mkdir -p ~/.local/bin && ln -sf <skill-dir>/sdk/browser-harness-js ~/.local/bin/browser-harness-js; }

The CLI auto-installs bun on first run if it's missing (the server is Bun-native). Set BROWSER_HARNESS_SKIP_BUN_INSTALL=1 to opt out.

How to use

Just run browser-harness-js '<JS>'. The first call spawns the server in the background; subsequent calls hit the same process and so reuse the same session, the same WebSocket to Chrome, and any globals you set.

bash
browser-harness-js 'await session.connect()'
browser-harness-js 'await session.Page.navigate({url:"https://example.com"})'
browser-harness-js '(await session.Runtime.evaluate({expression:"document.title",returnByValue:true})).result.value'

Output is the raw result content — no {ok,result} envelope.

Result typestdout
stringbare text, no JSON quotes (e.g. Example Domain)
number / boolean42, true
object / array (non-empty)compact JSON (e.g. {"frameId":"..."}, [1,2,3])
undefined / null / "" / {} / []empty (no output)

Errors go to stderr, exit code 1. The CDP error message and JS stack are printed verbatim, e.g.:

Error: CDP -32602: invalid params
    at _call (.../session.ts:117:33)
    ...

Detect failure with if browser-harness-js '...'; then ...; else handle_error; fi or by checking $?.

Multi-line snippets via stdin (heredoc). Important: a multi-statement snippet does NOT auto-return the last expression — write return X explicitly. Single-expression snippets passed as the first argument DO auto-return.

bash
browser-harness-js <<'EOF'
const tabs = await listPageTargets();
globalThis.tid = tabs[0].targetId;
await session.use(globalThis.tid);
return globalThis.tid;
EOF

CLI commands

CommandBehavior
browser-harness-js '<js>'Auto-start server if needed, eval the JS, print result.
browser-harness-js <<EOF…EOFSame, code from stdin.
browser-harness-js --statusPrint health JSON (uptime, connected, sessionId) or exit 1 if down.
browser-harness-js --startExplicit start (no-op if already running).
browser-harness-js --stopGraceful shutdown. Drops session state.
browser-harness-js --restartStop + start fresh.
browser-harness-js --logstail -f the server log (/tmp/browser-harness-js.log).

Env vars: CDP_REPL_PORT (default 9876), CDP_REPL_LOG (default /tmp/browser-harness-js.log).

API surface inside snippets

These globals are pre-loaded — no imports needed:

  • session — the persistent Session. Has every CDP domain mounted: session.Page, session.DOM, session.Runtime, session.Network, … 56 domains, 652 methods total.
  • listPageTargets() — list real page targets via CDP's Target.getTargets (works on Chrome 144+ too), with chrome:// and devtools:// URLs filtered out. No args — uses the connected session.
  • detectBrowsers() — scan OS-specific profile dirs for running Chromium-based browsers with remote debugging on. Returns [{name, profileDir, port, wsPath, wsUrl, mtimeMs}], sorted by most recently launched.
  • resolveWsUrl(opts) — resolve a WS URL from {wsUrl} | {port, host?} | {profileDir}. For the no-args auto-detect flow, call session.connect() directly instead.
  • CDP — the generated namespaces (CDP.Page, CDP.Runtime, …) for type-name reference.
Calling a CDP method

Every method takes a single object argument matching the CDP wire params; it resolves to the typed return value (no result envelope, no id correlation — handled for you).

js
// no params
await session.DOM.enable()

// required params
await session.Page.navigate({ url: 'https://example.com' })

// all-optional params (object also optional)
await session.Page.captureScreenshot()
await session.Page.captureScreenshot({ format: 'png', quality: 80 })

// returns are stripped to the typed shape
const { root } = await session.DOM.getDocument()
const { nodeId } = await session.DOM.querySelector({ nodeId: root.nodeId, selector: 'h1' })
Connecting

Default: just call session.connect() with no args. It auto-detects running Chromium-based browsers (Chrome, Chromium, Edge, Brave, Arc, Vivaldi, Opera, Comet, Canary) by scanning OS-specific profile dirs for a DevToolsActivePort file, ordered by most-recently-launched, and picks the first one whose WebSocket accepts. OS-agnostic — works on macOS, Linux, Windows.

js
await session.connect()   // auto-detect

Use detectBrowsers() first if you want to see what's available (or let the user pick) before connecting:

js
const found = await detectBrowsers()
// [{ name: 'Google Chrome', profileDir, port, wsPath, wsUrl, mtimeMs }, ...]

Explicit forms — use these only when auto-detect picks the wrong browser, or when you already know where to connect:

FormWhen to use
{ profileDir }Target a specific browser when several are running. Reads <profileDir>/DevToolsActivePort directly.
{ wsUrl }You already have ws://…/devtools/browser/<uuid> (e.g. piped from elsewhere).
js
await session.connect({ profileDir: '/Users/<you>/Library/Application Support/Google/Chrome' })
await session.connect({ wsUrl: 'ws://127.0.0.1:9222/devtools/browser/<uuid>' })

Profile paths by OS — use these with { profileDir }:

  • macOS: ~/Library/Application Support/<Browser> (e.g. Google/Chrome, Comet, BraveSoftware/Brave-Browser, Arc/User Data)
  • Linux: ~/.config/<browser> (e.g. google-chrome, chromium, BraveSoftware/Brave-Browser)
  • Windows: %LOCALAPPDATA%\<Browser>\User Data (e.g. Google\Chrome, Microsoft\Edge, BraveSoftware\Brave-Browser)

Per-candidate WS-open timeout defaults to 5s — live browsers answer with open/close within ~100ms, so 5s is already generous. The only case where 5s is too short is when Chrome is showing the Allow popup and waiting on the user to click. If you expect that, pass timeoutMs: 30000:

js
await session.connect({ profileDir: '/Users/<you>/Library/Application Support/Google/Chrome', timeoutMs: 30_000 })

If you see No detected browser accepted a connection — the browsers have DevToolsActivePort files but none are currently serving WS. Most common cause: remote-debugging is enabled but the user hasn't clicked Allow on the prompt yet. Tell them to click Allow, then retry (or bump timeoutMs).

Show full SKILL.md (442 more words)Show less
Picking a target (tab)

After connect(), call session.use(targetId) once; subsequent page-level calls (Page/DOM/Runtime/Network/etc.) auto-route to that target's sessionId. Browser.* and Target.* calls always hit the browser endpoint.

js
const tabs = await listPageTargets()                     // no args; uses the connected session
const sid  = await session.use(tabs[0].targetId)
await session.Page.enable()
await session.Page.navigate({ url: 'https://example.com' })

listPageTargets() uses CDP's Target.getTargets (not /json), so it works on Chrome 144+ too. It already filters out chrome:// and devtools:// URLs. Equivalent raw call:

js
const { targetInfos } = await session.Target.getTargets({})
const tabs = targetInfos.filter(t => t.type === 'page' && !t.url.startsWith('chrome://') && !t.url.startsWith('devtools://'))

To switch tabs: session.use(otherTargetId). To detach: session.setActiveSession(undefined).

Events
js
// Subscribe (returns an unsubscribe fn)
const off = session.onEvent((method, params, sessionId) => { ... })

// Or wait for a single matching event with optional predicate + timeout
await session.Network.enable()
const ev = await session.waitFor(
  'Page.frameNavigated',
  (p) => p.frame.url.includes('example.com'),
  10_000
)
Persisting state across calls

Each snippet runs inside its own async wrapper, so its let/const declarations vanish when it returns. To carry data forward, attach to globalThis:

bash
browser-harness-js '(await listPageTargets()).forEach((t,i)=>globalThis["tab"+i]=t.targetId)'
browser-harness-js 'await session.use(globalThis.tab0)'
browser-harness-js 'await session.Page.navigate({url:"https://example.com"})'

session itself, the active sessionId, and event subscribers are already preserved by the server — globals are only needed for ad-hoc data.

Connecting to a running Chrome (chrome://inspect flow)

When attaching to the user's already-running browser:

  1. Try await session.connect() first (no args) — auto-detect handles every Chromium-based browser via DevToolsActivePort. If it returns, you're done.
  2. If auto-detect fails with No running browser with remote debugging detected, the user needs to turn it on. Open the inspect page:
    bash
    # macOS — prefer AppleScript over `open -a` (reuses current profile, avoids the profile picker)
    osascript -e 'open location "chrome://inspect/#remote-debugging"'
    
    # Linux
    google-chrome 'chrome://inspect/#remote-debugging'     # or: chromium, google-chrome-stable
    
    # Windows (PowerShell)
    Start-Process chrome 'chrome://inspect/#remote-debugging'
    Only macOS's AppleScript path avoids the profile picker; Linux/Windows may prompt the user to pick a profile first.
  3. Tick "Discover network targets" in chrome://inspect, then click Allow when Chrome prompts.
  4. If auto-detect picks the wrong browser (multiple running, you want a specific one): list them with await detectBrowsers(), then await session.connect({ profileDir: <the one you want> }).
  5. If session.connect() returns No detected browser accepted a connection, the user has remote-debugging on but hasn't clicked Allow yet. Tell them to click it and retry, or pass timeoutMs: 30000 to wait for the click.

Working with targets (tabs)

  • Filter Chrome internals. listPageTargets() already drops chrome:// and devtools:// URLs. If you call Target.getTargets() directly, filter manually.
  • CDP target order ≠ visible tab-strip order. When the user says "the first tab I can see", use a screenshot or page title to identify it — Target.activateTarget only switches to a known targetId.

Looking up a method

The full typed surface is in <skill-dir>/sdk/generated.ts (~655 KB, only loaded if you read it). Each method has its CDP description as a JSDoc comment plus typed *Params / *Return interfaces in per-domain namespaces.

bash
grep -n "navigate" <skill-dir>/sdk/generated.ts | head

Regenerating the SDK

When the upstream protocol JSONs change, replace sdk/browser_protocol.json and/or sdk/js_protocol.json and re-run:

bash
cd <skill-dir>/sdk && bun gen.ts
browser-harness-js --restart   # pick up the new bindings

Files

All paths are relative to <skill-dir> (the install path — see top of this doc).

  • /usr/local/bin/browser-harness-js → <skill-dir>/sdk/browser-harness-js (the CLI)
  • sdk/repl.ts — HTTP server (Bun.serve on 127.0.0.1:9876)
  • sdk/session.ts — Session class (transport, connect, target routing, events)
  • sdk/generated.ts — codegen output: every CDP method as a typed wrapper
  • sdk/gen.ts — codegen script
  • sdk/{browser,js}_protocol.json — upstream protocol (vendored)

© browser-use, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 32 other files in the repository root of browser-use/browser-harness-js.

  • SKILL.md
  • .gitignore
  • LICENSE
  • README.md
  • docs/setup-remote-debugging.png
  • interaction-skills/connection.md
  • interaction-skills/cookies.md
  • interaction-skills/cross-origin-iframes.md
  • interaction-skills/dialogs.md
  • interaction-skills/downloads.md
  • interaction-skills/drag-and-drop.md
  • interaction-skills/dropdowns.md
  • interaction-skills/iframes.md
  • interaction-skills/network-requests.md
  • interaction-skills/print-as-pdf.md
  • interaction-skills/screenshots.md
  • interaction-skills/scrolling.md
  • interaction-skills/shadow-dom.md
  • interaction-skills/tabs.md
  • … and 14 more

Open the folder on GitHubat commit 2d9a5ed

Compare with similar skills

Cdp next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Cdp compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cdp this skillbrowser-use/browser-harness-js489—~3.3kAutomated safety check: NotesMIT
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT
@pierre/diffs Code Renderingpierrecomputer/pierre6.2k2 repos~803Automated safety check: PassApache-2.0
Install Anti-Slop Oxlint Rulesdmmulroy/anti-slop5.2k—~2.2kAutomated safety check: PassMIT
Generate Release Notesteambit/bit18k—~2.2kAutomated safety check: PassCustom licence
Pnpm Engineteambit/bit18k—~1.9kAutomated safety check: PassCustom licence

Similar skills

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed
  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed
  • Installs, updates or migrates the vendored anti-slop Oxlint plugin in a repository, keeping local rule changes and the plugin's license and provenance files.

    5.2k GitHub stars~2.2k tokensUpdated 27 days ago
    DevelopmentAuto-check passed
  • Generate comprehensive release notes for Bit from git commits and pull requests.

    18k GitHub stars~2.2k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Pnpm Engine

    teambit/bit

    Work on the pnpm Rust engine (@pnpm/napi, the pacquet crates) that bit install runs through.

    18k GitHub stars~1.9k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Moves a legacy internal Ghost package from JavaScript and CommonJS to TypeScript and ESM in three focused commits that keep git file history intact.

    55k GitHub stars~1.2k tokensUpdated today
    DevelopmentAuto-check passed

Works with

Categories

Questions about Cdp

What does Cdp do?

Drive Chrome via the DevTools Protocol from JavaScript. An agent skill from browser-use/browser-harness-js. Cdp is an agent skill from browser-use/browser-harness-js. Drive Chrome via the DevTools Protocol from JavaScript.

When should I use Cdp?

Cdp fits situations like: the user wants to automate; inspect a Chrome browser via CDP — single tab; attach to existing Chrome; A new one launched with --remote-debugging-port.

How do I install Cdp in Claude Code?

Run `npx skills add browser-use/browser-harness-js --skill cdp -a claude-code`. Or copy the skill folder (the browser-use/browser-harness-js repository) into .claude/skills/cdp in your project. Claude Code loads it when a task matches its description.

How do I install Cdp in Codex?

Run `npx skills add browser-use/browser-harness-js --skill cdp -a codex`. Or copy the skill folder (the browser-use/browser-harness-js repository) into .agents/skills/cdp in your project. Codex loads it when a task matches its description.

Can I use Cdp in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add browser-use/browser-harness-js --skill cdp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cdp, .gemini/skills/cdp, .github/skills/cdp and .opencode/skills/cdp in your project.

What does Cdp need to run?

Going by SKILL.md and its folder, Cdp needs the command-line tools its instructions call (npx, osascript and bun). Our summary lists: Node.js.

Does Cdp access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Cdp safe to install?

Our automated static check of SKILL.md found notes only (runs commands with sudo), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Cdp use?

Cdp is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Cdp use?

About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Cdp?

Skills that share tags, products or a category with Cdp: Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars), @pierre/diffs Code Rendering (pierrecomputer/pierre, 6.2k stars), Install Anti-Slop Oxlint Rules (dmmulroy/anti-slop, 5.2k stars) and Generate Release Notes (teambit/bit, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cdp?

browser-use (a GitHub organization) maintains it in browser-use/browser-harness-js, which has 489 GitHub stars. The repository was last updated on August 30, 2026.

Source: browser-use/browser-harness-js on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.