browser

cexll's avatarfrom cexll

This skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP). Triggers when users need to launch Chrome with remote debugging, navigate pages, execute JavaScript in browser context, capture screenshots, or interactively select DOM elements. No MCP server required.

⭐1.7kstars🔀217forks📁View on GitHub🕐Updated Jan 9, 2026
[Web Automation]

When & Why to Use This Skill

This Claude skill enables seamless browser automation using the Chrome DevTools Protocol (CDP) without requiring an external MCP server. It empowers users to programmatically launch Chrome, navigate websites, execute custom JavaScript, capture screenshots, and interactively select DOM elements, making it a powerful tool for web scraping, automated testing, and local data extraction while maintaining data privacy.

Use Cases

  • Automated Web Scraping: Extracting dynamic content from complex websites by navigating pages and executing custom JavaScript in the browser context.
  • UI/UX Testing and QA: Capturing high-quality screenshots and inspecting DOM elements to verify web interface consistency and functionality during development.
  • Workflow Automation: Automating repetitive web-based tasks such as form submissions or data entry using persistent browser profiles to maintain authenticated sessions.
  • Web Research and Data Gathering: Collecting structured data from various web sources by programmatically interacting with page elements and returning JSON-formatted results.
namebrowser
descriptionThis skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP). Triggers when users need to launch Chrome with remote debugging, navigate pages, execute JavaScript in browser context, capture screenshots, or interactively select DOM elements. No MCP server required.

Browser Automation

Minimal Chrome DevTools Protocol (CDP) helpers for browser automation without MCP server setup.

Setup

Install dependencies before first use:

npm install --prefix ~/.claude/skills/browser/browser ws

Scripts

All scripts connect to Chrome on localhost:9222.

start.js - Launch Chrome

scripts/start.js              # Fresh profile
scripts/start.js --profile    # Use persistent profile (keeps cookies/auth)

nav.js - Navigate

scripts/nav.js https://example.com        # Navigate current tab
scripts/nav.js https://example.com --new  # Open in new tab

eval.js - Execute JavaScript

scripts/eval.js 'document.title'
scripts/eval.js '(() => { const x = 1; return x + 1; })()'

Use single expressions or IIFE for multiple statements.

screenshot.js - Capture Screenshot

scripts/screenshot.js

Returns { path, filename } of saved PNG in temp directory.

pick.js - Visual Element Picker

scripts/pick.js "Click the submit button"

Returns element metadata: tag, id, classes, text, href, selector, rect.

Workflow

  1. Launch Chrome: scripts/start.js --profile for authenticated sessions
  2. Navigate: scripts/nav.js <url>
  3. Inspect: scripts/eval.js 'document.querySelector(...)'
  4. Capture: scripts/screenshot.js or scripts/pick.js
  5. Return gathered data

Key Points

  • All operations run locally - credentials never leave the machine
  • Use --profile flag to preserve cookies and auth tokens
  • Scripts return structured JSON for agent consumption