dsh-sidebar-mobile-browser

给 DeepSeek Harness（DSH） 右侧边栏加一个「移动端预览」标签页：按手机 / 平板尺寸打开网页， 在对话框里用 @ 或 /url 引用当前页面地址，一键复制 URL。

A mobile-device preview browser for the DSH right sidebar — device-sized frames, @-mention or /url insertion of the current page URL from the composer, one-click copy.

• 标签页类型：移动端预览（与内置 Browser 并列，不替换它）
• 设备尺寸：9 个常见预设 + 自定义宽高（180–2560），最近一次尺寸会记住
• 尺寸栏默认收起，点工具栏最右的滑块图标展开 / 收起，地址栏与预览区因此始终占满高度
• 页面超出可用高度时等比缩放，不改 iframe 视口宽高（看到的视口就是选定的设备宽度）
• @ 候选：本会话预览过的页面，最近一个标「当前页面地址」，选中即插入纯文本 URL
• /url 快捷指令：选中即把当前页面地址写进输入框（不用开 @ 菜单、不用鼠标）
• 工具栏 @ 按钮：同一件事的一键版，插到光标处，原有草稿不动
• 工具栏：回车即打开、⟳ 重载、复制图标（成功后短暂变对勾）、滑块图标切换尺寸栏
• 多标签页；切换标签不重载页面（keepMounted）；重启 DSH 后能恢复上次打开的页面

安装

从市场安装（推荐）：在 DSH 的插件市场搜索 dsh-sidebar-mobile-browser 后一键安装。

从本仓目录安装：把仓库目录当作 bundle 安装到当前 profile（DSH 插件管理器 / 插件市场工具的 “安装 bundle”入口，目标填本仓的绝对路径），装完按提示重载页面。

安装后右侧边栏「+」列表里会出现 移动端预览（手机图标）。

使用

1. 「+」→ 移动端预览，或直接点这个标签页类型。
2. 地址栏输入 example.com 或完整 URL，回车打开（无单独“打开”按钮）。
3. 点工具栏最右的滑块图标展开尺寸栏：选预设，或选「自定义」直接改宽高数字（回车 / 失焦生效）； 再点一次收起。默认收起，所以每次新开标签页都从「只有地址栏」的紧凑状态开始。
4. 工具栏：⟳ 重载、复制图标复制当前 URL、@ 把当前 URL 插入对话框、滑块图标切换尺寸栏； 尺寸栏展开时右侧还有 ⟲ 横竖屏互换。
5. 每个会话记住最近 5 个预览页，用 @ 可以回到其中任一页。
6. 对话框输入 @ → 选「当前页面地址」即可把 URL 作为纯文本插入； 或输入 /url 回车 —— 当前页面地址直接写进输入框，草稿里已有的内容会保留。 两者都只在该会话已经打开过预览页时出现。

截图

默认：尺寸栏收起	尺寸栏展开：预设 + 宽高 + 横竖屏

复制成功（图标短暂变对勾）	换成 iPad mini（768 × 1024）

截图不是手绘原型：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 任何内置模块。
• 插入文本走对话面板公开的 action face（captureInsertion + insertText），不依赖内部事件。

已知局限

• 载体是 iframe：目标站点返回 X-Frame-Options 或 CSP frame-ancestors 时会白屏 —— 改用内置 Browser 标签打开同一地址。
• 只改视口尺寸，不伪造移动端 User-Agent；依赖真机 UA 的站点预览会与手机不一致。
• 桌面端嵌入的 webview 标签页不参与尺寸模拟（本插件只作用于自己注册的标签页类型）。
• 跨域页面的地址栏不会跟随站内跳转（浏览器同源策略限制），此时用书签列表或重新输入地址。
• DSH 以 HTTPS 提供服务时，http:// 页面会被浏览器按混合内容拦截。

工作原理

扩展点	用途
ctx.sidebarRightTabs.register()	注册标签页类型 id = sidebar-mobile-browser、kind = mobile-browser
ctx.slots.register({ name: 'sidebar.right.pane.tab', key })	渲染标签页主体（尺寸栏 + iframe + 工具栏）
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()）
ctx.locale.register()	中英文案内置

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

开发

npm run checks   # node --check index.js && node --check client.js
npm test         # 无 DSH 环境下的冒烟测试：shim 掉 React/window，验证标签页类型、两个 slot、@ 源与 onPick、/url 指令与插入路径

• 无构建步骤、无第三方依赖：纯 ESM（Host 半边）+ 浏览器 classic script（client.js）。

• client.js 是浏览器端 classic script，window.__ModuleLoader__.load({ id, factory }) 导出 { inject, apply }； 直接 require('react') 即可，不依赖 DSH 内部客户端包（只通过 inject 声明顺序）。

• 改完 client.js 不会热替换已加载的模块：Desktop 需要退出并重新打开应用（正式版没有“重新加载页面”菜单项）， Web 端刷新页面即可。改了 package.json / cordis.patch.yml 需要重新安装 bundle。

• 版本：语义化版本，破坏性改动用 minor。

重新生成截图

test/preview.html 是一个仿右侧边栏的外壳：它注入一个极小的 React 兼容层与假的 DSH 上下文， 加载本仓的 client.js 并把标签页正文挂上去，因此截到的是真正会跑的那份代码与样式。 test/preview-content.html 是截图里被预览的示例页面。

# 1) 在仓库根起一个静态服务器（iframe 需要 http，file:// 会被插件的地址校验挡住）
python -m http.server 8766 --bind 127.0.0.1

# 2) 逐张开截图（Chrome 路径按本机调整）
CHROME="/c/Program Files/Google/Chrome/Application/chrome.exe"
BASE="http://127.0.0.1:8766/test/preview.html"
PAGE="http%3A%2F%2F127.0.0.1%3A8766%2Ftest%2Fpreview-content.html"
"$CHROME" --headless=new --hide-scrollbars --force-device-scale-factor=2 --window-size=560,1064 \
  --virtual-time-budget=9000 --screenshot=assets/screenshots/01-default.png "$BASE?url=$PAGE"
"$CHROME" --headless=new --hide-scrollbars --force-device-scale-factor=2 --window-size=560,1104 \
  --virtual-time-budget=9000 --screenshot=assets/screenshots/02-size.png "$BASE?open=1&url=$PAGE"
"$CHROME" --headless=new --hide-scrollbars --force-device-scale-factor=2 --window-size=560,1064 \
  --virtual-time-budget=9000 --screenshot=assets/screenshots/03-copied.png "$BASE?copy=1&url=$PAGE"
"$CHROME" --headless=new --hide-scrollbars --force-device-scale-factor=2 --window-size=560,1000 \
  --virtual-time-budget=9000 --screenshot=assets/screenshots/04-ipad.png "$BASE?size=ipad-mini&open=1&url=$PAGE"

URL 参数：url 要预览的页面、size 挂载前写进 localStorage 的预设 id、open=1 展开尺寸栏、 copy=1 点一次复制并冻结提示定时器（为了让「已复制」的对勾停在画面里）。

发布

1. npm publish --access public（package.json 已含 files / exports / dsh.bundle / dsh.client）。
2. 在 DSH 插件市场提交仓库与包名，审核后即可被搜索安装。
3. repository / homepage / bugs 已指向 limingyao-xx/dsh-sidebar-mobile-browser；改仓库名或换账号时记得同步。

License

MIT — 可自由使用、修改、分发（含闭源分发），唯一条件是在副本或实质性部分中保留版权声明与许可声明，即 LICENSE 中的 Copyright (c) 2026 10301139@qq.com。

MIT 不要求标注“哪些地方被改过”。若希望派生版本显式声明改动并获得专利授权，可换成 Apache-2.0（需附 NOTICE，并按 §4(b) 在修改过的文件上注明变更）。

作者

10301139@qq.com — 问题、需求与 PR 都欢迎。