How do I install the Chrome Dev Protocol skill?

Run npx skillmds add majiayu000/chrome-dev-protocol in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Chrome Dev Protocol safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chrome Dev Protocol?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chrome Dev Protocol free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chrome Dev Protocol?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chrome Dev Protocol by majiayu000 — Agent Skill

Name: Chrome Dev Protocol
Rating: 4.2 (5 reviews)
Author: majiayu000

Chrome Dev Protocol

Lightweight Chromium DevTools automation via the bundled browser-tools.ts CLI (Puppeteer connect). Use when you need to launch a Chromium-based browser with a remote-debugging port, navigate pages, run JS in the active tab, capture screenshots, inspect DevTools sessions, or extract readable content without a full browser automation server.

majiayu000 7e5c115 2 files · 3.6 KB Updated Sep 9, 2026 567 repo stars

File contents

Chromium DevTools Helpers

Overview

Use the bundled TypeScript CLI to drive Chromium through the Chrome DevTools Protocol. Prefer this when quick, local, single-purpose browser actions are needed and a full browser automation server is overkill.

Quick Start

Run from the skill directory so relative paths resolve:

cd /Users/douglas/.claude/skills/chrome-dev-protocol

# 1) Launch Chromium with remote debugging enabled
npx tsx scripts/browser-tools.ts start --port 9222

# 2) Navigate the active tab
npx tsx scripts/browser-tools.ts nav https://example.com --port 9222

# 3) Run JS in the active tab
npx tsx scripts/browser-tools.ts eval 'document.title' --port 9222

# 4) Capture a viewport screenshot (prints temp path)
npx tsx scripts/browser-tools.ts screenshot --port 9222

Core Commands

start: Launch Chromium with a DevTools port.
- Defaults to /Applications/Chromium.app/Contents/MacOS/Chromium.
- Use --chromium-path <path> for a custom Chromium binary (inferred name used for logs).
- Use --profile <name> to copy a specific Chromium profile (e.g., Default, Profile 2) and pass --profile-directory to skip the profile switcher.
- Fresh tabs are enabled by default; pass --no-fresh-tabs to keep restored tabs.
nav <url>: Navigate the current tab; use --new to force a new tab. If no normal page tab exists yet, it opens a new tab first. Falls back to a new tab if current-tab navigation fails in Chromium. Use --timeout <seconds> if the page is slow.
eval <code...>: Evaluate JavaScript in the active tab. Use --pretty-print for structured output.
screenshot: Capture the current viewport; prints the temp PNG path.
pick <message...>: Interactive DOM picker to collect metadata about clicked elements.
console: Stream or snapshot console logs. Use --follow to tail.
search <query...>: Google search with optional readable content extraction (--content).
content <url>: Extract readable text content from a URL.
cookies: Dump cookies from the active tab as JSON.
inspect: List DevTools-enabled Chromium processes and open tabs.
kill: Terminate DevTools-enabled Chromium processes.

Chromium Notes

The default profile copy uses ~/Library/Application Support/Chromium/ on macOS.
If the script cannot find a running tab, open one in Chromium before running nav, eval, screenshot, etc.

Resources

scripts/

scripts/browser-tools.ts: CLI for Chromium DevTools automation (adapted from steipete/agent-scripts).

---name: chrome-dev-protocoldescription: Lightweight Chromium DevTools automation via the bundled browser-tools.ts CLI (Puppeteer connect). Use when you need to launch a Chromium-based browser with a remote-debugging port, navigate pages, run JS in the active tab, capture screenshots, inspect DevTools sessions, or extract readable content without a full browser automation server.--- # Chromium DevTools Helpers ## Overview Use the bundled TypeScript CLI to drive Chromium through the Chrome DevTools Protocol. Prefer this when quick, local, single-purpose browser actions are needed and a full browser automation server is overkill. ## Quick Start Run from the skill directory so relative paths resolve: ```bash cd /Users/douglas/.claude/skills/chrome-dev-protocol # 1) Launch Chromium with remote debugging enabled npx tsx scripts/browser-tools.ts start --port 9222 # 2) Navigate the active tab npx tsx scripts/browser-tools.ts nav https://example.com --port 9222 # 3) Run JS in the active tab npx tsx scripts/browser-tools.ts eval 'document.title' --port 9222 # 4) Capture a viewport screenshot (prints temp path) npx tsx scripts/browser-tools.ts screenshot --port 9222 ``` ## Core Commands - `start`: Launch Chromium with a DevTools port. - Defaults to `/Applications/Chromium.app/Contents/MacOS/Chromium`. - Use `--chromium-path <path>` for a custom Chromium binary (inferred name used for logs). - Use `--profile <name>` to copy a specific Chromium profile (e.g., `Default`, `Profile 2`) and pass `--profile-directory` to skip the profile switcher. - Fresh tabs are enabled by default; pass `--no-fresh-tabs` to keep restored tabs. - `nav <url>`: Navigate the current tab; use `--new` to force a new tab. If no normal page tab exists yet, it opens a new tab first. Falls back to a new tab if current-tab navigation fails in Chromium. Use `--timeout <seconds>` if the page is slow. - `eval <code...>`: Evaluate JavaScript in the active tab. Use `--pretty-print` for structured output. - `screenshot`: Capture the current viewport; prints the temp PNG path. - `pick <message...>`: Interactive DOM picker to collect metadata about clicked elements. - `console`: Stream or snapshot console logs. Use `--follow` to tail. - `search <query...>`: Google search with optional readable content extraction (`--content`). - `content <url>`: Extract readable text content from a URL. - `cookies`: Dump cookies from the active tab as JSON. - `inspect`: List DevTools-enabled Chromium processes and open tabs. - `kill`: Terminate DevTools-enabled Chromium processes. ## Chromium Notes - The default profile copy uses `~/Library/Application Support/Chromium/` on macOS. - If the script cannot find a running tab, open one in Chromium before running `nav`, `eval`, `screenshot`, etc. ## Resources ### scripts/ - `scripts/browser-tools.ts`: CLI for Chromium DevTools automation (adapted from steipete/agent-scripts).

Frequently asked questions