Example of search in electron.js. Only mark.js as dependency

search.js

import Mark from 'mark.js';

document.addEventListener('DOMContentLoaded', () => {
  // only run in electron
  if (!window.navigator.userAgent.toLowerCase().includes('electron')) return

  let inputOpened = false;
  let markedElements = [];
  let currentMarkedElIndex = 0;
  let markedEl;
  let searchForm = `<form id="search-form" style="position: fixed; top: 0; right: 0; display: none; padding: 1rem;">
    <input type="text" placeholder="Search" id="search-dom" style="width: 24rem;"/>
  </form>`;
  document.body.insertAdjacentHTML('afterbegin', searchForm);

  searchForm = document.querySelector('#search-form');

  searchForm.addEventListener('submit', (e) => {
    e.preventDefault();
  });

  const searchInput = searchForm.querySelector('input');

  const content = document.querySelector('#wrapper');
  if (!content) return;

  const mark = new Mark(content);

  const doMark = () => {
    mark.unmark().mark(searchInput.value);
    markedElements = document.querySelectorAll('mark');
    currentMarkedElIndex = 0;
  };

  searchInput.addEventListener('input', doMark);

  document.addEventListener('keydown', (event) => {
    if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
      event.preventDefault();
      if (inputOpened) {
        inputOpened = false;
        mark.unmark();
        return searchForm.style.display = 'none';
      }

      inputOpened = true;
      searchForm.style.display = 'block';
      if (searchInput.value.length > 0) {
        doMark();
      }
      return searchInput.focus();
    }

    if (!inputOpened) return;

    if (event.key === 'Escape' || event.key === 'Esc') {
      inputOpened = false;
      mark.unmark();
      return searchForm.style.display = 'none';
    }

    if (event.key === 'Enter') {
      if (markedEl) {
        markedEl.style.backgroundColor = ''; // Remove background color
      }
      markedEl = markedElements[currentMarkedElIndex];
      if (!markedEl) return;

      markedEl.style.backgroundColor = '#ffb41e'; // Set background color to yellow
      markedEl.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });

      currentMarkedElIndex += 1;
      if (currentMarkedElIndex >= markedElements.length) {
        currentMarkedElIndex = 0;
      }
    }
  });
});