dsh-sidebar-element-picker
DSH web bundle：位于右侧边栏的元素选择器。在边栏标签页中浏览任何网站——无需单独的浏览器窗口——点击一个元素，并在对话中引用它。
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add github:Gnatnaituy/dsh-sidebar-browser#c996baf4aa6d8656baf729c6fe098e3cfdbc0427
Sidebar Element Picker 以 dsh-sidebar-element-picker 发布，当前版本为 0.1.0。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
DSH（DeepSeek Harness）动态插件：把元素拾取放进右侧栏。在侧边栏里直接浏览网页（多标签页、可缩放、可切手机/平板视口），点「拾取」再点页面上的任意元素，元素就以 [标签][DOMn] 引用式占位符进入输入框，完整信息由模型按需通过 read_picked_element 工具读取。
不再需要一个额外的 Chrome 窗口，页面也不会一转身就丢。
在侧边栏浏览器里拾取元素：目标元素被高亮并显示 CSS 选择器 同一个页面切到 iPhone 15 Pro 视口后的重排效果
┌─ 右侧栏 ───────────────────────────────────────────┐
│ 高县文旅 × │ localhost:3000/admin × │ ＋ 已拾取 3 │
├────────────────────────────────────────────────────┤
│ ← → ⟳ [ localhost:3000/admin ] ＋ ✛拾取 │
│ − 100% + ⤢ [ 响应式 ▾ ] ↻ 393×852 │
├────────────────────────────────────────────────────┤
│ ← 目标站点渲染在同一个代理源里 │
│ 悬浮高亮 → 点击 → 变成 [标签][DOM1] │
└────────────────────────────────────────────────────┘
要在页面里拾取元素，必须能读到那个页面的 DOM；而浏览器不允许跨源读取 iframe。所以本插件在 loopback 上为每个「对话 + 目标源」开一个反向代理端口，把这个端口当成目标站点的「同源替身」：
contentDocument、悬浮高亮、点击拦截、快照元素；window.top 导航走 GUI（外层 iframe 也不给 allow-top-navigation）；/admin/x?y=1 上游就是 /admin/x?y=1，用 location.origin 拼绝对地址的应用照常工作；Upgrade 连接原样隧道转发，所以 Vite / Next 的热更新 WebSocket 也能用；X-Frame-Options / Content-Security-Policy（否则被测页面拒绝被框）、去掉 Set-Cookie 的 Domain、把指向目标源的绝对 Location 改回本端口——只改这些，响应体一律流式透传。同一个源上的多个标签页共用一个端口（像同一个浏览器 profile），不同源各自一个端口，cookie 与 localStorage 不会在站点之间串。
＋ 新建、× 或中键关闭，标签标题跟随页面标题；工具栏的 ＋ 把当前地址新开一个标签页；页面里的 target="_blank"、window.open、外链点击都会变成新标签页而不是逃出代理src 按宿主持有的当前地址重算，等于刷新）；− / 100% / +、适应宽度，25%–300%。用的是「按 宽度/缩放 布局再整体 transform 缩放」，所以页面的媒体查询按缩放后的宽度生效，和真实浏览器缩放一致，而不是把页面拉伸模糊。@media (max-width: …) 会真的命中。browser 页签类型（ctx.sidebarRightTabs + sidebar.right.pane.tab），与文件/终端/Git 等页签并列，无第三方依赖；页签标题显示当前页面标题。input/change，所以 React/Vue 的受控表单也认）。工具栏的钥匙按钮可手动保存（适合 SPA 里不是 <form> 的登录），启动页里可以随时点 × 忘掉某个站点。localStorage / IndexedDB 里的登录态不会因为端口变了而失效——这通常才是「每次都要重新登录」的真正原因。[标签][DOMn] 引用式占位符：点击元素后立刻插入输入框（页面内 toast + 面板计数确认）；重复送达的同一次拾取只插入一次。localhost:3000/admin 这类不带协议的写法会被正确当成主机与端口，而不是被误判成 localhost 协议（mailto: / file: 之类才会被拒绝）。#id，否则向上最多 6 层，用 :nth-of-type（按同标签兄弟计算，修掉了旧版用 :nth-child 在混合标签父节点下算错的 bug）。` 键，Esc 退出；退出后页面立刻恢复可交互。已经装到 web profile 上。重新安装或换机器：
node tools/install-into-profile.mjs --dry-run # 先看要改什么
node tools/install-into-profile.mjs # 软链 + 依赖 + bundle 挂载
脚本做三件事（幂等）：
$DSH_HOME/profiles/web/node_modules/dsh-sidebar-element-picker；package.json 里登记依赖（link: 指向本目录），并加入 dsh.profile.bundles；disabled: true（两者注册同名的 read_picked_element，不能并存）。为什么用 bundle 挂载而不是往 cordis.patch.yml 手写一行：手写行也能加载，但 loader 把 profile 自己的 patch 当作增量应用，同一个 insert 行被重复应用时会留下陈旧条目并报 duplicate loader entry id；bundle 层每次重载都是从零重建的，所以是稳定的那种。代价是 bundle 属于启动期配置：
# 装完 / 改完 host 半（lib/index.js）后：重启 DSH Desktop
# 只改 client 半（lib/client.js、resources/*）时：硬刷新浏览器即可
为什么不用 dsh plugin add：那会跑 pnpm install，把这个 profile 里所有依赖（含 GitHub 与 .generations 链接包）重新解析一遍，需要联网且会重写 profile。
node tools/uninstall-from-profile.mjs
localhost:3000/admin 这种不带协议的写法也认）。首次使用（没有任何历史）时，面板会显示一个启动页：输入网址或点「最近访问」。＋ 开新标签页；× 或中键关闭；点标签切换（不重载）。− / 100% / + / ⤢ 缩放；用设备下拉切到手机/平板视口，↻ 横竖屏。`），鼠标划过元素出现高亮框与选择器提示。[提交订单][DOM1]，面板头部计数 +1。read_picked_element。` 退出拾取模式完成登录，再按 ` 恢复。输入框插入由 conversation.input.left 槽位负责，即使右侧栏被折叠/切走也能插入（拾取事件走模块内总线，面板只负责发）。
dsh-sidebar-element-picker:credentials）里，按目标源一一对应；不会发给 host 插件、不会进入对话、不会出现在拾取结果里（密码输入框的 value 在元素记录中被显式抹掉）。不需要 DSH、不需要浏览器：
npm test # 代理转发 / 能力 cookie / WS 隧道 / host 路由与工具 / client 注册与渲染
需要本机 Chromium。装一次驱动即可（或指向本机 Chrome）：
npm i -D playwright-core
npm run test:browser # 真浏览器里跑完整流程
# 或：DSH_TEST_CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" npm run test:browser
三个需要目标站点的套件默认起一个自带的 fixture 站点（resources/test/fixture.mjs：绝对路径资源、带 Domain 的 cookie、X-Frame-Options: DENY + frame-ancestors 'none'、同源绝对重定向、一个媒体查询探针），所以 npm test 不依赖你本机跑着什么。想打真实站点就把地址作为第一个参数传进去：
node resources/test/proxy-smoke.mjs http://localhost:3000
node resources/test/host-smoke.mjs http://localhost:3000
node resources/test/browser-e2e.mjs http://localhost:3000
| 套件 | 覆盖 |
|---|---|
proxy-smoke.mjs | 外壳页/CSS/JS、能力 cookie 门禁、目标文档与子资源代理、frame-ancestors 摘除、pick 接收 |
tunnel-smoke.mjs | 裸 socket 跑 Upgrade：101 握手、Host 改写、Sec-WebSocket-Accept、双向字节 |
host-smoke.mjs | /invoke 全部方法；标签增删改选；同源共端口、异源分端口、关闭后释放端口；nav 只在显式导航时递增；快照还原；read_picked_element；系统提示清单 |
client-smoke.mjs | 包工厂装载、页签与槽位注册、按钮「空则开、否则只唤出」、空浏览器自己打开上次地址、首次使用才出现启动页、标签条渲染、切标签不重载、拾取后重渲染不重载、缩放/设备随 URL 还原、跨窗口消息拒绝、拾取去重并写入草稿 |
browser-e2e.mjs | 上面全部在一个真 Chromium 里跑通：代理渲染 → 手机/平板视口（含页面自己观察到的 matchMedia）→ 横竖屏 → 缩放（布局宽度真的变了）→ 同源/异源导航分流 → 新标签页交接 → 在手机视口下高亮与拾取 → 保存的账号密码自动填入 → 提交时向上报告新账号且不阻断应用自身的 submit → 密码框在元素记录中被抹除 |
npm run preview:start 会把面板启动页渲染成一张图（resources/test/start-page.png），方便改样式时直接看效果，不用开 DSH。
npm run screenshots 生成上架/详情页用的截图（真代理 + 真外壳 + 真浏览器），并更新 screenshots.json。
lib/
index.js host 半：每个对话的浏览器状态 / 代理端口 / 上下文 / 工具 / 系统提示 / /invoke
client.js client 半：conversation.input.left 按钮 + 原生 browser 页签（标签条 + 每标签一个 iframe）
resources/
proxy.js 每个（对话, 目标源）一个 loopback 反向代理（含 Upgrade 隧道）
chrome.html/.css/.js 浏览器外壳（工具栏 + 缩放 + 设备预览 + 同源拾取逻辑），由代理在自身源上提供
test/fixture.mjs 测试用的目标站点（故意带各种难缠的响应头 + 一个登录页）
test/start-page-preview.mjs 把启动页渲染成图片，便于看样式
tools/
install-into-profile.mjs 幂等安装（bundle 挂载）
uninstall-from-profile.mjs
resources/test/ 五个套件
docs/research/ 动手前对 DSH 侧边栏/宿主/旧插件的逐项考证（含代码行号）
backup/ 安装前的 profile 配置备份
DSH client（lib/client.js）
├ conversation.input.left 十字按钮 ── 空则开页并唤出面板；订阅总线，把拾取写进草稿
└ sidebar.right.pane.tab(key=…:browser) 面板
├ 标签条：来自 host 的权威状态（标题/激活/关闭/新建）
└ 每个标签一个 iframe（全部保持挂载，地址在导航时钉住）
└ http://<gui-host>:<port>/__dsh_picker__/chrome.html?p=…&z=…&d=…&l=…
[代理源] 外壳：地址栏 / 前进后退 / 拾取 / 缩放 / 设备视口 / 高亮 / 元素快照
└ <iframe id="site" src="/…"> 被测页面（与外壳同源）
→ POST /__dsh_picker__/pick
DSH host（lib/index.js）
├ 每个对话一份浏览器状态：{ tabs[], activeId }（面板可被卸载，状态不会丢）
├ 每个（对话, 目标源）一个 ProxySession（127.0.0.1:随机端口）
│ GET /* 反向代理（透传 body，仅改框架相关头）
│ POST /__dsh_picker__/pick 接收拾取 → 记入该对话上下文
│ upgrade /* 原样隧道转发（HMR）
├ POST /dsh-sidebar-element-picker/invoke 面板/按钮 → host
├ tools.register: read_picked_element
└ systemPrompt.context: 一元素一行的紧凑清单
HttpOnly），但可以伪造一次「拾取」，把内容推进对话上下文——和旧版（任何页面都能 console.log('__DSH_WE__:'+…)）是同一类风险。只浏览你自己信任的页面。devicePixelRatio、pointer: coarse、hover: none、User-Agent、触摸事件仍是桌面浏览器的。它不是完整的设备仿真。localhost / 127.0.0.1 上（DSH Desktop 默认如此）；从别的机器打开 GUI 时，面板拿不到本机端口。X-Frame-Options。这正是原本无法被框的站点现在能被框的原因，也意味着页面的安全策略在侧边栏里不生效。browser 页签按 kind 唯一（DSH 页签模型如此），所以浏览器面板同时只有一个，标签页在面板内部。lib/client.js）改完硬刷新即可（DSH 每 500ms 轮询 client bundle，自动换 revision）；resources/（外壳页面）改完在下一个新开的代理端口生效（新标签页或换源即可）；host 半（lib/index.js）改动需要重启 DSH Desktop。想让它在 dsh-market 里出现，投稿目标是精选列表
awesome-dsh-plugin：往 data/plugins/ 加一个
YAML 文件，市场和目录站会在一天内自动收录。完整步骤、可直接提交的条目内容、以及会被逐条核对的描述写作说明见
PUBLISHING.md，条目文件在 submission/。
MIT