Agent skill
browser-tools
Lightweight Chrome automation toolkit with shared configuration, JSON-first output, and six focused scripts for starting, navigating, inspecting, capturing, evaluating, and cleaning up browser sessions.
Install this agent skill to your Project
npx add-skill https://github.com/Whamp/whamp-claude-tools/tree/main/browser-tools-plugin/skills/browser-tools
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
Whamp/whamp-claude-tools
mailhog
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.
Whamp/whamp-claude-tools
gemini-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.
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.
Whamp/whamp-claude-tools
pocketbase-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.
mattpocock/skills
handoff
Compact the current conversation into a handoff document for another agent to pick up.
mattpocock/skills
obsidian-vault
Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.
Didn't find tool you were looking for?