Chrome Browser

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.

<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

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

<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

// 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' },
    ],
  });

Step 3: Debug and Inspect

// Read console messages
mcp__chrome - devtools__list_console_messages({ types: ['error', 'warn'] });

// Get specific console message details
mcp__chrome - devtools__get_console_message({ msgid: 1 });

// List network requests
mcp__chrome - devtools__list_network_requests({ resourceTypes: ['xhr', 'fetch'] });

// Get request/response details
mcp__chrome - devtools__get_network_request({ reqid: 1 });

// Execute JavaScript
mcp__chrome -
  devtools__evaluate_script({
    function: '() => document.title',
  });

Step 4: Performance Analysis

// Start performance trace (with page reload)
mcp__chrome - devtools__performance_start_trace({ reload: true, autoStop: true });

// Or manual stop
mcp__chrome - devtools__performance_start_trace({ reload: true, autoStop: false });
// ... interact with page ...
mcp__chrome - devtools__performance_stop_trace();

// Analyze specific insight
mcp__chrome -
  devtools__performance_analyze_insight({
    insightSetId: 'navigation-1',
    insightName: 'LCPBreakdown',
  });

Step 5: Device Emulation

// 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

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

// ALWAYS call first to get available tabs
mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true })

// Create a new tab for this conversation