chrome-browser-automation

What this skill does

# Chrome Browser Automation

## Quick Start

Test a local web application with console monitoring:

```
User: "Open localhost:3000 and check for console errors when I submit the login form"

1. Get tab context: tabs_context_mcp(createIfEmpty=true)
2. Navigate to app: navigate(url="http://localhost:3000", tabId=<id>)
3. Monitor console: read_console_messages(tabId=<id>, onlyErrors=true)
4. Fill form: form_input(ref="email", value="[email protected]", tabId=<id>)
5. Submit: computer(action="left_click", ref="submit-btn", tabId=<id>)
6. Check errors: read_console_messages(tabId=<id>, onlyErrors=true)
7. Check network: read_network_requests(tabId=<id>, urlPattern="/api/")
8. Report findings with specific error messages and failed requests
```

**Key advantage:** Chain browser actions with terminal commands in a single workflow.

## Table of Contents

1. When to Use This Skill
2. What This Skill Does
3. Setup and Prerequisites
4. Core Workflow Patterns
   - 4.1 Testing Web Applications
   - 4.2 Debugging with Console and Network
   - 4.3 Data Extraction
   - 4.4 Form Automation
   - 4.5 Authenticated Web Apps
   - 4.6 Multi-Site Workflows
5. MCP Tool Reference
6. Best Practices
7. Troubleshooting
8. Integration with Other Skills

## When to Use This Skill

**Explicit Triggers:**
- "Test my web app" / "Check the console"
- "Fill this form" / "Extract data from [URL]"
- "Automate [browser task]" / "Open [authenticated app]"
- "Debug [frontend issue]" / "Verify [UI behavior]"

**Implicit Triggers:**
- Frontend bug investigation requiring console logs
- Repetitive data entry or form filling
- Web scraping or data extraction from live sites
- Testing form validation or user flows
- Interacting with authenticated services (Gmail, Docs, Notion)
- Visual regression testing or design verification

**Debugging Triggers:**
- "Why is this breaking in the browser?"
- "What console errors appear when I..."
- "What network requests are failing?"

## What This Skill Does

Chrome integration enables six core capabilities:

1. **Live Debugging** - Read console errors and DOM state, identify root cause, fix code
2. **Web App Testing** - Verify form validation, check user flows, test local development servers
3. **Data Extraction** - Scrape structured data from web pages and save locally
4. **Form Automation** - Automate repetitive data entry, form filling, multi-site workflows
5. **Authenticated Apps** - Interact with Google Docs, Gmail, Notion, or any logged-in service
6. **Session Recording** - Capture browser interactions as annotated GIFs for documentation

## Setup and Prerequisites

**Required:**
- Google Chrome browser
- Claude in Chrome extension v1.0.36+ (from Chrome Web Store)
- Claude Code CLI v2.0.73+ (`claude --version`)
- Paid Claude plan (Pro, Team, or Enterprise)

**Enable Chrome integration:**

```bash
# Start with Chrome enabled
claude --chrome

# Or enable from within session
/chrome
```

**Verify connection:**

```bash
# Check status and manage settings
/chrome

# List available MCP tools
/mcp
# Click into 'claude-in-chrome' to see all tools
```

**Enable by default (optional):**

Run `/chrome` and select "Enabled by default" to avoid `--chrome` flag each time.

**Note:** Chrome integration requires a visible browser window. You'll see Chrome open and navigate in real time - there's no headless mode.

## Core Workflow Patterns

### 4.1 Testing Web Applications

**Pattern: Test local development server**

```
Workflow:
1. tabs_context_mcp(createIfEmpty=true) → Get tabId
2. navigate(url="http://localhost:3000", tabId=<id>)
3. computer(action="screenshot", tabId=<id>) → Visual verification
4. form_input(ref="username", value="testuser", tabId=<id>)
5. computer(action="left_click", ref="submit", tabId=<id>)
6. read_console_messages(tabId=<id>, onlyErrors=true)
7. read_network_requests(tabId=<id>, urlPattern="/api/auth")
8. Report: Success/failure with specific errors or network issues
```

**Common testing scenarios:**
- Form validation (submit invalid data, verify error messages)
- User flows (signup → login → dashboard → action)
- Visual regressions (screenshot before/after changes)
- API integration (verify network requests match expectations)

**Example request:**
```
"I just updated the signup form. Can you test it on localhost:3000?
Try submitting with invalid email, then valid data, and check if
the success message appears."
```

### 4.2 Debugging with Console and Network

**Pattern: Investigate frontend errors**

```
Workflow:
1. tabs_context_mcp() → Get current tab
2. read_console_messages(
     tabId=<id>,
     pattern="error|exception|failed",
     onlyErrors=true
   )
3. read_network_requests(
     tabId=<id>,
     urlPattern="/api/",
     filterStatus=[400, 401, 403, 404, 500, 502, 503]
   )
4. Analyze errors:
   - Console: TypeError, ReferenceError, network failures
   - Network: Failed requests, 401 unauthorized, 500 server errors
5. Identify root cause (missing API endpoint, CORS issue, auth token expired)
6. Suggest fix in codebase (update API call, add error handling, fix endpoint)
```

**Example request:**
```
"The dashboard page is throwing errors. Can you check what's failing?"
```

**Common debugging patterns:**
- CORS issues (network request blocked, check headers)
- API authentication (401/403, check token in request headers)
- Missing dependencies (module not found, check imports)
- Runtime errors (undefined variables, null references)

See `references/debugging-patterns.md` for comprehensive error analysis workflows.

### 4.3 Data Extraction

**Pattern: Scrape structured data from web pages**

```
Workflow:
1. tabs_context_mcp(createIfEmpty=true)
2. navigate(url="https://example.com/products", tabId=<id>)
3. get_page_text(tabId=<id>) → Full page text
4. Parse structured data:
   - Product names
   - Prices
   - Availability
   - URLs
5. Save to CSV/JSON:
   Write(file_path="products.csv", content=<data>)
6. Report: "Extracted 47 products to products.csv"
```

**Example request:**
```
"Go to the product listings page and extract the name, price, and
availability for each item. Save as CSV."
```

**Advanced extraction:**
- Multi-page pagination (loop through pages)
- Dynamic content (wait for AJAX to load)
- Authenticated data (use logged-in session)

See `examples/data-extraction-examples.md` for complex scraping workflows.

### 4.4 Form Automation

**Pattern: Automate repetitive data entry**

```
Workflow:
1. Read local data: Read(file_path="contacts.csv")
2. Parse CSV rows
3. For each row:
   a. tabs_context_mcp()
   b. navigate(url="https://crm.example.com/add-contact", tabId=<id>)
   c. form_input(ref="name", value=row.name, tabId=<id>)
   d. form_input(ref="email", value=row.email, tabId=<id>)
   e. form_input(ref="phone", value=row.phone, tabId=<id>)
   f. computer(action="left_click", ref="submit", tabId=<id>)
   g. Wait for confirmation
4. Report: "Processed 15 contacts successfully"
```

**Example request:**
```
"I have customer contacts in contacts.csv. For each row, go to
our CRM and fill in the contact form."
```

**Form filling tips:**
- Use `form_input` for text fields (faster than typing)
- Use `computer(action="left_click")` for buttons
- Use `computer(action="type")` for rich text editors
- Wait between submissions to avoid rate limits

### 4.5 Authenticated Web Apps

**Pattern: Interact with Google Docs, Gmail, Notion**

```
Workflow:
1. tabs_context_mcp() → Access existing logged-in session
2. navigate(url="https://docs.google.com/document/d/abc123", tabId=<id>)
3. computer(action="left_click", coordinate=[400, 300], tabId=<id>) → Click into editor
4. computer(action="type", text="Meeting notes:\n- Discussed Q1 roadmap", tabId=<id>)
5. Verify: get_page_text(tabId=<id>) → Check content saved
6. Report: "Added meeting notes to Google Doc"
```

**Example request:**
```
"Draft a project update based on recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123"
```

**Supported authenticated apps