前言¶

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 倉庫。