dsh-web-recorder——不逆向，把"页面操作录一遍"变成 Agent 的接口级 skill 原料

👋 开场白

大家好，我是卡卡军（kakajun）。

上次分享了 vue3-sketch-ruler v3 升级详解的蜕变与升级，这次发个新东西------ deepseek harness 插件：dsh-web-recorder（网页操作录制器）。做它之前，我自己先在"让 Agent 对接业务系统接口"这件事上撞了好几次墙，撞得实在受不了了，才决定换个思路，把墙拆了。

🤔 一切的起因：Agent 想直接调接口，到底难在哪

要让 agent 直接通过接口对接某个业务平台（例如 EIP 类系统），前提是先搞清楚三件事：

平台到底暴露了哪些接口
每个业务步骤对应调用的是哪个
参数和响应是什么格式

传统做法是查接口文档，或者逆向前端代码。但实际干过的人都知道：

文档往往缺失或过时，查了等于没查；
就算把接口清单扒出来，也很难把「用户在页面上点的那个按钮」和「背后发出去的那个请求」一一对上。

这一步真的很头大，很 low。

🌟 插件简介

本插件换一种思路：不逆向，只留操作依据。

让记录仪就位，把目标业务流程在一个受监控的有头浏览器窗口里完整跑一遍------然后你不需要再翻文档了，因为这次操作留下的原始数据已经回答了上面三个问题：

UI 事件线：每一步点击 / 输入 / 表单提交发生在何时、落在哪个元素、填了什么值
网络事件线 ：每一步操作触发了哪些 xhr/fetch 请求------method、URL、请求头、请求体、响应体、失败原因

两类事件按时间交错实时写入 events.jsonl，两条线天然对齐：任何一个业务步骤，都能找到「它调了哪个接口、参数怎么填、返回了什么」。

一句话概括：

页面操作一遍 = 留下可分析的操作依据 = 大模型据此制作接口级 skill 的原料

录制本身只是采集，分析和沉淀交给模型完成。嗯，就是这么分工的。

🔑 应用场景

想给 agent 对接无文档或文档过时的业务系统（EIP 类平台非常典型）
需要把某个网页流程整理成「流程步骤 × 接口调用 × 数据契约」的接口对接说明 / skill
人工在页面上操作一遍即可拿到完整依据，不用写一行采集代码

✨ 它好在哪

不逆向、零侵入：不碰前端代码，只当一个"旁观记录者"
两条事件线天然对齐 ：events.jsonl 里 UI 操作和网络请求按时间交错落盘，谁触发谁一目了然
工具极少，傻瓜式 ：只有 3 个------recorder_start / recorder_stop / recorder_status
真人、机器人都能当"手"：窗口里手动点可以，交给 playwright MCP / browser-use 驱动也行，插件只负责录
敏感信息有处理：cookie、authorization 等请求头默认脱敏
产物开箱即读 ：完整原始流 events.jsonl + 人类友好的 report.md，丢给大模型就是现成的分析原料

📚 设计思路（想抄作业的看这里）

核心是"旁观者视角"：

用 playwright-core 拉起一个有头 Edge 窗口（默认本机 Edge，不下载 Chromium），真实页面、真实操作
UI 事件通过 context.exposeBinding + addInitScript 在捕获阶段监听，天然覆盖新标签页和 iframe
网络事件只过滤录制 xhr/fetch，静态资源不录，干净不吵
每次录制在 rec-<时间戳>/ 目录下实时产出 events.jsonl，停止时再汇总成 report.md

具体算法就不在文章里展开了，源码都在仓库里，感兴趣的可以直接翻。

🚀 使用说明

什么时候会命中

当用户任务属于「查清某个网页流程背后调用了哪些接口、参数/响应长什么样，并据此生成接口级说明或 skill」时，模型应主动调用 recorder_*。这类任务通常要分步完成：先打开目标页面开始录制，再由驱动方（真人或自动化工具）在页面上完成实际操作，最后基于录制结果分析沉淀。典型表述：

"帮我打开 http://目标地址，开始录制"
"打开 XX 页面，我操作一遍，你录下来再分析接口调用"
"我在页面上点『查询』时发了什么请求？帮我录下来看看"

前置条件

本机装有浏览器（默认 Edge，可配 Chrome）
至少有一种驱动方在场：真人，或浏览器自动化工具

📸 效果展示

下面是一次真实录制的产物截图（冒烟测试在本地页面执行「输入关键词 → 查询 → 去第二页」的完整流程）。

① report.md 摘要------统计概览 + 操作时间线 + 网络请求明细，把「业务步骤」和「接口调用」整理在同一张表里：

② events.jsonl 原始事件流------每一行一个事件（导航 / 点击 / 输入 / 请求 / 响应...），按发生时间交错实时落盘，是分析时最完整的操作依据：

两张图对照着看：一次「输入关键词并查询」，在 events.jsonl 里留下了对应的 POST /api/query 请求与 200 响应，在 report.md 里汇总成一行请求明细------这就是「录一遍 = 留依据」的直观体现。

⚠️ 已知限制（说在前面）

只录制插件自己启动的窗口；要让 playwright MCP / browser-use 另起的实例被录到，需要驱动同一个浏览器实例（共享 / CDP 连接），此能力尚未内置
events.jsonl 含请求/响应体等完整数据，请按敏感数据处理，不要外发
极少数强 CSP 页面可能注入失败，网络事件不受影响

🔗 了解更多

GitHub：github.com/kakajun/dsh...
协议：MIT，随便用
配套真实冒烟测试 tests/smoke.mjs，不是占位仓库

如果你也在被"接口文档缺失 + 逆向前端太痛苦"折磨，欢迎试试它；有任何想法欢迎提 Issue，一起让这个插件更完善。

💬 最后的话

做插件的路上，最开心的时刻就是"原来可以这样"的那个瞬间。这个插件想传递的也是这个：与其逆向代码，不如直接留下操作依据，让模型自己去归纳。

感谢看到这里，开源的路上有你们更精彩！欢迎 Star、Fork 或提交 Issue 🎉