Course navigation
Claude CodeLesson 21 of 25

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.

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 through the browser. It opens a real Chrome window, inherits your existing login sessions, and performs actions you can watch happen in real time.

CapabilityDescription
Live debuggingRead console errors and DOM state directly inside a running page.
Web app testingTest form validation, user flows, and visual layouts against your local dev server.
Authenticated appsInteract with Google Docs, Gmail, Notion, or any site you are already signed into.
Form fillingFeed a CSV to Claude and have it enter each row into a web interface.
Data extractionPull structured data from pages and save it as JSON or CSV.
Session recordingRecord 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 use the listing below. You need version 1.0.36 or higher. After installing, confirm it is enabled in chrome://extensions.

chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
C

Claude

Anthropic · anthropic.com

4.8 · 500,000+ users

Free

The official Claude extension for Chrome. Browse pages, automate tasks, and connect Claude Code to your browser for test-and-debug workflows.

Official Claude extension — published by Anthropic
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?
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

WorkflowWhat you sayWhat Claude does
Debug console errorsOpen the dashboard page and check the console for errors on load.Navigates to the page, reads console output, and reports specific errors with line numbers and suggested fixes.
Batch form fillingI have customers.csv with 50 rows. For each row, open crm.example.com and add the contact.Reads the CSV row by row, navigates the CRM, fills in each field, and submits — reporting any failures.
Extract structured dataGo to the product listings page and save each product's name, price, and stock as a CSV.Scrapes the page, structures the data, and writes a CSV file to your project directory.
Write to Google DocsSummarise the last 10 git commits and add it as a project update to my Google Doc at docs.google.com/d/abc123.Opens your Doc in Chrome (using your existing login), clicks into the editor, and types the summary.
Record a demo GIFRecord a GIF of the checkout flow from cart to confirmation page.Records the browser interactions in real time and saves a GIF file to your working directory.
Multi-site workflowCheck my calendar for tomorrow's meetings and look up the LinkedIn page for each external attendee.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:
1 Connection status — Show current connection health
2 Reconnect extension — Re-establish a dropped connection
3 Enable by default — Load browser tools on every session
4 Manage permissions — Open 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)

Before you continue

  • Install the official Claude Chrome extension (v1.0.36+) and launch with --chrome.
  • Claude can debug pages, test forms, fill data, and extract content from real browser sessions.
  • Use /chrome to check status, reconnect, or enable browser tools by default.
  • Restart Chrome and Claude Code if the extension is not detected on first install.
  • Next lesson: Claude Code in Slack — trigger coding sessions from team conversations.

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.