Global Rank · of 601 Skills
chrome-devtools AI Agent Skill
View Source: oakoss/agent-skills
MediumInstallation
npx skills add oakoss/agent-skills --skill chrome-devtools 43
Installs
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
Taskagent with Chrome extension to fill forms, extract data, or navigate multi-step flows - Debug frontend issues with console and network inspection: Use
Exploreagent with DevTools MCP to capture console errors, network failures, and DOM state - Plan complex multi-tab data extraction pipelines: Use
Planagent 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
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install chrome-devtools by running npx skills add oakoss/agent-skills --skill chrome-devtools in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of chrome-devtools, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
