chrome-cdp

Inspect and control local Chrome tabs via the DevTools Protocol over WebSocket.

1|Updated Oct 11, 2025
One-click install
npx skills add https://github.com/ibytechaos/claude --skill chrome-cdp-ibytechaos
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-cdp
Source: https://github.com/ibytechaos/claude/tree/main/plugins/chrome-cdp/skills/chrome-cdp
Command: npx skills add https://github.com/ibytechaos/claude --skill chrome-cdp-ibytechaos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Debugging or interacting with pages already open in your local Chrome browser normally requires heavy automation frameworks like Puppeteer that launch their own browser instance. This Skill connects directly to your running Chrome session over the Chrome DevTools Protocol, letting you inspect, screenshot, and interact with any of 100+ open tabs without restarting the browser or losing session state. ## Core Features & Use Cases - Page Inspection: List open tabs, capture viewport screenshots with DPR coordinate mapping, dump accessibility tree snapshots, and extract full or selector-scoped HTML. - Browser Interaction: Navigate to URLs, click elements by CSS selector or CSS-pixel coordinates, type text (including into cross-origin iframes), and auto-click "load more" buttons until content is exhausted. - Script Evaluation & Raw CDP: Run arbitrary JavaScript in page context and send raw CDP commands for anything not covered by built-in commands. - Use Case: You are debugging a logged-in dashboard open in Chrome. Ask the AI to list tabs, snapshot the accessibility tree to find a failing button, screenshot the result, and evaluate a JS expression to inspect application state — all without leaving your existing session. ## Quick Start Ask the AI to list my open Chrome tabs and take a screenshot of the one showing my dashboard, making sure Chrome was launched with --remote-debugging-port=9222.

Frequently Asked Questions about chrome-cdp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect to an already open Chrome tab for debugging?

Launch Chrome with --remote-debugging-port=9222, then run the list command to see open pages with unique target prefixes. Pass a prefix to commands like snap, shot, or eval to interact with that specific tab.

How to use Chrome DevTools Protocol without Puppeteer?

This CLI speaks raw CDP over a WebSocket using Node.js 22 built-in WebSocket and fetch, so no Puppeteer dependency is needed. The evalraw command sends any arbitrary CDP method such as DOM.getDocument directly.

Why do screenshot coordinates not match click positions?

Screenshots are saved at native resolution where image pixels equal CSS pixels times the device pixel ratio. Divide screenshot coordinates by the DPR printed by the shot command to get CSS pixels for clickxy.

Can I type text into cross-origin iframes in Chrome?

Yes, the type command uses Input.insertText which works in cross-origin iframes where eval-based approaches fail. Focus the field first with click or clickxy, then send the text.

Why does Chrome show an Allow debugging prompt?

Chrome shows the modal once per tab on first CDP access as a security measure. A background daemon keeps the session alive afterward, so subsequent commands need no further approval, and daemons exit after 20 minutes idle.