browser_skill

Overview

This skill automates Chrome via the Chrome DevTools Protocol (CDP) for local browser tasks like launching Chrome with remote debugging, navigating pages, running in-browser JavaScript, capturing screenshots, and selecting DOM elements visually. It is designed to run entirely on the local machine with no MCP server required and returns structured JSON suited for multi-agent workflows. Use it when you need reliable, scriptable browser interactions with preserved sessions via a persistent profile.

How this skill works

The skill starts a Chrome instance listening on localhost:9222 and connects over WebSocket to CDP. It exposes small scripts to start Chrome (fresh or persistent profile), navigate tabs, evaluate expressions in page context, capture screenshots, and run a visual element picker that returns DOM metadata. Each script communicates with Chrome directly, runs the requested action, and returns structured JSON describing results such as file paths, element selectors, or evaluation values.

When to use it

• Automate site navigation and data retrieval where real browser rendering is required
• Run JavaScript in page context to read or mutate DOM, cookies, or localStorage
• Capture screenshots of pages or specific states for reporting and visual regression
• Select UI elements interactively to obtain robust CSS selectors and element metadata
• Preserve authenticated sessions using a persistent profile to access protected content

Best practices

• Start Chrome with --profile when you need to reuse cookies or auth tokens between runs
• Use single expressions or IIFE when passing multi-statement code to the eval script to ensure correct return values
• Keep Chrome and the skill dependencies up to date to avoid CDP protocol mismatches
• Validate returned selectors and rects from the picker in a headless or CI environment before automating clicks
• Store screenshots from the returned temp path immediately if you need long-term archival

Example use cases

• Log into a web app once with --profile and automate authenticated scraping or form submissions
• Run eval.js to extract page metadata (title, meta tags, or computed values) and feed those into downstream agents
• Use screenshot.js to capture visual evidence for bug reports or QA checks during CI runs
• Use pick.js to identify a stable selector for an automated click or fill action in a follow-up script
• Open multiple tabs with nav.js --new to parallelize inspection of pages before aggregating results