chrome-integration

Chrome Integration

Connect Claude Code to Chrome for browser automation, live debugging, and web app testing.

Quick Reference

What You Can Do

Setup

Prerequisites

1. Google Chrome browser installed
2. Claude in Chrome extension v1.0.36+
3. Claude Code v2.0.73+
4. Paid Claude plan

Enable Chrome Integration

Option 1: At startup

claude --chrome

Option 2: In-session

/chrome

Verify Connection

Run /chrome to check status. If extension not detected, you'll see install instructions.

How It Works

• Claude Code communicates via Chrome's Native Messaging API
• Extension receives commands and executes in browser
• Opens new tabs for tasks (doesn't take over existing)
• Shares login state - if you're logged into a site, Claude can access it
• Visible browser required (no headless mode)

Handling Blockers

When Claude encounters login pages, CAPTCHAs, or other blockers:

1. Claude pauses and asks you to handle it
2. You can provide credentials or log in manually
3. Tell Claude to continue when ready

Common Workflows

Debug a Web App

Open localhost:3000, check the console for errors,
and fix any issues you find in the code

Test a Form

Go to my signup form at localhost:3000/signup,
try submitting with invalid data, and verify
the error messages are correct

Extract Data

Go to https://example.com/products, extract all
product names and prices, and save them to products.json

Verify Design

Open localhost:3000 and compare the header layout
to this Figma screenshot: [paste screenshot]

Automate Multi-Step Task

Log into my staging site, navigate to settings,
update the company name to "Acme Corp", and
take a screenshot of the confirmation

Workflow: Browser Debugging Session

Prerequisites

• Chrome extension installed
• Claude Code v2.0.73+
• Dev server running (if testing local app)

Steps

1. Start Claude with Chrome

   • Run claude --chrome
   • Verify connection with /chrome

2. Navigate to Your App

   • Ask Claude to open your URL
   • Wait for page to load

3. Debug Issues

   • Claude reads console errors
   • Claude inspects DOM state
   • Claude fixes code in terminal
   • Refresh to verify fix

4. Document Results

   • Record GIF of working feature
   • Commit fixes

Validation

• Console errors resolved
• UI renders correctly
• User flows work as expected

Tips and Best Practices

Be Specific with URLs

# Good
Go to localhost:3000/dashboard

# Avoid
Open my app

Chain Terminal and Browser Actions

Run the tests, then open the coverage report
in Chrome and summarize the uncovered areas

Use for Visual Verification

Build a card component matching this design,
then open it in Chrome and verify the spacing

Handle Dynamic Content

Wait for the loading spinner to disappear,
then extract the table data

Limitations

Troubleshooting

Security Considerations

• Chrome integration uses your browser session
• Claude can access any site you're logged into
• Sensitive actions (banking, etc.) require your explicit guidance
• Session recordings may capture sensitive data
• Use separate Chrome profile for sensitive work if needed

Reference