browsing

Automate Chrome DevTools Protocol sessions for navigation, forms, and extraction.

339|52|Updated Oct 18, 2025
One-click install
npx skills add https://github.com/obra/superpowers-chrome --skill browsing-obra
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browsing
Source: https://github.com/obra/superpowers-chrome/tree/main/skills/browsing
Command: npx skills add https://github.com/obra/superpowers-chrome --skill browsing-obra

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables programmatic browser control via the Chrome DevTools Protocol, letting you automate navigation, form interactions, content extraction, and multi-tab workflows from Claude Code, dramatically reducing manual browsing time.

Core Features & Use Cases

  • Multi-tab management: Open, switch, and close tabs without manual clicking.
  • Form automation & data extraction: Fill inputs, click controls, and pull HTML/text/attributes.
  • SPA navigation & DOM captures: Navigate without full page reloads and capture DOM snapshots, markdown, and screenshots for auditing.
  • Use Case: Validate a multi-step user journey across several pages and export a summary for QA.

Quick Start

  • Start Chrome via the CLI tool (auto-starts on first use) and connect to a page.
  • Navigate to a page: {action: "navigate", payload: "https://example.com"}
  • Wait for content: {action: "await_element", selector: "h1"} or {action: "wait-text", payload: "Example"}.
  • Extract content: {action: "extract", payload: "text", selector: "h1"}

Frequently Asked Questions about browsing

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

FAQPage Schema
How do I automate browser tasks using Chrome DevTools Protocol?

Chrome DevTools Protocol (CDP) enables programmatic browser control through a zero-dependency client. Use action primitives like navigate, await_element, click, and fill to automate navigation, form interactions, and multi-tab workflows directly from your code without manual clicking.

Can I automate form filling and data extraction across multiple browser tabs?

Yes. Multi-tab management lets you open, switch, and close tabs programmatically while filling forms with the fill action, clicking controls, and extracting HTML, text, and attributes via extract and attr actions across authenticated contexts.

How do I capture and extract content from single-page applications?

Navigate SPAs using the navigate action without full page reloads, then wait for DOM updates with await_element or wait-text. Extract DOM snapshots, markdown, and screenshots using extract, html, and screenshot actions for auditing and validation.

What's the best way to validate multi-step user journeys programmatically?

Automate browser control to step through page sequences, using await_element to confirm each stage loads, fill and click to interact with forms, and extract to pull verification data. Export results as a summary for QA without manual browser navigation.

Do I need to install dependencies or manage a separate CDP server?

No. This Skill implements a zero-dependency CDP client that auto-starts Chrome on first use and connects directly. No external dependencies or manual server setup required—Chrome launches automatically in headless or headed mode.

Can I use browser automation for testing authenticated workflows?

Yes. Multi-tab management supports authenticated contexts in both headless and headed modes. Navigate through login flows, fill credentials, and validate subsequent pages while maintaining session state across tabs and requests.