前言¶
在 DSH 中使用內置瀏覽器時，如果想讓模型直接修改頁面上的某個元素，傳統做法是截圖、口頭描述，或者複製 DOM 樹片段，但這些都容易出錯。DSH 網頁批註插件接管了出廠的 browser 標籤，在頁面中點選元素就能寫評論，整批一次性發送給當前會話，讓模型在項目源碼裏找到對應位置並修改。
插件信息¶
- 名稱：uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
- 維護者：uugvkbvkdjbsdbvwxxl
- 分類：聯網工具
- 標星：1
- 許可：MIT
- 簡介：在 DSH 內置瀏覽器裏打開網頁，點選頁面元素寫評論，再一次性把「頁面地址 + 元素定位 + 批註」發給當前會話。
核心功能¶
- 批註模式：點擊工具欄的批註按鈕進入批註模式，鼠標劃過元素出現藍色高亮，點擊即選中。
- 膠囊評論框：選中後評論框浮現在元素旁邊，左側六點手柄可拖動，右側圓形按鈕確認。
- 連續批註：一條加完直接點下一個元素，無需再點工具欄按鈕，不會中途發送。
- 懸浮功能欄：網頁視口底部一條深色膠囊，控制暫停/繼續、標記顯隱、明細查看、清空、發送與退出。
- 明細抽屜：在功能欄旁打開抽屜，逐條查看 / 編輯 / 刪除，默認與功能欄居中對齊，拖動後跟隨其左緣並夾在視口內。
- 發送整批：唯一的整批發送入口，未保存的輸入會先加入本次批次，只提交一次。
- 會話卡片：發送後在會話裏出現可摺疊的批註卡片，展開後能看到每一條的定位信息（選擇器、可見文本、DOM 路徑、標籤名、HTML 片段）。
- 窄視口適配：≤520px 下狀態文案縮短爲「批註 · 2」，320px 不橫向溢出。
入口說明¶
插件以 extension 優先級接管了出廠的 browser 標籤類型，沒有單獨的入口：
- 右側欄引導頁裏的 瀏覽器 卡片（
Ctrl + T）打開的就是帶批註的瀏覽器。 - 聊天裏的鏈接選「在內置瀏覽器打開」，以及
sidebarRight.openTab('browser')打開的標籤，都落到同一個實現。 - 卡片圖標是「地球 + 評論氣泡」。
- 移除本插件後，出廠瀏覽器原樣恢復。
典型用法¶
- 在 DSH 右側欄點
+→ 瀏覽器（或按Ctrl + T）。 - 在地址欄輸入頁面地址。不帶協議時，本機/內網默認
http，其餘默認https。 - 點擊工具欄的批註按鈕（氣泡+筆圖標）進入批註模式：鼠標劃過元素出現藍色高亮，點擊即選中。
- 評論框浮現在元素旁邊，是一個膠囊形輸入條：左側六點拖動手柄 + 中部輸入框 + 右側圓形確認按鈕。
按住手柄可以拖到任意位置；換一個元素重新點選時，評論框回到新元素旁邊。 - 寫完點 ✓（或
Ctrl/Cmd + Enter）：只添加這一條，並立刻回到拾取狀態。 - 連續批註：一條加完直接點下一個元素，不用再點工具欄按鈕，也不會中途發出去。
- 攢夠之後，點懸浮功能欄的藍色「發送」一次性發整批。
懸浮功能欄控制¶
功能欄寬度隨內容收緊，按鈕與行爲如下：
| 按鈕 | 行爲 |
|---|---|
| 拖動柄 | 移動整條功能欄，始終夾在視口內；Home 恢復默認位置。拖動不會觸發頁面拾取。 |
| 狀態文案 | 顯示已收集條數；暫停時爲「批註已暫停 · 2」。 |
| 暫停/繼續 | 暫停後可以正常操作網頁，已收集批註保留；繼續恢復懸停與點選。 |
| 標記顯隱 | 只切換網頁上的編號與批註邊框，條目和發送都不受影響；導航與重新注入後仍保持該狀態。 |
| 明細 | 在功能欄旁打開抽屜，逐條查看 / 編輯 / 刪除。默認與功能欄居中對齊；拖動功能欄後跟隨其左緣並夾在視口內；拖到視口上半部時抽屜翻到下方。 |
| 清空 | 清掉全部已收集批註與未保存輸入。 |
| 發送 | 唯一的整批發送入口。未保存的輸入會先加入本次批次，只提交一次。 |
| × | 退出模式並隱藏功能欄，保留已收集批註與未保存輸入。 |
編輯一條批註時就地展開輸入框，只有一個藍色「保存」按鈕，取消用 Esc。Esc 按由內到外逐層退出：行內編輯 → 明細抽屜 → 退出批註模式。焦點在輸入框裏時 Esc 交給輸入框自己處理，不會丟正在寫的字。
發送後效果¶
發送後會在會話裏出現一張可摺疊的批註卡片：
┌ 網頁批註 3 條 ─────────────────┐
│ 1 把主按鈕文案改成「開始試用」 │
│ 2 這裏的圓角再小一點 │
│ 3 表格列寬不對 │
└──────────────────────────────────┘
模型收到的是完整文本，卡片只是它的摺疊視圖。展開後能看到每一條的定位信息。卡片由消息文本本身解析出來，沒有旁表：重開歷史時會從同一段文字重新解析，不會出現「卡片和內容對不上」。發送成功後只移除本次提交的那幾條，之後新收集的批註保留並重新編號。發送期間會暫停拾取，避免新條目混進正在提交的批次。
安裝與啓用¶
插件通過 dsh.bundle 清單安裝：
dsh plugin add github:uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
或從本地目錄安裝：
dsh plugin add /path/to/dsh-plugin-web-annotate
安裝後刷新桌面窗口（Ctrl + R）加載客戶端包。
能力邊界¶
以下是有意爲之，不是遺漏：
- 不讀取跨源 iframe 內部。瀏覽器安全模型不允許，頁內腳本只在頂層文檔與同源 frame 上工作。
- 不寫會話輸入框。批註以一次消息提交的形式進入會話，而不是塞進 composer 當草稿。宿主沒有提供向 composer 寫入草稿的服務，插件不繞過這個邊界。
- 不修改被訪問的頁面。頁內只有一個 Shadow DOM 覆蓋層用於高亮與編號，樣式通過 CSSOM 注入（嚴格的
style-srcCSP 下<style>會被拒絕）。 - 不持久化批註列表。刷新頁面後已收集的批註不保留；發送後的卡片仍在會話歷史裏。
文件結構¶
| 文件 | 作用 |
|---|---|
package.json |
bundle 清單：dsh.bundle.patch + dsh.client（platform: web） |
cordis.patch.yml |
插入 Host 行；所有行爲在 Client 半 |
index.js |
Host 半，空實現（本功能不需要 Host 工具） |
client.js |
瀏覽器類型接管、webview guest、頁內拾取腳本、功能欄、發送 |
locale/en.json / locale/zh.json |
插件元數據與全部界面文案 |
icon.svg |
圖標（地球 + 評論氣泡） |
適用場景與注意¶
適合需要在 DSH 內置瀏覽器中直接定位頁面元素並讓模型修改的開發者與智能體開發者。插件以當前 dsh 進程權限運行，安裝前應檢查源碼與許可證。
總結¶
DSH 網頁批註插件把「可視化批註 → 一次發送 → 改代碼」的流程落在了 DSH 自己的右側欄裏。你只需要在頁面上點一下，寫一句話，整批一次性發給會話，讓模型直接在項目源碼裏找到對應位置並修改。安裝命令如下：
dsh plugin add github:uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
- 插件目錄頁：https://www.skillhub.cn/plugins/uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
- GitHub 倉庫：https://github.com/uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
