skills.rest
legout
legoutCOMMUNITY
Explore all skills by this author →
𝕏@lignol23GitHub

chrome-cdp

Control local Chrome tabs via the Chrome DevTools Protocol for UI automation and data extraction.

3|Updated Apr 2, 2026
Search Tags:#automation#debugging#cdp#chrome#browser#web-scraping
One-click install
npx skills add https://github.com/legout/pi-config --skill chrome-cdp-legout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-cdp
Source: https://github.com/legout/pi-config/tree/main/installed-skills/chrome-cdp
Command: npx skills add https://github.com/legout/pi-config --skill chrome-cdp-legout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill solves the difficulty of programmatically interacting with complex, dynamic web pages that require browser-level control, such as clicking elements, taking screenshots, or extracting accessibility trees, without the overhead of heavy automation frameworks.

Core Features & Use Cases

  • Browser Interaction: Perform clicks, text input, and navigation directly on open Chrome tabs.
  • Data Extraction: Capture full accessibility trees or specific HTML elements for analysis.
  • Visual Capture: Take high-resolution screenshots of the current viewport with automatic coordinate mapping.
  • Use Case: Use this to automate data collection from a web dashboard that requires login or complex state, or to debug UI elements by inspecting the accessibility tree.

Quick Start

Use the chrome-cdp skill to take a screenshot of the page with target ID 6BE827FA and save it to the current directory.

Frequently Asked Questions about chrome-cdp

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

FAQPage Schema
How do I control Chrome tabs via DevTools Protocol for web scraping?▼

You can control Chrome tabs via DevTools Protocol by connecting to a local Chrome instance with remote debugging enabled to perform automated UI tasks and data extraction without heavy automation frameworks.

Do I need Node.js to interact with the Chrome DevTools Protocol?▼

Yes, you need Node.js 22+ for WebSocket communication to interact with the Chrome DevTools Protocol and programmatically control open browser tabs for debugging and testing workflows.

What's the best way to extract an accessibility tree from a dynamic web page?▼

The best way to extract an accessibility tree is by using Chrome DevTools Protocol to directly capture full accessibility trees or specific HTML elements from open Chrome tabs for analysis.

Can I take a screenshot of a specific Chrome tab using CDP?▼

Yes, you can take high-resolution screenshots of the current viewport using Chrome DevTools Protocol with automatic coordinate mapping by targeting a specific tab ID in your automation script.

Why use Chrome DevTools Protocol instead of a heavy browser automation framework?▼

Chrome DevTools Protocol provides direct programmatic control over open browser tabs for clicking elements and data extraction, avoiding the overhead associated with deploying heavy automation frameworks.

Does this Chrome DevTools Protocol automation work with pages that require login?▼

Yes, it works with pages requiring login or complex state by interacting directly with local Chrome browser sessions that are already open and authenticated, enabling seamless automated data collection.

Related Skills

Explore More Software Engineering Skills→
sero-labssero-labs
19

chrome-cdp

Control local Chrome browser sessions via the Chrome DevTools Protocol.

Official
Intermediate
lihanghanglihanghang

insightdoc

Convert PDFs and images into MD, HTML, or DOCX via the InsightDoc API.

Community
Intermediate
mraakashshahmraakashshah
5

agent-browser

Automate web browser navigation, form submission, and data extraction.

Community
Intermediate
browser-usebrowser-use
615

browser-use-terminal

Automate browser tasks via Python scripts and direct CDP control of Chrome.

Official
Advanced