In-Page Search for Electron Applications
In-page search can be used for browser window or webview (
BrowserWindow instance or
<webview> tag) in Electron app. You can use only one function for both of them
in renderer process.
// Pass current browser window's WebContents instanceconst searchInWindow = ;// Pass <webview> instanceconst searchInWebview = ;// Open inner window made with <webview> for in-page search// Search some text in the browser windowsearchInWindow;// Search some text in the webviewsearchInWebview;
This package works cross platform (macOS, Linux and Windows) with running CI on them (Travis CI for macOS and Linux, AppVeyor for Windows).
$ npm install --save electron-in-page-search
Two examples are added. So please see the code of working app there.
You can try them by cloning this repository.
$ git clone https://github.com/rhysd/electron-in-page-search.git $ cd electron-in-page-search $ npm install $ npm run build $ npm run example # Run browser window example $ cd example/webview/ $ npm start # Run webview example
You can also see the real world example.
To know APIs for this package, you can see TypeScript's type definitions.
When you want to use in-page search in app, call
searchInPage function to create an
;// orconst searchInPage = default;;const inPageSearch = ;document;
searchInPage, it creates a
<webview> element for search window.
<webview> can avoid that in-page search finds the text in the search window.
The webview has a class property
electron-in-page-search-window search-inactive by default.
openSearchWindow is called, the webview has a class property
while searching. So you can styling the search window webview by CSS like below:
You can control background color of search window by adding
white is specified). You can customize CSS further (please see below
Please see example's style for live example.
The search window contains 'back' button, 'forward' button, 'close' button and query form. Application users can input a query and click them (or press enter key in the form) to start the in-page search. Repeating to press enter key or clicking 'back'/'forward' buttons moves a focus on hit words. Finally the users can close a search window by clicking 'close' button to stop the search.
After a search window closing, the window's class property will be
The search window
<webview> is mounted to
document.body (or an element specified with
When you want to destroy
InPageSearch instance, please ensure to call
It will unmount the search window
<webview> from DOM.
If you want to see a DevTools of search window, please pass
searchInPage function as below.
It opens the DevTools with detach mode.
And this package also supports logging. When
variable is not empty, it outputs logs with
console.log in rendrer process.
;;;elem.src = '';document.getElementById'main'.appendChildelem;elem.on'dom-ready',;document.getElementById'search-button'.addEventListener'click',;
I'm testing this package with below OS
- macOS 10.12, OS X 10.11.6
- Ubuntu Linux 16.04 LTS
- Windows 8.1
Use my own CSS for search window
If you want to use a default search window but don't want to use a default CSS, you can use your own CSS file.
const path = ;;
Below is a list of
class property of each parts in search window.
Please write your CSS styles for below classes.
||Body of whole search window||
||'N/M' search count||
Use my own HTML for search window
If you want to control the whole search window, you can pass a path to your own HTML file.
const path = ;;
electron-in-page-search package injects
<script> tag to setup IPC messaging between
a search window
<webview> and a renderer process. It finds each elements and
sets listners through class names.
So you need to maintain above class names also in your own search window HTML.
Lifetime hooks for search
InPageSearch instance (returned from
It emits some events on some timings.
You can hook them to execute your code at some points.
Below is a list of hook names.
|hook name||description||listener args|
|'open'||On window opened||
|'start'||On in-page search started||
|'next'||On finding next match||
|'focus-input'||On focusing on search window||
|'found'||On some word matched to the search query||
Animation for search window
You can use CSS animation for animation of search window. If you don't want to animate a search window
when the webview is mounted, please use
search-firstpaint class name as below:
search-firstpaint class will be removed when opening search window at first.
Preload a search window
InPageSearch instance delays creating
<webview> element for a search window
openSearchWindow is called at first.
This is better in terms of memory efficiency because
<webview> forks a new process.
If you want to load a search window in advance, please set
to the second argument of