菜单
通过 Playwright CDP 连接用户本机 Chrome，提供页面感知 JSON（链接、输入框、按钮等）与类人操作（点击、填写、滚动、截图）。 业务逻辑由消费该技能的 AI 决策，脚本不做站点硬编码。用于网页调研、表单填写、可控交互抓取； 涉及发布评论、点赞、关注、私信、表单提交等写入外部系统的操作前须先向用户确认执行计划。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | browser-automation |
| description | 通过 Playwright CDP 连接用户本机 Chrome，提供页面感知 JSON（链接、输入框、按钮等）与类人操作（点击、填写、滚动、截图）。 业务逻辑由消费该技能的 AI 决策，脚本不做站点硬编码。用于网页调研、表单填写、可控交互抓取； 涉及发布评论、点赞、关注、私信、表单提交等写入外部系统的操作前须先向用户确认执行计划。 |
通过 Playwright CDP 连接用户本机 Chrome，提供无偏见的原始页面感知与安全的人类行为模拟执行。
设计哲学：脚本不负责理解页面，只负责"报告所见"与"安全操作"。 AI 读取感知输出（JSON），推理出目标元素的选择器，再指挥脚本执行点击、填写、滚动等动作。
| 项 | 说明 |
|---|---|
| Node.js | 18+ |
| 包 | 在技能目录执行一次：cd <技能路径>/scripts && npm install（安装 playwright） |
| 浏览器 | 本机 Chrome / Chromium，以 --remote-debugging-port=9222 启动（见文末 §启动 Chrome） |
| Playwright 浏览器 | 不需要 npx playwright install chromium（走 CDP，不自启 headless） |
| 工作目录 | 在使用者工作区根目录执行 CLI，使 .config/ 落在项目根；若技能安装在其它路径，先 cd 到工作区根再调用 node <技能路径>/scripts/browser_ctrl.mjs |
| 状态文件 | 工作区 .config/：截图、经验索引、操作日志；Chrome Profile 在用户目录（见 §启动 Chrome） |
execute 结束后脚本仅断开 Playwright 与 CDP，不会退出用户已打开的 Chrome 进程。
脚本不做的事（也不应该做）：
.comment-item, .reply）text === '发送'）脚本做的事：
收到任务
→ AI 决策第一步（通常是 navigate + perceive_all）
→ 脚本执行 navigate → 返回新页面 URL
→ 脚本执行 perceive_all → 返回 JSON 结构感知
→ AI 分析感知结果
→ "第 5 个链接看起来是文章封面" → 决策：highlight selector
→ "第 3 个 input 的 placeholder 是搜索…" → 决策：fill + type_js
→ "class 包含 'btn' 的第 2 个 button 面积最大" → 决策：click
→ 脚本执行动作（自动施加 human behaviour）
→ success → 继续下一步
→ error → 自动截屏 → AI 重新分析
关键：AI 主动要求 perceive_all / perceive_region / perceive_clickable 来"看"页面，而不是脚本自动推断。
收到涉及浏览器交互的任务后，代理必须先完成下列交互，再执行对应步骤（只读调研可默认进行，但若用户明确「仅分析、不操作」须遵守）：
未确认前：不得执行发布、点赞、关注、私信等写入操作；不得假设用户需要完整流水线。
这些操作返回原始 JSON，供 AI 分析。它们不执行任何点击或填写。
返回页面中所有主要元素的元数据：
links：所有 <a> 的文本、href、面积、可见性、classinputs：所有 input, textarea, [contenteditable] 的类型、placeholder、area、value 预览buttons：所有 button, [role=button] 的文本、title、aria-label、areaimages：图片的 src、alt、面积scroll：当前滚动位置、页面总高textPreview：页面正文前 800 字符（供 AI 判断当前状态）node scripts/browser_ctrl.mjs execute --steps '[
{"action":"navigate","target":"https://example.com"},
{"action":"perceive_all"}
]'
当 AI 已定位到一个容器（如"第 7 个 class 包含 'list' 的 div"），可以用 perceive_region 深入查看容器内的子元素。
{"action":"perceive_region","selector":".item:nth-child(3)"}
返回所有可能是可点击的元素（面积、可见性、文本）。
{"action":"perceive_clickable"}
所有执行动作都会自动施加：
read_and_close 自动计算停留时长（200-350 WPM + 图片浏览时间）| 动作 | 参数 | 说明 |
|---|---|---|
navigate | target | 导航到 URL |
click | selector | 点击元素（先 highlight + scroll + delay） |
click_new_tab | selector | 在新标签页打开链接（保留当前页） |
scroll_to | selector, position | 平滑滚动到元素（start / center / end） |
scroll_by | pixels | 按像素滚动 |
read_and_close | min_seconds (可选) | 模拟阅读后关闭标签页 |
| 动作 | 参数 | 说明 |
|---|---|---|
fill | selector, value | 标准 fill，结束后触发 input/change 事件 |
type_js | selector, value | JS 级文本写入（支持 contenteditable、复杂输入框） |
使用建议：
input / textarea：用 fillcontenteditable div / p：先用 perceive_all 确认 isContentEditable，再用 type_js| 动作 | 参数 | 说明 |
|---|---|---|
extract | container_selector, fields_json | 按 AI 提供的容器选择器和字段选择器提取结构化数据 |
前提：AI 必须先通过 perceive_region 或 perceive_clickable 确认选择器正确，再执行 extract。
AI 在 perceive_all 中看到多个候选元素时，应先执行 highlight 确认目标位置，再执行 click。
正确流程：
perceive_all → AI 推理候选索引 → highlight 该选择器 → screenshot 确认
→ click → screenshot 确认状态变化
脚本不假设哪些链接是真实的。AI 应基于 perceive_all 输出的 area + visible 判断：
area > 0 && visible == true：可能可点击area == 0 || visible == false：潜在陷阱操作失败
→ 脚本自动截屏
→ AI 收到 error message + screenshot path
→ AI 重新执行 perceive_all，判断页面是否已变
→ 调整策略后重试
在执行任何数据提交动作（如：提交评论、发布回答、发送私信、填写表单）之前，必须执行截图验证。
screenshot 动作。严禁短时间内在同一位置重复发送相同内容。
.config/ACTION_LOG.jsonl。| 维度 | 参数 | 说明 |
|---|---|---|
| 阅读速度 | 200–350 字/分钟（随机） | 自动按页面字数计算停留时长 |
| 点击间隔 | 同类型 ≥15 秒 | 防止被识别为机器人 |
| 平滑滚动 | 3–15 步，25–55ms/步 | 长距离分步，20% 概率中间停留 |
| 滚动后稳定 | 1.5–3 秒 | 滚动到位后再执行下一步 |
| 高亮时长 | 1.5–2 秒 | 操作前红色 outline，操作后自动移除 |
存储位置：.config/BROWSER_EXPERIENCE_INDEX.json
脚本只记录中性结构信息（如该域名有多少 links/inputs/buttons、viewport 尺寸），不记录业务含义。
| 命令 | 示例 |
|---|---|
save_experience | {"action":"save_experience","domain":"example.com"} |
get-experience CLI | node scripts/browser_ctrl.mjs get-experience --domain example.com |
所有数据交互动作必须记录到操作日志中，用于审计、复盘、问题排查和行为追踪。
存储位置：.config/ACTION_LOG.jsonl（JSON Lines 格式，每行一条独立 JSON 记录）
以下动作必须在完成后追加 log_action 步骤（或单独调用 view-log 前写入）：
| 动作类型 | 说明 |
|---|---|
| 发布内容 | 回答问题、发表文章、发表评论、发帖 |
| 点赞/收藏 | 点赞回答、收藏问题、点赞文章 |
| 关注/取关 | 关注用户、关注话题、关注问题 |
| 填写表单 | 提交任何表单（登录除外，敏感信息不记具体内容） |
| 发送消息 | 私信、评论回复 |
| 删除/编辑 | 删除已有内容、编辑已有内容 |
| 导航访问 | 首次访问某域名的关键页面（可选，默认不记每次导航） |
每条记录为单行 JSON，包含以下字段：
{"timestamp":"2026-05-09T01:37:25+08:00","domain":"example.com","action":"publish_answer","page_url":"https://www.example.com/question/123","detail":"在问题「示例问题标题」下发布回答","result":"success","screenshot":".config/browser-screenshots/20260509_013725_publish_answer.png"}
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
timestamp | string | ✅ | ISO 8601 格式，精确到秒，含时区 |
domain | string | ✅ | 操作所在域名 |
action | string | ✅ | 动作类型：publish_answer、publish_comment、publish_article、like、follow、unfollow、bookmark、submit_form、send_message、delete、edit |
page_url | string | ✅ | 操作所在页面完整 URL |
detail | string | ✅ | 动作简要描述（中文，说明"在什么地方做了什么"） |
result | string | ✅ | success 或 failed |
screenshot | string | ❌ | 操作后截图路径（如有） |
content_preview | string | ❌ | 发布内容的前 50 字（仅发布类动作） |
| 命令 | 说明 | 示例 |
|---|---|---|
log_action | 写入类动作完成后由代理调用（action_type 为日志字段名，勿与步骤的 action 混淆） | {"action":"log_action","domain":"example.com","action_type":"publish_answer","page_url":"...","detail":"...","result":"success"} |
view-log | 查看操作日志 | node scripts/browser_ctrl.mjs view-log [--domain example.com] [--date 2026-05-09] [--limit 20] |
result 设为 failed，便于排查screenshot 字段在工作区根目录执行（将 SKILL_DIR 换成本地技能安装路径）：
node SKILL_DIR/scripts/browser_ctrl.mjs execute --steps '[
{"action":"navigate","target":"https://example.com"},
{"action":"perceive_all"},
{"action":"screenshot","description":"initial_percept"}
]'
AI 分析 perceive_all 输出后，决定下一步：
# AI: "index 4 link 面积最大、文本是 'Read more'"
{"action":"highlight","selector":"a:nth-of-type(5)","color":"#ff0000"}
{"action":"click_new_tab","selector":"a:nth-of-type(5)"}
{"action":"perceive_all"}
# AI 从 perceive_all 中发现 2 个 input 和 1 个 button
{"action":"fill","selector":"input[name='email']","value":"user@example.com"}
{"action":"fill","selector":"input[name='password']","value":"secret"}
{"action":"click","selector":"button[type='submit']"}
# AI 打开详情页后，让脚本模拟阅读
{"action":"click_new_tab","selector":".article-title"}
{"action":"read_and_close","min_seconds":12}
{"action":"scroll_by","pixels":800}
{"action":"perceive_all"}
# AI 分析新加载的内容后，再执行 extract
{"action":"extract","container_selector":".feed-item","fields_json":'{"title":"h3","author":".author-name"}'}
与目标站点的交互（需登录态、JS 渲染、表单、发布）须通过本脚本在本机 Chrome 中完成；默认不得用 curl、wget、requests 等直接请求同一站点的页面或 API 以替代浏览器操作。
例外（须用户明确要求或任务本身与浏览器无关）：下载已公开的静态文件、调用与站点无关的第三方 API、本地文件处理等。
原因：
执行用户任务前，必须先检查前置条件，不可自行假设或跳过：
navigate + perceive_all 判断页面状态正确流程：
收到任务
→ 明确任务目标网站
→ 导航到目标网站
→ 感知页面状态
→ 判断是否需要登录或其他前置条件
→ 若需要：停下来提醒用户，等待确认后再继续
→ 若不需要：继续执行任务
当检测到需要登录时，应向用户发送类似如下提醒：
⚠️ 目标网站需要登录才能继续操作。
请手动完成登录后，回复「已登录」，我将继续执行任务。
等待用户明确确认后再继续。
| 文件 | 说明 |
|---|---|
scripts/browser_ctrl.mjs | 主实现：Playwright CDP 控制（Node，v4） |
scripts/package.json | Node 依赖（playwright） |
references/anti-detection.md | 反检测与类人节奏原理（CDP 与自启浏览器场景分开说明） |
references/experience-index-example.json | 经验索引格式示例 |
references/human-like-comment-style.md | 可选：仅当用户要求拟人化社区评论/回复文风时阅读 |
.config/ACTION_LOG.jsonl | 操作日志（log_action / 工作区根目录，自动生成） |
.config/BROWSER_EXPERIENCE_INDEX.json | 经验索引（save_experience，自动生成） |
Chrome 用户数据目录放在本机（与项目 .config/ 分离），便于保留登录态：
PROFILE_DIR="$HOME/.config/skills/browser-automation/chrome-profile"
mkdir -p "$PROFILE_DIR"
DEBUG_PORT=9222
macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--remote-debugging-port="$DEBUG_PORT" --no-first-run --user-data-dir="$PROFILE_DIR"
Linux（可执行路径因发行版而异）
google-chrome --remote-debugging-port="$DEBUG_PORT" --no-first-run --user-data-dir="$PROFILE_DIR"
# 或: chromium --remote-debugging-port=...
Windows（PowerShell）
$PROFILE_DIR = "$env:USERPROFILE\.config\skills\browser-automation\chrome-profile"
& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
--remote-debugging-port=9222 --no-first-run --user-data-dir="$PROFILE_DIR"
确保只启动一次，脚本通过 CDP 复用该实例；execute 不会关闭此 Chrome 窗口。
部分 Chrome + CDP 环境下 screenshot 可能在「等待字体」阶段超时（约 8s 后报错，不阻塞后续步骤）。感知类动作（perceive_*）不受影响；若截图失败，可依赖 perceive_all 与 highlight 继续操作。
指导在终端用 @baklib/baklib-cli（baklib 命令）通过 Baklib Open API 管理站点、知识库、DAM、成员与用户，以及主题拉取/预览上传与本地 theme dev；含鉴权配置、--json 脚本输出与执行规范。在用户已安装或可安装 baklib CLI、要用命令行/脚本/CI 读写 Baklib 线上数据时使用；Liquid 模版语法见 baklib-theme-dev（需另行安装）。
Baklib 专用：根据 CHANGELOG/更新说明撰写面向用户的对外发布日志（Markdown 正文 + 封面图提示词）， 用于 release.baklib.cn 等站点页；含标题规范、help.baklib.cn/术语表内链、DaisyUI baklib 品牌与 Liquid Glass 封面。 在用户要写 Baklib 发布日志、release note、版本更新文章、或从 CHANGELOG 生成对外稿时使用；出图与 MCP 写入须先确认。
Baklib 站点主题（模板）开发：Liquid 目录与命名、`config/settings_schema.json` 与模板 `{% schema %}`、多语言 `locales`、对象与指令/过滤器、静态页 URL、seeds 与迁移；站点表单 `form_tag`/`form_field_tag` 全量说明见 references/forms.md。并含「新建主题脚手架」「参考站复刻工作流」、本地 `baklib theme dev` 预览，以及 CLI 初始化 manifest（template.json，见 references/theme-init-template-manifest.md）。新建或迭代主题起步模版、写 template.json、theme init/apply 时必读该文档；完成主题开发后应把过程沉淀进 manifest 的 developmentNotes/workflow。页面预览参数用 `baklib theme preview set`（theme-preview-page-config.md），勿让用户手填面板。在用户编写 .liquid、配置 schema、新建模板、复刻参考站或排查模板与变量时使用；详规见 references/。
本地 MinerU 将 PDF/Office/图片转为 Markdown（含 images/ 图文、表格与公式识别）。复杂版式、扫描件、长书须先确认页范围与后端。用户要转 PDF、提取表格、OCR、或问「这篇 PDF 讲了什么」时使用。
Self-contained guide for writing Baklib BKE Markdown (L1/L2, DAM dam-id, file colon-syntax, link cards, fragments, embeds, tables). Use when authoring or importing BKE Markdown, inserting DAM assets, or resolving DAM ids via MCP; not for editor implementation or maintaining product docs repos.
指导使用 Baklib 开源导入工具（路径清单 → Excel → Open API）将本机、NAS 或挂载盘上的文件按目录层级迁入 Baklib 资源库（DAM），并可选择同步创建 CMS 站点资源页。在用户提到批量导入、本地文件进 Baklib、DAM 迁移、importer、 Excel 导入、路径清单预处理时使用。