Chrome automation

--- name: chrome-automation description: Connect to and control the Google Chrome browser using agent -browser with CDP (Chrome DevTools Protocol). Use this when the user wants to automate their existing Chrome browser, view browser actions in real time, or needs to control the Chrome instance they are already using. Handles installation, setup, connecting via remote debugging, and all browser automation tasks with live visual feedback. allowed-tools: Bash() --- # Chrome Browser Automation with Real-time Control Control the user’s Google Chrome browser using agent -browser connected via the Chrome DevTools Protocol (CDP). All actions are visible in real time in the user’s browser window. ## ⚠️ CRITICAL: Automatic Installation & Dependency Check BEFORE using this skill, ALWAYS run the auto-installation check: This skill automatically checks for and installs all required dependencies without user confirmation. The installation process verifies: - agent -browser repository and binary - Node.js and pnpm - Playwright Chromium - Rust toolchain (cargo) - Native binary compilation Auto-installation workflow:* ``bash # Mac: Run auto-install script bash ~/.claude/skills/chrome-automation/scripts/auto-install-mac.sh # Windows: Run auto-install script (PowerShell) powershell -ExecutionPolicy Bypass -File "$HOME\.claude\skills\chrome-automation\scripts\auto-install-windows.ps1" **The script will:** 1. Check if agent-browser binary exists and works 2. Install missing dependencies automatically (pnpm, Rust, etc.) 3. Clone repository if not present 4. Build native binary with proper Rust toolchain 5. Verify installation success **Critical rules:** - ❌ DO NOT fall back to using built-in browser tools (browser_use_desktop) - ✅ MUST run auto-install script before any browser automation - ✅ Only proceed with browser automation AFTER successful installation - ✅ Script handles all dependency checks automatically **Why agent-browser is required:** - Provides real-time visual feedback in user's actual Chrome browser - Allows user to see and interact with automation in progress - Offers precise element selection and interaction capabilities - Built-in browser tools are NOT a substitute for this skill's functionality ## Quick Start ### First-time setup (automatic) **Run the auto-install script first:** bash # Mac bash ~/.claude/skills/chrome-automation/scripts/auto-install-mac.sh # Windows (PowerShell) powershell -ExecutionPolicy Bypass -File "$HOME\.claude\skills\chrome-automation\scripts\auto-install-windows.ps1" The script automatically handles: - Repository cloning - Dependency installation (pnpm, Playwright) - Rust toolchain setup - Native binary compilation ### Connect and control Chrome **IMPORTANT: Use the start-chrome script to preserve login states across sessions** bash # Mac: Start Chrome with persistent profile (RECOMMENDED) # This preserves your login states, cookies, and settings bash ~/.claude/skills/chrome-automation/scripts/start-chrome-mac.sh # Windows: Start Chrome with persistent profile (PowerShell) powershell -ExecutionPolicy Bypass -File "$HOME\.claude\skills\chrome-automation\scripts\start-chrome-windows.ps1" # Use agent-browser with --cdp flag cd /Users/jyxc-dz-0100272/Documents/agent-browser AGENT_BROWSER_HOME=/Users/jyxc-dz-0100272/Documents/agent-browser \ ./bin/agent-browser --cdp 9222 snapshot -i **What the start-chrome script does:** 1. First run: Creates a dedicated automation profile at ~/Library/Application Support/Google/Chrome-Automation 2. First run: Imports your existing Chrome configuration (login states, cookies, settings) 3. Subsequent runs: Uses the existing automation profile - all your logins are preserved 4. You only need to log in once - it will be remembered for future sessions ## Core Workflow **CRITICAL: Always show browser state to user after each significant action using screenshots.** 1. **Connect**: Ensure Chrome running with remote debugging port 9222 2. **Navigate**: Open pages using --cdp 9222 flag 3. **Snapshot**: Get interactive elements with snapshot -i` 4. Interact: Use element refs (@e1, @e2, etc.) 5. Screenshot: Capture state and show to user