Chrome Devtools
einverne/dotfiles
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.
Drives a Chrome window over the DevTools Protocol with the agent-browser CLI, so the agent can reuse your logged-in sessions, read pages and pull tokens.
SKILL.md written in Chinese; this summary is our English description.
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdp --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/browser-cdp .claude/skills/browser-cdp && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "browser-cdp" agent skill from https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdp into .claude/skills/browser-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-cdp", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdpType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdp --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/browser-cdp .agents/skills/browser-cdp && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "browser-cdp" agent skill from https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdp into .agents/skills/browser-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-cdp", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdp --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/browser-cdp .cursor/skills/browser-cdp && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "browser-cdp" agent skill from https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdp into .cursor/skills/browser-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-cdp", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/zenstory-ai/oh-story-claudecode.git --path skills/browser-cdp--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdp --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/browser-cdp .gemini/skills/browser-cdp && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "browser-cdp" agent skill from https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdp into .gemini/skills/browser-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-cdp", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdpInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/browser-cdp .github/skills/browser-cdp && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "browser-cdp" agent skill from https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdp into .github/skills/browser-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-cdp", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdp --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/browser-cdp .opencode/skills/browser-cdp && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "browser-cdp" agent skill from https://github.com/zenstory-ai/oh-story-claudecode/tree/main/skills/browser-cdp into .opencode/skills/browser-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-cdp", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
browser-cdpDrives a Chrome window over the DevTools Protocol with the agent-browser CLI, so the agent can reuse your logged-in sessions, read pages and pull tokens.
The agent connects to a Chrome instance running in debug mode on port 9222 and drives it through the agent-browser command line tool. Because the debug profile keeps your logins, the agent can open pages that sit behind a sign-in, wait for them to load, read the page text, take element snapshots, then click and type.
A bundled script, scripts/setup-cdp-chrome.js, starts Chrome in debug mode. Its first start closes your regular Chrome, so the skill requires a detect-only check first and an explicit yes from you before it relaunches, since unsaved tabs or drafts could be lost. The script also has options to reset the debug profile, pick another profile and preview its steps with a dry run.
Typical operations include evaluating JavaScript on the page, reading localStorage or cookies to extract an auth token, and wrapping awkward scripts in base64 to avoid shell quoting problems. The instructions are written in Chinese, and Windows support is marked experimental.
Read from SKILL.md and the folder at commit 2cf7be6. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
nodenpmFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
qidian.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Chrome CDP Browser Control loads about 1.2k tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 277 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from zenstory-ai/oh-story-claudecode at commit 2cf7be6, republished under its MIT licence (© zenstory-ai). 277 words, ~1,229 tokens.
.claude/skills/browser-cdp/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.通过 CDP 协议控制 Chrome,复用已有登录态,执行浏览器自动化操作。
agent-browser 已安装:npm install -g agent-browser⚠️ 首次启动会 kill 用户的常规 Chrome。 在启动前必须征求用户同意(见下方"启动流程"),否则用户可能丢失未保存的标签页/草稿。
第一步:探测当前状态(无副作用)
node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --detect-only输出形如:
CDP_STATUS=ready # 已就绪,可直接复用
CDP_URL=http://127.0.0.1:9222/json/version
BROWSER=Chrome/148.0.7778.168或:
CDP_STATUS=needs-setup
CHROME_RUNNING=yes # 用户有 Chrome 在跑,启动会杀掉
CHROME_PID_COUNT=3第二步:根据探测结果分支
CDP_STATUS=ready → 直接使用 agent-browser --cdp 9222 ...,不要运行 setup。CDP_STATUS=needs-setup 且 CHROME_RUNNING=no → 安全启动:node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --yesCDP_STATUS=needs-setup 且 CHROME_RUNNING=yes → 先用 AskUserQuestion 工具向用户确认:告知会杀掉 N 个 Chrome 进程、可能丢失未保存工作;用户同意后再带 --yes 启动;用户拒绝则放弃这次自动化。为什么不能直接 --yes: 脚本在非 TTY(即 skill 模式 / Bash 工具)下,如果检测到 Chrome 在跑而没有 --yes,会以退出码 3 报 NEEDS_CONSENT: ... 并中止,不会静默杀进程。这是有意的兜底——但 skill 流程仍应先问用户,而不是看到 3 就盲传 --yes。
| 选项 | 说明 |
|---|---|
--detect-only | 只探测,不修改任何状态(skill 用) |
--yes | 已征得同意,跳过交互提示 |
--reset | 启动前清空 ~/chrome-debug-profile(登录失效时用) |
--profile <name> | 使用非 Default 的 Chrome profile(如 "Profile 1") |
--dry-run | 打印将执行的步骤,不执行 |
退出码:0 成功 / 1 通用错误 / 2 用户拒绝(TTY)/ 3 需同意但缺 --yes。
agent-browser --cdp 9222 open "<URL>"
agent-browser --cdp 9222 wait 3000agent-browser --cdp 9222 eval 'document.body.innerText.substring(0, 8000)'agent-browser --cdp 9222 eval 'localStorage.getItem("token") || document.cookie'$ / 反引号)shell 转义容易出错,用以下两种方式之一:
# 1) base64 包裹
agent-browser --cdp 9222 eval -b "$(echo -n "document.querySelectorAll('a').length" | base64)"
# 2) heredoc + --stdin
cat <<'EOF' | agent-browser --cdp 9222 eval --stdin
const links = document.querySelectorAll('a');
links.length;
EOFagent-browser --cdp 9222 snapshot -i # 仅交互元素
agent-browser --cdp 9222 click "<CSS or @e1>"
agent-browser --cdp 9222 type "<sel>" "<text>"--user-data-dir 核验出 debug 实例的 PID 再只结束它:pgrep -af chrome-debug-profilewmic process where "name='chrome.exe'" get ProcessId,CommandLine | findstr chrome-debug-profile
拿到 PID 后 kill -9 {PID} / taskkill /F /PID {PID}。核验不出归属时停止,手工清理不得按 Chrome 可执行文件名批量结束进程——那会连带杀掉用户的日常 Chrome。
例外:setup-cdp-chrome.js --reset 内部确实会做一次按可执行名的清理,它属于本 skill 自带的、需 --yes 显式同意的启动流程;手工排障不要复制该做法。node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --reset --yes(注意 --yes 同样需要先问用户)。opencode 没有后台执行命令行的工具,长时间的 CDP 操作(如等待页面加载、大批量数据抓取)会阻塞整个会话,导致 CLI 无响应。
Windows 上对 CDP 命令使用 PowerShell Job 包装超时:
$job = Start-Job { agent-browser --cdp 9222 eval "window.location.replace('https://www.qidian.com/rank/')" }
Wait-Job $job -Timeout 30 | Out-Null
if ($job.State -eq 'Running') { Stop-Job $job; Write-Output "⏱ CDP 操作超时(30s),请重试或手动打断" }
else { Receive-Job $job }
Remove-Job $job -ForcemacOS / Linux 上使用 timeout 命令:
timeout 30 agent-browser --cdp 9222 eval "window.location.replace('https://www.qidian.com/rank/')" || echo "⏱ CDP 操作超时(30s),请重试或手动打断"即使加了超时包装,以下场景仍可能出现问题:
| 场景 | 风险 | 缓解 |
|---|---|---|
| 页面加载超时 | eval 命令等待永不返回 | 设置 30s 超时,超时后重试 |
| 大批量数据抓取 | 多页翻页时累计等待过长 | 每页独立超时,失败后从断点继续 |
| Chrome 进程僵死 | CDP 连接断开但进程未退出 | 先核验 debug profile 对应 PID,只结束该 debug 实例后重连;不得连带普通 Chrome |
| 网络波动 | 请求挂起无超时 | 超时后自动重试一次 |
如遇到持续卡死的操作,在 opencode 中按 ESC 手动打断。
| 问题 | 解决方案 |
|---|---|
NEEDS_CONSENT + 退出码 3 | 用 AskUserQuestion 询问用户是否允许杀掉 Chrome,同意后加 --yes 重跑 |
| CDP 端口未监听 | --detect-only 再确认;端口被占用则换端口 |
| 页面跳转到登录页 | snapshot -i 找登录按钮并操作 |
eval 返回 null | 检查 localStorage key 名;含引号的 JS 用 eval -b 或 --stdin |
| 登录态过期 | setup-cdp-chrome.js 9222 --reset --yes 重新拷贝 |
| 有多个 Chrome profile | --profile "Profile 1" 指定 |
| Chrome 不会启动(30s 超时) | 试 --reset;检查端口冲突;查看 ~/chrome-debug-profile/ 是否损坏 |
© zenstory-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file (scripts) in skills/browser-cdp of zenstory-ai/oh-story-claudecode.
Open the folder on GitHubat commit 2cf7be6
We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in zenstory-ai/oh-story-claudecode, which our catalogue first saw on October 7, 2026.
Chrome CDP Browser Control next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Chrome CDP Browser Control this skillzenstory-ai/oh-story-claudecode | 7.4k | 2 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Chrome Devtoolseinverne/dotfiles | 121 | 1 repos | ~1.6k | Automated safety check: Notes | Apache-2.0 | |
| Javascript SDKaiskillstore/marketplace | 433 | 1 repos | ~3.3k | Automated safety check: Pass | None | |
| Ego Browserkwakseongjae/oh-my-design | 533 | 1 repos | ~4.9k | Automated safety check: Pass | MIT | |
| Agent Browseroxylabs/agent-skills | 875 | — | ~3k | Automated safety check: Pass | MIT | |
| Browser Tools981377660LMT/algorithm-study | 277 | 1 repos | ~1.3k | Automated safety check: Pass | None |
einverne/dotfiles
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.
aiskillstore/marketplace
JavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate with all models.
kwakseongjae/oh-my-design
When you need a browser, read this Skill by default. An agent skill from kwakseongjae/oh-my-design.
oxylabs/agent-skills
Connects to Oxylabs remote agent browsers over the Chrome DevTools Protocol (CDP) with Playwright or Puppeteer.
981377660LMT/algorithm-study
Interactive browser automation via Chrome DevTools Protocol.
agutinbaigo28/financial-agent-api
This skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP).
zenstory-ai/oh-story-claudecode
Reviews Chinese web-novel text with several reviewer agents in parallel, falling back to a single-agent pass, and reports structure, character, prose and setting problems with fixes.
zenstory-ai/oh-story-claudecode
Scans popular short web-fiction rankings on Chinese platforms such as Dianzhong and Heiyan to surface trending emotional hooks, themes and topic candidates with an expiry warning.
zenstory-ai/oh-story-claudecode
Routes a Chinese web-novel writing request to the matching tool in a 13-skill toolbox, covers author habit memory, and can launch a local dashboard for browsing a project.
zenstory-ai/oh-story-claudecode
Rewrites AI-sounding Chinese web novel text so it reads naturally, changing as little as possible and keeping plot, names and numbers intact.
zenstory-ai/oh-story-claudecode
Reverse-imports an existing novel, half-finished or complete, into the standard project structure so story-long-write or story-short-write can continue it.
zenstory-ai/oh-story-claudecode
Breaks down a long Chinese web novel chapter by chapter into plot, rhythm, characters, and style, through a resumable staged analysis.
Works with
Categories
Drives a Chrome window over the DevTools Protocol with the agent-browser CLI, so the agent can reuse your logged-in sessions, read pages and pull tokens. The agent connects to a Chrome instance running in debug mode on port 9222 and drives it through the agent-browser command line tool. Because the debug profile keeps your logins, the agent can open pages that sit behind a sign-in, wait for them to load, read the page text, take element snapshots, then click and type.
Chrome CDP Browser Control fits situations like: automating a site where you are already signed in, without logging in again; reading the text of a page that needs a logged-in session; extracting an auth token from the browser's local storage or cookies; clicking through or filling a page using element snapshots from a debug Chrome.
Run `npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a claude-code`. Or copy the skill folder (skills/browser-cdp in zenstory-ai/oh-story-claudecode) into .claude/skills/browser-cdp in your project. Claude Code loads it when a task matches its description.
Run `npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a codex`. Or copy the skill folder (skills/browser-cdp in zenstory-ai/oh-story-claudecode) into .agents/skills/browser-cdp in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-cdp, .gemini/skills/browser-cdp, .github/skills/browser-cdp and .opencode/skills/browser-cdp in your project.
Going by SKILL.md and its folder, Chrome CDP Browser Control needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npm). Our summary lists: Google Chrome; Node.js 20 or newer; agent-browser installed with `npm install -g agent-browser`.
SKILL.md names 1 domain. In commands or code: qidian.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Chrome CDP Browser Control is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Chrome CDP Browser Control: Chrome Devtools (einverne/dotfiles, 121 stars), Javascript SDK (aiskillstore/marketplace, 433 stars), Ego Browser (kwakseongjae/oh-my-design, 533 stars) and Agent Browser (oxylabs/agent-skills, 875 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
zenstory-ai (a GitHub organization) maintains it in zenstory-ai/oh-story-claudecode, which has 7,424 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 10, 2026.
Source: zenstory-ai/oh-story-claudecode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.