Claude in Chrome Skill

Control your real Chrome browser with Claude. The extension runs in your authenticated browser session, so Claude can interact with sites you're already logged into - Gmail, Google Docs, Notion, CRMs, and more.

Integration Options

There are two ways to control Chrome:

Claude Code + Chrome Extension - Terminal-based browser control via claude --chrome Chrome DevTools MCP - MCP server providing 26 browser automation tools

Both use your real Chrome with existing logins - no re-authentication needed.

Option 1: Claude Code + Chrome Extension Prerequisites Google Chrome browser Claude in Chrome extension (v1.0.36+) from Chrome Web Store Claude Code CLI (v2.0.73+) Paid Claude plan (Pro, Team, Enterprise, or Max) Setup

Update Claude Code:

claude update

Start with Chrome enabled:

claude --chrome

Check connection status:

/chrome

Enable Chrome by default:

/chrome

Select "Enabled by default"

Browser Capabilities

Navigation & Interaction:

Navigate to URLs Click elements (buttons, links, form fields) Type text into inputs Scroll pages Create and manage tabs Resize windows

Information Retrieval:

Read page content and DOM state Access console logs and errors Monitor network requests Extract structured data from pages

Advanced:

Fill forms automatically Record browser actions as GIFs Chain browser + terminal commands Work across multiple tabs Example Prompts Basic Navigation Go to github.com/anthropics and click on the "Code" tab

Form Testing Open localhost:3000, try submitting the login form with invalid data, and check if error messages appear correctly

Console Debugging Open the dashboard page and check the console for any errors when the page loads

Data Extraction Go to the product listings page and extract the name, price, and availability for each item. Save as CSV.

Authenticated Workflows Draft a project update based on our recent commits and add it to my Google Doc at docs.google.com/document/d/abc123

Form Automation I have contacts in contacts.csv. For each row, go to crm.example.com, click "Add Contact", and fill in the name, email, and phone fields.

Record Demo GIF Record a GIF showing the checkout flow from adding an item to cart through to the confirmation page

How It Works Extension uses Chrome's Native Messaging API to receive commands Claude opens new tabs for tasks (doesn't take over existing tabs) Uses your browser's login state - no re-authentication needed Pauses for CAPTCHAs, login prompts, or modal dialogs (you handle, then continue) Troubleshooting

Extension not detected:

claude --version # Should be 2.0.73+

Then run /chrome and select "Reconnect extension"

Browser not responding:

Check for blocking modal dialogs (alert, confirm, prompt) Ask Claude to create a new tab and retry Restart Chrome extension (disable/re-enable in chrome://extensions) Option 2: Chrome DevTools MCP

An alternative/complementary approach using Model Context Protocol.

Installation claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Or add to MCP config:

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }

Available Tools (26 total)

Input Automation (8 tools):

click - Click elements drag - Drag and drop fill - Fill input fields fill_form - Fill entire forms handle_dialog - Handle alerts/confirms/prompts hover - Hover over elements press_key - Keyboard input upload_file - Upload files

Navigation (6 tools):

navigate_page - Go to URL new_page - Create new tab close_page - Close tab list_pages - List open pages select_page - Switch to page wait_for - Wait for element/condition

Debugging (5 tools):

take_screenshot - Capture page take_snapshot - Capture DOM evaluate_script - Run JavaScript get_console_message - Get console log list_console_messages - Get all logs

Network (2 tools):

list_network_requests - List requests get_network_request - Get request details

Performance (3 tools):

performance_start_trace - Start tracing performance_stop_trace - Stop tracing performance_analyze_insight - Analyze results

Emulation (2 tools):

emulate - Emulate device resize_page - Resize viewport Configuration Options

Connect to running Chrome

npx chrome-devtools-mcp@latest --browser-url http://localhost:9222

Headless mode

npx chrome-devtools-mcp@latest --headless

Custom viewport

npx chrome-devtools-mcp@latest --viewport 1920x1080

Use Chrome Canary

npx chrome-devtools-mcp@latest --channel canary

Claude in Chrome Extension Features Workflow Shortcuts

Create reusable shortcuts (type "/" in extension):

Record a workflow:

Click cursor icon or type "/" → "Record workflow" Perform actions while Claude watches Claude generates shortcut with name, description, URL

Save from conversation:

Click "Convert to task" on conversation header Or hover over a sent prompt and save it Scheduled Tasks

Set recurring browser automation:

When creating shortcut, toggle "Schedule" Set frequency: daily, weekly, monthly, annually Choose date/time and model Claude runs automatically with notifications

Example scheduled tasks:

Daily inbox cleanup at 9am Weekly competitor scan every Monday Monthly expense report filing Multi-Tab Workflows

Claude can see and work across tabs in the same tab group:

Reference information from multiple tabs Copy data between tabs Coordinate actions across sites Workflow Examples

Email Management:

/inbox-cleanup Archive emails from newsletters, star emails mentioning deadlines, delete obvious spam

Research:

/competitor-scan Check competitor blogs, pricing pages, and careers pages. Summarize any changes since last week.

Form Filling:

/vendor-application Fill vendor application form using our company documents. Pause before final submission for review.

Meeting Prep:

/stakeholder-map Research LinkedIn profiles of meeting attendees. Summarize their backgrounds and priorities.

Best Practices When to Use Browser Automation

Good for:

Form filling and data entry Button clicking and navigation Extracting data from authenticated pages Testing web applications Executing predefined workflows Tasks behind logins

Better manually:

One-click tasks (faster by hand) Subjective decisions Exploratory research (use Claude.ai chat instead) Tips Be specific - Ambiguous instructions produce inconsistent results Add verification - For long lists, add "verify you completed all items" Handle modals - Dismiss alerts manually, then tell Claude to continue Use fresh tabs - If a tab becomes unresponsive, ask for a new one Filter console output - Specify patterns vs. requesting all logs Security Site-level permissions control which sites Claude can access High-risk actions (publish, purchase, share data) require confirmation Some site categories blocked (financial services, adult content) Manage permissions in extension settings Common Workflows for Clawdbot Testing Local Development "Open localhost:3000, test the new form validation, check console for errors, and screenshot any issues you find"

Authenticated Data Extraction "Go to my Google Analytics, get this week's traffic summary, and save it to a file"

Content Management "Open my Notion workspace, find the Q4 planning doc, and add a new section with today's meeting notes"

Email Drafts "Open Gmail, find unread emails from the engineering team, and draft replies for each one without sending"

Multi-Site Research "Compare pricing on our product page vs the top 3 competitors. Create a markdown table with the differences."

Requirements Component Minimum Version Google Chrome Latest stable Claude in Chrome Extension 1.0.36+ Claude Code CLI 2.0.73+ Claude Plan Pro, Team, Enterprise, or Max Node.js (for DevTools MCP) 20.19+

Not supported:

Other Chromium browsers (Brave, Arc, Edge) WSL (Windows Subsystem for Linux) Headless mode (for extension; DevTools MCP supports headless) Mobile devices