browser-tools
Interactive browser automation via Chrome DevTools Protocol. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.
By badlogic · 433 installs
npx skills add badlogic/pi-skills --skill browser-tools
Source repository · Upstream listing
Browser Tools
Chrome DevTools Protocol tools for agent assisted web automation. These tools connect to Chrome running on :9222 with remote debugging enabled.
Setup
Run once before first use:
Start Chrome
Launch Chrome with remote debugging on :9222 . Use profile to preserve user's authentication state.
Navigate
Navigate to URLs. Use new flag to open in a new tab instead of reusing current tab.
Evaluate JavaScript
Execute JavaScript in the active tab. Code runs in async context. Use this to extract data, inspect page state, or perform DOM operations programmatically.
Screenshot
Capture current viewport and return temporary file path. Use this to visually inspect page state or verify UI changes.
Pick Elements
IMPORTANT : Use this tool when the user wants to select specific DOM elements on the page. This launches an interactive picker that lets the user click elements to select them. The user can select multiple elements (Cmd/Ctrl+Click) and press Enter when done. The tool returns CSS selectors for the selected elements.
Common use cases:
User says "I want to click that button" → Use this tool to let them select it
User says "extract data from these items" → Use this tool to let them select the elements
When you need specific selectors but the page structure is complex or ambiguous
Cookies
Display all cookies for the current tab including domain, path, httpOnly, and secure flags. Use this to debug authentication issues or inspect session state.
Extract Page Content
Navigate to a URL and extract readable content as markdown. Uses Mozilla Readability for article extraction and Turndown for HTML to markdown conversion. Works on pages with JavaScript content (waits for page to load).
When to Use
Testing frontend code in a real browser
Interacting with pages that require JavaScript
When user needs to visually see or interact with a page
Debugging authentication or session issues
Scraping dynamic content that requires JS execution
Efficiency Guide
DOM Inspection Over Screenshots
Don't take screenshots to see page state. Do parse the DOM directly:
Complex Scripts in Single Calls
Wrap everything in an IIFE to run multi statement code:
Batch Interactions
Don't make separate calls for each click. Do batch them:
Typing/Input Sequences
Reading App/Game State
Extract structured state in one call:
Waiting for Updates
If DOM updates after actions, add a small delay with bash:
Investigate Before Interacting
Always start by understanding the page structure:
Then target specific elements based on what you find.