electron find

電子発見

英語 | 简体中文

導入

Electron アプリ内のテキストに一致するものをすべて検索します

特徴

• ElectronのfindInPageのAPIに依存します
• 検索インターフェイスのユーザー設定 UI をサポート
• 大文字と小文字の区別をサポート
• ユーザー入力が変更された場合の自動検索
• 検索インターフェイスは電子ビューから分離されています
• 電子バージョン ^1.8.0、^2.0.0、^3.0.0、^4.0.0 をサポート
• Windows、Linux、Macのサポートプラットフォーム

デモ

デフォルトのUI

カスタムUI

インストール

 $   npm install electron-find --save

使用法

 # 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

ショートカット

キー	関数
入力	次を見つける
Shift + Enter	戻って見つける
ESC	近い

さらに、デモと同様に、検索ウィンドウを開くためのグローバル ショートカットを登録することもできます。

API

クラス: FindInPage

new FindInPage(webContents, [options])

• webContentsオブジェクト (必須) - レンダラー プロセスの webContents
• optionsオブジェクト(オプション)
  • preload Boolean - インスタンスの作成時に検索インターフェイスをロードするかどうか。デフォルトはfalseです。
  • parentElementオブジェクト - 検索インターフェイスの親 dom を指定します。デフォルトはdocument.bodyです。
  • duration数値 - 検索ウィンドウが開いたり閉じたりするときの移動時間を指定します。デフォルトは300 (ミリ秒) です。
  • offsetTop Number -parentElement の上部を基準としたオフセットを指定します。デフォルトは5です。
  • offsetRight Number -parentElement の右を基準とした相対オフセットを指定します。デフォルトは5です。
  • boxBgColor String - 検索インターフェイスの背景色を指定します。デフォルトは"#ffffff"です。
  • boxShadowColor String - 検索インターフェイスの影の色を指定します。デフォルトは"#909399"です。
  • inputColor String - 入力フォームのテキストの色を指定します。デフォルトは「#606266」です。
  • inputBgColor String - 入力フォームの背景色を指定します。デフォルトは"#f0f0f0"です。
  • inputFocusColor String - フォーカス時の入力フォームの境界線の色を指定します。デフォルトは"#c5ade0"です。
  • textColor String - 検索インターフェイスのテキストの色を指定します。デフォルトは"#606266"です。
  • textHoverBgColor String - ホバー時の検索インターフェイスのテキストの背景色を指定します。デフォルトは"#eaeaea"です。
  • caseSelectedColor String - 選択された場合の matchCase ボタンの境界線の色を指定します。デフォルトは"#c5ade0"です。

インスタンスメソッド

新しい FindInPage で作成されたオブジェクトには、次のインスタンス メソッドがあります。

findInPage.openFindWindow()
検索ウィンドウが閉じているときに開きます。検索ウィンドウが開いたら、入力フォームにフォーカスします。

findInPage.closeFindWindow()
検索ウィンドウが開いたら閉じます。

findInPage.destroy()
検索ウィンドウを閉じて、メモリを解放します。