Browser automation with two integrations - Chrome DevTools MCP (always available, performance tracing) and Claude-in-Chrome extension (authenticated sessions, GIF recording). Use DevTools for testing/debugging, Claude-in-Chrome for authenticated workflows.
Browser automation with two integrations - Chrome DevTools MCP (always available, performance tracing) and Claude-in-Chrome extension (authenticated sessions, GIF recording). Use DevTools for testing/debugging, Claude-in-Chrome for authenticated workflows.
["Use Chrome DevTools MCP for testing and debugging (always available)","Use Claude-in-Chrome for authenticated workflows (Google Docs, Gmail)","Filter console output with patterns to avoid verbosity","Dismiss modal dialogs manually if they appear"]
error_handling
graceful
streaming
supported
Chrome Browser Automation
Installation
Standalone script: No download; the skill invokes .claude/tools/chrome-browser/chrome-browser.cjs (Node.js v18+ required).
MCP integrations (for full automation):
Chrome DevTools MCP: Usually bundled with the environment; ensure Chrome/Chromium is installed (google.com/chrome).
Claude-in-Chrome: Install the Claude-in-Chrome extension and run with --chrome when needed.
Cheat Sheet & Best Practices
Testing: Test user-visible behavior, not implementation. Isolate tests (own storage/cookies); use before/after hooks for login or setup. Mock third-party networks instead of depending on live services.
DevTools Recorder: Record flows in Recorder panel; export as JSON or test scripts (Puppeteer, Nightwatch). Replay with Puppeteer Replay in CI. Use for performance measurement of user flows.
Hacks: Prefer Chrome DevTools MCP for testing/debugging (always on); use Claude-in-Chrome for authenticated sessions (GIF, forms). Limit GIF frames (e.g. 100) to avoid memory issues. Use take_snapshot for structure; evaluate_script for custom checks.
Certifications & Training
No official cert.Chrome for Developers – DevTools. Frontend Masters / Udemy “Mastering Chrome DevTools.” Skill data: Test user-visible behavior; isolate tests; Recorder + Puppeteer Replay; performance tracing.
Hooks & Workflows
Suggested hooks: Optional: post-test hook to capture screenshots on failure. Use when qa or frontend-pro is routed for browser testing (add chrome-browser to contextual: browser_testing or similar).
Workflows: Use with qa (add to contextual) or frontend-pro for E2E/browser flows. Flow: open URL → interact (click/fill) → snapshot or assert. See .claude/workflows/chrome-browser-skill-workflow.md.
Chrome Browser Skill - Unified browser automation using TWO integrations: Chrome DevTools MCP (always available, performance tracing, network inspection) and Claude-in-Chrome extension (authenticated sessions, GIF recording).
Two Integrations - When to Use Each
**Chrome DevTools MCP:**
- Page navigation and tab management
- Element interaction (click, fill, hover, drag)
- JavaScript execution in page context
- Console message monitoring
- Network request inspection with body access
- Performance tracing with Core Web Vitals
- Device emulation (mobile, geolocation, CPU throttling)
- Screenshot capture
- Dialog handling (alert, confirm, prompt)
**Test Login Flow (Chrome DevTools MCP)**:
Feature
Chrome DevTools MCP
Claude-in-Chrome
Status
✅ Always available
⚠️ Requires --chrome flag
Activation
Automatic (built-in)
claude --chrome + extension
Auth sessions
❌ Fresh browser
✅ Uses your logins
Performance tracing
✅ Full Core Web Vitals
❌ Not available
Network inspection
✅ Detailed with body access
✅ Basic
Device emulation
✅ Mobile, geolocation, CPU
❌ Limited
GIF recording
❌ No
✅ Yes (100 frame limit)
Page text extraction
Via snapshot
✅ Dedicated tool
Best for
Testing, debugging, performance
Authenticated workflows, demos
Performance Limits (Memory Safeguard)
Chrome browser automation can record GIF videos. To prevent memory exhaustion:
GIF frame limit: 100 frames (HARD LIMIT)
Each frame: 5-20 KB (depends on complexity)
100 frames × 10 KB avg = ~1 MB per recording
Keeps browser session memory-efficient
Frame tracking:
Typical actions per frame: 1-2 (click, scroll, type)
50 frames = 25-50 actions
100 frames = 50-100 actions
For longer workflows, use multiple recordings
Decision Guide
Need to test/debug a public site? → Chrome DevTools MCP
Need performance analysis? → Chrome DevTools MCP
Need to access authenticated apps? → Claude-in-Chrome (--chrome)
Need to record a demo GIF? → Claude-in-Chrome (--chrome)
Need to interact with Google Docs? → Claude-in-Chrome (--chrome)
Need device/network emulation? → Chrome DevTools MCP
Claude-in-Chrome:
Authenticated web app interaction (Google Docs, Gmail, Notion)
Session recording as GIF
Natural language element finding
Form automation with your saved data
Page text extraction
Shortcut/workflow execution
Chrome DevTools MCP (Always Available)
No setup required - these tools work immediately.
Step 1: List and Select Pages
// List all open pages
mcp__chrome - devtools__list_pages();
// Select a page to work with
mcp__chrome - devtools__select_page({ pageId: 1 });
// Create a new page
mcp__chrome - devtools__new_page({ url: 'https://example.com' });
Step 2: Navigate and Interact
// Navigate to URL
mcp__chrome - devtools__navigate_page({ url: 'https://example.com' });
// Take accessibility snapshot (get element UIDs)
mcp__chrome - devtools__take_snapshot();
// Click element by UID from snapshot
mcp__chrome - devtools__click({ uid: 'ref_123' });
// Fill form field
mcp__chrome - devtools__fill({ uid: 'ref_456', value: 'test@example.com' });
// Fill entire form
mcp__chrome -
devtools__fill_form({
elements: [
{ uid: 'ref_456', value: 'test@example.com' },
{ uid: 'ref_789', value: 'password123' },
],
});
// Emulate mobile device
mcp__chrome -
devtools__emulate({
viewport: {
width: 375,
height: 667,
deviceScaleFactor: 2,
isMobile: true,
hasTouch: true,
},
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)...',
});
// Emulate slow network
mcp__chrome - devtools__emulate({ networkConditions: 'Slow 3G' });
// Emulate geolocation
mcp__chrome -
devtools__emulate({
geolocation: { latitude: 37.7749, longitude: -122.4194 },
});
Claude-in-Chrome (Requires Setup)
Prerequisites
Install Claude-in-Chrome extension (v1.0.36+) from Chrome Web Store
Start Claude with flag: claude --chrome
Chrome must be visible (no headless mode)
Paid Claude plan required (Pro, Team, or Enterprise)
Step 1: Get Tab Context
// ALWAYS call first to get available tabs
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })
// Create a new tab for this conversation
mcp__claude-in-chrome__tabs_create_mcp()
Step 2: Navigate and Read
// Navigate to URL
mcp__claude-in-chrome__navigate({ url: "https://docs.google.com", tabId: 123 })
// Read page structure (accessibility tree)
mcp__claude-in-chrome__read_page({ tabId: 123 })
// Find elements by natural language
mcp__claude-in-chrome__find({ query: "login button", tabId: 123 })
// Extract page text
mcp__claude-in-chrome__get_page_text({ tabId: 123 })
Step 3: Interact
// Click, type, screenshot via computer tool
mcp__claude-in-chrome__computer({
action: "left_click",
coordinate: [100, 200],
tabId: 123
})
mcp__claude-in-chrome__computer({
action: "type",
text: "Hello world",
tabId: 123
})
mcp__claude-in-chrome__computer({
action: "screenshot",
tabId: 123
})
// Fill form by element reference
mcp__claude-in-chrome__form_input({
ref: "ref_1",
value: "test@example.com",
tabId: 123
})
Step 4: Record GIF Demo
// Start recording
mcp__claude-in-chrome__gif_creator({ action: "start_recording", tabId: 123 })
// Take screenshot to capture initial state
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })
// ... perform actions ...// Take final screenshot
mcp__claude-in-chrome__computer({ action: "screenshot", tabId: 123 })
// Stop and export
mcp__claude-in-chrome__gif_creator({ action: "stop_recording", tabId: 123 })
mcp__claude-in-chrome__gif_creator({
action: "export",
download: true,
filename: "demo.gif",
tabId: 123
})
Recording Best Practices
✓ GOOD patterns:
Login flow: 15-20 frames (5-10 actions)
Form filling: 10-15 frames (5-8 actions)
Navigation demo: 20-30 frames (10-15 actions)
Full workflow: 2-3 recordings of 30-50 frames each
✗ BAD patterns:
Single recording with 200+ frames
Waiting for loading (adds 10+ empty frames per second)
The workflow provides examples for invocation methods, agent assignment, and memory integration patterns.
Troubleshooting
Claude-in-Chrome "Browser extension is not connected"
Symptom: When using --chrome flag, tools return "Browser extension is not connected" error despite extension being installed.
Root Cause: Claude.app (desktop) and Claude Code register competing native messaging hosts. When both are installed, the Chrome extension connects to whichever registered last, causing connection failures.
Diagnosis:
Check if both Claude.app and Claude Code are installed
On Windows: Check %APPDATA%\Claude\ChromeNativeHost\com.anthropic.claude_browser_extension.json
On macOS: Check ~/Library/Application Support/Claude/ChromeNativeHost/
Known Bug: This is documented in GitHub issues:
#15336 - Windows Native Messaging Host not installing
#20790 - Extension connects to Claude.app instead of Claude Code
Workaround (macOS):
# Disable Claude.app's native host (keep file for restoration)cd ~/Library/Application\ Support/Google/Chrome/NativeMessagingHosts/
mv com.anthropic.claude_browser_extension.json com.anthropic.claude_browser_extension.json.disabled
# Restart Chrome completely (quit and reopen)# Then start Claude Code with --chrome flag
Workaround (Windows): Not fully documented. Potential approach:
# Rename the config to disable Claude.app's registration
cd $env:APPDATA\Claude\ChromeNativeHost
ren com.anthropic.claude_browser_extension.json com.anthropic.claude_browser_extension.json.disabled
# Restart Chrome and try again
Alternative: Use Chrome DevTools MCP instead - it works without the extension and provides similar functionality for most use cases.
Modal Dialogs Blocking Events
Symptom: After triggering alert/confirm/prompt, all browser tools stop responding.
Cause: JavaScript modal dialogs block all browser events including extension communication.
Fix: User must manually dismiss the dialog in the browser. Avoid triggering dialogs in automation scripts.
Memory Protocol (MANDATORY)
Before starting:
cat .claude/context/memory/learnings.md
After completing:
New pattern -> .claude/context/memory/learnings.md
Issue found -> .claude/context/memory/issues.md
Decision made -> .claude/context/memory/decisions.md
ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.
