前言¶

在 DeepSeek Harness（DSH）里用右侧 Browser 看本地或远程页面时，常见问题不是「页面打不开」，而是「跟模型说清点的是哪一块」：只能口述 DOM 结构、类名或截图，输入框容易被大段 HTML 占满，对话记录也难以扫读。

社区插件 dsh-component-picker（维护者 Caho1，分类：客户端）面向 DSH 内置 Browser 标签页，提供接近 Claude 风格的元素点选：悬停高亮、单击拾取，把元素身份、React 组件、props、来源文件等信息与下一条消息一并交给模型；输入区用紧凑 pill 展示，Host 侧负责投递，会话里以可折叠行呈现上下文，而不是一整墙 markup。下文按安装、用法与限制说明，事实以 GitHub README 为准。

这是什么¶

dsh-component-picker 是面向 DSH 的纯插件包（无需单独构建步骤）。它同时声明 dsh.bundle.patch（cordis.patch.yml）与 dsh.client（Web 客户端半截），安装后 Host 行、Browser 工具、输入框 pill 与会话行会一起激活。仓库：https://github.com/Caho1/dsh-component-picker；社区目录页：https://www.skillhub.cn/plugins/Caho1/dsh-component-picker。SkillHub 为独立社区目录，与 DeepSeek / 幻方无官方从属关系。

许可协议为 MIT（见 README）；package.json 中版本号为 1.0.0。

核心功能¶

插件在 Browser 工具栏追加指针工具，在 guest 页面内通过 webview.executeJavaScript 运行自检脚本：悬停时橙色描边并显示 tag#id.class 标签，单击后采集 tag、id、class、属性、截断文本（≤200）、选择器（≤4 层）、部分计算样式与 outerHTML（≤1200），并尝试从 React fiber 读取组件名、owners、摘要 props 以及开发构建中的 _debugSource。

拾取成功后，输入框 composer 内出现 pill；悬停可看详情卡（含截图、元素、组件、props、来源、选择器、样式、HTML 等），可点击固定或 × 移除。发送消息时，Host 经 POST /component-picker/stage 将序列化上下文交给 agent.send；若无 Host 路由则回退为前缀拼进 prompt。会话侧通过 conversation.chat.node 渲染 context 与 turn-trigger，展示为指针行而非原始 XML。

README 用示意说明 composer 与 transcript 的展示形态：

composer:   ▸ <AuthGate />                         ← pill, inside the composer card
transcript: ▷ <AuthGate /> ▸                       ← collapsed context row
            (click) 元素 / 组件 / 来源 / 选择器 / Props / payload

上下文序列化为单行 XML 风格片段，例如：

<selected-element component=AuthGate tag=div class="flex size-14" owners="Page"
 text="…" selector="body > main > section > div" source=/src/auth/gate.tsx:12
 props='{"scenario":"coding-scenario"}' />

截图通过 webview.capturePage(crop) 生成，仅出现在详情卡，不会发给模型（README 明确说明）。

安装与启用¶

安装方式来自官方 README：用 Plugin Manager 的 install_bundle 指向本插件目录（绝对路径），或将目录复制进 profile 后按包名加入 bundle。

// agent tool call
plugin_manager({ action: 'install_bundle', target: '/absolute/path/to/dsh-component-picker' })

安装完成后 重新加载 Harness 窗口一次，以便客户端半截启动。插件与当前 DSH 进程同权限运行；安装前宜自行审阅 index.js、client.js 及 cordis.patch.yml 等源码，并确认 MIT 许可是否符合你的环境要求。

典型用法¶

1. 在右侧边栏 Browser 中打开目标页面。
2. 点击 Browser 工具栏右端的指针图标。
3. 悬停：光标下元素以橙色轮廓标出；指针仍为页面自身光标。
4. 单击拾取；Esc 或右键取消。已选元素轮廓保留约 4 秒。
5. 输入框上方出现 pill；悬停看详情，点击固定，× 丢弃。
6. 照常发送消息；元素上下文由 Host 投递，不污染正文文本。

Esc 或右键可随时退出点选模式；未发送前可用 pill 上的 × 去掉附加上下文。

适用场景与注意¶

适合谁：在 DSH 桌面端调试 Web 前端、向模型描述「页面上的具体组件/节点」的开发者；尤其页面为 React 应用且处于可读取 fiber 的环境时，组件名与 props 更有参考价值。

环境限制（README「Requirements and known gaps」）：

• 仅桌面端：标签页须为 Electron <webview>（[data-sidebar-browser-frame="webview"]）。Web profile 使用 iframe，无可脚本化句柄，插件无法按设计工作。
• 组件名来自 React fiber；_debugSource 多见于开发构建。无 sourcemap VLQ 解析，生产包可能只报告 bundle 位置或为空。
• 替换 turn-trigger 节点种类后，其他唤醒类行（定时、通知等）可能退回通用标题 + 可展开正文。
• 截图不进模型，仅本地详情卡展示。

README 的 Development 小节说明，在插件源码目录可执行 npm install 与 npm test（jsdom + React 19，覆盖 client 与 host 测试）；与 Harness 内 install_bundle 是不同使用场景。

结尾¶

dsh-component-picker 把「在 Browser 里指哪打哪」收成一条可随消息发送的紧凑上下文，减轻口述 DOM 与污染输入框的负担。安装以 README 中的 install_bundle 为准；使用前确认桌面 webview 环境与源码审阅。

• 目录页：https://www.skillhub.cn/plugins/Caho1/dsh-component-picker
• 源码与文档：https://github.com/Caho1/dsh-component-picker