DeepSeek Harness 右側欄瀏覽器插件：Loopback 代理與元素拾取

前言¶

DeepSeek Harness（DSH）通過插件系統擴展功能。智能體開發中常需檢查網頁 DOM 結構或調試特定頁面。該插件在 DSH 右側欄提供一個瀏覽器，通過 loopback 代理運行，並支持元素拾取，以便將上下文注入對話。

名稱：gnatnaituy/dsh-sidebar-browser
維護者：Gnatnaituy
定位：在 DSH 右側欄運行的瀏覽器，支持多標籤、設備預覽、賬號記憶及元素拾取。
核心價值：利用同源代理解決跨域限制，將頁面 DOM 引用（[標籤][DOMn]）插入輸入框，供模型通過 read_picked_element 工具讀取。

插件安裝爲 DSH 的一個 bundle。使用官方腳本進行冪等安裝。

node tools/install-into-profile.mjs

卸載或重裝時使用：

node tools/uninstall-from-profile.mjs

插件在 DSH 右側欄註冊了名爲「瀏覽器 · 拾取」的原生頁籤。主要功能包括：

瀏覽與標籤管理：支持多標籤頁，頁面狀態（地址、標題）由 host 持有，切換標籤不重載頁面。標籤狀態（地址、縮放、視口）會保存到 localStorage，重啓後自動還原。
調試輔助：
- 縮放與視口：支持 25%–300% 縮放。提供手機/平板設備預覽（如 iPhone 15 Pro、iPad Pro），支持橫豎屏切換及手動輸入分辨率（寬×高）。
- 地址容錯：支持不帶協議的地址（如 localhost:3000/admin）。
認證與會話：
- 記住賬號密碼：支持保存並自動填充表單。密碼在元素記錄中被顯式抹除。
- 端口記憶：每個目標源記住上次使用的端口，避免因重啓導致的登錄態失效。
元素拾取：
- 不注入 DOM：高亮框繪製在外殼頁面，被測頁面 DOM 保持純淨。
- 引用插入：點擊「拾取」或按 ` 鍵，高亮元素並插入引用（如 [提交訂單][DOM1]）。
- 工具調用：模型需要元素詳情時調用 read_picked_element 工具。

信任邊界：同源既是拾取的前提，也是信任邊界。被測頁面理論上能訪問外殼頁面，可能僞造拾取結果。請僅瀏覽信任的頁面。
安全策略：代理會摘除被測頁面的 CSP 與 X-Frame-Options，頁面的安全策略在側欄裏不生效。
數據存儲：保存的賬號密碼以明文形式存儲在 DSH GUI 的 localStorage 中（無系統鑰匙串），僅按目標源對應。
代理機制：代理僅綁定 127.0.0.1，必須在本地運行。/dsh-sidebar-browser/invoke 走 webServer 路由，不在 GUI 登錄圍欄內。
設備預覽：僅爲視口預覽，devicePixelRatio、User-Agent 等仍爲桌面瀏覽器行爲。
重啓行爲：DSH 重啓後頁面會重新加載，重啓前未提交的表單內容不保留。

適合智能體開發者調試 Web 應用、檢查頁面佈局、測試響應式設計或需要將頁面元素作爲上下文傳遞給模型進行操作的場景。