前言¶
在 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 爲準：
