Mmcp.market

browser-cdp skill

by zenstory-ai·zenstory-ai/oh-story-claudecode·7.2k stars·MIT

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.

A100/100content scan

Is the browser-cdp skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the browser-cdp skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.

git clone --depth 1 https://github.com/zenstory-ai/oh-story-claudecode.git /tmp/oh-story-claudecode
mkdir -p ~/.claude/skills
cp -r /tmp/oh-story-claudecode/skills/browser-cdp ~/.claude/skills/browser-cdp
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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

第二步:根据探测结果分支

  • CDPSTATUS=ready → 直接使用 agent-browser --cdp 9222 ...,不要运行 setup**。
  • CDPSTATUS=needs-setup 且 CHROMERUNNING=no → 安全启动:
node {SKILL_DIR}/scripts/setup-cdp-chrome.js 9222 --yes
  • CDPSTATUS=needs-setup 且 CHROMERUNNING=yes → 先用 AskUserQuestion 工具向用户确认:告知会杀掉 N 个 Chrome 进程、可能丢失未保存工作;用户同意后再带 --yes 启动;用户拒绝则放弃这次自动化。

为什么不能直接 --yes: 脚本在非 TTY(即 skill 模式 / Bash 工具)下,如果检测到 Chrome 在跑而没有 --yes,会以退出码 3 报 NEEDSCONSENT: ... 并中止,不会**静默杀进程。这是有意的兜底——但 skill 流程仍应先问用户,而不是看到 3 就盲传 --yes。

启动脚本选项

退出码: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>"

停止 / 清理

拿到 PID 后 kill -9 {PID} / taskkill /F /PID {PID}。核验不出归属时停止,手工清理不得按 Chrome 可执行文件名批量结束进程——那会连带杀掉用户的日常 Chrome。 例外:setup-cdp-chrome.js --reset 内部确实会做一次按可执行名的清理,它属于本 skill 自带的、需 --yes 显式同意的启动流程;手工排障不要复制该做法。

  • 关掉 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
  • 登录态失效: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),请重试或手动打断"

已知限制

即使加了超时包装,以下场景仍可能出现问题:

如遇到持续卡死的操作,在 opencode 中按 ESC 手动打断。

常见问题

More skills from zenstory-ai/oh-story-claudecode

  • Astory网络小说工具箱主入口。根据用户需求自动路由到对应 skill,并可管理作者习惯、启动本地 Dashboard。触发方式:/story、$story、/story dashboard、/网文、「我想写小说」「记住我的写作习惯」「打开工作台」「检查更新」。
  • Astory-cover小说封面生成。根据书名、作者名自动分析题材风格,调用 GPT-Image-2 生成含标题和署名的专业级网文封面;Codex CLI 优先使用内置 ImageGen,无需单独 API Key。触发方式:/story-cover、/封面、「帮我做个封面」「生成封面图」「做个小说封面」「封面设计」。
  • Astory-deslop网文去AI味。检测并清除文本中的AI写作痕迹,让文字回归自然、非模板化。触发方式:/story-deslop、/去AI味、「去AI味」「这篇太AI了」「网文去AI味」。
  • Astory-import逆向导入已有小说。将已写好的小说(半成品或完本)反向解析为标准项目目录结构,兼容 story-long-write / story-short-write 后续写作流程;内部复用 story-long-analyze / story-short-analyze 的拆解管道,按篇幅自动分流。触发方式:/story-import、「导入小说」「反向解析」「导入」「把我的书导进来」。
  • Astory-long-analyze长篇网文拆文。保留黄金三章、逐章摘要、剧情、情绪、节奏、角色、设定和文风接口,以连续章节块完成因果、双时间线、关系与三维节奏分析;兼容旧成果直接使用、按需增强和断点续跑。含可选三层灵感库管道(灵感库、跨书灵感聚合、更新灵感库)。触发方式:/story-long-analyze、/长篇拆文、「帮我拆这本书」「拆这本书」「分析黄金三章」「深度拆解」「完整拆解」或提供小说文本文件路径。
  • Astory-long-scan长篇网文扫榜。分析起点、番茄、晋江等平台排行榜数据,提炼市场趋势与热门题材。触发方式:/story-long-scan、/长篇扫榜、「长篇什么火」「起点排行」。
  • Astory-long-write长篇网文规划与写作。支持只讨论结构、只写大纲或指定细纲,明确要求正文后再写章节。触发方式:/story-long-write、/写长篇、「帮我开书」「定设定」「出卷纲」「规划剧情」「写大纲」「补细纲」「日更」「续写」「继续写」「修改第X章」「回炉」「重写第X章」。
  • Astory-review多视角对抗式审查。full/lean 模式在已部署 reviewer agents 时并行 spawn;缺失/异常 agents 或 spawn 失败时自动降级 solo,参考文件不可读时使用内置 rubric fallback。触发方式:/story-review、/审查、「审查一下」「帮我审一下」。
  • Cstory-setup网文写作工具集基础设施部署与检查。为 Claude Code / OpenCode / Codex / Google Antigravity / ZCode / OpenClaw / Reasonix 提供内置适配;Web AI / 通用 Agent 可走 skills + AGENTS.md 文件模式。触发方式:/story-setup、$story-setup、「准备写书」「帮我搭一下环境」「配置写作项目」「检查写作环境」。
  • Astory-short-analyze短篇网文拆文。拆解爆款短篇小说(番茄短篇 / 故事会 / 知乎盐选 / 追妻 / 世情 / 重生 / 虐渣等通俗题材)的故事核、结构、情感线、反转设计、写作手法、共鸣层次。单一全量拆解管道:跑完 Stage 2-6 产出完整拆文报告,落盘到 拆文库/{书名}/,下游 story-short-write 同时读拆文报告 + 情节节点 + 写作手法 + 原文 + _meta.json 写下一篇。触发方式:/story-short-analyze、/短篇拆文、「拆短篇」「拆这篇短文」「短篇拆文」「精细拆解短篇」「8000 字短篇拆解」「番茄短篇拆文」「故事会拆解」「盐言故事拆解」「分析这篇短篇」——均进入同一管道。
  • Astory-short-scan短篇网文扫榜。分析知乎盐言、七猫、黑岩、点众等平台热门短篇数据,捕捉风口题材。触发方式:/story-short-scan、/短篇扫榜、「短篇什么火」「知乎故事排行」。
  • Astory-short-write短篇网文写作。辅助短篇小说创作,从构思到成稿,聚焦情绪拉扯与节奏把控。触发方式:/story-short-write、/写短篇、「帮我写一篇短篇」「写个盐言故事」。

All agent skills → · MCP servers