pi install git:github.com/pasky/chrome-cdp-skill@v1.0.1

git clone https://github.com/pasky/chrome-cdp-skill
# Copy the skills/chrome-cdp/ directory to wherever your agent loads context from

export CDP_PORT_FILE=/path/to/DevToolsActivePort

node scripts/cdp.mjs list
# Output:
# A1B2C3  https://github.com/pasky/chrome-cdp-skill  chrome-cdp-skill
# D4E5F6  https://mail.google.com/mail/u/0/           Gmail

node scripts/cdp.mjs shot A1B2
# Saves screenshot to runtime dir, prints the file path

node scripts/cdp.mjs snap A1B2
# Returns compact, semantic accessibility tree — best for understanding page structure

node scripts/cdp.mjs html A1B2                    # full page HTML
node scripts/cdp.mjs html A1B2 ".main-content"    # scoped to CSS selector
node scripts/cdp.mjs html A1B2 "#article-body"    # scoped to ID

node scripts/cdp.mjs eval A1B2 "document.title"
node scripts/cdp.mjs eval A1B2 "window.location.href"
node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('a').length"

node scripts/cdp.mjs nav A1B2 https://example.com
# Navigates and waits for page load

node scripts/cdp.mjs net A1B2
# Shows network resource timing for the current page

node scripts/cdp.mjs click A1B2 "button.submit"
node scripts/cdp.mjs click A1B2 "#login-btn"
node scripts/cdp.mjs click A1B2 "[data-testid='confirm']"

node scripts/cdp.mjs clickxy A1B2 320 480
# Clicks at CSS pixel coordinates (x=320, y=480)

node scripts/cdp.mjs type A1B2 "Hello, world!"
# Types at the currently focused element — works in cross-origin iframes

node scripts/cdp.mjs loadall A1B2 "button.load-more"
# Keeps clicking the selector until it disappears from the DOM

node scripts/cdp.mjs open
node scripts/cdp.mjs open https://example.com
# Note: triggers Chrome's "Allow" prompt

node scripts/cdp.mjs stop          # stop all daemons
node scripts/cdp.mjs stop A1B2     # stop daemon for specific tab

node scripts/cdp.mjs evalraw A1B2 "Page.getFrameTree"
node scripts/cdp.mjs evalraw A1B2 "Runtime.evaluate" '{"expression":"1+1"}'

# List tabs to find your target
node scripts/cdp.mjs list

# Grab the accessibility tree for a semantic view
node scripts/cdp.mjs snap D4E5

# Or get scoped HTML for a specific section
node scripts/cdp.mjs html D4E5 ".email-list"

# Click the input field
node scripts/cdp.mjs click A1B2 "input[name='search']"

# Type into it
node scripts/cdp.mjs type A1B2 "my search query"

# Click submit
node scripts/cdp.mjs click A1B2 "button[type='submit']"

# Take a screenshot to verify result
node scripts/cdp.mjs shot A1B2

# Get all link hrefs on a page
node scripts/cdp.mjs eval A1B2 "Array.from(document.querySelectorAll('a')).map(a => a.href)"

# Get text content of a specific element
node scripts/cdp.mjs eval A1B2 "document.querySelector('.price').textContent.trim()"

# Get table data as JSON
node scripts/cdp.mjs eval A1B2 "
  Array.from(document.querySelectorAll('table tr')).map(row =>
    Array.from(row.querySelectorAll('td,th')).map(cell => cell.textContent.trim())
  )
"

# Navigate and then immediately read the page
node scripts/cdp.mjs nav A1B2 https://news.ycombinator.com
node scripts/cdp.mjs snap A1B2

# Keep loading content until "Load More" button disappears
node scripts/cdp.mjs loadall A1B2 "button[data-action='load-more']"

# Then extract all loaded content
node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('.item').length"

import { execFile } from 'node:child_process';
import { promisify } from 'node:util';

const exec = promisify(execFile);
const CDP = (...args) => exec('node', ['scripts/cdp.mjs', ...args]);

async function getPageTitle(tabPrefix) {
  const { stdout } = await CDP('eval', tabPrefix, 'document.title');
  return stdout.trim();
}

async function takeScreenshot(tabPrefix) {
  const { stdout } = await CDP('shot', tabPrefix);
  return stdout.trim(); // returns file path
}

async function navigateAndSnap(tabPrefix, url) {
  await CDP('nav', tabPrefix, url);
  const { stdout } = await CDP('snap', tabPrefix);
  return stdout;
}

// Usage
const tabs = (await CDP('list')).stdout;
console.log(tabs);

# macOS Chrome example
export CDP_PORT_FILE="$HOME/Library/Application Support/Google/Chrome/Default/DevToolsActivePort"

# Linux Chrome example
export CDP_PORT_FILE="$HOME/.config/google-chrome/Default/DevToolsActivePort"