Claude in Chrome Skill

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:

1. Claude Code + Chrome Extension - Terminal-based browser control via claude --chrome
2. 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

1. Extension uses Chrome's Native Messaging API to receive commands
2. Claude opens new tabs for tasks (doesn't take over existing tabs)
3. Uses your browser's login state - no re-authentication needed
4. 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:

1. Click cursor icon or type "/" → "Record workflow"
2. Perform actions while Claude watches
3. 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:

1. When creating shortcut, toggle "Schedule"
2. Set frequency: daily, weekly, monthly, annually
3. Choose date/​time and model
4. 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

1. Be specific - Ambiguous instructions produce inconsistent results
2. Add verification - For long lists, add "verify you completed all items"
3. Handle modals - Dismiss alerts manually, then tell Claude to continue
4. Use fresh tabs - If a tab becomes unresponsive, ask for a new one
5. 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

Not supported:

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