前言¶
DSH 桌面端应用(Electron 壳)通常不具备浏览器原生的查找功能。在处理大量对话或配置内容时,手动定位文本效率较低。dsh-find-bar 插件通过拦截全局快捷键,在客户端实现了一套查找栏,填补了这一空白。
插件概览¶
这是一个 DSH web 插件,由 secyborg 维护(MIT 许可证)。它为桌面 App 添加了 ⌘F / Ctrl+F 页内查找功能,支持全文高亮、匹配计数与跳转。
核心能力¶
插件通过以下机制实现查找与高亮:
- 全局监听:在 capture 阶段监听 ⌘F / Ctrl+F,触发时弹出自绘查找条,自动填入当前选中文本。
- 文本遍历:使用 TreeWalker 收集页面所有文本节点(含 shadow root),构建 DOM Range 进行匹配。
- 高亮渲染:使用 CSS Custom Highlight API(
CSS.highlights+::highlight())绘制匹配文本。这种方式仅修改视觉样式,不触碰 DOM 结构,因此与 React 渲染零冲突。 - 兼容回退:在不支持 CSS Custom Highlight API 的环境中,自动退回
window.find()。
搜索范围覆盖当前页面渲染的全部文本,包括对话内容、侧边栏和设置页。
典型用法¶
安装并重启应用后,使用以下快捷键:
- 打开查找条:按下 ⌘F / Ctrl+F。
- 输入搜索:输入内容时自动搜索(防抖跟随内容流式更新),计数显示
当前/总数。 - 跳转匹配:
- Enter / Shift+Enter:跳转到下一个 / 上一个匹配。
- ⌘G / F3(+Shift):跳转到下一个 / 上一个匹配。
- 退出:按 Esc 关闭查找条并清除高亮。
安装与启用¶
在项目目录下执行打包,然后通过 DSH CLI 安装:
npm pack
dsh plugin --profile desktop add ./dsh-find-bar-0.1.0.tgz
安装完成后,需要重启应用。插件清单在启动时装载,重启后生效。
限制与注意事项¶
- 仅限 DOM 内容:插件只搜索已渲染在 DOM 里的内容。如果会话或列表被界面折叠,需先展开才能搜到。
- 匹配上限:匹配结果上限为 5000 条,超过部分显示
+号。 - 大小写:搜索不区分大小写,目前暂无区分大小写的开关。
结语¶
dsh-find-bar 通过 CSS Custom Highlight API 实现了轻量级的高亮查找,适合需要在桌面端快速定位文本的场景。更多详情与源码可参考 GitHub 仓库。