DOCSEARCHbyAlgolia
Submit Docs

chrome-cdp

repository·main·Indexed 25 days ago

https://github.com/pasky/chrome-cdp-skill

A tool and pi skill that allows AI agents to interact with a user's live Chrome session instead of isolated browser instances. It provides a CLI for managing open tabs, taking screenshots, capturing accessibility trees, evaluating JavaScript, and performing browser actions like clicking and typing. Requires Node.js 22+ and remote debugging enabled in the browser.

Tokens
1.5K
Snippets
6
Records
10
Agent score
35%

What's inside chrome-cdp

  1. Enable remote debugging in Chrome

    main

    To use chrome-cdp, you must enable remote debugging in your browser (Chrome, Chromium, Brave, Edge, or Vivaldi).

    1. Open chrome://inspect/#remote-debugging in your browser.
    2. Toggle the switch to enable remote debugging.

    Prerequisites:

    • Node.js 22+ is required.
    • If your browser's DevToolsActivePort is in a non-standard location, set the CDP_PORT_FILE environment variable to its full path.

  3. Input text in cross-origin iframes

    main

    To enter text into cross-origin iframes, do not use eval. Instead, use the type command. You should typically use click or clickxy to focus the element first, then use type to input the text.

    # Example workflow for iframes:
scripts/cdp.mjs click <target> <selector>
scripts/cdp.mjs type <target> <text>

  4. Install chrome-cdp for other agents (Amp, Claude Code, Cursor, etc.)

    main

    To use this with other AI agents, clone or copy the skills/chrome-cdp/ directory into your agent's skill or context directory.

    Requirements:

    • Node.js 22+
    • No npm install is required.

    Configuration: If your browser stores the DevToolsActivePort file in a non-standard location, set the CDP_PORT_FILE environment variable to the full path of that file.

  5. Reference: chrome-cdp CLI commands

    main

    A complete list of available commands for interacting with Chrome via the CDP CLI.

    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)

  7. Take a screenshot of a page

    main

    Capture the current viewport of a specific target.

    • The command captures the viewport only. To capture content below the fold, use eval to scroll first.
    • The output includes the page's Device Pixel Ratio (DPR).
    • The default filename is screenshot-<target>.png in the runtime directory.

    Note on Coordinates: shot saves an image at native resolution where image pixels = CSS pixels × DPR. When using commands like clickxy, you must use CSS pixels. CSS px = screenshot image px / DPR.

    scripts/cdp.mjs shot <target> [file]

  9. Use the chrome-cdp CLI

    main

    The scripts/cdp.mjs script provides a CLI to interact with your live Chrome session. Commands require a <target>, which is a unique prefix of the targetId obtained from the list command.

    Available Commands

    CommandArgumentDescription
    list(none)List all open tabs
    shot<target>Take a screenshot to the runtime directory
    snap<target>Get a compact, semantic accessibility tree
    html<target> [ ".selector" ]Get full HTML or HTML scoped to a CSS selector
    eval<target> "expression"Evaluate JavaScript in the page context
    nav<target> https://...Navigate to a URL and wait for load
    net<target>Get network resource timing
    click<target> "selector"Click an element by CSS selector
    clickxy<target> <x> <y>Click at specific CSS pixel coordinates
    type<target> "text"Type text at the focused element (supports cross-origin iframes)
    loadall<target> "selector"Click a "load more" element repeatedly until it disappears
    evalraw<target> <method> [json]Pass through a raw CDP command
    open[url]Open a new tab (triggers an 'Allow' prompt in Chrome)
    stop[target]Stop the daemon(s) for the specified target

    Note: Daemons auto-exit after 20 minutes of inactivity.

  10. Evaluate JavaScript on a page

    main

    Execute JavaScript expressions within the context of a target.

    Warning: Avoid index-based selection (e.g., querySelectorAll(...)[i]) across multiple eval calls if the DOM might change between calls (such as after a click event that shifts indices). Use stable selectors or collect all necessary data in a single eval call.

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