Agent skill

Chrome CDP Browser Control

by zenstory-ai in zenstory-ai/oh-story-claudecode

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.

MITAuto-check passedProductivity & Automation

SKILL.md written in Chinese; this summary is our English description.

Install Chrome CDP Browser Control

skills CLI
$ npx skills add zenstory-ai/oh-story-claudecode --skill browser-cdp -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install zenstory-ai/oh-story-claudecode browser-cdp --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
browser-cdp
GitHub stars
7.4k
Used in
2 other repos
Token cost
~1.2k tokens
SKILL.md length
277 words
Files
2 (incl. scripts)
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Automating a site where you are already signed in, without logging in again
  • SKILL.md covers 前置条件, 启动流程(skill-mode 强制步骤), 启动脚本选项 and 常用操作, plus 3 more sections
  • Runs JavaScript scripts from its folder; calls node and npm; reaches qidian.com
  • Reading the text of a page that needs a logged-in session

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Open my analytics dashboard in Chrome over CDP and copy the text of the page.”
  • “Check whether port 9222 already has a debug Chrome running before starting a new one.”
  • “Use agent-browser to read the auth token from localStorage on the site I am logged into.”

Requirements

  • Google Chrome
  • Node.js 20 or newer
  • agent-browser installed with `npm install -g agent-browser`

What it can do on your machine

Read from SKILL.md and the folder at commit 2cf7be6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • qidian.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~100
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from zenstory-ai/oh-story-claudecode at commit 2cf7be6, republished under its MIT licence (© zenstory-ai). 277 words, ~1,229 tokens.

Download SKILL.mdSave it as .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.
name
browser-cdp
description
Use this skill when you need to control a Chrome browser via CDP (Chrome DevTools Protocol) to reuse existing login sessions. Covers: launching Chrome in debug mode, opening URLs, waiting for page load, evaluating JavaScript, taking snapshots, and extracting auth tokens. Trigger phrases: browser automation, CDP, agent-browser, 浏览器操作, 操作浏览器, Chrome CDP, 复用登录态, extract token from browser.

Browser CDP 操作工具

通过 CDP 协议控制 Chrome,复用已有登录态,执行浏览器自动化操作。

前置条件

  • macOS / Linux / Windows(实验性),已安装 Google Chrome
  • Node.js 20+
  • agent-browser 已安装:npm install -g agent-browser

⚠️ 首次启动会 kill 用户的常规 Chrome。 在启动前必须征求用户同意(见下方"启动流程"),否则用户可能丢失未保存的标签页/草稿。


启动流程(skill-mode 强制步骤)

第一步:探测当前状态(无副作用)

bash
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 → 安全启动:
    bash
    node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --yes
  • CDP_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。


常用操作

打开页面并等待加载
bash
agent-browser --cdp 9222 open "<URL>"
agent-browser --cdp 9222 wait 3000
提取页面文本
bash
agent-browser --cdp 9222 eval 'document.body.innerText.substring(0, 8000)'
提取 Auth Token
bash
agent-browser --cdp 9222 eval 'localStorage.getItem("token") || document.cookie'
复杂 JS(含引号 / $ / 反引号)

shell 转义容易出错,用以下两种方式之一:

bash
# 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;
EOF
页面交互(snapshot 拿元素引用)
bash
agent-browser --cdp 9222 snapshot -i        # 仅交互元素
agent-browser --cdp 9222 click "<CSS or @e1>"
agent-browser --cdp 9222 type "<sel>" "<text>"

停止 / 清理

  • 关掉 debug Chrome 窗口即可。若窗口无响应,先按 --user-data-dir 核验出 debug 实例的 PID 再只结束它:
    • macOS / Linux:pgrep -af chrome-debug-profile
    • Windows:wmic 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 环境注意事项

opencode 没有后台执行命令行的工具,长时间的 CDP 操作(如等待页面加载、大批量数据抓取)会阻塞整个会话,导致 CLI 无响应。

超时包装

Windows 上对 CDP 命令使用 PowerShell Job 包装超时:

powershell
$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 -Force

macOS / Linux 上使用 timeout 命令:

bash
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

Files

SKILL.md and 1 other file (scripts) in skills/browser-cdp of zenstory-ai/oh-story-claudecode.

  • SKILL.md
  • scripts/setup-cdp-chrome.js

Open the folder on GitHubat commit 2cf7be6

Used in 3 other repositories

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.

Compare with similar skills

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.

Chrome CDP Browser Control compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chrome CDP Browser Control this skillzenstory-ai/oh-story-claudecode7.4k2 repos~1.2kAutomated safety check: PassMIT
Chrome Devtoolseinverne/dotfiles1211 repos~1.6kAutomated safety check: NotesApache-2.0
Javascript SDKaiskillstore/marketplace4331 repos~3.3kAutomated safety check: PassNone
Ego Browserkwakseongjae/oh-my-design5331 repos~4.9kAutomated safety check: PassMIT
Agent Browseroxylabs/agent-skills875—~3kAutomated safety check: PassMIT
Browser Tools981377660LMT/algorithm-study2771 repos~1.3kAutomated safety check: PassNone

Similar skills

  • Chrome Devtools

    einverne/dotfiles

    Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.

    121 GitHub starsUsed in 1 repo~1.6k tokens
    Data & AnalyticsAuto-check: notes
  • Javascript SDK

    aiskillstore/marketplace

    JavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate with all models.

    433 GitHub starsUsed in 1 repo~3.3k tokens
    Backend & APIsAuto-check passed
  • Ego Browser

    kwakseongjae/oh-my-design

    When you need a browser, read this Skill by default. An agent skill from kwakseongjae/oh-my-design.

    533 GitHub starsUsed in 1 repo~4.9k tokens
    Productivity & AutomationAuto-check passed
  • Agent Browser

    oxylabs/agent-skills

    Connects to Oxylabs remote agent browsers over the Chrome DevTools Protocol (CDP) with Playwright or Puppeteer.

    875 GitHub stars~3k tokensUpdated 10 days ago
    Productivity & AutomationAuto-check passed
  • Browser Tools

    981377660LMT/algorithm-study

    Interactive browser automation via Chrome DevTools Protocol.

    277 GitHub starsUsed in 1 repo~1.3k tokens
    Productivity & AutomationAuto-check passed
  • Browser

    agutinbaigo28/financial-agent-api

    This skill should be used for browser automation tasks using Chrome DevTools Protocol (CDP).

    128 GitHub starsUsed in 1 repo~480 tokens
    Productivity & AutomationAuto-check passed

More from zenstory-ai/oh-story-claudecode

All 13 skills in this repo
  • Story Multi-Perspective Review

    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.

    7.4k GitHub starsUsed in 3 repos~3k tokens
    Auto-check passed
  • Short Web Fiction Trend Scan

    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.

    7.4k GitHub starsUsed in 2 repos~1.2k tokens
    Auto-check passed
  • Story Toolbox Router

    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.

    7.4k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Web Novel AI-Trace Remover

    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.

    7.4k GitHub starsUsed in 1 repo~2.6k tokens
    Auto-check passed
  • Novel Import and Project Rebuild

    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.

    7.4k GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed
  • Long-Form Web Novel Deconstruction

    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.

    7.4k GitHub stars~2k tokensUpdated today
    Auto-check passed

Questions about Chrome CDP Browser Control

What does Chrome CDP Browser Control do?

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.

When should I use Chrome CDP Browser Control?

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.

How do I install Chrome CDP Browser Control in Claude Code?

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.

How do I install Chrome CDP Browser Control in Codex?

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.

Can I use Chrome CDP Browser Control in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Chrome CDP Browser Control need to run?

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

Does Chrome CDP Browser Control access the network?

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.

Is Chrome CDP Browser Control safe to install?

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.

What licence does Chrome CDP Browser Control use?

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.

How many tokens does Chrome CDP Browser Control use?

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.

What are the alternatives to Chrome CDP Browser Control?

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.

Who maintains Chrome CDP Browser Control?

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.