electron in page search
1.0.0
Ce package fournit la fonctionnalité de recherche native sur la page de Chrome aux applications Electron. Electron expose l'API native de Chrome à JavaScript. Mais l’API de recherche native sur la page présente certains pièges et est dynamique. Ce package l'enveloppe donc et fournit des API plus simples et sans pièges.
La recherche sur la page peut être utilisée pour la fenêtre du navigateur ou la vue Web (instance BrowserWindow ou balise <webview> ) dans l'application Electron. Vous ne pouvez utiliser qu'une seule fonction pour les deux dans le processus de rendu.
// 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 ( ) ;Ce package fonctionne sur plusieurs plates-formes (macOS, Linux et Windows) en exécutant CI dessus (Travis CI pour macOS et Linux, AppVeyor pour Windows).
$ npm install --save electron-in-page-search
Deux exemples sont ajoutés. Veuillez donc consulter le code de l'application fonctionnelle ici.
<webview>Vous pouvez les essayer en clonant ce référentiel.
$ 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
Vous pouvez également voir l’exemple du monde réel.
Pour connaître les API de ce package, vous pouvez consulter les définitions de types de TypeScript.
Lorsque vous souhaitez utiliser la recherche sur la page dans l'application, appelez la fonction searchInPage pour créer une instance 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 ( ) ;
} ) ; Lors de l'appel de searchInPage , il crée un élément <webview> pour la fenêtre de recherche. Cette <webview> peut éviter que la recherche sur la page ne trouve le texte dans la fenêtre de recherche.
La vue Web a une propriété de classe electron-in-page-search-window search-inactive par défaut. Ensuite, openSearchWindow est appelé, la vue Web a une propriété de classe electron-in-page-search-window search-active pendant la recherche. Vous pouvez donc styliser la vue Web de la fenêtre de recherche par CSS comme ci-dessous :
. 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;
} Vous pouvez contrôler la couleur d'arrière-plan de la fenêtre de recherche en ajoutant background-color (ci-dessus, white est spécifié). Vous pouvez personnaliser davantage CSS (veuillez consulter la section « Personnalisation » ci-dessous).
Veuillez consulter le style de l'exemple pour un exemple en direct.
La fenêtre de recherche contient le bouton « Précédent », le bouton « Suivant », le bouton « Fermer » et un formulaire de requête. Les utilisateurs de l'application peuvent saisir une requête et cliquer dessus (ou appuyer sur la touche Entrée dans le formulaire) pour lancer la recherche dans la page. Répéter pour appuyer sur la touche Entrée ou cliquer sur les boutons « Précédent »/« Suivant » déplace le focus sur les mots clés. Enfin, les utilisateurs peuvent fermer une fenêtre de recherche en cliquant sur le bouton « Fermer » pour arrêter la recherche.
Après la fermeture d'une fenêtre de recherche, la propriété de classe de la fenêtre sera à nouveau electron-in-page-search-window search-inactive .
La fenêtre de recherche <webview> est montée sur document.body (ou sur un élément spécifié avec l'option searchWindowParent ). Lorsque vous souhaitez détruire l'instance InPageSearch , assurez-vous d'appeler la méthode .finalize() . Cela démontera la fenêtre de recherche <webview> du DOM.
Si vous souhaitez voir une fenêtre DevTools de recherche, veuillez transmettre la propriété openDevToolsOfSearchWindow à la fonction searchInPage comme ci-dessous.
searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;Il ouvre les DevTools avec le mode détacher.
Et ce package prend également en charge la journalisation. Lorsque la variable d'environnement $ELECTRON_IN_PAGE_SEARCH_DEBUG n'est pas vide, elle génère des journaux avec console.log dans le processus de rendu.
Ce package est écrit en TypeScript et prêt pour TypeScript. Vous n'avez pas besoin de préparer un fichier de définition de type pour ce package car index.d.ts est déjà dans ce package.
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 ( ) ;
}
} ) ;Je teste ce package avec le système d'exploitation ci-dessous
Si vous souhaitez utiliser une fenêtre de recherche par défaut mais ne souhaitez pas utiliser de CSS par défaut, vous pouvez utiliser votre propre fichier CSS.
par exemple
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ; Vous trouverez ci-dessous une liste des propriétés class de chaque pièce dans la fenêtre de recherche. Veuillez écrire vos styles CSS pour les classes ci-dessous.
| nom de classe | description | élément |
|---|---|---|
inpage-search-body | Corps de toute la fenêtre de recherche | <div> |
inpage-search-input | Formulaire de requête | <input> |
inpage-search-matches | Nombre de recherches « N/M » | <div> |
inpage-search-back | bouton "retour" | <div> |
inpage-search-forward | bouton « suivant » | <div> |
inpage-search-close | bouton « fermer » | <div> |
Si vous souhaitez contrôler toute la fenêtre de recherche, vous pouvez transmettre un chemin vers votre propre fichier HTML.
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ; Le package electronic-in-page-search injecte la balise <script> pour configurer la messagerie IPC entre une fenêtre de recherche <webview> et un processus de rendu. Il trouve chaque élément et définit les auditeurs via des noms de classe.
Vous devez donc également conserver les noms de classe ci-dessus dans votre propre fenêtre de recherche HTML.
L'instance InPageSearch (renvoyée par searchInPage ) étend EventEmitter . Il émet des événements à certains moments. Vous pouvez les accrocher pour exécuter votre code à certains moments.
Vous trouverez ci-dessous une liste de noms de hooks.
| nom du crochet | description | arguments de l'auditeur |
|---|---|---|
| 'ouvrir' | Sur fenêtre ouverte | () |
| 'commencer' | La recherche sur la page a commencé | (query: string) |
| 'suivant' | Sur la recherche du prochain match | (query: string, forward: boolean) |
| 'entrée de focus' | Se concentrer sur la fenêtre de recherche | () |
| 'trouvé' | Sur un mot correspondant à la requête de recherche | (activeMatch: number, allMatch: number) |
Vous pouvez utiliser l'animation CSS pour l'animation de la fenêtre de recherche. Si vous ne souhaitez pas animer une fenêtre de recherche lorsque la vue Web est montée, veuillez utiliser le nom de classe search-firstpaint comme ci-dessous :
. 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;
} La classe search-firstpaint sera supprimée lors de l’ouverture initiale de la fenêtre de recherche.
L'instance InPageSearch retarde la création de l'élément <webview> pour une fenêtre de recherche jusqu'à ce que le premier openSearchWindow soit appelé pour la première fois. C'est mieux en termes d'efficacité de la mémoire car <webview> lance un nouveau processus.
Si vous souhaitez charger une fenêtre de recherche à l'avance, veuillez définir preloadSearchWindow: true sur le deuxième argument de l'appel searchInPage() .
Distribué sous licence MIT
