browser-tools
Browser Tools Skill
Use these scripts to control an existing Chrome/Chromium instance via the DevTools protocol. All commands share the flags --json, --quiet, --port=<number> (default 9222), --host=<host>, --ws=<ws-endpoint>, and --timeout=<ms>. When --json is omitted, machine-readable results are still emitted to STDOUT; human-readable logs go to STDERR.
| Script | Purpose | Key Flags | JSON Output Snapshot |
|---|---|---|---|
scripts/start.js |
Launch Chrome with remote debugging and optional profile sync. | --profile[=path], --chrome-path=<path>, --user-data-dir=<path> |
{ ok, port, userDataDir, chromePath, profile } |
scripts/navigate.js |
Open a URL in the active tab or a new one. | <url>, --new, `--wait=domcontentloaded |
networkidle0 |
scripts/screenshot.js |
Capture full page or element screenshots. | --element=<selector>, `--format=png |
jpeg, --quality=<1-100>, --out=` |
scripts/element.js |
Resolve elements by selector/text or interactively pick them. | <selector>, --text=<string>, --click, --scroll |
{ ok, selector, tag, id, classes, text, visible, rect } |
scripts/evaluate.js |
Execute JavaScript in the page context. | <expression>, --file=<path> |
{ ok, result } (with structured clone) |
scripts/cookies.js |
Export, import, or clear cookies via CDP. | --export[=file], --import=<file>, --clear, --domain=<filter> |
Export payload or `{ ok, imported |
scripts/close.js |
Gracefully or forcefully stop Chrome. | --force |
{ ok, port, graceful, forced, closedTabs } |
Usage Patterns
- Start session:
node scripts/start.js --profile→ reuse default Chrome profile; or specify--chrome-pathon Linux/Windows. - Pipe commands: combine navigation, evaluation, and screenshots within a single session:
node scripts/navigate.js https://example.com && node scripts/evaluate.js 'document.title'. - JSON mode for agents: append
--jsonto produce structured payloads for toolchains.
Element Picker Notes
element.js supports three modes:
element.js '.selector'– direct CSS lookup.element.js --text "Buy now"– XPath text match.element.js– interactive picker; click on the desired element in Chrome within 60 s. The command captures selector metadata and emits it as JSON.
Cookie Workflow
- Export all cookies:
node scripts/cookies.js --export cookies.json. - Filter by domain: add
--domain example.com(applies to export and clear). - Import from captured payload:
node scripts/cookies.js --import cookies.json --json(reloads the current page).
Shutdown
- Prefer
node scripts/close.jsfor graceful closure; add--forcewhen the DevTools endpoint is unresponsive.
More from whamp/whamp-claude-tools
pocketbase
Comprehensive PocketBase development and deployment skill providing setup guides, schema templates, security patterns, API examples, data management scripts, and real-time integration patterns for building backend services with PocketBase.
20pocketbase-api-add-field
This skill should be used when the user asks to "add fields to PocketBase collection", "modify PocketBase schema", "add new collection fields", "update PocketBase collection", "PocketBase JavaScript SDK API", "programmatically add PocketBase fields", or mentions modifying PocketBase collection schemas via API. Provides comprehensive guidance for adding fields to existing PocketBase collections using the JavaScript SDK API.
4mailhog
This skill should be used when the user asks to "set up MailHog", "test email functionality", "configure MailHog", "send test emails", "check MailHog messages", "configure SMTP testing", or "manage email capture". Provides comprehensive MailHog email testing server setup and management.
1gemini-cli-integration
Use the gemini-cli-integration skill PROACTIVELY when analyzing large codebases, multiple files, or directories. Leverages Google Gemini's massive context window with @ syntax for file inclusion to handle comprehensive codebase analysis, implementation verification, and architectural understanding.
1