Electronでページ内検索を行う #JavaScript

Electronのページ内検索はcontents.findInpageを使う必要がありますが、毎度同じような処理を書くのもなんだかなという感じがしたのでモジュールにして公開しました。

使い方は👇の通り。

browser.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      margin: 0;
    }
    webview {
      height: 100%;
    }
    .search-box {
      display: none;
    }
    .state-visible {
      display: block;
    }
  </style>
  <link rel="stylesheet" href="./search.css">
</head>
<body>
<div class="search-box">
  <input type="text" class="search-input">
  <span class="search-count"></span>
</div>
<webview src="https://github.com/trending"></webview>
<script>
  const {ipcRenderer} = require('electron');

  const ElectronSearchText = require('electron-search-text');
  const searcher = new ElectronSearchText({
    target: 'webview',
    input: '.search-input',
    count: '.search-count',
    box: '.search-box',
    visibleClass: '.state-visible'
  });

  ipcRenderer.on('toggleSearch', function() {
    searcher.emit('toggle');
  });
</script>
</body>
</html>

require('electron-search-text')してnewするときに検索対象にするwebviewと、検索窓用のUIのセレクタを渡します。

newしたインスタンスで.emit('toggle')するとvisibleClassに指定したクラスをboxに対してトグルします。

あとはmain.jsにCmd+Fでトグルできるようにショートカットキーを設定する。

main.js

const {app, BrowserWindow, Menu} = require('electron');

app.on('ready', () => {
  const browserWindow = new BrowserWindow();
browserWindow.loadURL(`file://${__dirname}/browser.html`);

const menuTemplate = [
  {
    submenu: [
      {
        label: 'Quit',
        accelerator: 'Cmd+Q',
        click() {
          app.quit();
        }
      }
    ]
  }, {
    label: 'Edit',
    submenu: [
      {
        label: 'Search in File',
        accelerator: 'CmdOrCtrl+F',
        click() {
          browserWindow.webContents.send('toggleSearch')
        }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);
});

おしまい。