前言¶
用 DeepSeek Harness（DSH）改前端或審頁面時，常見問題很難用文字說清：間距不對、某個按鈕太擠、某段文案要換說法。截圖加箭頭可以指位置，但 agent 仍要猜 DOM 結構；若頁面子路由很多，來回描述更費事。另一類做法是在每個項目裏注入標註腳本（例如 Agentation 一類方案），需要加依賴、改 HTML，且不一定覆蓋本地 dev 和線上同一套流程。
dsh-webannotate 走另一條路：只在 DSH 桌面版內置瀏覽器裏工作，不改被標註站點的代碼。維護者是 FleatherYu，在 DSH 社區目錄中歸類爲「聯網工具」。下面介紹它做什麼、怎麼裝、怎麼用，以及使用時要注意的限制。
這是什麼¶
dsh-webannotate 是 DSH 插件（npm 包名 dsh-webannotate，當前資料中版本爲 0.1.1，MIT 許可證）。它在內置瀏覽器裏提供「點元素 → 寫一句要怎麼改 → 發送全部」的流程；批註作爲一條消息進入當前對話，每條批註附帶該元素的一張截圖。
DSH 桌面版用 Electron 的 <webview> 加載頁面，頁面與插件 GUI 不在同一 origin，GUI 無法直接讀 webview 裏的 DOM。插件的 client 半與 <webview> 同處 host 文檔，通過 executeJavaScript 注入批註層、輪詢批註數據，並用 capturePage 爲每條批註截圖，因此不需要反向代理、CDP，也不必改目標站點，任意 URL 均可標註。
核心功能¶
- 標註模式：在內置瀏覽器打開頁面後，右下角出現「批註」按鈕；進入模式後懸停高亮、點擊元素彈出評論框，保存後元素右上角顯示編號。
- 列表與管理：數字按鈕顯示本頁批註數量，可打開列表做定位、編輯、刪除或清空。
- 批量發送：「發送全部」將本頁批註合併爲一條對話消息；消息中含頁面 URL、條數、每條可見文本與你的說明，並在資料允許時附帶
源碼：（開發模式 React_debugSource）或組件：鏈；有id/data-testid/aria-label/name時會附帶選擇器信息。 - 按頁持久化：批註存在
sessionStorage，鍵爲 origin + pathname；同頁刷新或切換標籤仍保留，不同路徑各存各的。 - Host 能力（結構說明來自 README）：
index.js提供 overlay 靜態服務、POST /report與/batch、GET /status及webannotate_status工具；web/overlay.js爲注入頁內的 IIFE + Shadow DOM 批註層。
已知限制（以 README 爲準）：無法標註跨域 iframe 內元素；關閉內置瀏覽器面板後 webview 不在 DOM，批註層暫停；SPA 路由切換後舊編號可能無法定位；每條最多一張截圖，單批最多 6 張圖，超出不發圖；元素已不可見時該條靜默跳過截圖，文字仍會發送。
安裝與啓用¶
插件以當前 DSH 進程權限運行，安裝前建議在 GitHub 查看源碼與 MIT 許可證，確認符合你的環境策略。
從 npm 安裝：
dsh plugin --profile desktop add dsh-webannotate
或從 GitHub 安裝：
dsh plugin --profile desktop add github:FleatherYu/dsh-webannotate
安裝後完整退出並重啓一次 DSH（client 半在 host 啓動時組裝）。隨後在右側欄打開內置瀏覽器並訪問任意頁面即可使用。
本地開發插件目錄時，可用 link: 掛載（路徑替換爲你的實際目錄）：
dsh plugin --profile desktop add "link:/路徑/dsh-webannotate"
典型用法¶
- 在內置瀏覽器打開要審的頁面（本地 dev 或已部署站點均可）。
- 點右下角「批註」，進入標註模式；移到目標元素上點擊，在評論框裏寫修改意圖，
Ctrl+Enter或點「保存」。 - 繼續標註其他元素；需要時在列表中編輯或刪除。
- 點「發送全部」，在當前會話裏收到類似下面的合併消息（示例格式來自 README）：
【網頁批註】2 處 · 預算
頁面：http://localhost:5173/budget
截圖：2 張（編號對應）
1. 「保存」 字號大一點
源碼：src/pages/Budget.tsx:42
2. 「年 · 月」 排到上面去
組件：BudgetPage > MonthSwitch
agent 可結合截圖、可見文本與你的說明定位修改點；你無需在被標註項目中引入任何腳本。
適用場景與注意¶
適合：在 DSH 桌面版內置瀏覽器裏做 UI 走查、把「指哪改哪」的反饋一次性交給對話裏的 agent；不想爲每個前端倉庫加標註依賴的場景。
注意：僅覆蓋內置瀏覽器頂層文檔；iframe、面板關閉、SPA 路由與截圖條數限制見上文「已知限制」。DSH 生態理念是「一切皆插件」；社區目錄站點與 DeepSeek / 幻方無官方從屬關係，本文安裝命令與行爲均以插件倉庫 README 爲準。
結尾¶
dsh-webannotate 把網頁上的問題從長段描述收成「點選 + 短句 + 截圖批次」，且不動被標站點代碼。目錄頁：https://www.skillhub.cn/plugins/FleatherYu/dsh-webannotate；源碼與詳細排障：https://github.com/FleatherYu/dsh-webannotate。
