前言¶
DeepSeek Harness (DSH) Web 客戶端在調試智能體對網頁的操作時，通常需要手動複製選擇器或截圖。dsh-plugin-browser 插件在 DSH 右側欄增加了一個基於 Playwright 的瀏覽器面板，提供實時畫面、元素選擇以及模型可調用的工具，減少手動操作。
插件簡介¶
- 名稱：
dsh-plugin-browser - 維護者：TEGONG00
- 分類：客戶端
- 許可證：MIT
核心功能¶
1. 右側欄瀏覽器面板¶
在 DSH 側欄底部點擊“瀏覽器”按鈕打開面板，顯示 Chromium 的實時畫面。支持導航、點擊、輸入，鼠標移動、點擊、雙擊、滾輪和鍵盤操作會轉發給被控頁面。畫面流基於 CDP screencast 推送，僅在面板可見時推送。
2. 元素選擇器¶
開啓“選擇元素”開關後，點擊頁面元素，會生成一個 Lexical chip。該 chip 包含元素的截圖、選擇器、標籤、文本和 outerHTML。這些引用會以“元素1、元素2……”的格式插入輸入框末尾，模型可據此精確定位要改的元素。
3. 模型工具¶
插件註冊了一組瀏覽器操作工具，模型可自主調用：
- browser_navigate：導航到指定 URL
- browser_screenshot：截取當前頁面，結果以圖片附件形式在聊天中渲染
- browser_snapshot：獲取交互元素大綱（如 [12] <button> "Submit"）
- browser_click：按索引點擊元素
- browser_type：在元素中輸入文本
安裝與啓用¶
安裝前需確保環境滿足要求：dsh >= 0.1.5-rc.x，Node.js >= 20。
安裝插件：
npx @deepseek-ai/dsh plugin --profile web add github:TEGONG00/dsh-plugin-browser
安裝 Playwright Chromium：
npx playwright install chromium
典型用法¶
- 打開面板：點擊側欄底部的“瀏覽器”按鈕打開面板。
- 導航頁面：在 URL 欄輸入地址並導航。
- 交互元素：開啓“選擇元素”，點擊頁面元素，元素引用作爲 chip 插入輸入框。
- 模型操作：模型可使用
browser_navigate或browser_screenshot等工具自主操作頁面。
適用場景與注意事項¶
該插件適合需要在 DSH 環境中直接調試網頁交互、讓模型自主驗收代碼修改的場景。
需注意以下限制：
- 選擇器範圍：選擇器僅覆蓋主 frame，不穿透 shadow DOM 或 iframe。
- 插入位置：元素引用 chip 插入在輸入框末尾。
- 推送策略：畫面流僅在面板可見時推送。
- 安全性：自有路由未接入會話認證，依賴 Origin 同源校驗。
- 事件依賴：“選擇元素”依賴真實鼠標事件。
總結¶
該插件爲 DSH Web 客戶端補齊了瀏覽器可視化的能力，通過 Playwright 驅動和 Lexical 芯片機制，讓模型能夠更自然地與網頁交互。
