chrome-devtools

Name: chrome-devtools
Author: oakoss

github.com/oakossProductivity20138 installsUpdated 11w ago

About chrome-devtools

chrome-devtools is a skill for controlling a real Chrome browser through Claude, using an authenticated browser session. It supports browser tasks and debugging through Claude Code with the extension or Chrome DevTools MCP.

Key features

01Control authenticated Chrome sessions
02Navigate tabs and interact with pages
03Inspect DOM, console, and network data
04Capture screenshots and performance traces
05Record and schedule browser workflows

Use cases

01Automate form filling on logged-in sites
02Inspect frontend console and network errors
03Extract data across multiple tabs
04Schedule recurring browser tasks

MCP support

Chrome DevTools MCP provides 26 browser automation tools for programmatic control of a real Chrome instance. The skill also documents setup and use with Claude Code and the Chrome extension.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oakoss/agent-skills --skill chrome-devtools

After installing, type/chrome-devtoolsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

automation-workflows.md

claude-code-integration.md

devtools-mcp.md

shortcuts-scheduling.md

troubleshooting.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: oakoss
Repository: oakoss/agent-skills
Category: Productivity
Installs: 138
GitHub stars: 20

Report

More skills

All skills

lark-base

open.feishu.cn

834.8k

Operate on Feishu Base: create tables, fields, records, and views; handle statistics, formulas/lookups, forms, dashboards, app mode (BaseApp/AppMode pages and components), Workspace directories, workflows, role permissions, and the template center (Base template categories, lists, and search). Use when encountering Base/multidimensional tables/bitable, BaseApp/AppMode, or /base/ or /app/ links. Do not use lark-apps for BaseApp; route file import/export to lark-drive and authentication/authorization to lark-shared.

lark-drive

open.feishu.cn

834.8k

Feishu cloud storage (Drive): manage Drive files and folders, including uploads/downloads, folder creation, copying/moving/deleting, viewing metadata, checking permission settings, comments/permissions/subscriptions, titles, versions, Feishu document security labels (secure labels), and local file imports. Use when users need to organize Drive folders, handle cloud storage resource URLs/tokens, identify link types/actual tokens/titles, or import Word/Markdown/Excel/CSV/PPTX/.base as docx/sheet/bitable/slides. Route doubao.com cloud storage URLs/tokens by resource path and token too; do not fall back to WebFetch. Not responsible for: editing document content (use lark-doc), spreadsheet/Base table data operations (use lark-sheets/lark-base), knowledge space node/member management (use lark-wiki), or native Markdown file read/write/patch/diff (use lark-markdown).

lark-shared

open.feishu.cn

834.5k

Use for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handling _notice JSON.

lark-im

open.feishu.cn

833.8k

Feishu instant messaging: send and receive messages and manage group chats. Send and reply to messages, search chat history, manage group members, upload and download images and files, manage emoji reactions, send urgent notifications in-app/by SMS/by phone, send and handle Interactive Cards, and listen for card button callbacks (card.action.trigger). Use when users need to send messages, view or search chat history, download chat files, view group members, search groups, create group or topic chats, manage marker data, manage Feed pins (add/remove/search pinned conversations), manage tag data, or handle card callbacks.