Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
worldwonderer avatar

Browser Cdp

  • 10.3k installs
  • 5k repo stars
  • Updated August 4, 2026
  • worldwonderer/oh-story-claudecode

How do you safely start Chrome CDP on port 9222 and automate pages with agent-browser while reusing login sessions?

About

This skill controls Google Chrome through the Chrome DevTools Protocol using the agent-browser CLI and a setup script on port 9222. It prioritizes a detect-only probe that reports CDP_STATUS ready or needs-setup before mutating the user environment. When Chrome is already running, the agent must ask for consent because setup can kill regular Chrome and lose unsaved tabs. Ready sessions connect with agent-browser --cdp 9222 for open, wait, eval, snapshot, click, and type operations. Complex JavaScript uses base64 eval or stdin heredoc to avoid shell escaping errors. Auth tokens can be read from localStorage or cookies. The workflow supports resetting the debug profile when login state expires and documents exit codes for consent, errors, and success. Use it when browser automation must reuse an existing logged-in Chrome session rather than starting cold.

  • Detect-only setup probe avoids killing Chrome when CDP is already ready
  • Requires user consent before setup when CHROME_RUNNING=yes
  • agent-browser --cdp 9222 supports open, eval, snapshot, click, and type
  • Complex JS uses eval -b base64 or eval --stdin to avoid shell escaping
  • Exit code 3 signals NEEDS_CONSENT when Chrome is running without --yes

Browser Cdp by the numbers

  • 10,294 all-time installs (skills.sh)
  • +665 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #50 of 2,715 Automation & Workflows skills by installs in the Skillselion catalog
  • Security screen: CRITICAL risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/worldwonderer/oh-story-claudecode --skill browser-cdp

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs10.3k
repo stars5k
Security audit0 / 3 scanners passed
Last updatedAugust 4, 2026
Repositoryworldwonderer/oh-story-claudecode

What it does

Control Chrome via CDP with agent-browser to reuse login sessions for navigation, JavaScript eval, snapshots, and auth token extraction.

Who is it for?

Agents scraping logged-in web apps, extracting auth tokens, and reusing Chrome sessions for multi-step browser workflows.

Skip if: Headless scraping without Chrome installed, server-side APIs that do not need a browser, or greenfield login flows without session reuse.

When should I use this skill?

User needs browser automation, CDP control, session reuse, token extraction, or agent-browser commands against an existing Chrome profile.

What you get

Chrome CDP is probed safely, user consent is obtained when needed, and agent-browser commands extract pages, tokens, and interactive snapshots reliably.

  • CDP-ready Chrome debug session
  • structured CDP_STATUS detect output

By the numbers

  • Documents 4 exit codes for setup-cdp-chrome.js
  • Supports 5 CLI flags including --detect-only and --reset

Files

SKILL.mdMarkdownGitHub ↗

Browser CDP 操作工具

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

前置条件

  • macOS / Linux / Windows(实验性),已安装 Google Chrome
  • Node.js 12+
  • agent-browser 已安装:npm install -g agent-browser
⚠️ 首次启动会 kill 用户的常规 Chrome。 在启动前必须征求用户同意(见下方"启动流程"),否则用户可能丢失未保存的标签页/草稿。

---

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

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

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-setupCHROME_RUNNING=no → 安全启动:
  node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --yes
  • CDP_STATUS=needs-setupCHROME_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 3000

提取页面文本

agent-browser --cdp 9222 eval 'document.body.innerText.substring(0, 8000)'

提取 Auth Token

agent-browser --cdp 9222 eval 'localStorage.getItem("token") || document.cookie'

复杂 JS(含引号 / $ / 反引号)

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;
EOF

页面交互(snapshot 拿元素引用)

agent-browser --cdp 9222 snapshot -i        # 仅交互元素
agent-browser --cdp 9222 click "<CSS or @e1>"
agent-browser --cdp 9222 type "<sel>" "<text>"

---

停止 / 清理

  • 关掉 debug Chrome 窗口即可(或 pkill -9 -x 'Google Chrome' / taskkill /F /IM chrome.exe)。
  • 登录态失效:node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --reset --yes(注意 --yes 同样需要先问用户)。

---

常见问题

问题解决方案
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/ 是否损坏

Related skills

FAQ

What does browser-cdp setup script do?

browser-cdp runs setup-cdp-chrome.js to launch Chrome with CDP debugging on a configurable port, copying the user profile so agent-browser inherits logins, cookies, and extensions.

How do you check CDP status without changing Chrome?

browser-cdp supports setup-cdp-chrome.js --detect-only, which outputs structured KEY=value lines like CDP_STATUS=ready without modifying the running Chrome environment.

Is Browser Cdp safe to install?

skills.sh reports 0 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Automation & Workflowsintegrationstesting

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.