DOM Picker：从“鼠标指到元素”到“AI 可引用上下文”

核心是运行在当前页面里的监听脚本：高亮元素、阻断原点击、生成 selector、抽取快照。
同页 DOM 可直接读取
渐进式链路
1
监听鼠标与键盘mousemove 更新当前元素；click 确认；Escape 取消。
2
画 overlay用 getBoundingClientRect() 得到位置，插入一个 pointer-events:none 的高亮层。
3
生成稳定 selector优先 #id、data-testid、aria-label，最后拼路径和 :nth-of-type。
4
抽取 DOM 快照保存 text、HTML preview、rect、结构树、控件列表，交给 AI 作为上下文。
event.target当前 hover 元素
↓
selector + snapshot可复现引用
↓
querySelector(selector)后续精确回读
交互 Demo

两端协同

前端负责交互捕获，后端负责注入、保存和把选择结果放进 AI 请求上下文。

Selector稳定定位元素
Snapshot抽取文本与结构
点击“开始圈选”，然后在 demo 区域内移动鼠标并点击任意元素。
等待选择...
这个 demo 运行在当前 HTML 自己的 DOM 中；跨域 iframe 需要在 iframe 内部运行同样的 picker，再用 postMessage 回传。