前言¶

DSH 的 Agent 在修改前端界面时，最耗时的环节通常是“指清楚改哪里”：截图标注容易产生歧义，手写选择器需要翻阅 DevTools，粘贴整页 HTML 又会导致上下文爆炸。PickDOM 把这个过程压缩为一次点击，并将结构化引用（selector、文字、outerHTML、尺寸与关键样式）直接交给 Agent 对话。

这是什么¶

PickDOM 是 DSH（DeepSeek Harness）侧边栏的双引擎 Browser 插件，由用户 xiaobaiyg09 维护。它支持在侧边栏直接打开本地 HTML 文件与 http/https Web App，通过悬停高亮和点击框选，让 Agent 获取精确的元素引用。

核心功能¶

1. 框选与高亮
   在本地 HTML 或 Web App 中悬停目标元素，点击即可选中。工具栏提供后退、前进、刷新操作，支持点击选中安全可见元素，并利用父级面包屑切换层级。

2. Agent 引用
   选中元素后，元素的 selector、文字、outerHTML、尺寸与关键 computed styles 会立即进入 Agent 对话。也可以从浮动工具栏一键将当前元素发给 Agent。

3. 编辑与操作
   - 多行编辑：支持普通文本、input、textarea，点击元素即可在多行编辑器中修改，Cmd/Ctrl+Enter 保存，Esc 取消。
   - 复制元素：自动重写常见的 id、ARIA、表单与 SVG 引用，降低冲突风险。
   - 删除与撤销：支持删除元素及撤销/重做操作。
   - 尺寸调整：通过右、下、右下手柄调整宽高，Shift 保持比例。

4. 双引擎支持
   - File Engine：支持本地 .html/.htm 文件，相对路径资源正常解析，支持嵌套 iframe，可保存回真实文件。
   - Web App Engine：支持 http/https 地址，使用 Electron WebContentsView，不受目标站点 X-Frame-Options 限制，支持 CDP 高亮与选择。

安装与启用¶

该插件需要 DSH 版本 >=0.1.1-rc.1。

dsh plugin --profile <name> add dsh-html-picker-preview

典型用法¶

1. 打开页面。
2. 点击工具栏中的框选按钮进入 Picker 模式。
3. 在本地 HTML 或 Web App 中悬停并点击目标元素。
4. Agent 收到引用后，继续补充指令（如“改下布局”、“调整颜色”）并发送。
5. 修改完成后保存。

适用场景与注意¶

PickDOM 适合需要通过 Agent 快速定位并修改前端界面的场景。使用时需注意以下限制：

• Web App Engine 限制：该引擎只提供浏览与框选，不保存运行时 DOM。React/Vue 页面需通过组件源码映射与 HMR 修改源码，运行时 DOM 无法可靠序列化。
• 安全与权限：预览页无写权限；保存前会校验文件完整性（SHA-256），若文件被 Agent 或其他编辑器改动，会返回 409 错误。
• 并发限制：最多同时创建 3 个 Web App surface。
• 安全模型：本地文件读写受短生命周期 capability 保护，预览页无保存 API，避免权限绕过。

结语¶

通过将界面交互与 Agent 指令结合，PickDOM 解决了 Agent 改版前端时的上下文噪音问题。如需了解更多或贡献代码，可参考其目录页或 GitHub 仓库。