Browser cdp

--- name: browser-cdp description: "Use thisskill 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 pages to load, evaluating JavaScript, taking snapshots, and extracting auth tokens. Trigger phrases: browser automation, CDP,agent -browser, browser operations, operating a browser, Chrome CDP, reuse login state, extract token from browser." metadata: openclaw: requires: bins: -agent -browser source:https://github.com/worldwonderer/oh-story-claudecode --- # Browser CDP Tool Control Chrome via the CDP protocol, reuse existing login sessions, and perform browser automation tasks. ## Prerequisites -macOS / Linux / Windows (experimental), with Google Chrome installed -Node.js 12+ -agent-browser installed:npm install -g agent-browser > ⚠️ The first launch will terminate the user’s regular Chrome instance. You must obtain the user’s consent before launching (see “Launch Process” below); otherwise, the user may lose unsaved tabs or drafts. --- ## Launch Process (Mandatory steps forskill -mode) Step 1: Detect current state (no side effects) ``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 窗口即可（或 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 /` Is it corrupted? |