electron in page searchダウンロード - electron in page searchソースコードのダウンロード

electron in page search

その他のソースコード

1.0.0

ダウンロード

電子申請のページ内検索

このパッケージは、Chrome のネイティブのページ内検索機能を Electron アプリケーションに提供します。 Electron は、Chrome のネイティブ API を JavaScript に公開します。ただし、ネイティブのページ内検索 API にはいくつかの落とし穴とステートフルがあります。したがって、このパッケージはそれをラップし、より簡単で落とし穴のない API を提供します。

スクリーンショット

ページ内検索は、Electron アプリのブラウザウィンドウまたは Web ビュー ( BrowserWindowインスタンスまたは<webview>タグ) で使用できます。レンダラープロセスでは両方に 1 つの関数のみを使用できます。

 // Pass current browser window's WebContents instance
const searchInWindow = searchInPage ( remote . getCurrentWebContents ( ) ) ;

// Pass <webview> instance
const searchInWebview = searchInPage ( document . getElementById ( 'my-webview' ) ) ;

// Open inner window made with <webview> for in-page search

// Search some text in the browser window
searchInWindow . openSearchWindow ( ) ;

// Search some text in the webview
searchInWebview . openSearchWindow ( ) ;

このパッケージはクロスプラットフォーム (macOS、Linux、Windows) で動作し、それら上で CI を実行します (macOS と Linux の場合は Travis CI、Windows の場合は AppVeyor)。

インストール

 $ npm install --save electron-in-page-search

例

例を 2 つ追加します。そこで、動作するアプリのコードを参照してください。

ブラウザウィンドウで検索する
<webview>で検索

このリポジトリをクローンして試すことができます。

 $ 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

実際の例もご覧いただけます。

このパッケージの API を知るには、TypeScript の型定義を参照してください。

使用法

アプリ内でページ内検索を使用したい場合は、 searchInPage関数を呼び出してInPageSearchインスタンスを作成します。

 import searchInPage from 'electron-in-page-search' ;
// or
const searchInPage = require ( 'electron-in-page-search' ) . default ;

import { remote } from 'electron' ;

const inPageSearch = searchInPage ( remote . getCurrentWebContents ( ) ) ;

document . getElementById ( 'some-button' ) . addEventListener ( 'click' , ( ) => {
    inPageSearch . openSearchWindow ( ) ;
} ) ;

searchInPage呼び出すと、検索ウィンドウの<webview>要素が作成されます。この<webview>により、ページ内検索で検索ウィンドウ内のテキストが検索されることを回避できます。

Web ビューには、デフォルトで、 electron-in-page-search-window search-inactiveクラスプロパティがあります。次に、 openSearchWindowが呼び出され、Web ビューには検索中にクラスプロパティelectron-in-page-search-window search-active含まれます。したがって、以下のように CSS で検索ウィンドウの Web ビューをスタイル設定できます。

. electron-in-page-search-window {
  width : 300 px ;
  height : 36 px ;
  background-color : white;
}

. electron-in-page-search-window . search-inactive {
  visibility : hidden;
}

. electron-in-page-search-window . search-active {
  visibility : visible;
}

検索窓の背景色はbackground-color追加することで制御できます（上記ではwhite指定しています）。 CSS をさらにカスタマイズできます (以下の「カスタマイズ」セクションを参照してください)。

実際の例については、例のスタイルを参照してください。

検索ウィンドウには、「戻る」ボタン、「進む」ボタン、「閉じる」ボタン、およびクエリフォームが含まれています。アプリケーションユーザーはクエリを入力してクリックし (またはフォームで Enter キーを押すと)、ページ内検索を開始できます。 Enter キーを繰り返し押すか、「戻る」/「進む」ボタンをクリックすると、ヒットした単語にフォーカスが移動します。最後に、ユーザーは「閉じる」ボタンをクリックして検索ウィンドウを閉じ、検索を停止できます。

検索ウィンドウが閉じられると、ウィンドウのクラスプロパティは再びelectron-in-page-search-window search-inactiveになります。

検索ウィンドウ<webview>はdocument.body (またはsearchWindowParentオプションで指定された要素) にマウントされます。 InPageSearchインスタンスを破棄する場合は、必ず.finalize()メソッドを呼び出してください。検索ウィンドウ<webview> DOM からアンマウントします。

発達

デバッグ

検索ウィンドウの DevTools を表示したい場合は、以下のようにopenDevToolsOfSearchWindowプロパティをsearchInPage関数に渡します。

 searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;

DevTools をデタッチモードで開きます。

そして、このパッケージはログ記録もサポートしています。 $ELECTRON_IN_PAGE_SEARCH_DEBUG環境変数が空でない場合、レンダラプロセスのconsole.logにログが出力されます。

TypeScript

このパッケージは TypeScript で書かれており、TypeScript の準備ができています。このパッケージにはすでにindex.d.tsが含まれているため、このパッケージ用の型定義ファイルを準備する必要はありません。

 import searchInPage , { InPageSearch } from 'electron-in-page-search' ;

let search : InPageSearch ;
const elem = document . createElement ( 'webview' ) ;
elem . src = 'https://example.com' ;

document . getElementById ( 'main' ) . appendChild ( elem ) ;
elem . on ( 'dom-ready' , ( ) => {
    search = searchInPage ( elem ) ;
} ) ;

document . getElementById ( 'search-button' ) . addEventListener ( 'click' , ( ) => {
    if ( search ) {
        search . openSearchWindow ( ) ;
    }
} ) ;

私の環境

このパッケージを以下の OS でテストしています

macOS 10.12、OS X 10.11.6
Ubuntu Linux 16.04 LTS
Windows 8.1

カスタマイズ

検索ウィンドウに独自の CSS を使用する

デフォルトの検索ウィンドウを使用したいが、デフォルトの CSS は使用したくない場合は、独自の CSS ファイルを使用できます。

例えば

 const path = require ( 'path' ) ;

searchInPage ( webview , {
    customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ;

以下は検索窓に表示される各パーツのclassプロパティの一覧です。以下のクラスの CSS スタイルを記述してください。

クラス名	説明	要素
`inpage-search-body`	検索ウィンドウ全体の本文	`<div>`
`inpage-search-input`	問い合わせフォーム	`<input>`
`inpage-search-matches`	「N/M」検索数	`<div>`
`inpage-search-back`	「戻る」ボタン	`<div>`
`inpage-search-forward`	「進む」ボタン	`<div>`
`inpage-search-close`	「閉じる」ボタン	`<div>`

検索ウィンドウに独自の HTML を使用する

検索ウィンドウ全体を制御したい場合は、独自の HTML ファイルへのパスを渡すことができます。

 const path = require ( 'path' ) ;

searchInPage ( webview , {
    customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
    customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ;

electron-in-page-search パッケージは、 <script>タグを挿入して、検索ウィンドウ<webview>とレンダラープロセス間の IPC メッセージングをセットアップします。各要素を検索し、クラス名を通じてリスナーを設定します。

したがって、独自の検索ウィンドウ HTML でも上記のクラス名を維持する必要があります。

検索用の生涯フック

InPageSearchインスタンス ( searchInPageから返される) はEventEmitter拡張します。いくつかのタイミングでいくつかのイベントを発行します。それらをフックして、ある時点でコードを実行できます。

以下はフック名のリストです。

フック名	説明	リスナー引数
'開ける'	窓を開けたとき	`()`
'始める'	ページ内検索開始時	`(query: string)`
'次'	次の一致を見つけるとき	`(query: string, forward: boolean)`
'フォーカス入力'	検索窓に注目してみる	`()`
'見つかった'	検索クエリに一致した単語について	`(activeMatch: number, allMatch: number)`

検索窓のアニメーション

検索窓のアニメーションにCSSアニメーションを使用できます。 Web ビューのマウント時に検索ウィンドウをアニメーション化したくない場合は、以下のようにsearch-firstpaintクラス名を使用してください。

. electron-in-page-search-window . search-firstpaint {
  visibility : hidden;
}

. electron-in-page-search-window . search-inactive {
  animation-duration : 0.2 s ;
  animation-name : yourAwesomeAnimationOnClosing;
}

. electron-in-page-search-window . search-active {
  animation-duration : 0.2 s ;
  animation-name : yourAwesomeAnimationOnOpening;
}