New to Claude Skills? Learn how to install them →

worldwonderer on GitHub

Browser CDP Automation

Free

Control Chrome via the Chrome DevTools Protocol.

Get this skill

Free · Opens the source repo

What Browser CDP Automation does

The Browser CDP Automation skill enables users to control a Chrome browser using the Chrome DevTools Protocol (CDP). This skill is particularly useful for automating browser tasks while reusing existing login sessions. It allows developers and designers to launch Chrome in debug mode, open specific URLs, wait for pages to load, evaluate JavaScript, take snapshots of web elements, and extract authentication tokens. By leveraging this skill, users can streamline their web automation processes without the need to log in repeatedly.

To get started, users must have Google Chrome installed along with Node.js 20 or higher. The skill requires the installation of the agent-browser package, which provides the necessary commands to interact with the Chrome instance. The setup process includes detecting the current state of Chrome, ensuring that users are informed before any existing sessions are terminated, thus preventing potential data loss. Users can execute a variety of commands to interact with web pages, such as extracting text or tokens, and can manage complex JavaScript evaluations safely.

This skill is ideal for developers who need to automate repetitive web tasks, such as data scraping or testing web applications. It is also beneficial for designers who want to gather information from web pages without manual intervention. The automation capabilities provided by this skill can save time and reduce the likelihood of human error in routine browser interactions.

However, users should be cautious as the initial launch of the Chrome instance in debug mode will terminate any existing Chrome sessions. This skill is best used in environments where losing unsaved work is not an issue. It is also important to note that while the skill provides robust automation capabilities, it may not be suitable for tasks requiring extensive background processing due to potential command blocking in certain environments.

When to use it

Use this skill when you need to automate browser tasks in Chrome, especially when working with authenticated sessions.

When not to use it

Avoid using this skill in environments where you cannot afford to lose unsaved browser sessions or when extensive background processing is required.

What you can build with it

Automating Web Data Extraction

Use the skill to automate the extraction of data from web pages, such as product listings or user information, without manual login.

Testing Web Applications

Leverage the skill to automate testing workflows for web applications by interacting with the browser programmatically.

Gathering Analytics Data

Utilize the skill to extract analytics data or user tokens from web applications for reporting and analysis.

How to install Browser CDP Automation

View source

1. Install with the skills CLI

npx skills add worldwonderer/oh-story-claudecode/browser-cdp --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by worldwonderer

Browser CDP 操作工具

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

前置条件

  • macOS / Linux / Windows(实验性),已安装 Google Chrome
  • Node.js 20+
  • 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 窗口即可。若窗口无响应,先按 --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 包装超时:

$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 命令:

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/ 是否损坏

Frequently asked questions about Browser CDP Automation

Similar skills