DeepSeek Harness 移動端預覽側邊欄

前言¶

在 DeepSeek Harness（DSH）右側邊欄裏打開一個可調整尺寸的移動端預覽窗口，把當前頁面地址一鍵插入對話框，是智能體開發時檢查響應式佈局、快速分享鏈接的常見需求。已有做法是手動打開手機瀏覽器標籤頁，或者用 DevTools 的設備模擬，但需要在瀏覽器與 DSH 之間來回切換。DSH 的理念是「一切皆插件」，社區插件目錄提供了統一的安裝與檢索入口。

是什麼¶

limingyao-xx/dsh-sidebar-mobile-browser 是一個爲 DSH 右側邊欄增加「移動端預覽」標籤頁的插件。標籤頁與內置 Browser 並列，不替換它。它提供常見設備尺寸預設、自定義寬高，支持通過 @ 或 /url 把當前頁面地址插入對話框，並在桌面端使用 Electron guest webview 承載預覽內容，Web GUI 自動退回 iframe。作者 10301139@qq.com，許可證 MIT。

安裝與啓用¶

從市場安裝（推薦）：在 DSH 的插件市場搜索 dsh-sidebar-mobile-browser 後一鍵安裝。

從本倉目錄安裝：把倉庫目錄當作 bundle 安裝到當前 profile（DSH 插件管理器 / 插件市場工具的「安裝 bundle」入口，目標填本倉的絕對路徑），裝完按提示重載頁面。

安裝後右側邊欄「+」列表裏會出現「移動端預覽」（手機圖標）。

典型用法¶

在右側邊欄「+」→「移動端預覽」，或直接點擊該標籤頁類型。
地址欄輸入 example.com 或完整 URL，回車打開（無單獨「打開」按鈕）。
點工具欄最右的滑塊圖標展開尺寸欄：選預設，或選「自定義」直接改寬高數字（回車 / 失焦生效）；再點一次收起。默認收起，所以每次新開標籤頁都從「只有地址欄」的緊湊狀態開始。
工具欄第一排：回車打開、⟳ 重載、@ 插入當前 URL、相機截圖、滑塊切換尺寸欄。第二排（滑塊展開後）：預設 + 寬高 + ⟲ 橫豎屏互換，尾巴上是 ⭐ 設爲默認主頁和房屋圖標回到默認主頁。
點 ⭐ 之後，新開的空白標籤頁會直接打開這個默認主頁；空狀態裏也有「打開默認主頁」按鈕。再點一次取消默認主頁。
點相機圖標截圖：桌面端直接 capturePage() 截設備框（無需選擇器、逐像素準確），結果先複製到剪貼板，剪貼板不支持圖片時改爲下載 mobile-preview-<host>-<時間戳>.png。
每個會話記住最近 5 個預覽頁，用 @ 可以回到其中任一頁。
對話框輸入 @ → 選「當前頁面地址」即可把 URL 作爲純文本插入；或輸入 /url 回車 —— 當前頁面地址直接寫進輸入框，草稿裏已有的內容會保留。兩者都只在該會話已經打開過預覽頁時出現。

設備尺寸與適配¶

設備尺寸：9 個常見預設 + 自定義寬高（180–2560），最近一次尺寸會記住。
頁面超出可用高度時等比縮放，不改網頁視口寬高（看到的視口就是選定的設備寬度）。
尺寸欄默認收起，點工具欄最右的滑塊圖標展開 / 收起，地址欄與預覽區因此始終佔滿高度。
桌面端用 Electron guest webview 承載：地址欄隨站內跳轉實時更新、按設備檔位模擬 UA、截圖直接 capturePage()；Web GUI 自動退回 iframe（其餘功能不變）。

截圖與兼容性¶

截圖不是手繪原型：test/preview.html 載入真實的 client.js 在仿側邊欄的外殼裏渲染，再由無頭 Chrome 截圖（生成方法見「開發」）。同一份清單也放在倉庫根的 screenshots.json，供插件市場讀取。
需要 DSH 0.2.x（在 0.2.1-rc.2 上驗證），Web 與 Desktop 兩種 profile 都可用。
只用到公開擴展點：ctx.sidebarRightTabs / ctx.slots / ctx.inputTriggers / ctx.commandUi / ctx.sessions / ctx.locale，不 patch 任何內置模塊。
桌面端另外用外殼暴露的 window.dshDesktop.browser（acquire / release，與內置 Browser 標籤同一通道）申請 guest webview；拿不到通道（Web GUI、或 acquire 被拒）時自動退回 iframe，功能不受影響、只是地址欄不跟隨。
插入文本走對話面板公開的 action face（captureInsertion + insertText），不依賴內部事件。

已知侷限¶

Web GUI 只能走 iframe：地址欄停留在進入時的地址（同源策略讀不到跳轉），且目標站點返回 X-Frame-Options / CSP frame-ancestors 時會白屏 —— 這種頁面用內置 Browser 標籤打開。
桌面端的 guest 分區由主進程創建，按工作區分片（dsh-sidebar-browser-*），登錄態與內置 Browser 標籤不共享。
guest 若 5 秒內沒掛上 / 沒開始導航，會自動退回 iframe（面板不會一直空着）；加載失敗會顯示錯誤碼。
UA 按尺寸檔位模擬（手機 / 平板 / 桌面三檔，改檔會重載一次）；不做逐機型的完整指紋模擬。
桌面端嵌入的原生 Browser 標籤頁不參與尺寸模擬（本插件只作用於自己註冊的標籤頁類型）。
Web GUI 的截圖仍走屏幕捕獲（getDisplayMedia）再按設備框裁剪，每次都要在系統選擇器裏選「當前標籤頁」；環境拒絕該能力時會提示改用系統截圖（Win+Shift+S）。
DSH 以 HTTPS 提供服務時，http:// 頁面會被瀏覽器按混合內容攔截。

工作原理¶

擴展點	用途
`ctx.sidebarRightTabs.register()`	註冊標籤頁類型 `id = sidebar-mobile-browser`、`kind = mobile-browser`
`ctx.slots.register({ name: 'sidebar.right.pane.tab', key })`	渲染標籤頁主體（尺寸欄 + 頁面載體 + 工具欄）
`ctx.slots.register({ name: 'sidebar.right.pane.tab.title', key })`	標籤頁標題跟隨當前地址的 host
`ctx.inputTriggers.registerSource({ trigger: '@', name: 'webpage' })`	對話框 `@` 候選（按會話記錄預覽過的 URL）
`ctx.commandUi.register({ name: 'url', ui: { kind: 'action' } })`	`/url` 快捷指令，把當前頁面地址寫進輸入框
`ctx.sessions.scope(id)` → `conversation.input.shell(id).actions`	插入文本用的公開 action face（先 `captureInsertion()` 取光標 span，再 `insertText()`）
`window.dshDesktop.browser.acquire()` / `release()`	桌面端申請 guest webview（與內置 Browser 同一通道），拿不到就用 iframe
`will-attach-webview` 的放行條件	元素掛進 DOM 那一刻必須已帶 `name=<lease>`、`partition=<批准的>`、`src=about:blank#<lease>`；順序或時機不對會被 `preventDefault`（就是「一片空白」的成因），所以元素在 ref 回調裏手工創建
`ctx.locale.register()`	中英文案內置

index.js 只是空的 Host 半邊（bundle 行需要它）；全部能力在 client.js。

生態背景¶

目錄與源碼¶

目錄頁：https://www.skillhub.cn/plugins/limingyao-xx/dsh-sidebar-mobile-browser
GitHub：https://github.com/limingyao-xx/dsh-sidebar-mobile-browser