2026-10-16 09:10:03 网络安全文章来源：ZONE.CI 全球网 0 阅读模式

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

核心机制拆开四块:

事件捕获

: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 或控制台
体验封装	好	最好(截图标注/划词评论)	够用(面板+复制)