electron in page search
1.0.0
Dieses Paket stellt die native In-Page-Suchfunktion von Chrome für Electron-Anwendungen bereit. Electron macht die native API von Chrome für JavaScript verfügbar. Aber die native In-Page-Such-API hat einige Fallstricke und ist zustandsbehaftet. Dieses Paket verpackt es also und stellt einfachere APIs ohne Fallstricke bereit.
Die In-Page-Suche kann für Browserfenster oder Webansichten ( BrowserWindow Instanz oder <webview> -Tag) in der Electron-App verwendet werden. Sie können im Renderer-Prozess nur eine Funktion für beide verwenden.
// 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 ( ) ;Dieses Paket funktioniert plattformübergreifend (macOS, Linux und Windows) mit laufendem CI (Travis CI für macOS und Linux, AppVeyor für Windows).
$ npm install --save electron-in-page-search
Zwei Beispiele werden hinzugefügt. Bitte sehen Sie sich dort den Code der funktionierenden App an.
<webview>Sie können sie ausprobieren, indem Sie dieses Repository klonen.
$ 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
Sie können sich auch das Beispiel aus der realen Welt ansehen.
Um APIs für dieses Paket kennenzulernen, können Sie sich die Typdefinitionen von TypeScript ansehen.
Wenn Sie die In-Page-Suche in einer App verwenden möchten, rufen Sie die Funktion searchInPage auf, um eine InPageSearch Instanz zu erstellen.
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 ( ) ;
} ) ; Beim Aufruf von searchInPage wird ein <webview> -Element für das Suchfenster erstellt. Diese <webview> kann verhindern, dass die In-Page-Suche den Text im Suchfenster findet.
Die Webansicht verfügt standardmäßig über eine Klasseneigenschaft electron-in-page-search-window search-inactive . Dann wird openSearchWindow aufgerufen, die Webansicht verfügt während der Suche über eine Klasseneigenschaft electron-in-page-search-window search-active . So können Sie die Webansicht des Suchfensters wie folgt per CSS gestalten:
. 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;
} Sie können die Hintergrundfarbe des Suchfensters steuern, indem Sie background-color hinzufügen (oben ist white angegeben). Sie können CSS weiter anpassen (siehe Abschnitt „Anpassung“ unten).
Bitte sehen Sie sich den Stil des Beispiels für ein Live-Beispiel an.
Das Suchfenster enthält die Schaltflächen „Zurück“, „Vorwärts“, „Schließen“ und ein Abfrageformular. Anwendungsbenutzer können eine Abfrage eingeben und darauf klicken (oder die Eingabetaste im Formular drücken), um die In-Page-Suche zu starten. Durch wiederholtes Drücken der Eingabetaste oder Klicken auf die Schaltflächen „Zurück“/„Vorwärts“ wird der Fokus auf Trefferwörter verschoben. Schließlich können die Benutzer ein Suchfenster schließen, indem sie auf die Schaltfläche „Schließen“ klicken, um die Suche zu stoppen.
Nach dem Schließen eines Suchfensters ist die Klasseneigenschaft des Fensters wieder electron-in-page-search-window search-inactive .
Das Suchfenster <webview> wird in document.body (oder einem mit der Option searchWindowParent angegebenen Element) bereitgestellt. Wenn Sie InPageSearch Instanz zerstören möchten, stellen Sie bitte sicher, dass Sie die Methode .finalize() aufrufen. Dadurch wird das Suchfenster <webview> aus dem DOM entfernt.
Wenn Sie ein DevTools-Suchfenster sehen möchten, übergeben Sie bitte die Eigenschaft openDevToolsOfSearchWindow wie unten an die Funktion searchInPage .
searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;Es öffnet die DevTools im Trennmodus.
Und dieses Paket unterstützt auch die Protokollierung. Wenn die Umgebungsvariable $ELECTRON_IN_PAGE_SEARCH_DEBUG nicht leer ist, werden Protokolle mit console.log im Render-Prozess ausgegeben.
Dieses Paket ist in TypeScript geschrieben und bereit für TypeScript. Sie müssen für dieses Paket keine Typdefinitionsdatei vorbereiten, da index.d.ts bereits in diesem Paket enthalten ist.
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 ( ) ;
}
} ) ;Ich teste dieses Paket mit dem folgenden Betriebssystem
Wenn Sie ein Standardsuchfenster, aber kein Standard-CSS verwenden möchten, können Sie Ihre eigene CSS-Datei verwenden.
z.B
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ; Nachfolgend finden Sie eine Liste der class der einzelnen Teile im Suchfenster. Bitte schreiben Sie Ihre CSS-Stile für die folgenden Klassen.
| Klassenname | Beschreibung | Element |
|---|---|---|
inpage-search-body | Körper des gesamten Suchfensters | <div> |
inpage-search-input | Anfrageformular | <input> |
inpage-search-matches | „N/M“-Suchanzahl | <div> |
inpage-search-back | „Zurück“-Taste | <div> |
inpage-search-forward | Schaltfläche „Vorwärts“. | <div> |
inpage-search-close | Schaltfläche „Schließen“. | <div> |
Wenn Sie das gesamte Suchfenster steuern möchten, können Sie einen Pfad zu Ihrer eigenen HTML-Datei übergeben.
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ; Das Electron-in-Page-Search-Paket fügt <script> -Tag ein, um IPC-Nachrichten zwischen einem Suchfenster <webview> und einem Renderer-Prozess einzurichten. Es findet jedes Element und legt Listener über Klassennamen fest.
Daher müssen Sie die oben genannten Klassennamen auch in Ihrem eigenen Suchfenster-HTML pflegen.
InPageSearch Instanz (zurückgegeben von searchInPage ) erweitert EventEmitter . Es gibt einige Ereignisse zu bestimmten Zeiten aus. Sie können sie an einigen Stellen einbinden, um Ihren Code auszuführen.
Nachfolgend finden Sie eine Liste der Hook-Namen.
| Hook-Name | Beschreibung | Listener-Argumente |
|---|---|---|
| 'offen' | Bei geöffnetem Fenster | () |
| 'Start' | Die In-Page-Suche wurde gestartet | (query: string) |
| 'nächste' | Beim Finden der nächsten Übereinstimmung | (query: string, forward: boolean) |
| 'Fokus-Eingabe' | Konzentrieren Sie sich auf das Suchfenster | () |
| 'gefunden' | Auf ein Wort, das mit der Suchanfrage übereinstimmt | (activeMatch: number, allMatch: number) |
Sie können CSS-Animationen für die Animation des Suchfensters verwenden. Wenn Sie beim Mounten der Webansicht kein Suchfenster animieren möchten, verwenden Sie bitte den Klassennamen search-firstpaint wie folgt:
. 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;
} Die Klasse search-firstpaint wird beim ersten Öffnen des Suchfensters entfernt.
InPageSearch Instanz verzögert die Erstellung <webview> -Elements für ein Suchfenster, bis das erste openSearchWindow aufgerufen wird. Dies ist im Hinblick auf die Speichereffizienz besser, da <webview> einen neuen Prozess forkt.
Wenn Sie ein Suchfenster im Voraus laden möchten, setzen Sie bitte preloadSearchWindow: true auf das zweite Argument des searchInPage() -Aufrufs.
Verteilt unter der MIT-Lizenz
