browser-tools

# Browser Tools

Chrome DevTools Protocol automation for agent-assisted web testing and interaction. Uses Chrome running on `:9222` with remote debugging.

## Prerequisites

**Run `/browser-tools:setup` once after plugin installation** - This installs dependencies and creates global symlinks for all browser scripts.

## Usage

When user asks to test, verify, or interact with web pages using browser tools:

1. **Start Chrome** - Launch with debugging enabled
2. **Navigate & interact** - Use scripts to navigate, evaluate JS, take screenshots
3. **Return results** - Show output/screenshots to user

**IMPORTANT**: Use command names directly (e.g., `browser-start`), NOT full paths (e.g., `~/bin/browser-start`). Commands are in PATH after setup.

## Available Scripts

All scripts located in `skills/browser-tools/scripts/`:

### browser-start

By default use the persistent profile at `/tmp/chrome-profile-browser-tools`.

```bash
browser-start --profile    # Persistent profile
browser-start              # Fresh profile
```

Launch Chrome with remote debugging on port 9222. Use `--profile` to maintain login state between sessions.

### browser-nav

```bash
browser-nav https://example.com
browser-nav https://example.com --new
```

Navigate to URLs. Use `--new` to open in new tab instead of current tab.

### browser-eval

```bash
browser-eval 'document.title'
browser-eval 'document.querySelectorAll("a").length'
browser-eval 'Array.from(document.querySelectorAll("h1")).map(h => h.textContent)'
```

Execute JavaScript in active tab. Runs in async context. Use for:

- Extract data from pages
- Inspect page state
- Manipulate DOM
- Test page functionality

### browser-screenshot

```bash
browser-screenshot
```

Capture current viewport, returns temp file path. Use Read tool to show screenshot to user.

### browser-pick

```bash
browser-pick                      # Uses default message "Select element(s)"
browser-pick "Select the submit button"
```

**Interactive element picker** -