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.

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](https://www.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](https://developer.chrome.com/docs/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 . <identity 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). </identity 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 <capabilities 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) 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 </capabilities <instructions <execution process Chrome DevTools MCP (Always Available) No setup required these tools work immediately. Step 1: List and Select Pages Step 2: Navigate and Interact Step 3: Debug and Inspect Step 4: Performance Analysis Step 5: Device Emulation Claude in Chrome (Requires Setup) Prerequisites 1. Install Claude in Chrome extension (v1.0.36+) from Chrome Web Store 2. Start Claude with flag : claude chrome 3. Chrome must be visible (no headless mode) 4. Paid Claude plan required (Pro, Team, or Enterprise) Step 1: Get Tab Context Step 2: Navigate and Read Step 3: Interact Step 4: Record GIF Demo 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) Continuous scrolling (can reach 100+ frames quickly) Multiple simultaneous recordings If you hit 100 frames: 1. Stop recording 2. Export current GIF 3. Start new recording for next part 4. Link recordings together in documentation Timeout Management Default timeout: 30 seconds per recording If recording 100 frames: Use multiple 30 second recordings Don't wait for slow loading (screenshot instead) Keep actions fast (minimize waits) </execution process <best practices Chrome DevTools MCP 1. Always take snapshot first to get element UIDs before clicking/filling 2. Use includeSnapshot: true on actions to get updated state 3. Filter network requests by resourceTypes to avoid noise 4. Save traces to file with filePath parameter for later analysis Claude in Chrome 1. Call tabs context mcp first to get valid tab IDs 2. Create new tabs rather than reusing existing ones 3. Use read page before find to understand page structure 4. Filter console with patterns to avoid verbosity 5. Dismiss modal dialogs manually they block all events General 1. Prefer Chrome DevTools MCP for public sites (always available) 2. Use Claude in Chrome only when authentication is required 3. Don't trigger alert/confirm/prompt they block browser events </best practices </instructions <examples <usage example Test Login Flow (Chrome DevTools MCP) : </usage example <usage example Performance Audit (Chrome DevTools MCP) : </usage example <usage example Google Docs Editing (Claude in Chrome) : </usage example <usage example Record Demo GIF (Claude in Chrome) : </usage example </examples Available Tools Chrome DevTools MCP (Always Available) Tool Description mcp chrome devtools list pages List all browser pages mcp chrome devtools select page Select page for operations mcp chrome devtools new page Create new page with URL mcp chrome devtools close page Close a page mcp chrome devtools navigate page Navigate, reload, back/forward mcp chrome devtools take snapshot Get accessibility tree with UIDs mcp chrome devtools take screenshot Capture page/element screenshot mcp chrome devtools click Click element by UID mcp chrome devtools fill Fill input/select by UID mcp chrome devtools fill form Fill multiple form elements mcp chrome devtools hover Hover over element mcp chrome devtools drag Drag element to another mcp chrome devtools press key Press key or combination mcp chrome devtools evaluate script Execute JavaScript mcp chrome devtools handle dialog Accept/dismiss dialogs mcp chrome devtools upload file Upload file via input mcp chrome devtools wait for Wait for text to appear mcp chrome devtools resize page Resize browser window mcp chrome devtools emulate Device/network/geo emulation mcp chrome devtools list console messages List console output mcp chrome devtools get console message Get message details mcp chrome devtools list network requests List network requests mcp chrome devtools get network request Get request/response details mcp chrome devtools performance start trace Start performance recording mcp chrome devtools performance stop trace Stop performance recording mcp chrome devtools performance analyze insight Analyze performance insight Claude in Chrome (Requires chrome flag) Tool Description mcp claude in chrome tabs context mcp Get tab context (call first!) mcp claude in chrome tabs create mcp Create new tab mcp claude in chrome navigate Navigate to URL mcp claude in chrome read page Get accessibility tree mcp claude in chrome find Find elements by description mcp claude in chrome get page text Extract page text mcp claude in chrome computer Click, type, screenshot, scroll mcp claude in chrome form input Fill form field mcp claude in chrome fill form Fill multiple fields mcp claude in chrome javascript tool Execute JavaScript mcp claude in chrome read console messages Read console logs mcp claude in chrome read network requests Read network requests mcp claude in chrome resize window Resize browser window mcp claude in chrome upload image Upload image to element mcp claude in chrome gif creator Record/export GIF mcp claude in chrome shortcuts list List available shortcuts mcp claude in chrome shortcuts execute Execute shortcut mcp claude in chrome update plan Present plan for approval Agent Integration This skill is automatically assigned to: developer Testing, debugging, data extraction qa Automated testing, form validation, user flow verification security architect Security testing, authentication flows devops troubleshooter Production debugging, monitoring researcher Web scraping, data extraction Related Workflow For guidance on using this skill effectively, see the corresponding workflow: Workflow File : .claude/workflows/chrome browser skill workflow.md When to Use : When you need browser automation for testing, debugging, authenticated workflows, or demo recording Integration Methods : Slash command invocation ( /chrome browser ) Agent skill assignment (via frontmatter) Direct script execution Two Integration Options: Chrome DevTools MCP (always available) For public site testing, pe

chrome-browser