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