前言¶
在 DSH 里用右侧栏浏览器对照页面改代码或排查 UI 时，常见做法是截图或手工复制选择器、HTML 片段，再贴进对话。信息容易缺字段，模型也看不清元素在页面里的上下文。下面介绍社区客户端插件 dsh-element-lens（元素透镜）：在侧栏里点选 DOM，把结构化描述写进聊天草稿，发送前可在输入框或胶囊面板里逐条删改。
这是什么¶
dsh-element-lens 由维护者 mmyddd 发布，分类为客户端插件。一句话定位：在 DSH 右侧栏浏览器里拾取网页元素，把它送进对话草稿（reference chip），而不是单独挂成与输入框脱节的附件列表。
仓库：https://github.com/mmyddd/dsh-element-lens
社区目录页：https://www.skillhub.cn/plugins/mmyddd/dsh-element-lens
DSH 生态主张「一切皆插件」；SkillHub 等目录是社区站点，与 DeepSeek / 幻方无官方从属关系。
核心功能¶
拾取与写入草稿¶
安装并刷新窗口后，侧栏地址栏右侧会出现拾取按钮（插在 addressBox 之后、系统浏览器打开按钮之前，28×28，样式跟随宿主工具栏 .tool）。
- 点击拾取按钮，页面进入选取模式；鼠标划过元素时，下方出现高亮框与信息卡（标签名、尺寸、颜色、背景、字体等）。
- 单击一次即提取该元素并写入对话草稿；按
Esc取消（文档与窗口各绑一份，覆盖焦点在帧内的情况）。
提取字段包括：页面地址与标题、标签名、role、可访问名、CSS 选择器、XPath、文本、邻近文本、去脚本化的 HTML 片段、白名单属性、包围盒，以及可读的样式（颜色、背景、显示、字族、字号、字重）。多段元素序列化为 ## Element N 提示块；chip 的 clipboardText 存完整描述，发送时投影进消息正文，气泡里可折叠为「元素 ×N」，hover 可回看。
三个宿主通道¶
侧栏浏览器在不同环境里挂不同框架，插件按顺序选通道：
| 宿主 | 通道 |
|---|---|
桌面端 Electron <webview> |
executeJavaScript 注入自包含选择器 |
Web 端同源 <iframe> |
本进程直接对子文档安装同一选择器 |
跨域 <iframe> |
宿主侧 /element-lens/snapshot 取回 HTML，叠加同源快照帧供选取 |
跨域快照会剥掉脚本、内联事件、<base> 与 srcdoc，并注入 <base href> 以便相对资源仍能解析。
胶囊与草稿一致¶
胶囊不单独维护列表，每次从草稿的 occurrences 投影；草稿是唯一权威。在胶囊面板点「删除」或在输入框删掉 chip，两侧同步。与 @changfenhuang/dsh-annotation 批注胶囊同处输入框右上角时，本插件让到批注左侧留 8px，放不下则叠到上方（批注 z-index 更高）。
若其他插件用 setDraft 把 chip 压成纯文本，本插件会按 ref 就地换回 chip，避免载荷在草稿里重复出现。
安装与启用¶
推荐在 DSH 里让助手执行一次 bundle 安装，目标写：
github:mmyddd/dsh-element-lens
装完刷新窗口即可看到地址栏右侧的拾取按钮。
README 也说明可手动克隆仓库后以本地路径 link 安装（profile 的 package.json 中 "dsh-element-lens": "link:<路径>"，且 dsh.profile.bundles 含 dsh-element-lens）。link 安装的包在页面加载时才取代码，本地改动需刷新窗口，不会热更新。
当前 package 版本为 1.1.3，许可证 MIT。
典型用法¶
- 在 DSH 右侧栏打开要对齐或要描述的页面。
- 点击地址栏右侧拾取按钮，光标变为十字，悬停查看信息卡确认目标节点。
- 单击选中；需要多个元素时重复拾取（每条对应草稿里一个 chip /
## Element N块）。 - 在输入框旁胶囊或输入区编辑、删除不需要的条目，确认后照常发送对话。
未就绪时拾取按钮会禁用；aria-pressed 反映是否处于拾取状态。
适用场景与注意¶
适合谁：需要在 DSH 对话里引用具体 DOM 的前端、全栈或智能体工作流——例如「按这个按钮的样式改组件」「这个表单项的 aria 不对」——且希望选择器、XPath、片段与样式一次带全。
注意：
- 插件以当前 DSH 进程权限运行，跨域场景依赖宿主侧快照路由；安装前建议阅读 源码 与 MIT 许可证。
- 密码框文本会打码；HTML 片段与邻近文本有长度截断（README 中写明上限与
[truncated]标记）。 - 行为对照既有元素拾取参考实现重写实现，界面胶囊规格致谢批注插件，代码未复制其源码。
维护者在仓库提供 npm test 与分套件回归（布局、Esc、草稿↔胶囊、与批注同发、webview 通道等）；CI 在 Ubuntu / Windows、Node 22 / 24 下跑测试，推 v* 标签通过后发布 GitHub Release。
结尾¶
dsh-element-lens 把侧栏浏览器里的「点选 DOM」变成可编辑的对话草稿载荷，减少手工抄选择器和 HTML 的摩擦。需要安装或细节时，以社区目录页与 GitHub README 为准：
