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.
Two Integrations - When to Use Each
| 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
mcp__chrome - devtools__list_pages();
mcp__chrome - devtools__select_page({ pageId: 1 });
mcp__chrome - devtools__new_page({ url: 'https://example.com' });
Step 2: Navigate and Interact
mcp__chrome - devtools__navigate_page({ url: 'https://example.com' });
mcp__chrome - devtools__take_snapshot();
mcp__chrome - devtools__click({ uid: 'ref_123' });
mcp__chrome - devtools__fill({ uid: 'ref_456', value: '[email protected]' });
mcp__chrome -
devtools__fill_form({
elements: [
{ uid: 'ref_456', value: '[email protected]' },
{ uid: 'ref_789', value: 'password123' },
],
});
Step 3: Debug and Inspect
mcp__chrome - devtools__list_console_messages({ types: ['error', 'warn'] });
mcp__chrome - devtools__get_console_message({ msgid: 1 });
mcp__chrome - devtools__list_network_requests({ resourceTypes: ['xhr', 'fetch'] });
mcp__chrome - devtools__get_network_request({ reqid: 1 });
mcp__chrome -
devtools__evaluate_script({
function: '() => document.title',
});
Step 4: Performance Analysis
mcp__chrome - devtools__performance_start_trace({ reload: true, autoStop: true });
mcp__chrome - devtools__performance_start_trace({ reload: true, autoStop: false });
mcp__chrome - devtools__performance_stop_trace();
mcp__chrome -
devtools__performance_analyze_insight({
insightSetId: 'navigation-1',
insightName: 'LCPBreakdown',
});
Step 5: Device Emulation
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)...',
});
mcp__chrome - devtools__emulate({ networkConditions: 'Slow 3G' });
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
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })
mcp__claude-in-chrome__tabs_create_mcp()
Step 2: Navigate and Read
mcp__claude-in-chrome__navigate
