前言¶

在調試或操作瀏覽器頁面時，如果需要讓模型理解某個具體控件的位置、樣式或結構，通常只能截圖或口頭描述。這種方式效率低且容易產生歧義。

DeepSeek Harness 提供了插件化架構，dsh-element-context 作爲一個常規 Cordis 插件，解決了這個問題。它允許在對話中直接點選 UI 元素，將選擇器、源碼位置、盒模型與計算樣式結構化地注入模型上下文，省去了手動描述的步驟。

基礎信息¶

該插件由 longhao666666 維護，採用 MIT 許可證。它不依賴編譯、Token 或 API Key，也不需要額外服務，純 JS 源碼直接加載。

環境要求：
- Windows 系統
- 已安裝 DeepSeek Harness 桌面版，且至少啓動過一次（開發基於 0.2.0-rc.2 驗證）

核心功能¶

1. 鼠標點選：點擊輸入框上方的「點選元素」，在右側瀏覽器頁面點擊目標控件即可關聯。支持連續拾取，按 Esc 結束。
2. 手動關聯：在輸入框填寫 CSS 選擇器（如 #submit-btn）或源碼位置（文件:行號），適用於 hover 纔出現的元素。
3. 結構化注入：關聯元素以 <target_ui_element>（單個）或 <target_ui_elements count=N>（多個）的形式進入系統提示詞。
4. 元素畫像：包含源碼位置（data-loc）、選擇器、標籤/ID/Class/Role、文本內容、頁面 URL、視口矩形、盒模型及關鍵計算樣式。
5. Chip 管理：已關聯元素顯示爲「UI 上下文」chip 列表，支持單個移除或一鍵清空。上限 32 個（每個元素每輪約佔 400 token，建議用完就刪）。
6. 沙箱友好：點選探針通過 executeJavaScript 注入，不影響頁面自身的沙箱環境。

安裝與啓用¶

使用官方提供的一鍵腳本安裝。腳本會自動檢測 DSH、建立 node_modules/@local 鏈接並寫入配置。

git clone https://github.com/longhao666666/dsh-element-context.git
cd dsh-element-context
powershell -ExecutionPolicy Bypass -File .\install.ps1

安裝完成後重啓 DeepSeek Harness，在「插件管理」頁確認 @local/dsh-element-context 已啓用。

使用步驟¶

1. 打開一個帶側欄瀏覽器頁面的會話（建議使用「操作」類預設）。
2. 點擊輸入框上方的「點選元素」，狀態欄會提示「在右側瀏覽器頁面裏點擊目標控件，可連續拾取多個；Esc 結束」。
3. 在右側頁面上點擊目標控件，元素隨即出現在「UI 上下文」chip 列表中。
4. 正常發送消息，模型每輪都會收到這些元素的完整上下文。
5. 不再需要時，點 chip 上的移除按鈕或「清空」，以節省 token。

注意事項¶

• Token 消耗：每個元素每輪約佔 400 token，建議在用完 32 個上限前及時清理。
• 沙箱限制：雖然探針通過 executeJavaScript 注入，但頁面自身的沙箱隔離機制不受影響。
• 權限運行：插件以當前 DSH 進程權限運行，安裝前建議檢查源碼與許可證。

總結¶

通過直接將 UI 元素的結構化信息注入上下文，該插件讓模型能夠精準理解頁面佈局與控件細節，適用於需要精細操作的 Web 自動化或調試場景。

插件目錄：https://www.skillhub.cn/plugins/longhao666666/dsh-element-context
源碼地址：https://github.com/longhao666666/dsh-element-context