browser-cdp
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.
Profile →npx skills add worldwonderer/oh-story-claudecode --skill browser-cdp --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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-mode 强制步骤）
- 启动脚本选项
- 常用操作
- 打开页面并等待加载
- 提取页面文本
- 提取 Auth Token
- 复杂 JS（含引号 / $ / 反引号）
- 页面交互（snapshot 拿元素引用）
- 停止 / 清理
- OpenCode 环境注意事项
- 超时包装
- 已知限制
- 常见问题
node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --detect-only
node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --yes
agent-browser --cdp 9222 open "<URL>"
agent-browser --cdp 9222 wait 3000
agent-browser --cdp 9222 eval 'document.body.innerText.substring(0, 8000)'
agent-browser --cdp 9222 eval 'localStorage.getItem("token") || document.cookie'
agent-browser --cdp 9222 eval -b "$(echo -n "document.querySelectorAll('a').length" | base64)"
cat <<'EOF' | agent-browser --cdp 9222 eval --stdin
agent-browser --cdp 9222 snapshot -i # 仅交互元素
agent-browser --cdp 9222 click "<CSS or @e1>"What does the browser-cdp skill do?
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.
How do I install it?
Run `npx skills add worldwonderer/oh-story-claudecode --skill browser-cdp --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From worldwonderer/oh-story-claudecode, a repository with 5,024 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.