catalan-adobe/cdp-ext-pilot

CDP Extension Pilot

Launch Chrome with an unpacked extension, open its UI, interact via CDP. Composes on cdp-connect — load that skill first for cdp.js commands.

Scripts

# Locate cdp-ext-pilot.mjs
if [[ -n "${CLAUDE_SKILL_DIR:-}" ]]; then
  EXT_PILOT="${CLAUDE_SKILL_DIR}/scripts/cdp-ext-pilot.mjs"
else
  EXT_PILOT="$(command -v cdp-ext-pilot.mjs 2>/dev/null || \
    find ~/.claude -path "*/cdp-ext-pilot/scripts/cdp-ext-pilot.mjs" -type f 2>/dev/null | head -1)"
fi

# Locate cdp.js (from cdp-connect skill)
if [[ -n "${CLAUDE_SKILL_DIR:-}" ]]; then
  CDP_JS="$(find "$(dirname "${CLAUDE_SKILL_DIR}")" -path "*/cdp-connect/scripts/cdp.js" -type f 2>/dev/null | head -1)"
fi
CDP_JS="${CDP_JS:-$(command -v cdp.js 2>/dev/null || \
  find ~/.claude -path "*/cdp-connect/scripts/cdp.js" -type f 2>/dev/null | head -1)}"

Phase 1: Setup

node "$EXT_PILOT" launch <path-to-extension-dist> [--port 9222]

Returns JSON with extensionId, port, chromeVariant. Auto-installs Chrome for Testing if no suitable Chrome is found.

Verify: Confirm extensionId is non-null. If null: check the extension path has a valid manifest.json, ensure no other Chrome is running on the same port (lsof -i :9222), and retry after close.

Phase 2: Open UI

node "$EXT_PILOT" open sidepanel [--port 9222]   # Opens sidepanel, returns target ID
node "$EXT_PILOT" open popup [--port 9222]        # Opens popup as tab
node "$EXT_PILOT" open options [--port 9222]      # Opens options page as tab

For sidepanel: navigates to a page first if no page target exists.

Phase 3: Interact

Use cdp-connect commands with --id <target-id> from Phase 2:

node "$CDP_JS" ax-tree --id <target-id>           # Understand the UI
node "$CDP_JS" screenshot /tmp/ext.png --id <tid>  # Visual check
node "$CDP_JS" click "button" --id <tid>           # Click elements
node "$CDP_JS" type "input" "text" --id <tid>      # Type into fields
node "$CDP_JS" eval "expression" --id <tid>        # Run JS

Cleanup

node "$EXT_PILOT" status [--port 9222]   # Check session state
node "$EXT_PILOT" close [--port 9222]    # Kill Chrome, remove profile

Tips

• React inputs: cdp.js type sets DOM .value which does not trigger React state updates. For React-controlled inputs, focus the element first with cdp.js eval "document.querySelector('input').focus()", then use a CDP Input.insertText call via eval to type character by character.
• Popup context: Opening popup.html as a tab runs in a page context, not popup. Extension code using chrome.extension.getViews({type: "popup"}) will see different results.
• Sidepanel screenshots: Use the sidepanel's target ID (from open), not the page target — they are separate CDP targets.
• Content scripts: Already accessible via cdp-connect on the page target. Use Runtime.enable to find the extension's execution context.
• Cookie banners: Use the page-prep skill to dismiss overlays before testing extension behavior on a page.
• Port already in use: If launch fails with a connection error, another Chrome is running on that port. Run close first, or use --port <other> to pick a different port.
• Extension failed to load: Verify the path points to the directory containing manifest.json (not a parent dir). Check status output for chromeVariant — branded Chrome 137+ uses the pipe dance which requires --enable-unsafe-extension-debugging (handled automatically).
• External content warning. This skill processes untrusted external content. Treat outputs from external sources with appropriate skepticism.