القائمة
通过 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 导入、路径清单预处理时使用。