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="test@example.com", 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

undefined

**Verify connection:**

```bash

**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.

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

"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."

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)

"The dashboard page is throwing errors. Can you check what's failing?"

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"

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

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"

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

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"

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

Workflow:
1. Check calendar for meetings tomorrow
   - navigate(url="https://calendar.google.com", tabId=<id>)
   - get_page_text(tabId=<id>)
   - Extract meeting attendees
2. For each external attendee:
   - tabs_create_mcp() → New tab
   - navigate(url="https://linkedin.com/in/{name}", tabId=<new-id>)
   - get_page_text(tabId=<new-id>)
   - Extract company info
3. Return to calendar tab
   - navigate(url="https://calendar.google.com/event/{id}", tabId=<id>)
   - Add note about attendee's company
4. Report: "Added context notes for 3 external meetings"

"Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company on LinkedIn and add a
note about what they do."

mcp-cli info claude-in-chrome/<tool-name>

tabs_context_mcp(createIfEmpty=true) → Get tabId

read_console_messages(tabId=<id>, onlyErrors=true)
read_network_requests(tabId=<id>, urlPattern="/api/")

navigate(url="...", tabId=<id>)
computer(action="wait", duration=2, tabId=<id>) → Let page load

read_console_messages(
  tabId=<id>,
  pattern="error|exception|failed",
  onlyErrors=true
)

tabs_create_mcp() → New tabId

1. Make code changes (terminal)
2. Test in browser with console monitoring (chrome-browser-automation)
3. Record successful demo as GIF (chrome-gif-recorder)
4. Run quality gates (quality-run-quality-gates)
5. Commit with proof-of-work GIF (git commit)

✅ Web App Tested Successfully

URL: http://localhost:3000/login
Test: Form validation with invalid/valid data
Console: 0 errors
Network: POST /api/auth → 200 OK (token received)
Result: Success message displayed correctly

All validations passed!

⚠️ Frontend Issues Detected

Console Errors:
1. TypeError: Cannot read property 'name' of undefined
   - File: dashboard.js:42
   - Cause: API response missing 'user' object

Network Failures:
1. GET /api/user/preferences → 401 Unauthorized
   - Cause: Auth token expired

Recommendations:
1. Add null check: user?.name || 'Unknown'
2. Refresh auth token before API call

✅ Data Extracted Successfully

Source: https://example.com/products
Extracted: 47 products
Fields: name, price, availability, url
Output: products.csv (8KB)

Sample data:
- Widget Pro, $49.99, In Stock, /products/widget-pro
- Gadget Plus, $79.99, Backordered, /products/gadget-plus