前言¶

在別人的站點裏寫嵌入型擴展，常見做法是打開 DevTools，手工複製 DOM、猜選擇器、對照 Network 裏某次 xhr/fetch 的請求體。下一輪部署改 class 名或接口路徑，又要重來一遍。DeepSeek Harness（DSH）可以把這類頁面上下文交給模型讀文件、寫腳本，但若缺少「當前登錄態下真實頁面長什麼樣、按鈕實際調了哪個 BFF」的可復現快照，智能體仍容易在假設上迭代。

下面介紹社區插件 dsh-site-bridge（維護者 kesha4，分類：客戶端）。它由 DSH 插件與 Chrome/Edge MV3 擴展兩半組成，把頁面 markup、樣式線索、網絡流量寫入工作區文件，並用 CDP 可信輸入在當前標籤頁裏驗證你剛寫的注入腳本。兩半單獨都不完整：插件側持有模型可見的 eleven 個 site_* 工具與會話工作區裏的快照；擴展側持有瀏覽器 profile、cookies 與 CDP 會話保真度。

這是什麼¶

dsh-site-bridge 的定位是：在你自己的瀏覽器裏，做 DeepSeek Harness 的「手與眼」——抓頁面 markup 與 BFF 流量到文件、可信輸入驅動頁面、虛擬光標、以及在當前標籤頁 live 驗證擴展代碼。許可證 MIT；發佈包版本在倉庫 package.json 中爲 0.11.2（以你安裝時拉到的包爲準）。

與「把 navigate/click/type 當主產品的 browser 自動化類插件」不同：這裏的自動化是驗證手段；產品是 capture——帶 box 與 computed style 的 DOM、主題 CSS 變量、經 uniqueness 檢查的選擇器候選，以及帶 header/body 的 xhr/fetch，都落盤供 agent 當源碼讀。典型目標是爲某一個具體站點寫嵌入擴展，輸入類工具用來對照 live 頁確認「選擇器可用」「帶 cookie 的 BFF 能通」，而不是泛化瀏覽網頁。

核心功能¶

資料中明確列出的能力如下。

Markup 與選擇器

• 元素樹含 box 與可見性；交互節點 computed style；主題 CSS custom properties。
• 選擇器候選按穩定性排序：data-testid > id > name > aria-label > class path > positional path，並在 live DOM 上檢查唯一性。
• Deep selector：host >>> inner 可穿透 open shadow root 與同源 iframe；點擊座標會按 frame offset 修正。

BFF 流量

• 記錄被檢查站點範圍內的 xhr/fetch：method、status、請求/響應 header 與 body。

可信輸入與虛擬光標

• 通過 CDP Input.* / DOM.setFileInputFiles 做點擊、輸入、select、按鍵、滾動、上傳；事件與真人難以區分。
• 虛擬光標：DOM overlay 移到目標座標，併發送真實 mouse event，應對忽略 synthetic click() 的控件。

其它

• 後臺標籤頁仍可讀、點、輸入、截圖（Chrome 主要節流 timer/動畫）。
• 授權不離開瀏覽器、不寫入磁盤（README Security 節有說明；安裝前仍應自行審閱源碼與許可證）。

capture bundle 目錄結構（site_capture 寫入工作區，路徑形如 captures/<host>/<timestamp>/）：

site_capture → captures/<host>/<timestamp>/
  dom.html          serialized markup of the captured scope
  dom.json          element tree: boxes, attributes, selector candidates
  styles.json       computed styles of key nodes + CSS custom properties
  selectors.md      shortlist of stable selectors, with why each is stable
  network.jsonl     every captured xhr/fetch, one JSON object per line
  api.md            endpoints grouped by method+path, with request/response contracts
  screenshot.png    optional full-page render

暴露給模型的工具（README Usage 節）：

site_status                     → bridge state, pairing path, tabs
site_tabs {action:"list"}       → tabs; claim/use/release/open/close/focus
site_network {action:"start"}   → begin recording, then act on the page
site_capture {screenshot:true}  → write the bundle into the workspace
site_snapshot {limit:40}        → interactive elements with stable selectors
site_text {selector:"#cart"}    → visible text, capped, for verification
site_act {steps:"[...]"}        → click/fill/type/press/scroll/upload/wait/back/eval
site_pick {action:"wait"}       → the human clicks an element and adds a note
site_cursor {x,y,click:true}    → virtual cursor, real mouse event
site_shot {fullPage:true}       → screenshot to captures/shots/*.png
site_inject {js:"..."}          → run your script in the page to verify it

Popup 與工具是同一控制面：人在 popup 裏 attach tab、錄網、點選元素；agent 可通過 site_tabs {action:"claim"} 等完成同樣操作。bridge token 決定誰可以驅動瀏覽器；popup 裏的 pause 會從瀏覽器側切斷鏈路，僅該按鈕可恢復。

環境與依賴¶

• 已安裝 DeepSeek Harness 的 dsh CLI 與 profile（Desktop 或 Web）。
• Chrome 或 Edge 125+（擴展使用 chrome.debugger 與 MV3 service worker）。
• Node.js 22+（倉庫 tools/ 與測試；與 host 插件運行環境以你本機 DSH 爲準）。

安裝與啓用¶

插件以當前 DSH 進程權限運行；安裝前請閱讀倉庫源碼與 MIT 許可證，並理解擴展會 attach CDP（Chrome 會顯示 “started debugging this browser” 橫幅）。

1. Host 半（DSH 插件）¶

官方 README 給出的發佈包安裝命令：

dsh plugin --profile desktop add dsh-site-bridge

若從本地 checkout 安裝，可在倉庫根目錄執行（Windows）：

powershell -NoProfile -ExecutionPolicy Bypass -File scripts\install.ps1

腳本會把插件鏈入 profile、寫入 dsh.profile.bundles，並把擴展 stage 到 %USERPROFILE%\.dsh\site-bridge\extension。手動等價方式：

dsh plugin --profile desktop add <path-to-this-repo>

若 CLI 未自動寫入，需在 %USERPROFILE%\.dsh\profiles\desktop\package.json 的 dsh.profile.bundles 中加入 "dsh-site-bridge"，然後重啓 DSH。

2. Browser 半（MV3 擴展）¶

1. 打開 chrome://extensions，開啓 Developer mode，Load unpacked，選擇 %USERPROFILE%\.dsh\site-bridge\extension。
2. 打開擴展 popup，查看端口與 bridge.json 路徑（與 site_status 輸出一致）。
3. 點擊 Import bridge.json（俄文/中文界面文案見 _locales），選擇該文件，或粘貼 token（會自動保存）。
4. 打開要操作的頁面，點擊 Connect this tab。

斷開時按 Disconnect；CDP 橫幅會消失。

典型用法¶

爲某一頁面寫嵌入擴展時，README 給出的循環如下：

1. site_tabs → 綁定頁面 tab。
2. site_capture → 在工作區閱讀 selectors.md、styles.json、api.md 等。
3. 在你自己的倉庫裏寫 userscript / content script。
4. site_inject 注入腳本體 → 確認錨點找到、帶瀏覽器 cookie 的 BFF 調用通過。
5. 根據 capture 裏標記爲 fragile 的選擇器繼續迭代。

錄 BFF 時：先 site_network {action:"start"}，再在頁面上操作，最後 site_capture 把 network 寫入 bundle。

適用場景與注意¶

適合誰

• 需要在已登錄、真實 cookie 的 Chrome/Edge 標籤裏，把 DOM + 接口契約沉澱成文件，再讓 DSH agent 寫站點專用嵌入腳本，並在同一 tab live 驗證的人。

不適合當作什麼

• 通用「agent 上網瀏覽」插件；導航與點擊在這裏服務於 capture 與驗證，而非產品目標。

安全與權限

• 插件 host 半隨 DSH profile 加載；擴展半能調試你 attach 的標籤頁。bridge token 是訪問控制關鍵；popup pause 可立即拒絕一切遠端命令。
• 社區目錄頁與 GitHub 由維護者發佈；與 DeepSeek / 幻方無官方從屬關係，安裝來源以你信任的 registry 或自審源碼爲準。

結尾¶

dsh-site-bridge 把「考古式」DevTools 工作變成可版本化的 capture bundle，並用可信輸入與 site_inject 把「應該能用」收成「在這個 tab、這份 cookie 下確實能用」。若要查看簡介與分類，可打開 SkillHub 目錄頁；實現細節、架構圖與 Security 說明見 GitHub 倉庫。

• 目錄頁：https://www.skillhub.cn/plugins/kesha4/dsh-site-bridge
• GitHub：https://github.com/kesha4/dsh-site-bridge