前言¶
在 DSH 裏讓模型改「網頁上這一塊」，通常要同時解決兩件事：頁面能看見，且能精確指向是哪個元素或區域。側欄自帶瀏覽器若直接嵌遠程 URL，常被 X-Frame-Options 或 CSP 的 frame-ancestors 擋住；即便能顯示，跨源也無法穩定讀取 DOM，對話裏往往只能貼截圖或口頭描述，模型還要猜佈局。
dsh-annotated-browser 面向上述場景：在宿主機用 headless Chromium 渲染頁面，再從 DSH 同源代理出 HTML，使側欄與頁面同源，從而點擊元素或框選區域，把選擇器、可見文本、矩形與備註一併送入會話。
這是什麼¶
- 名稱：
dsh-annotated-browser（DeepSeek Harness 客戶端插件） - 維護者：KirinKylin-1
- 分類：客戶端（
platform: web，注入右側欄與會話相關 UI） - 許可證：MIT
插件在 DSH 側欄瀏覽器中提供標註能力：通過同源主機代理渲染頁面後，點擊元素或拖拽區域，將備註寫入對話。模型收到的是選擇器、可見文本與矩形信息，而非需要猜測含義的截圖。
核心功能¶
同源代理，提高可嵌入與可標註性¶
部分站點禁止被 iframe 直接加載遠程地址。本插件不在側欄裏直連遠端 URL，而是在宿主機用 headless Chromium 執行頁面，再把結果從 DSH 源站提供，從而避開典型的嵌入限制，頁面更易正常顯示。
渲染結果與 DSH 面板同源後，才能滿足 DOM 標註前提，支持：
- 點擊元素並生成 選擇器（
#id、data-testid，或沿祖先鏈行走的 CSS 路徑）； - 拖拽區域時收集 區域內所有元素，而不只是最外層節點；
- 一併記錄可見文本、元素位置與備註；
- 連續選取，最終按選取順序 合併爲一條消息 發送。
與現有瀏覽器標籤的協作方式¶
配置項 takeover 默認爲 true 時，插件直接提供 browser 標籤類型，打開的頁面默認可標註。設爲 false 時不替換原有 browser 標籤：快捷鍵、在系統瀏覽器中打開、歷史記錄及其他依賴 browser 的插件行爲保持不變，並額外提供標註標籤與標籤條上的切換入口。
整頁評審少佔輪次¶
添加備註後仍留在選取模式，可按 Esc 結束。備註會進入列表，通過「發送到對話」一次性發出，整頁走查不必每條備註佔一輪。
已是同源時的直連¶
若頁面本就由當前 DSH 提供（例如另一插件的頁面），則直接 iframe 加載，保留 cookie，不再多跑一遍 Chromium。
無法標註時的明確降級¶
僅在本機可達的地址（例如映射到本地的端口）等情況下，面板可回退爲 直接加載（只讀）：頁面仍可見，並明確提示無法標註，而不是空白 iframe。
界面語言¶
面板跟隨 GUI 語言（Settings → General），可隨設置切換；內置英文與中文，字符串集中在 i18n.js。
安裝與啓用¶
官方推薦從 GitHub Releases 安裝預構建包（README 記載在乾淨 profile 上驗證約 9.4 s，包約 273 KB）：
dsh plugin --profile web add https://github.com/KirinKylin-1/dsh-annotated-browser/releases/download/v1.2.2/dsh-annotated-browser-1.2.2.tgz
安裝後需 重啓一次 dsh web（宿主機側需加載），並刷新 GUI。
另有兩種 README 記載的替代方式（按需選用）：
# 直接從 git（下載更大，從源碼運行）
dsh plugin --profile web add github:KirinKylin-1/dsh-annotated-browser
# 自 npm 發佈後即可（README 中稱「once published」）
dsh plugin --profile web add dsh-annotated-browser
環境要求（來自 package.json 與 README）：
- Node
>=22 - DSH
>=0.2.1-rc.1 <0.3.0 - 宿主機需有基於 Chromium 的瀏覽器（Chrome、Chromium 或 Edge）；自動探測常見路徑，或通過
CHROME_PATH/PUPPETEER_EXECUTABLE_PATH指定。探測失敗時可在 profile 補丁中寫明路徑：
# ~/.dsh/profiles/web/cordis.patch.yml
- id: dsh-annotated-browser
config:
browserExecutable: /usr/bin/google-chrome
配置項¶
| 字段 | 默認值 | 含義 |
|---|---|---|
browserExecutable |
自動探測 | Chrome/Chromium 可執行文件絕對路徑 |
proxyServer |
空 | 渲染頁面時使用的 HTTP 代理，例如 http://127.0.0.1:7890 |
timeoutMs |
30000 |
頁面加載超時（毫秒） |
allowRemote |
false |
是否接受非環回地址的代理請求（僅當 DSH 直接暴露在局域網時考慮） |
takeover |
true |
是否接管 browser 標籤類型；false 保留原版瀏覽器並增加標註入口 |
典型用法¶
README 記載的操作順序如下：
- 右側欄 → Browser → 輸入 URL。
- 工具欄 → Annotate（按 Esc 可退出標註模式）：單擊元素，或按住拖拽框選區域。
- 填寫備註 → Add to list；添加後自動繼續選取。
- Send to conversation 將所有備註按添加順序作爲 一條消息 發到當前會話。
備註列表在刷新後仍保留：按 Session 存在 localStorage 中，直到清空或發送。
適用場景與注意¶
適合：需要在真實頁面佈局上與模型對齊修改意見的前端或 UI 相關工作流；需要把「改這裏」落實爲可機器讀取的選擇器與文本，而不是截圖猜測的場景。
侷限（README「Limits」）：
- 頁面由 headless Chromium 渲染後回源提供；登錄態、重度交互應用可能與日常瀏覽器表現不一致。
- 代理頁面視爲「較可信」內容，只瀏覽你本會在 GUI 中打開的站點。
- 不會共享你本機瀏覽器裏的 cookie。
安全與權限：插件以當前 dsh 進程權限在宿主機啓動 Chromium 並代理請求。安裝前宜閱讀源碼與 MIT 許可證，確認可接受其網絡與本地瀏覽器調用行爲。社區目錄 skillhub.cn 爲獨立收錄站點，與 DeepSeek / 幻方無官方從屬關係；DSH 生態遵循「一切皆插件」的擴展方式。
結尾¶
dsh-annotated-browser 把「看見頁面」和「指名部位」合成側欄裏的標註流程，並以結構化信息進入對話，適合整頁走查類任務。進一步瞭解可訪問社區目錄頁與項目倉庫：
- 目錄頁：https://www.skillhub.cn/plugins/KirinKylin-1/dsh-annotated-browser
- GitHub：https://github.com/KirinKylin-1/dsh-annotated-browser
