browser
Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements.
When & Why to Use This Skill
This Claude skill provides a lightweight yet powerful suite of Chrome DevTools Protocol (CDP) tools designed for seamless browser automation and web scraping. It enables AI agents to programmatically control Chrome, navigate complex web pages, execute custom JavaScript, capture visual screenshots, and interactively select DOM elements, making it an essential bridge between LLMs and the live web for real-time data retrieval and task execution.
Use Cases
- Web Scraping and Data Extraction: Effortlessly navigate to websites and execute JavaScript to extract structured data from dynamic or single-page applications (SPAs).
- Automated UI Testing and QA: Capture high-quality screenshots and evaluate page states to verify frontend behavior, layout consistency, and functional performance.
- Interactive Element Mapping: Use the visual element picker to identify specific DOM nodes, enabling precise interaction for complex web-based workflows.
- Authenticated Session Automation: Utilize existing Chrome profiles to perform automated tasks on websites that require persistent logins, cookies, and user sessions.
| name | browser |
|---|---|
| description | Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements. |
Browser Tools
Minimal CDP tools for collaborative site exploration and scraping.
IMPORTANT: All scripts are located in ~/.factory/skills/browser/ and must be called with full paths.
Start Chrome
~/.factory/skills/browser/start.js # Fresh profile
~/.factory/skills/browser/start.js --profile # Copy your profile (cookies, logins)
Start Chrome on :9222 with remote debugging.
Navigate
~/.factory/skills/browser/nav.js https://example.com
~/.factory/skills/browser/nav.js https://example.com --new
Navigate current tab or open new tab.
Evaluate JavaScript
~/.factory/skills/browser/eval.js 'document.title'
~/.factory/skills/browser/eval.js 'document.querySelectorAll("a").length'
Execute JavaScript in active tab (async context).
IMPORTANT: The code must be a single expression or use IIFE for multiple statements:
- Single expression:
'document.title' - Multiple statements:
'(() => { const x = 1; return x + 1; })()' - Avoid newlines in the code string - keep it on one line
Screenshot
~/.factory/skills/browser/screenshot.js
Screenshot current viewport, returns temp file path.
Pick Elements
~/.factory/skills/browser/pick.js "Click the submit button"
Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.
Usage Notes
- Start Chrome first before using other tools
- The
--profileflag syncs your actual Chrome profile so you're logged in everywhere - JavaScript evaluation runs in an async context in the page
- Pick tool allows you to visually select DOM elements by clicking on them