野生码农
用 AI 编程助手改网页界面,最贵的不是写代码,是描述——"导航栏下面那个卡片里的第二个按钮"这种话,AI 理解不了,人也说不准。我的解法是元素拾取器:一个 MV3 浏览器插件,Edge 和 Chrome 通用,双击网页上任意元素,把它的结构化信息打包成 JSON,粘贴给 AI 就是一张精准的"界面改单"。
它比 AI 编程助手官方后来推出的同类圈选能力早五天自研上线——不是事后蹭,产线选题记录里有实证。
怎么实现的
前身是单文件脚本 picker.js,靠浏览器守护进程注入页面用,有两个硬伤:页面一跳转脚本就没了,每次注入又慢又重。思路是插件化,而且便宜得离谱——脚本本身就是幂等 IIFE(重复注入不出错),一行没重写,新增的只有两样东西:
// manifest.json(MV3 清单,最小权限)
{
"manifest_version": 3,
"permissions": ["scripting", "activeTab"],
"background": { "service_worker": "background.js" }
}
// background.js:点图标 → 向当前页注入 picker.js
chrome.action.onClicked.addListener(async (tab) => {
await chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ['picker.js'] });
});
一个清单、一个 service worker、一个现成的幂等脚本,外加快捷键 Alt+Shift+E。加载解压目录,一分钟装完。
硬核在哪
- 350ms 延迟导航,实现"双击链接拾取不跳转"。 双击之前浏览器先触发一次单击,链接在单击时就跳走了,已拾取的数据全丢。方案:拾取器激活期间拦截链接单击,延迟 350ms 再放行;期间出现双击就取消跳转、改为拾取。放行方式是重放一次带标记的合成 click,
target=_blank、download 等原生行为全保留——单击照常可用,只慢三分之一秒。 - 注入式工具防双实例,两板斧。 实测抓到一个灵异 bug:计数显示 (0),列表里却躺着 2 条记录。根因是双实例竞态——两个渠道各注入了一份脚本,而面板用
getElementById找元素永远命中第一个,你看到的和被更新的不是同一个。修复:注入前先清场删掉残留 DOM(全页至多一个实例),内部元素改用创建时持有的闭包引用。修完跑探针自证:面板数、计数、行数、拾取数一致才算过。 - 幂等 IIFE 是插件化的隐藏门票。 脚本从第一天起就写成"重复执行不出错"的形式,插件化时一行业务代码没改——这是写注入式工具就该遵守的纪律。
- 双层方案不是单点工具。 插件管圈选和打包;底下还有一层官方 WebBridge——本地 daemon 加 CDP 协议驱动真实浏览器(含登录态),14 个工具。圈选告诉 AI"改哪",WebBridge 让 AI"看现场",两层合起来才是完整的改单链路。
实测数据 / 现场
- 版本 v1.1.2,打包 zip、商店截图、促销贴片、徽标一晚备齐,已通过 Edge 商店审核上架;
- 上架前做完变现调研:Chrome 商店 2020 年起就关闭了付费插件通道,卖钱这条路不存在;Chrome 上架要 5 美元开发者费,Edge 免费。结论:免费上架,面板底部挂博客链接,给"野生码农"IP 引流;
- 竞品扫描:Edge 商店现有同类都是"查看元素信息"的老 inspector 思路,没有一个的 JSON 是为喂给 AI 设计的;
- 也翻了一次车:试图用浏览器自动化代填合作伙伴中心的注册向导,那是重度 SPA,元素引用几秒就失效,十几轮操作零进展被喊停。教训进了故障台账:重度 SPA 多步向导加登录态,人机分工必须是"人手动、AI 备料"。
这套东西能复用到哪
- AI 辅助前端开发:圈选 → 复制 → 粘贴,改界面不用说人话,Cursor、Kimi、Claude 通吃;
- UI 走查与 bug 提交:测试双击问题元素,bug 单附的就是选择器加计算样式,开发不用再问"哪个按钮";
- 爬虫与 RPA 锚点:拾取的 XPath/选择器直接当采集脚本的定位锚点,比手写快且准;
- 注入式工具插件化:这套"最小 manifest + service worker + 幂等 IIFE"骨架是通用模板,已有注入脚本半小时变成商店级插件。
下载安装(已过审上架)
- Edge 加载项商店(推荐):元素拾取器 Element Picker - AI 改单助手,打开点「获取」一键安装;
- 本站备用下载:element-picker-v1.1.2.zip,解压后在浏览器扩展页开开发者模式、「加载解压的扩展」即可,Edge / Chrome 通用。
现状与下一步
插件已通过 Edge 商店审核上架,上面两个链接即装即用;商店搜索收录有延迟,初期以直达链接分发为主。变现上它就是免费引流品,调研时就想清楚了,不抱幻想。下一步是把拾取 JSON 的字段口径和 AI 改单工作流再咬合一轮,让"圈选到改完"整条链路的耗时再砍一半。