Chrome DevTools Skill
Control a real Chrome browser with Claude. The Chrome extension runs inside an authenticated browser session, allowing interaction with sites the user is already logged into -- Gmail, Google Docs, Notion, CRMs, and more.
Overview
Two integration paths exist: Claude Code + Chrome Extension (terminal-based browser control via claude --chrome) and Chrome DevTools MCP (26 browser automation tools via Model Context Protocol). Both operate on a real Chrome instance with existing logins, requiring no re-authentication. The Chrome extension also supports workflow shortcuts, scheduled recurring tasks, and multi-tab coordination independently of Claude Code.
Quick Reference
| Integration |
Setup |
Best For |
| Claude Code + Extension |
claude --chrome |
Terminal-based browser control |
| Chrome DevTools MCP |
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest |
Programmatic automation via MCP tools |
| Capability |
Tools/Methods |
| Navigation |
Navigate URLs, create/close/switch tabs, resize windows |
| Input |
Click, type, fill forms, drag, hover, press keys, upload files |
| Extraction |
Read page content, DOM state, console logs, network requests |
| Debugging |
Screenshots, DOM snapshots, evaluate JavaScript, performance tracing |
| Emulation |
Device emulation, viewport resizing |
| Recording |
Record browser interactions as GIFs, save workflow shortcuts |
| Scheduling |
Workflow shortcuts with daily/weekly/monthly/annual triggers |
| Requirement |
Minimum |
| Google Chrome |
Latest stable |
| Claude in Chrome Extension |
1.0.36+ |
| Claude Code CLI |
2.0.73+ |
| Claude Plan |
Pro, Team, or Enterprise |
| Node.js (DevTools MCP) |
20.19+ |
Not supported: Other Chromium browsers (Brave, Arc, Edge), WSL, headless mode (extension path only; DevTools MCP supports headless), mobile devices.
Common Mistakes
| Mistake |
Correct Pattern |
Running browser automation without --chrome flag |
Start Claude Code with claude --chrome or enable Chrome by default via /chrome settings |
| Trying to take over existing tabs |
Claude opens new tabs for tasks; it does not hijack tabs you already have open |
| Not handling CAPTCHAs and modal dialogs manually |
Claude pauses at CAPTCHAs, login prompts, and modals; dismiss them yourself then tell Claude to continue |
| Using ambiguous instructions for form filling |
Be specific about field names, values, and order; ambiguous prompts produce inconsistent results |
| Requesting all console logs without filtering |
Specify log patterns or error types; requesting everything floods context with noise |
| Enabling Chrome by default without need |
Increases context usage since browser tools are always loaded; use --chrome flag only when needed |
Using DevTools MCP without --scope user |
Add --scope user to make the MCP server available across all projects |
Delegation
- Automate repetitive browser workflows across sites: Use
Task agent with Chrome extension to fill forms, extract data, or navigate multi-step flows
- Debug frontend issues with console and network inspection: Use
Explore agent with DevTools MCP to capture console errors, network failures, and DOM state
- Plan complex multi-tab data extraction pipelines: Use
Plan agent to design the workflow steps before executing browser automation
- Record and schedule recurring browser tasks: Use Chrome extension shortcuts with scheduling for daily/weekly automation
References
- Claude Code Chrome integration -- setup, capabilities, and how the extension communicates with Claude Code
- Chrome DevTools MCP tools -- all 26 MCP tools organized by category with configuration options
- Browser automation workflows -- common patterns for testing, data extraction, and content management
- Workflow shortcuts and scheduling -- creating reusable shortcuts and scheduled recurring tasks
- Troubleshooting and best practices -- fixing connection issues, handling dialogs, and security considerations
1---2name: chrome-devtools3description: Browser automation via Chrome extension and DevTools MCP. Use when controlling a logged-in Chrome browser, automating workflows, filling forms, extracting data, debugging web apps, reading console logs, or running scheduled browser tasks. Use for browser testing, form automation, data extraction, web scraping, authenticated browsing.4license: MIT5---6
7# Chrome DevTools Skill
8
9Control a real Chrome browser with Claude. The Chrome extension runs inside an authenticated browser session, allowing interaction with sites the user is already logged into -- Gmail, Google Docs, Notion, CRMs, and more.
10
11## Overview
12
13Two integration paths exist: Claude Code + Chrome Extension (terminal-based browser control via `claude --chrome`) and Chrome DevTools MCP (26 browser automation tools via Model Context Protocol). Both operate on a real Chrome instance with existing logins, requiring no re-authentication. The Chrome extension also supports workflow shortcuts, scheduled recurring tasks, and multi-tab coordination independently of Claude Code.
14
15## Quick Reference
16
17| Integration | Setup | Best For |
18| ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------- |
19| Claude Code + Extension | `claude --chrome` | Terminal-based browser control |
20| Chrome DevTools MCP | `claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest` | Programmatic automation via MCP tools |
21
22| Capability | Tools/Methods |
23| ---------- | -------------------------------------------------------------------- |
24| Navigation | Navigate URLs, create/close/switch tabs, resize windows |
25| Input | Click, type, fill forms, drag, hover, press keys, upload files |
26| Extraction | Read page content, DOM state, console logs, network requests |
27| Debugging | Screenshots, DOM snapshots, evaluate JavaScript, performance tracing |
28| Emulation | Device emulation, viewport resizing |
29| Recording | Record browser interactions as GIFs, save workflow shortcuts |
30| Scheduling | Workflow shortcuts with daily/weekly/monthly/annual triggers |
31
32| Requirement | Minimum |
33| -------------------------- | ------------------------ |
34| Google Chrome | Latest stable |
35| Claude in Chrome Extension | 1.0.36+ |
36| Claude Code CLI | 2.0.73+ |
37| Claude Plan | Pro, Team, or Enterprise |
38| Node.js (DevTools MCP) | 20.19+ |
39
40**Not supported**: Other Chromium browsers (Brave, Arc, Edge), WSL, headless mode (extension path only; DevTools MCP supports headless), mobile devices.
41
42## Common Mistakes
43
44| Mistake | Correct Pattern |
45| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
46| Running browser automation without `--chrome` flag | Start Claude Code with `claude --chrome` or enable Chrome by default via `/chrome` settings |
47| Trying to take over existing tabs | Claude opens new tabs for tasks; it does not hijack tabs you already have open |
48| Not handling CAPTCHAs and modal dialogs manually | Claude pauses at CAPTCHAs, login prompts, and modals; dismiss them yourself then tell Claude to continue |
49| Using ambiguous instructions for form filling | Be specific about field names, values, and order; ambiguous prompts produce inconsistent results |
50| Requesting all console logs without filtering | Specify log patterns or error types; requesting everything floods context with noise |
51| Enabling Chrome by default without need | Increases context usage since browser tools are always loaded; use `--chrome` flag only when needed |
52| Using DevTools MCP without `--scope user` | Add `--scope user` to make the MCP server available across all projects |
53
54## Delegation
55
56- **Automate repetitive browser workflows across sites**: Use `Task` agent with Chrome extension to fill forms, extract data, or navigate multi-step flows
57- **Debug frontend issues with console and network inspection**: Use `Explore` agent with DevTools MCP to capture console errors, network failures, and DOM state
58- **Plan complex multi-tab data extraction pipelines**: Use `Plan` agent to design the workflow steps before executing browser automation
59- **Record and schedule recurring browser tasks**: Use Chrome extension shortcuts with scheduling for daily/weekly automation
60
61## References
62
63- [Claude Code Chrome integration](references/claude-code-integration.md) -- setup, capabilities, and how the extension communicates with Claude Code
64- [Chrome DevTools MCP tools](references/devtools-mcp.md) -- all 26 MCP tools organized by category with configuration options
65- [Browser automation workflows](references/automation-workflows.md) -- common patterns for testing, data extraction, and content management
66- [Workflow shortcuts and scheduling](references/shortcuts-scheduling.md) -- creating reusable shortcuts and scheduled recurring tasks
67- [Troubleshooting and best practices](references/troubleshooting.md) -- fixing connection issues, handling dialogs, and security considerations
oakoss