野生码农
我给 AI 造了个圈选插件:双击网页元素,JSON 直接喂给 Cursor
39 岁,高速公路施工单位上班,业余用 AI 养了一支"数字员工团队"。今晚(2026-09-18)我要改自己 GEO 博客的前端页面,第一个动作不是开编辑器,而是让军师把"元素拾取器"注进线上页面——结果顺手把它做成了浏览器插件,实测比 Kimi Code 官方方案顺手,比千问、Trae 的圈选都方便(自报:本人实测评价)。
痛点:AI 改界面,卡在"说不清改哪个元素"
用 AI 编程助手改网页,最贵的不是写代码,是描述——"导航栏下面那个卡片里的第二个按钮"这种话,AI 理解不了,你也说不准。
我的解法是圈选:在页面上双击一个元素,工具把它的 CSS 选择器、XPath、文本片段、计算样式、位置尺寸打包成 JSON,粘贴给 AI,它就能直接去源码里定位开改。
这个拾取器原本是个单文件脚本(picker.js),靠 Playwright/WebBridge 注入到页面里用。今晚实测,两个硬伤:
- 页面一跳转就没了。点一下链接,拾取器连同已选数据全部消失;
- 注入又慢又重。每次要走浏览器守护进程链路,把脚本 base64 编码再 evaluate,等得人心烦。
我要的是:任何网站,不管线上还是本地,想圈就圈。答案很明显——做成浏览器插件。
改造:一个 MV3 骨架,脚本一行没重写
插件化比想象中便宜,因为 picker.js 本身就是个幂等 IIFE(立即执行函数,重复注入不会出错)。新增的只有两样:
// manifest.json(MV3 清单,最小权限)
{
"manifest_version": 3,
"permissions": ["scripting", "activeTab"],
"background": { "service_worker": "background.js" },
"action": { "default_title": "元素拾取器(点击开启/关闭)" }
}
// background.js:点图标 → 向当前页注入 picker.js
chrome.action.onClicked.addListener(async (tab) => {
if (!tab.id || !/^(https?|file):/.test(tab.url)) return;
await chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ['picker.js'] });
});
图标是军师用 PIL 现画的准星图。chrome://extensions 开开发者模式、加载解压目录,一分钟装完。MV3 插件 Edge 和 Chrome 通用,一次开发两个浏览器都能装。
三个实测抓出来的 bug,全是教科书级的坑
插件能跑只是开始。我自己上手十分钟,抓出三个真 bug——全是光看代码发现不了、必须实跑才现形的:
Bug 1:双击链接,页面跳走了,拾取数据全丢。
根因:双击之前先触发了一次单击,<a> 标签在单击时就跳转了,页面重载,挂在 window 上的拾取数组灰飞烟灭。
方案:拾取器激活期间拦截链接单击,延迟 350ms 再放行跳转;350ms 内出现双击就取消跳转、改为拾取。放行方式是重放一次带标记的合成 click,target=_blank、download 等原生行为全保留。单击链接照常可用,只是慢三分之一秒。
Bug 2:插件"关不掉"。 原来的设计是再点图标=隐藏面板,但监听器还挂在页面上,鼠标还在画蓝框——用户视角这就是没关。 方案:已加载时再次注入 = 完全退出(监听器全摘、DOM 全清、状态复位);面板另加「收起/展开」按钮管临时折叠。
Bug 3:计数显示 (0),列表里却躺着 2 条拾取记录。
这个最阴。根因是双实例竞态:我点插件图标注入了一份,军师又通过 WebBridge 注入了一份,两份脚本同时活着;而面板内部用 document.getElementById('kep-count') 找元素——getElementById 永远返回 DOM 里第一个面板,你看到的那个面板和它更新的面板根本不是同一个。
方案两刀:① 注入前先清场,删掉所有残留的面板 DOM,保证全页至多一个实例;② 面板内部元素一律改用创建时持有的闭包引用,不再走文档级 id 查询。
修完军师跑了探针自证:panels:1, count:"2", rows:2, picks:2——四个数一致才算过。
顺手干了件大事:上架 Edge 商店
工具好用了,军师提议上架。查了官方文档先把变现的冷水泼清楚:
- Chrome 商店 2020 年起就关闭了付费插件通道,Edge 也一样——插件直接卖钱这条路不存在;
- Chrome 上架要 $5 一次性开发者费(还需外币卡),Edge 免费;
- 所以现实路径是:免费插件给"野生码农"IP 引流——面板底部挂了博客链接,商店文案全部按"AI 编程助手搭档"定位写。
发布准备一晚齐活:v1.1.1 发布 zip、商店截图(1280x800)、促销贴片(440x280 / 1400x560)、徽标(300x300)、按微软官方文档逐项核对的发布指南。竞品我也看了,Edge 商店现有的同类都是"查看元素信息"的老 inspector 思路,没有一个的 JSON 是为喂给 AI 设计的。原话放这:"都是垃圾,哪有我们好用!"
也翻了一次车,值得说:军师试图用浏览器自动化代我填合作伙伴中心的注册向导,结果那是重度 SPA,页面元素引用几秒就失效,十几轮操作零进展,被我喊停——"半天没反应,都是我自己点的,浪费 token"。教训记进了故障台账:重度 SPA 多步向导 + 需要登录态的场景,人机分工必须是"人手动、AI 备料",别让 AI 代填。
可以抄走的三样东西
- MV3 插件最小骨架:manifest(scripting + activeTab)+ 一个 service worker + 一个幂等 IIFE 脚本。任意已有注入式脚本都能这样插件化,半小时搞定。
- "双击拾取不跳转"的 350ms 延迟导航模式:拦截 click → 计时器延迟放行 → dblclick 到达即取消。所有需要在链接上做双击交互的工具都适用。
- 注入式工具防双实例两板斧:加载时先清场残留 DOM;内部元素引用用闭包,不用 document.getElementById。计数和列表对不上号的灵异 bug,八成是这个。
结尾
从"改博客前端要圈选一下"到"插件上架 Edge 商店待审核",一个晚上。这支数字员工团队最值钱的不是写了多少代码,而是每个 bug 都被实跑抓出来、每次翻车都进了台账——工具在迭代,规矩也在迭代。
插件过审后我会在博客放出下载链接。你也试试:圈选 → 复制 → 喂给 AI,从此改界面不用说人话。
素材点
- 人设:39 岁高速公路施工单位,业余 AI 数字员工团队;
- 实测评价(自报:本人原话):比 Kimi Code 官方注入方案顺手,比千问、Trae 圈选方便,任何网站 Edge 直接开、Chrome 也能装;
- 时间线:2026-09-18 晚,注入式 → 插件化 → 3 bug 修复 → 发布备齐(截图时间戳 20:13~20:54,成稿 23:49);
- 竞品判断(自报:本人原话):"Edge 商店类似产品都是垃圾,哪有我们好用";
- 翻车素材:WebBridge 代填合作伙伴中心失败,规则沉淀"人手动、AI 备料";
- 产物路径:
D:\code\dev\工具\element-picker\(picker.js / manifest.json / background.js / dist/element-picker-v1.1.1.zip / store-assets/ / 发布指南.md)。