野生码农
219 行元素拾取器,比 Kimi Code 官方早 5 天:官方没做的,我自己造了
官方更新说明里,有一句我眼熟的话
9 月 12 日,我自己写了个 219 行的元素拾取器脚本;9 月 17 日,Kimi Code 官方才发布同款功能,早了 5 天。
那天我刷到 Kimi Code 2.0 的发布说明,桌面端新功能里有一句原文:"element picking on web pages tell the Agent exactly what to change"。我愣了一下:在网页上点选元素、告诉 Agent 改哪里,这不是我 5 天前就干完的事吗。
干这件事的人先亮个相:我叫野生码农,39 岁,程序员,CSDN 账号注册于 2009 年,平台给我算的码龄是 17 年。白天上班,晚上折腾自己的系统。数字员工团队就是我折腾出来的,一群 AI 各管一个岗。那句让我愣住的话说的能力,正是我给团队产品设计岗写的元素拾取器(element-picker):一个 219 行的单文件 JS 脚本,注入任意网页,悬停高亮、双击拾取元素,产出结构化 JSON,让 AI 精确定位要改的地方。
吹牛先上证据,三条物证摆在这:
- 9 月 12 日 01:57【实测:文件时间戳】:
picker.js落盘,219 行【实测:wc -l】,零依赖单文件; - 9 月 14 日【实测:任务卡与预览页文件】:我的博客前台项目开出第一张"元素拾取改单",任务卡里直接嵌着拾取器产出的 JSON;
- 9 月 17 日(来源:Kimi Code 官方 Changelog):CLI v2.0.0 发布,官方文档原文写着 "element picking on web pages tell the Agent exactly what to change"。
官方发布同款功能的时候,这个脚本已经在我的真实改单里上过岗了。
当场演一遍:拿自己的线上站圈两个元素
光说不练假把式。证据摆完了,写这篇文章的时候,我当场拿自己的博客(www.wdmeng.cn,已发布 128 篇文章,自报口径)跑了一遍完整流程。
完整 SOP 五步:
1. browser_navigate 打开目标页(任意 URL,线上站也行)
2. browser_evaluate 注入 picker.js 全文 → 页面右上角出面板
3. 悬停蓝框 → 双击拾取(可多点)→ 面板「复制 JSON」
或 browser_evaluate 读 window.__elementPicks 落盘
4. JSON 粘进任务卡 → 按 cssSelector + textSnippet 在源码里 Grep 定位
5. 改 → 实跑验证 → playwright 截图前后对比
注入之后,我圈了两个元素:首页大标题 h1 和"AI项目展示"板块的 h2。面板右上角实时显示"元素拾取器 (2)",两个元素绿框标记。
从 window.__elementPicks 读出来的真实 JSON,原样贴在这:
{
"index": 1,
"tag": "h1",
"cssSelector": "h1",
"xpath": "/html[1]/body[1]/main[1]/div[1]/div[3]/div[1]/h1[1]",
"textSnippet": "野生码农 · AI 实战派 把每一次踩坑写成可复用资产",
"boundingRect": { "x": 139, "y": 244, "width": 630, "height": 194 }
},
{
"index": 2,
"tag": "h2",
"cssSelector": "div:nth-of-type(2) > div:nth-of-type(1) > h2",
"xpath": "/html[1]/body[1]/main[1]/div[2]/div[1]/h2[1]",
"textSnippet": "AI项目展示",
"boundingRect": { "x": 165, "y": 863, "width": 119, "height": 42 }
}
模型改哪里、改什么,零歧义。
拆开看:219 行里装了什么
演示看完,拆开验货。整个工具就是一个 JS 文件,通过 Playwright MCP 的 browser_evaluate 注入目标页面,也可以直接粘进 DevTools 控制台。不改目标项目任何代码,线上站照样能圈。重复注入一次,面板显示;再注一次,隐藏。
核心机制拆开四块:
- 事件捕获:
document上捕获阶段监听mousemove(悬停)、dblclick(拾取)、keydown(Esc 退出),stopPropagation保证拾取不触发页面自身的点击逻辑; - 视觉反馈:悬停蓝框 outline,拾取成功变绿,右上角浮动面板实时列出已选元素,可单项删除、一键复制 JSON;拾取器自身的 UI 做了排除,不会把自己选进去;
- 选择器生成,这是精度核心:优先用元素 id;没有 id 向上最多爬 5 层父节点,每层
:nth-of-type消歧,每爬一层用document.querySelectorAll(sel).length === 1验证唯一性,拿到最短唯一路径就停,附完整 XPath 兜底; - 结构化打包:每个元素产出一条 JSON,
cssSelector、xpath、tag、classes、textSnippet(前 80 字)、outerHTML(前 500 字)、computedStyle、boundingRect、页面 URL、拾取时间。
中间踩了个值得说的坑。第一版是单击拾取,我以为这样最顺手,结果页面上所有链接全部失效,点导航都没反应。改成双击拾取,单击保留页面原生交互。
一行事件绑定的差别,可用性天差地别。
为什么自己造:我要的是任意 URL 都能圈
跟 AI 说"把页面上那个板块删了",AI 不知道"那个"是哪个。圈选就是解决这个指代问题的:在页面上圈出元素,把选中的组件连同上下文一起发给模型,改界面指哪打哪。
这个交互千问办公做得特别好。9 月 12 日凌晨团队重组,我把六个执行岗并成三个,产品设计岗的技能包整套复刻自千问办公的产品设计套件,28 个技能文件,一字未改。但它的圈选绑在自家产品里,我用它的套件,用不到它的交互。
我要的是一个对任意 URL 都能用的能力,包括线上站。于是当天凌晨,产品设计岗上岗的第一件作品,就是把这个能力造了出来。交互灵感来自千问办公,这个功我不贪,明牌写在这。
三方摆上桌,我的短板也明牌
千问办公的圈选、官方 2.0 桌面端的标注、我的注入脚本,三条路线摆一张表,好坏都亮出来:
| 千问办公 | Kimi Code 2.0 桌面端 | 我的 element-picker | |
|---|---|---|---|
| 形态 | 自家产品内置 | 桌面端内置浏览器+标注交互 | 注入式单文件脚本 |
| 作用范围 | 绑自家环境 | 绑官方桌面端 | 任意 URL,线上站可用 |
| 输出 | 会话内上下文 | 会话内上下文 | 结构化 JSON,可落盘、可进任务卡 |
| 依赖 | 平台 | 官方客户端 | 零依赖,Playwright MCP 或控制台 |
| 体验封装 | 好 | 最好(截图标注/划词评论) | 够用(面板+复制) |
我的短板也明牌:每次页面跳转后要重新注入;SPA 动态渲染的元素以拾取时刻的 DOM 为准;iframe 跨域元素选不了;体验封装肯定不如官方桌面端漂亮。
但定位本来就不一样。官方做的是"人和 AI 的交互体验",我做的是"AI 团队产线上的标准件":JSON 结构化、可落盘、可流转,进任务卡、进 git、进复盘,全程留痕。
它够用。够产线用。
上岗第一天翻车:394 秒买了个教训
拾取器上岗第一天就翻车了,这次翻的不是脚本,是流程。
第一张改单,删掉两个圈选好的板块,团队走了完整派单链:立项、写任务卡、派岗、执行、回收。结果是对的,但全程跑了 394 秒(自报:当日复盘稿计时)。
我以为工具够快改单就够快,结果省下来的时间全被流程吃了回去。元素坐标都递到手里了,还走全链,等于点一碗面先开后厨评审会。
我当场发飙。这里交代一下,团队的派单验收归"军师"管,它是我用 Kimi Code 扮演的数字员工总调度,凌驾所有执行岗,负责派单、验收、扛定性。当天我就把一条新规矩塞进了团队章程:
微改单快车道,优先级高于全链派单。同时满足三条,主管直接改,禁写卡、禁派岗,全程 ≤20 秒:
- 单文件改动;
- 改动点已精确定位(拾取 JSON,或明确文案+位置);
- 纯删改文案、样式、区块,无新逻辑、无数据契约。
规则入库后的第二张单:把导航里的"AI资讯"提到第一位并切换默认高亮。秒级完成。
这是比脚本本身更值钱的一条经验:工具把定位精度打满之后,流程必须跟着瘦身。
拿走不谢,就这三条
一,看到大厂的好交互,别馋,拆它。 核心交互往往几百行脚本就能复刻:事件捕获、视觉反馈、结构化输出,拆开每层都是基本功。大厂做产品封装,你要的是产线能力,两码事。
二,微改单快车道三判据。 单文件、精确定位、无新逻辑,三条全中就直改。全程超 20 秒,说明流程错了,不是手慢。
三,物证习惯。 时间戳、git 记录、实拍截图。没有这三样,"我做得比大厂快"就是一句空话;有了这三样,它就是这篇文章。
大厂有整支团队做封装,我有 219 行脚本和一条章程。这轮,我先到站。
FAQ
Q:脚本能直接用吗,开源吗? 思路已经全摊开在正文里了,四块机制加 SOP,照着能复刻。219 行全文我打算后续开源,也可能单独写一篇技术文档篇拆细节,关注蹲更新。
Q:没有 Playwright MCP 环境能用吗? 能。整个文件粘进浏览器 DevTools 控制台就行,零依赖,这是它跟官方方案最不一样的地方。
Q:为什么用双击拾取不用单击? 单击会把页面上所有链接的原生交互吃掉,第一版我就翻过这车。双击拾取,单击照常点页面,互不干扰。
Q:有了 Kimi Code 2.0 官方版,这个脚本还有意义吗? 看你用在哪。要漂亮的标注交互,官方桌面端最好;要 JSON 落盘、进任务卡、流转给 AI 团队干活,注入式脚本绑不住,任意 URL 都能用。
我是野生码农,AI 实战派。自研知识库、数字员工、软考备考、量化交易四个系统,全程公开复盘。
本文所有内容均为本人 AI 实战的过程和结果,经 AI 整理后发布,无任何瞎编虚构内容。
这篇来自《AI员工团队》系列,下一篇继续写这支团队的实战,近期发;月底照例有月报,四个系统真实数据全公开,欢迎来盯。
关注我,看真的。
野生码农AI实战 · 全网同名