https://github.com/TheoXiong/electron-find

:mag: Find all matches for the text in the web page
https://github.com/TheoXiong/electron-find

electron find findinpage search

Last synced: 7 days ago
JSON representation

:mag: Find all matches for the text in the web page

• Host: GitHub
• URL: https://github.com/TheoXiong/electron-find
• Owner: TheoXiong
• Created: 2019-01-09T12:59:25.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-06-26T11:16:03.000Z (over 2 years ago)
• Last Synced: 2024-10-10T22:53:24.431Z (about 1 month ago)
• Topics: electron, find, findinpage, search
• Language: JavaScript
• Homepage:
• Size: 417 KB
• Stars: 54
• Watchers: 5
• Forks: 31
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# electron-find

English | [简体中文](./README.zh-CN.md)

## Introduction

Find all matches for the text in electron app

## Features

- depend on the API of electron's findInPage

- support user config UI of find interface

- support case-sensitive

- Auto find when user inputing is change

- The find interface is separated from electron view

- support electron version ^1.8.0, ^2.0.0, ^3.0.0, ^4.0.0

- support platform of Windows, Linux, Mac

## Demo

### Default UI

![demo](./find.gif)

### Custom UI

![demo](./find2.png)

## Install

``` 

$   npm install electron-find --save

```

## Usage

```

# import module

import { remote, ipcRenderer } from 'electron'

import { FindInPage } from 'electron-find'

# create instance of FindInPage with default config

let findInPage = new FindInPage(remote.getCurrentWebContents())

findInPage.openFindWindow()

# use preload option, the find interface will be loaded when create instance

let findInPage = new FindInPage(remote.getCurrentWebContents(), {

  preload: true

})

findInPage.openFindWindow()

# config parentElement of find interface, default is document.body

let findInPage = new FindInPage(remote.getCurrentWebContents(), {

  parentElement: document.querySelector('#id')

})

findInPage.openFindWindow()

# config duration of find interface moving, default is 300 (ms)

let findInPage = new FindInPage(remote.getCurrentWebContents(), {

  duration: 200

})

findInPage.openFindWindow()

# config offset relative to parentElement

let findInPage = new FindInPage(remote.getCurrentWebContents(), {

  offsetTop: 20,

  offsetRight: 30

})

findInPage.openFindWindow()

# config UI of find interface 

let findInPage = new FindInPage(remote.getCurrentWebContents(), {

  boxBgColor: '#333',

  boxShadowColor: '#000',

  inputColor: '#aaa',

  inputBgColor: '#222',

  inputFocusColor: '#555',

  textColor: '#aaa',

  textHoverBgColor: '#555',

  caseSelectedColor: '#555'

})

findInPage.openFindWindow()

# there is a simply demo for reference

npm install

npm run dev

# there is another example with webview

npm install

npm run dev:webview

```

## Shortcut

| keys   |   function  |

| ------ | ------      | 

| Enter  | find next   | 

| Shift + Enter| find back |

| Esc    | close | 

 Besides, you can also register global shortcut to open the find window, just like the demo.

 ## API

 ### Class: FindInPage

 ` new FindInPage(webContents, [options]) `

- ` webContents ` Object(required) - The webContents of renderer process

- ` options ` Object(optional)

   - ` preload ` Boolean - Whether load the find interface when create instance. Default is `false`.

   - ` parentElement ` Object - Specify parent dom of the find interface. Default is `document.body`.

   - ` duration ` Number - Specify moving time when the find window open or close. Default is `300` (ms).

   - ` offsetTop ` Number - Specify offset relative to the top of parentElement. Default is `5`.

   - ` offsetRight ` Number - Specify offset relative to the right of parentElement. Default is `5`.

   - ` boxBgColor ` String - Specify background color of the find interface. Default is `"#ffffff"`.

   - ` boxShadowColor ` String - Specify shadow color of the find interface. Default is `"#909399"`.

   - ` inputColor ` String - Specify text color of the input form. Default is "#606266".

   - ` inputBgColor ` String - Specify background color of the input form. Default is `"#f0f0f0"`.

   - ` inputFocusColor ` String - Specify border color of the input form when focusing. Default is `"#c5ade0"`.

   - ` textColor ` String - Specify color of the text in find interface. Default is `"#606266"`.

   - ` textHoverBgColor ` String - Specify background color of text in find interface when hovering. Default is `"#eaeaea"`.

   - ` caseSelectedColor ` String - Specify border color of the matchCase button when selected. Default is `"#c5ade0"`.

 ### Instance Methods

 Objects created with new FindInPage have the following instance methods:      

    

  ` findInPage.openFindWindow() `  

 Open the find window when it is closed. Focus input form when the find window has opened.  

     

  ` findInPage.closeFindWindow() `  

 Close the find window when it has opened.  

     

  ` findInPage.destroy() `  

 Close the find window, and release memory.