Skip to main content

Claude in Chrome

What if your coding agent could see exactly what you see in the browser — logged in, real data, live state?

Claude in Chrome is Anthropic's browser extension that connects Claude Code to your Chrome session via MCP. The agent navigates pages, clicks elements, fills forms, reads console logs, monitors network requests, and records GIF captures — all through your authenticated browser session.

How It Works

The extension runs as an MCP server inside Chrome. Claude Code connects to it and gets access to tools:

ToolWhat It Does
navigateGo to URL, wait for load
read_pageScreenshot + DOM snapshot of current tab
computerClick, type, scroll at element level
form_inputFill form fields by label or selector
javascript_toolExecute arbitrary JS in page context
read_console_messagesRead browser console with regex filtering
read_network_requestsMonitor XHR/fetch traffic
gif_creatorRecord multi-step interactions as GIF
tabs_context_mcpList and switch between tabs

The key difference: it operates inside your real browser session. No headless environment, no auth setup. Whatever you're logged into, the agent sees too.

Strengths

AreaDetail
Session reuseZero auth config — inherits your cookies, tokens, everything. Richest authenticated access.
Action breadthDeepest action model — navigation, forms, JS execution, console, network, screenshots, GIFs.
Debug powerConsole log filtering + network monitoring = agent can debug its own frontend work.
IDE integrationWorks from Claude Code CLI and VS Code extension.
Human-in-loopTab isolation, confirmation prompts for destructive actions.

Limitations

AreaDetail
Vendor lockClaude only. Cannot use with Gemini, Codex, Cursor, or other agents.
Browser lockChrome and Edge only. No Firefox, Brave, Arc, Safari.
Token costScreenshots are expensive — 10-20K tokens per page read. Adds up in long sessions.
Extension fragilityExtension updates, Chrome updates, or MCP connection drops can break mid-session.
ProprietaryNo standard body. Anthropic can change the API at any time.

Setup

  1. Install the Claude in Chrome extension
  2. In Claude Code, run /mcp and connect to claude-in-chrome
  3. Call tabs_context_mcp to see your current browser state

Working demo in under 10 minutes. The extension handles all the MCP plumbing.

Best For

  • Developer workflow automation — "build this component, open it in the browser, verify it renders, check console for errors"
  • Testing authenticated flows without headless auth setup
  • Debugging frontend issues with console/network inspection
  • Recording browser interactions as GIFs for documentation or review

Checklist Score

Against the decision checklist:

GateScoreNotes
1. PerceptionGoodFull page read with screenshots, DOM, and console. Rich but token-heavy.
2. ActionStrongDeepest action model — navigation, forms, JS, console, network, GIFs
3. AuthStrongBest in class — full session reuse, zero config
4. WorkflowModerateClaude Code only. No CI story. VS Code integration is a plus.
5. ArchitectureStrongExternal tool — zero app changes
6. StandardsWeakSingle vendor, proprietary, Chrome/Edge only
7. Speed/CostWeakExtension overhead + screenshots = most expensive per interaction
8. SetupGoodExtension install + MCP connect. ~10 min. Can be fragile across updates.
9. Blast RadiusStrongTab isolation, human-in-the-loop, scoped permissions

Context