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.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
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.
