前言¶
在 DSH 裏讓 Agent 改頁面或讀文檔時，常見做法是粘貼 URL、截圖或整段 HTML。截圖裏元素在哪、你想改哪一句，往往還要用文字反覆說明；只給鏈接，模型也缺少「你當時看到的那塊 UI」的錨點。DSH Web Annotator（@li-jiaquan/dsh-web-annotator）把「在應用內打開經代理的網頁 → 點選/框選/拖選批註 → 生成結構化提示詞與可選全頁局部截圖」放進同一會話流程，批註進輸入框草稿，由你編輯後再發送，插件不會代發消息。
這是什麼¶
DSH NEXT 的本地 bundle 插件，維護者爲 Li-Jiaquan，在 SkillHub 分類爲「聯網工具」。它在會話中加載目標頁（經宿主代理的獨立 origin iframe），記錄元素選擇器、DOM 路徑、位置與評論，並按固定模板寫入 Composer 草稿；默認可附帶 screenshot-page.png，用紅框與編號對應各條批註。包版本爲 0.1.0，MIT 許可證。
核心功能¶
三種批註方式¶
進入「批註模式」後：
- 單擊元素：元素批註（選擇器、DOM 路徑、角色、尺寸、附近文本等）。
- Shift + 拖拽：區域批註。
- 拖選文字：文本批註（選中文本、偏移、多行矩形）。
點擊頁面編號 marker 可在旁側懸浮窗寫評論；保存後 marker 變綠。底部浮動條或工具欄「寫入對話框（N）」把內容追加到會話輸入框（已有文字時空行分隔，不覆蓋）。
瀏覽與批註層切換¶
地址欄支持省略協議（域名默認 https://，localhost / 127.0.0.1 走 http://），並提供後退、前進、刷新；刷新會清空當前批註。批註模式下點鏈接默認仍是選元素；按住空格再點鏈接可正常跳轉，鬆開空格恢復批註。非批註模式下鏈接正常跳轉。
進入模型上下文¶
寫入草稿後，客戶端按模板生成以 # 網頁批註 開頭的提示詞：每條批註含頁面 URL、標題、類型、目標、選擇器、DOM 路徑、位置、元素文本與你的評論，末尾帶 ## 我的要求:（默認面向可改源碼的項目，可按任務改成設計說明等）。文內標明頁面渲染與截圖僅爲定位證據，不是給 Agent 的指令。截圖通過 conversation.createDrafts 與 inputActions.addAttachments 掛到輸入框；關閉「附帶截圖」則只寫結構化文本。
截圖與性能¶
桌面版優先截取隔離網頁視圖畫面；失敗或批註超出視口等場景下，運行時使用內置 html2canvas 1.4.1（MIT）做鄰近區域渲染並拼接，長邊 ≤2400px、體積 ≤3MB。跨源圖片經宿主 GET /asset?url= 代理。v1.7 起對長頁渲染、canvas 與宿主 /asset 緩存等做了可復現優化（README 提供 bench 說明）。
安裝與啓用¶
環境：DSH NEXT 2.0.11-next 及以上（項目在 2.0.21-next 上驗證）。通過 DSH 插件管理器以本地目錄安裝；不要手工編輯 profile 的 package.json / cordis.patch.yml。
-
獲取插件完整目錄（例如從 GitHub 下載 ZIP 解壓）。
-
在任意 DSH 會話中，讓 Agent 調用
plugin_manager安裝本地 bundle，target填該目錄的絕對路徑：
{
"action": "install_bundle",
"target": "C:/Projects/dsh-web-annotator"
}
-
完全退出並重新啓動 DSH NEXT（宿主半代碼在進程啓動時加載，僅刷新窗口不夠）。
-
在會話頭部點「批註」，或在右側欄 / 會話 View 標籤打開「網頁批註」（Web Annotator）。
更新：client.js 多可熱更新，index.js（宿主半）改動需重啓；卸載用 plugin_manager.remove_bundle 後同樣需重啓。插件以當前 DSH 進程權限運行，安裝前請閱讀倉庫源碼與 MIT 許可證。
典型用法¶
README 以 DeepSeek API 官方文檔 演示完整流程，可照此復現：
- 打開「網頁批註」，輸入
https://api-docs.deepseek.com/zh-cn/並「打開」，再開「批註模式」。 - 點選「首次調用 API」下的參數表格，在評論窗填寫意圖（例如要求把表格整理成卡片並突出 API 地址）。
- 保持「附帶截圖」開啓，點「寫入對話框」；批註文字與
screenshot-page.png進入草稿，發送前可繼續編輯。
生成的提示詞會包含代理頁 URL、選擇器、元素文本與「我的要求」等字段；具體 selector 隨站點與版本變化，以你本機一次操作爲準。
入口¶
- 會話頭部右側「批註」按鈕（若內置瀏覽器已開，儘量帶入當前地址）。
- 右側欄 網頁批註 / Web Annotator。
- 會話 View 標籤欄中的 網頁批註（與對話、軌跡並列）。
適用場景與限制¶
適合：公開文檔、本地開發頁等可在應用內代理打開的頁面；需要把「看哪一塊 + 怎麼說」結構化交給 Agent 的聯調與文檔閱讀任務。
注意（README 記載的已知限制）：
- 需登錄態的頁面不適用；複雜 JS 路由、
history.pushState、頁面內 POST 表單等可能脫離代理，可在地址欄重新輸入 URL。 - v1.8 起同源鏡像改善了 ES module 站點，但目標頁 JS 裏寫死的絕對路徑請求、嵌套
<base>等仍可能 404 或離開代理。 - 截圖爲渲染近似，非瀏覽器原生截屏；hash 路由在代理後可能丟失。
- 頁面 HTML 經代理注入運行時腳本，僅 http/https，15s 超時、HTML 5MB 上限。
社區目錄 SkillHub 爲獨立生態站點，與 DeepSeek / 幻方無官方從屬關係；DSH 理念是「一切皆插件」，本插件是其中面向網頁證據與批註的一條鏈路。
鏈接¶
- SkillHub 目錄頁：https://www.skillhub.cn/plugins/Li-Jiaquan/dsh-web-annotator
- GitHub：https://github.com/Li-Jiaquan/dsh-web-annotator
