在 DeepSeek Harness (DSH) 的使用場景中，調試智能體驅動的瀏覽器行爲或遠程監控 headless 進程是常見需求。直接在 Web 界面嵌入外部瀏覽器通常涉及權限與渲染複雜性。dsh-sidebar-cdp-browser 作爲一個 DSH 側邊欄插件，通過 CDP 實時展示外部 Chromium，並提供受控的交互能力。
該插件由 chendefine 開發，核心作用是在 DSH Web GUI 的側邊欄中渲染外部 Chromium 的 JPEG 像素流，並將鍵盤和鼠標操作通過嚴格白名單協議回傳給主機進程。
功能特性¶
CDP 實時視圖¶
插件在側邊欄註冊了一個名爲 dsh-sidebar-cdp-browser:live 的標籤頁。它使用 Page.startScreencast 獲取外部 Chromium 的 JPEG 幀並繪製到 Canvas 上，支持按設備像素比縮放和 contain-fit 渲染。
目標管理¶
頂部工具欄列出當前所有頁面目標。你可以切換頁面、創建新頁面或關閉頁面。目標列表通過 Target.getTargets 快照每秒刷新一次。
交互控制¶
插件支持鼠標點擊、拖拽、滾輪以及鍵盤輸入（IME）。爲了安全，所有交互指令通過嚴格的白名單協議發送，不支持任意的 CDP 穿透。交互模式需要同時開啓“交互輸入”主開關和“鍵盤鼠標控制”複選框。
安全性¶
交互控制採用了兩級門控（交互輸入主開關 + 頭部複選框）和 30 秒 TTL 票據系統。外部瀏覽器端只持有 CDP 連接，無法知道 CDP 地址，也無法執行任意 CDP 命令。
設置面板¶
在 DSH Web 設置頁面的“側邊欄內容 -> CDP實時視圖”卡片中，可以配置 CDP 地址、交互輸入開關，以及幀捕獲參數（質量、間隔、分辨率）。
安裝¶
該插件依賴 dsh-better-sidebar >= 0.17.1 才能顯示側邊欄標籤頁。
dsh plugin --profile web add dsh-better-sidebar dsh-sidebar-cdp-browser
安裝後需要重啓 dsh web 以加載插件。
使用流程¶
1. 啓動外部 Chromium¶
在主機上啓動一個帶有調試端口的 Chromium 實例。
chromium --remote-debugging-address=127.0.0.1 --remote-debugging-port=9222
2. 配置 CDP 地址¶
打開 DSH Web GUI 的設置頁面，進入“側邊欄內容 -> CDP實時視圖”卡片，點擊齒輪圖標。在「CDP 地址」欄填寫地址（默認爲 127.0.0.1:9222）。保存後，插件會自動連接。
3. 開始交互¶
在側邊欄的 CDP 實時視圖標籤頁中，先點擊畫布以獲取焦點。確保在設置中開啓了“交互輸入”主開關，並在視圖頂部的複選框中勾選“鍵盤鼠標控制”。此時即可使用鼠標點擊、滾輪或鍵盤輸入。
注意事項¶
- 依賴要求：必須安裝
dsh-better-sidebar>= 0.17.1，否則側邊欄標籤頁不會出現。 - 安全性：交互模式必須同時開啓設置中的“交互輸入”主開關和頂部的“鍵盤鼠標控制”複選框。
- 功能限制：目前不支持複製粘貼（Ctrl+C），IME 輸入僅在組合完成後提交。
- 持久化：CDP 地址保存在
dsh-better-sidebar的首選項文檔中。
