browser-tools
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:
cd {baseDir}/browser-tools
npm install
Start Chrome
{baseDir}/browser-start.js # Fresh profile
{baseDir}/browser-start.js --profile # Copy user's profile (cookies, logins)
Launch Chrome with remote debugging on :9222. Use --profile to preserve user's authentication state.
Navigate
{baseDir}/browser-nav.js https://example.com
{baseDir}/browser-nav.js https://example.com --new
Navigate to URLs. Use --new flag to open in a new tab instead of reusing current tab.
Evaluate JavaScript
{baseDir}/browser-eval.js 'document.title'
{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'
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
{baseDir}/browser-screenshot.js
Capture current viewport and return temporary file path. Use this to visually inspect page state or verify UI changes.
Pick Elements
{baseDir}/browser-pick.js "Click the submit button"
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
{baseDir}/browser-cookies.js
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
{baseDir}/browser-content.js https://example.com
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
More from brettatoms/agent-skills
alpinejs
AlpineJS best practices and patterns. Use when writing HTML with Alpine.js directives to avoid common mistakes like long inline JavaScript strings.
106janet
Write idiomatic Janet code. Use when writing, refactoring, or reviewing Janet (.janet) code. Covers functional patterns, performance tradeoffs, common gotchas, data structure idioms, PEG parsing, and Janet-specific pitfalls.
10playwright
Browser automation for web testing and interaction. Use for navigating pages, filling forms, clicking elements, taking screenshots, and inspecting page content. Maintains stateful browser session across commands.
9code-symbols
Find and edit symbols in code using ast-grep (tree-sitter based). Use when finding function definitions, class definitions, symbol usages, renaming symbols, or replacing code in JavaScript, TypeScript, Python, Go, Rust, and other languages. NOT for Clojure - use clj-symbols instead.
8github
Work with GitHub using the gh CLI. Use when creating/managing pull requests, reviewing code, managing issues, viewing GitHub Actions runs, creating releases, or making API requests. Triggers on GitHub-related tasks like "create a PR", "list open issues", "check CI status", "merge this PR", or "create a release".
7lib-docs
Fetch library documentation and code examples. Use when user asks about library APIs, needs code examples, or says "use lib-docs", "lookup docs for X", "how does [library] work". Works with any language/framework.
7