前言¶

在 DeepSeek Harness（DSH）裏用右側 Browser 看本地或遠程頁面時，常見問題不是「頁面打不開」，而是「跟模型說清點的是哪一塊」：只能口述 DOM 結構、類名或截圖，輸入框容易被大段 HTML 佔滿，對話記錄也難以掃讀。

社區插件 dsh-component-picker（維護者 Caho1，分類：客戶端）面向 DSH 內置 Browser 標籤頁，提供接近 Claude 風格的元素點選：懸停高亮、單擊拾取，把元素身份、React 組件、props、來源文件等信息與下一條消息一併交給模型；輸入區用緊湊 pill 展示，Host 側負責投遞，會話裏以可摺疊行呈現上下文，而不是一整牆 markup。下文按安裝、用法與限制說明，事實以 GitHub README 爲準。

這是什麼¶

dsh-component-picker 是面向 DSH 的純插件包（無需單獨構建步驟）。它同時聲明 dsh.bundle.patch（cordis.patch.yml）與 dsh.client（Web 客戶端半截），安裝後 Host 行、Browser 工具、輸入框 pill 與會話行會一起激活。倉庫：https://github.com/Caho1/dsh-component-picker；社區目錄頁：https://www.skillhub.cn/plugins/Caho1/dsh-component-picker。SkillHub 爲獨立社區目錄，與 DeepSeek / 幻方無官方從屬關係。

許可協議爲 MIT（見 README）；package.json 中版本號爲 1.0.0。

核心功能¶

插件在 Browser 工具欄追加指針工具，在 guest 頁面內通過 webview.executeJavaScript 運行自檢腳本：懸停時橙色描邊並顯示 tag#id.class 標籤，單擊後採集 tag、id、class、屬性、截斷文本（≤200）、選擇器（≤4 層）、部分計算樣式與 outerHTML（≤1200），並嘗試從 React fiber 讀取組件名、owners、摘要 props 以及開發構建中的 _debugSource。

拾取成功後，輸入框 composer 內出現 pill；懸停可看詳情卡（含截圖、元素、組件、props、來源、選擇器、樣式、HTML 等），可點擊固定或 × 移除。發送消息時，Host 經 POST /component-picker/stage 將序列化上下文交給 agent.send；若無 Host 路由則回退爲前綴拼進 prompt。會話側通過 conversation.chat.node 渲染 context 與 turn-trigger，展示爲指針行而非原始 XML。

README 用示意說明 composer 與 transcript 的展示形態：

composer:   ▸ <AuthGate />                         ← pill, inside the composer card
transcript: ▷ <AuthGate /> ▸                       ← collapsed context row
            (click) 元素 / 組件 / 來源 / 選擇器 / Props / payload

上下文序列化爲單行 XML 風格片段，例如：

<selected-element component=AuthGate tag=div class="flex size-14" owners="Page"
 text="…" selector="body > main > section > div" source=/src/auth/gate.tsx:12
 props='{"scenario":"coding-scenario"}' />

截圖通過 webview.capturePage(crop) 生成，僅出現在詳情卡，不會發給模型（README 明確說明）。

安裝與啓用¶

安裝方式來自官方 README：用 Plugin Manager 的 install_bundle 指向本插件目錄（絕對路徑），或將目錄複製進 profile 後按包名加入 bundle。

// agent tool call
plugin_manager({ action: 'install_bundle', target: '/absolute/path/to/dsh-component-picker' })

安裝完成後 重新加載 Harness 窗口一次，以便客戶端半截啓動。插件與當前 DSH 進程同權限運行；安裝前宜自行審閱 index.js、client.js 及 cordis.patch.yml 等源碼，並確認 MIT 許可是否符合你的環境要求。

典型用法¶

1. 在右側邊欄 Browser 中打開目標頁面。
2. 點擊 Browser 工具欄右端的指針圖標。
3. 懸停：光標下元素以橙色輪廓標出；指針仍爲頁面自身光標。
4. 單擊拾取；Esc 或右鍵取消。已選元素輪廓保留約 4 秒。
5. 輸入框上方出現 pill；懸停看詳情，點擊固定，× 丟棄。
6. 照常發送消息；元素上下文由 Host 投遞，不污染正文文本。

Esc 或右鍵可隨時退出點選模式；未發送前可用 pill 上的 × 去掉附加上下文。

適用場景與注意¶

適合誰：在 DSH 桌面端調試 Web 前端、向模型描述「頁面上的具體組件/節點」的開發者；尤其頁面爲 React 應用且處於可讀取 fiber 的環境時，組件名與 props 更有參考價值。

環境限制（README「Requirements and known gaps」）：

• 僅桌面端：標籤頁須爲 Electron <webview>（[data-sidebar-browser-frame="webview"]）。Web profile 使用 iframe，無可腳本化句柄，插件無法按設計工作。
• 組件名來自 React fiber；_debugSource 多見於開發構建。無 sourcemap VLQ 解析，生產包可能只報告 bundle 位置或爲空。
• 替換 turn-trigger 節點種類後，其他喚醒類行（定時、通知等）可能退回通用標題 + 可展開正文。
• 截圖不進模型，僅本地詳情卡展示。

README 的 Development 小節說明，在插件源碼目錄可執行 npm install 與 npm test（jsdom + React 19，覆蓋 client 與 host 測試）；與 Harness 內 install_bundle 是不同使用場景。

結尾¶

dsh-component-picker 把「在 Browser 裏指哪打哪」收成一條可隨消息發送的緊湊上下文，減輕口述 DOM 與污染輸入框的負擔。安裝以 README 中的 install_bundle 爲準；使用前確認桌面 webview 環境與源碼審閱。

• 目錄頁：https://www.skillhub.cn/plugins/Caho1/dsh-component-picker
• 源碼與文檔：https://github.com/Caho1/dsh-component-picker