browser-content-capture

# Browser Content Capture

**Capture web content that traditional scrapers cannot access using agent-browser CLI.**

## Overview

This skill enables content extraction from sources that require browser-level access:
- **JavaScript-rendered SPAs** (React, Vue, Angular apps)
- **Login-protected documentation** (private wikis, gated content)
- **Dynamic content** (infinite scroll, lazy loading, client-side routing)
- **Multi-page site crawls** (documentation trees, tutorial series)

## Overview

**Use when:**
- `WebFetch` returns empty or partial content
- Page requires JavaScript execution to render
- Content is behind authentication
- Need to navigate multi-page structures
- Extracting from client-side routed apps

**Do NOT use when:**
- Static HTML pages (use `WebFetch` - faster)
- Public API endpoints (use direct HTTP calls)
- Simple RSS/Atom feeds

---

## Quick Start

### Basic Capture Pattern

```bash
# 1. Navigate to URL
agent-browser open https://docs.example.com

# 2. Wait for content to render
agent-browser wait --load networkidle

# 3. Get interactive snapshot
agent-browser snapshot -i

# 4. Extract text content
agent-browser get text body

# 5. Take screenshot
agent-browser screenshot /tmp/capture.png

# 6. Close when done
agent-browser close
```

---

## agent-browser Commands Reference

| Command | Purpose | When to Use |
|---------|---------|-------------|
| `open <url>` | Go to URL | First step of any capture |
| `snapshot -i` | Get interactive element tree | Understanding page structure |
| `eval "<script>"` | Run custom JS | Extract specific content |
| `click @e#` | Click elements | Navigate menus, pagination |
| `fill @e# "value"` | Fill inputs | Authentication flows |
| `wait @e#` | Wait for element | Dynamic content loading |
| `screenshot <path>` | Capture image | Visual verification |
| `console` | Read JS console | Debug extraction issues |
| `network requests` | Monitor XHR/fetch | Find API endpoints |

**Full reference:** See [references/age