browser-use/browser-harness-js32 files

Cdp

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.

Specification
Skill ID
browser-use/browser-harness-js/cdp
Publisher
browser-use
Repository
browser-harness-js
Installs
0
Files
32
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

browser-use/browser-harness-js/cdpInstalls these files
  • .gitignore
  • LICENSE
  • README.md
  • SKILL.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
  • interaction-skills/uploads.md
  • interaction-skills/viewport.md
  • sdk/browser-harness-js
  • sdk/browser_protocol.json
  • sdk/bun.lock
  • sdk/gen.ts
  • sdk/generated.ts
  • sdk/js_protocol.json
  • sdk/package.json
  • sdk/repl.ts
  • sdk/session.test.ts
  • sdk/session.ts
  • sdk/tsconfig.json

What this skill tells the agent

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:

# 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.

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.

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).

// 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.

await session.connect()   // auto-detect

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

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).
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:

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).

Picking a target (tab)

Use this skill in a project

Open any RiverX project, search the Skills panel for browser-use/browser-harness-js/cdp, and install it in one click.

Use this skill