#601

Globales Ranking · von 601 Skills

chrome-devtools AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Medium

Installation

npx skills add oakoss/agent-skills --skill chrome-devtools

43

Installationen

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

Installationen

Installationen 43
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Medium
EU 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 API

GLM

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

So verwenden Sie diesen Skill

1

Install chrome-devtools by running npx skills add oakoss/agent-skills --skill chrome-devtools in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für chrome-devtools, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU 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.

Start for free View pricing
Kundensupport