Introduction

DSH desktop applications (Electron shells) typically do not have the native find functionality available in browsers. When working with large amounts of conversation or configuration content, manually locating text is inefficient. The dsh-find-bar plugin intercepts global keyboard shortcuts and implements a find bar in the client, filling this gap.

Plugin Overview

This is a DSH web plugin maintained by secyborg (MIT license). It adds ⌘F / Ctrl+F in-page find functionality to the desktop app, supporting full-text highlighting, match counting, and navigation.

Core Capabilities

The plugin implements search and highlighting through the following mechanisms:

  • Global listening: Listens for ⌘F / Ctrl+F during the capture phase; when triggered, it opens a custom-drawn find bar and automatically fills in the currently selected text.
  • Text traversal: Uses TreeWalker to collect all text nodes on the page (including shadow roots) and builds DOM Ranges for matching.
  • Highlight rendering: Uses the CSS Custom Highlight API (CSS.highlights + ::highlight()) to render matched text. This approach only modifies visual styles and does not touch the DOM structure, so it has zero conflicts with React rendering.
  • Compatibility fallback: In environments that do not support the CSS Custom Highlight API, it automatically falls back to window.find().

The search scope covers all text rendered on the current page, including conversation content, the sidebar, and settings pages.

Typical Usage

After installing and restarting the application, use the following keyboard shortcuts:

  1. Open the find bar: Press ⌘F / Ctrl+F.
  2. Enter a search: A search runs automatically as you type (debounced and follows streaming content updates), and the count is displayed as current/total.
  3. Navigate matches:
    • Enter / Shift+Enter: Go to the next / previous match.
    • ⌘G / F3 (+Shift): Go to the next / previous match.
  4. Exit: Press Esc to close the find bar and clear the highlights.

Installation and Enablement

Package the project in its directory, then install it with the DSH CLI:

npm pack
dsh plugin --profile desktop add ./dsh-find-bar-0.1.0.tgz

After installation, restart the application. The plugin manifest is loaded at startup, and the plugin takes effect after restarting.

Limitations and Notes

  • DOM content only: The plugin only searches content already rendered in the DOM. If a session or list is collapsed in the UI, it must be expanded first to be searched.
  • Match limit: The maximum number of matched results is 5000; additional matches are indicated with a + sign.
  • Case sensitivity: Search is case-insensitive. There is currently no toggle for case-sensitive search.

Conclusion

dsh-find-bar implements lightweight highlighting and search using the CSS Custom Highlight API, making it suitable for scenarios that require quickly locating text in the desktop app. For more details and source code, see the GitHub repository.