Claude Code · Lesson 21

Chrome Extension

Connect Claude Code to your Chrome browser and let it open pages, click buttons, read console errors, and fill in forms — all from a single terminal session. No Playwright setup, no Selenium scripts.

Browser AutomationDebug ConsoleForm FillingData ExtractionBeta
ℹ️ Info:Chrome integration is currently in beta. It works with Google Chrome and Microsoft Edge. Brave, Arc, and other Chromium browsers are not yet supported. WSL (Windows Subsystem for Linux) is also unsupported.

What the Extension Lets You Do

Once the Chrome extension is installed and Claude Code is launched with the --chrome flag, Claude gains a set of browser tools it can use on your behalf. It opens a real Chrome window, inherits your existing login sessions, and performs actions you can watch happen in real time.

🐛
Live debugging
Read console errors and DOM state directly inside a running page.
🧪
Web app testing
Test form validation, user flows, and visual layouts against your local dev server.
🔐
Authenticated apps
Interact with Google Docs, Gmail, Notion, or any site you are already signed into.
📋
Form filling
Feed a CSV to Claude and have it enter each row into a web interface.
📊
Data extraction
Pull structured data from pages and save it as JSON or CSV.
🎬
Session recording
Record browser interactions as GIFs to document or share a workflow.

Set It Up in Two Steps

1
Install the Chrome extension

Search for “Claude” in the Chrome Web Store, or click the button in the mockup below. You need version 1.0.36 or higher. After installing, confirm it is enabled in chrome://extensions.

chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
✦
Claude
Anthropic · anthropic.com
★★★★★4.8 · 500,000+ users
Free
The official Claude extension for Chrome. Browse with AI assistance, automate tasks, and connect Claude Code to your browser for seamless test-and-debug workflows.
ℹ️ Info:The extension is published by Anthropic. Look for the ✦ Claude icon and “anthropic.com” as the developer to confirm it is the official one.
2
Launch Claude Code with Chrome enabled

Start Claude Code from your project directory with the --chrome flag. Claude will detect the extension and confirm the connection.

Terminal
# Start Claude Code with Chrome enabled
$ claude --chrome
✓ Chrome extension detected (v1.0.42)
> Browser tools are ready. What would you like to do?
✅ Tip:To skip the flag every time, run /chrome inside Claude Code and select “Enabled by default”. Be aware this loads browser tools on every session and will slightly increase context usage.

Practical Example: Test Your Local Dev Server

Suppose you just added form validation to your app and want to make sure the error messages appear correctly. Instead of switching to the browser and testing manually, ask Claude to do it while your terminal stays open.

Terminal
$ claude --chrome
✓ Chrome extension connected
> Open localhost:3000/signup, try to submit the form with no data, and tell me if validation errors appear
Opening localhost:3000/signup...
Clicking the Submit button...
Reading the DOM...
Validation is working correctly:
• "Email is required" — visible below the email field
• "Password must be at least 8 characters" — visible below the password field
• Form was not submitted (no network request fired)
> Now try submitting with an invalid email like 'not-an-email'
Typing 'not-an-email' into the email field...
Clicking Submit...
⚠ "Please enter a valid email" message is NOT showing.
The email regex check appears to be missing for malformed inputs.
I can fix src/utils/validation.ts if you'd like.

Claude interacted with the real browser, read the DOM, noticed the gap in validation, and offered to fix the source file — all without you leaving the terminal.

More Workflow Examples

🐛Debug console errors
What you say
“Open the dashboard page and check the console for errors on load.”
What Claude does
Navigates to the page, reads console output, and reports specific errors with line numbers and suggested fixes.
📋Batch form filling
What you say
“I have customers.csv with 50 rows. For each row, open crm.example.com and add the contact.”
What Claude does
Reads the CSV row by row, navigates the CRM, fills in each field, and submits — reporting any failures.
📊Extract structured data
What you say
“Go to the product listings page and save each product's name, price, and stock as a CSV.”
What Claude does
Scrapes the page, structures the data, and writes a CSV file to your project directory.
✍️Write to Google Docs
What you say
“Summarise the last 10 git commits and add it as a project update to my Google Doc at docs.google.com/d/abc123.”
What Claude does
Opens your Doc in Chrome (using your existing login), clicks into the editor, and types the summary.
🎬Record a demo GIF
What you say
“Record a GIF of the checkout flow from cart to confirmation page.”
What Claude does
Records the browser interactions in real time and saves a GIF file to your working directory.
🔗Multi-site workflow
What you say
“Check my calendar for tomorrow's meetings and look up the LinkedIn page for each external attendee.”
What Claude does
Switches between Google Calendar and LinkedIn across tabs, gathering and summarising information.

The /chrome Slash Command

Inside any Claude Code session, type /chrome to open an interactive menu.

Terminal
$ /chrome
Chrome extension menu:
1Connection statusShow current connection health
2Reconnect extensionRe-establish a dropped connection
3Enable by defaultLoad browser tools on every session
4Manage permissionsOpen extension site permissions

Troubleshooting

⚠️Extension not detected
  1. Check that the extension is installed and enabled in chrome://extensions
  2. Confirm Claude Code is up to date: claude --version (needs 2.0.73+)
  3. Run /chrome → Reconnect extension
  4. If it still fails, restart both Chrome and Claude Code
  5. On first install, Chrome reads the native messaging host config at startup — a restart is often needed
⚠️Browser commands stop working mid-session
  1. Check if a JavaScript dialog (alert / confirm) is blocking the page — dismiss it manually
  2. Ask Claude to open a new tab and retry
  3. Run /chrome → Reconnect extension (service worker may have gone idle)
⚠️Windows: Named pipe conflict (EADDRINUSE)
  1. Close any other open Claude Code sessions that may be using Chrome
  2. Restart Claude Code
Error messageCauseFix
Browser extension is not connectedNative messaging host can't reach the extensionRestart Chrome and Claude Code, then run /chrome
Extension not detectedExtension is not installed or is disabledInstall or enable the extension in chrome://extensions
No tab availableClaude acted before a tab was readyAsk Claude to create a new tab and retry
Receiving end does not existExtension service worker went idleRun /chrome → Reconnect extension

Quick Reference

TaskHow
Start Claude Code with Chromeclaude --chrome
Enable Chrome by default/chrome → Enabled by default
Check connection status/chrome → Connection status
Reconnect after idle drop/chrome → Reconnect extension
Manage site permissions/chrome → Manage permissions
See available browser tools/mcp → claude-in-chrome
Enable from inside session/chrome (type it in chat)

What's Next

The Chrome extension is set up. Next: bring Claude Code into Slack so your team can trigger Claude directly from their conversations.