文章总结： 作者自研219行零依赖JS元素拾取器，早于KimiCode2.05天实现网页元素精准定位与结构化JSON输出，支持任意URL注入使用。核心机制含事件捕获、视觉反馈、选择器生成与结构化打包，解决AI指代歧义问题。提出微改单快车道三判据：单文件、精确定位、无新逻辑可直改，强调工具需配合流程瘦身。建议拆解大厂交互复刻产线能力，保留物证习惯确保实战可信度。
综合评分： 78
文章分类： 安全开发,应用安全,安全工具,实战经验,其他

219 行元素拾取器,比 Kimi Code 官方早 5 天:官方没做的,我自己造了

原创

野生码农
野生码农

野生码农 AI 实战

2026年9月25日 23:55
浙江

在小说阅读器读本章

去阅读

在公众号小说中沉浸阅读

官方更新说明里,有一句我眼熟的话

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」
      或 browserevaluate 读 window._elementPicks 落盘
4. JSON 粘进任务卡 → 按 cssSelector + textSnippet 在源码里 Grep 定位
5. 改 → 实跑验证 → playwright 截图前后对比`

注入之后,我圈了两个元素:首页大标题 h1 和”AI项目展示”板块的 h2。面板右上角实时显示”元素拾取器 (2)”,两个元素绿框标记。

从 window.__elementPicks 读出来的真实 JSON,原样贴在这:

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 控制台。不改目标项目任何代码,线上站照样能圈。重复注入一次,面板显示;再注一次,隐藏。

核心机制拆开四块:

1. 事件捕获

   :document 上捕获阶段监听 mousemove(悬停)、dblclick(拾取)、keydown(Esc 退出),stopPropagation 保证拾取不触发页面自身的点击逻辑;

2. 视觉反馈

   :悬停蓝框 outline,拾取成功变绿,右上角浮动面板实时列出已选元素,可单项删除、一键复制 JSON;拾取器自身的 UI 做了排除,不会把自己选进去;

3. 选择器生成

   ,这是精度核心:优先用元素 id;没有 id 向上最多爬 5 层父节点,每层 :nth-of-type 消歧,每爬一层用 document.querySelectorAll(sel).length === 1 验证唯一性,拿到最短唯一路径就停,附完整 XPath 兜底;

4. 结构化打包

   :每个元素产出一条 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实战 · 全网同名

免责声明：

本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。

任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。

本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。

本文转载自：野生码农 AI 实战 野生码农
野生码农《219 行元素拾取器,比 Kimi Code 官方早 5 天:官方没做的,我自己造了》