1. Application
  2. Add Find in Page to your Desktop App

Application

Add Find in Page to your Desktop App

ToDesktop supports the native "find in page" feature you normally use in web browsers. You can either build this from scratch using ToDesktop-supported APIs or you can enable find in page through ToDesktop Builder window options.

Using ToDesktop's Pre-Built Find in Page

To use ToDesktop Builder to support finding text in a page, navigate to the Windows sidebar option and check the "Enable Find in Page option" under the Options heading.

ToDesktop Builder's find in page checkbox option

Once enabled, your app will have a fully functioning dropdown that allows users to Cmd+F or Edit>Find to search for text on page

Demonstration of find in page on the todesktop website

Implementing Find in Page from Scratch

ToDesktop provides the APIs you will need to implement the UI in your desktop app.

HTML

First up let's add some simple HTML (or JSX) for the input box (to get the text we want to look for) and buttons to start (& navigate) the search and to stop it. We also need to display the current match ordinal and the total number of matches.

        <div class="find-in-page">
  <input class="find-in-page-input" />
  <button class="find-in-page-find-forward">▶</button>
  <button class="find-in-page-find-backward">◀</button>
  <button class="find-in-page-stop">⏹️</button>
  <p>
    <span class="find-in-page-active-match-ordinal"> 0 </span>
    <span>/</span>
    <span class="find-in-page-matches"> 0 </span>
  </p>
</div>

Making it work

Now let's make our buttons actually work. We can use ToDesktop's findInPage.find() and findInPage.stop() methods to start and stop the search.

We also need to listen to the found-in-page event to update the current match ordinal and the total number of matches in the UI accordingly.

        import { webContents, platform } from '@todesktop/client-core';

if (platform.todesktop.isDesktopApp()) {
  // This block is only executed when running as a desktop app

  const findForwardBtn = document.querySelector('.find-in-page-find-forward');
  const findBackwardBtn = document.querySelector('.find-in-page-find-backward');
  const stopBtn = document.querySelector('.find-in-page-stop');
  const input = document.querySelector('.find-in-page-input');
  const activeMatchOrdinalSpan = document.querySelector('.find-in-page-active-match-ordinal');
  const matchesSpan = document.querySelector('.find-in-page-matches');

  findForwardBtn.addEventListener('click', () => {
    // Find forward
    const text = input.value;
    webContents.findInPage.find(text);
  });

  findBackwardBtn.addEventListener('click', () => {
    // Find forward from the current position
    const text = input.value;
    webContents.findInPage.find(text, { forward: false });
  });

  stopBtn.addEventListener('click', () => {
    // Stop the search
    webContents.stopFindInPage();
  });

  // listen to when find in page feature is being used
  // and update the UI accordingly
  webContents.on('found-in-page', (event, result) => {
    const { activeMatchOrdinal, matches } = result;
    activeMatchOrdinalSpan.innerText = activeMatchOrdinal;
    matchesSpan.innerText = matches;
  });
}
Previous <- Add Browser Controls to your Desktop App
Next Basic Offline Support ->