electron in page search
1.0.0
Este paquete proporciona la función de búsqueda en página nativa de Chrome para las aplicaciones de Electron. Electron expone la API nativa de Chrome a JavaScript. Pero la API de búsqueda nativa en la página tiene algunos inconvenientes y tiene estado. Por lo tanto, este paquete lo envuelve y proporciona API más sencillas y sin obstáculos.
La búsqueda en la página se puede utilizar para la ventana del navegador o la vista web (instancia BrowserWindow o etiqueta <webview> ) en la aplicación Electron. Puede usar solo una función para ambos en el proceso de renderizado.
// 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 ( ) ;Este paquete funciona multiplataforma (macOS, Linux y Windows) ejecutando CI en ellos (Travis CI para macOS y Linux, AppVeyor para Windows).
$ npm install --save electron-in-page-search
Se añaden dos ejemplos. Así que consulte el código de la aplicación que funciona allí.
<webview>Puedes probarlos clonando este repositorio.
$ 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
También puedes ver el ejemplo del mundo real.
Para conocer las API de este paquete, puede ver las definiciones de tipos de TypeScript.
Cuando desee utilizar la búsqueda en la página en la aplicación, llame a la función searchInPage para crear una instancia 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 ( ) ;
} ) ; Al llamar searchInPage , crea un elemento <webview> para la ventana de búsqueda. Esta <webview> puede evitar que la búsqueda dentro de la página encuentre el texto en la ventana de búsqueda.
La vista web tiene una propiedad de clase electron-in-page-search-window search-inactive de forma predeterminada. Luego se llama openSearchWindow , la vista web tiene una propiedad de clase electron-in-page-search-window search-active durante la búsqueda. Así que puedes diseñar la vista web de la ventana de búsqueda mediante CSS como se muestra a continuación:
. 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;
} Puede controlar el color de fondo de la ventana de búsqueda agregando background-color (arriba, se especifica white ). Puede personalizar aún más CSS (consulte la sección 'Personalización' a continuación).
Consulte el estilo del ejemplo para ver un ejemplo en vivo.
La ventana de búsqueda contiene el botón "atrás", el botón "adelante", el botón "cerrar" y el formulario de consulta. Los usuarios de la aplicación pueden ingresar una consulta y hacer clic en ella (o presionar la tecla Intro en el formulario) para iniciar la búsqueda en la página. Repetir para presionar la tecla Intro o hacer clic en los botones 'atrás'/'adelante' mueve el foco a las palabras clave. Finalmente, los usuarios pueden cerrar una ventana de búsqueda haciendo clic en el botón "cerrar" para detener la búsqueda.
Después de cerrar una ventana de búsqueda, la propiedad de clase de la ventana volverá a estar electron-in-page-search-window search-inactive .
La ventana de búsqueda <webview> está montada en document.body (o en un elemento especificado con la opción searchWindowParent ). Cuando desee destruir la instancia InPageSearch , asegúrese de llamar al método .finalize() . Desmontará la ventana de búsqueda <webview> del DOM.
Si desea ver una ventana de búsqueda de DevTools, pase la propiedad openDevToolsOfSearchWindow a la función searchInPage como se muestra a continuación.
searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;Abre DevTools con modo de separación.
Y este paquete también admite el registro. Cuando la variable de entorno $ELECTRON_IN_PAGE_SEARCH_DEBUG no está vacía, genera registros con console.log en el proceso de renderizado.
Este paquete está escrito en TypeScript y listo para TypeScript. No es necesario preparar un archivo de definición de tipo para este paquete porque index.d.ts ya está en este paquete.
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 ( ) ;
}
} ) ;Estoy probando este paquete con el siguiente sistema operativo.
Si desea utilizar una ventana de búsqueda predeterminada pero no desea utilizar un CSS predeterminado, puede utilizar su propio archivo CSS.
p.ej
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ; A continuación se muestra una lista de propiedades class de cada parte en la ventana de búsqueda. Escriba sus estilos CSS para las siguientes clases.
| nombre de clase | descripción | elemento |
|---|---|---|
inpage-search-body | Cuerpo de toda la ventana de búsqueda | <div> |
inpage-search-input | Formulario de consulta | <input> |
inpage-search-matches | Recuento de búsquedas 'N/M' | <div> |
inpage-search-back | botón 'atrás' | <div> |
inpage-search-forward | botón 'adelante' | <div> |
inpage-search-close | botón 'cerrar' | <div> |
Si desea controlar toda la ventana de búsqueda, puede pasar una ruta a su propio archivo HTML.
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ; El paquete electron-in-page-search inyecta la etiqueta <script> para configurar la mensajería IPC entre una ventana de búsqueda <webview> y un proceso de renderizado. Encuentra cada elemento y establece oyentes a través de nombres de clases.
Por lo tanto, debe mantener los nombres de las clases anteriores también en su propia ventana de búsqueda HTML.
La instancia InPageSearch (devuelta desde searchInPage ) extiende EventEmitter . Emite algunos eventos en algunos horarios. Puedes conectarlos para ejecutar tu código en algunos puntos.
A continuación se muestra una lista de nombres de ganchos.
| nombre del gancho | descripción | argumentos del oyente |
|---|---|---|
| 'abierto' | En ventana abierta | () |
| 'comenzar' | Se inició la búsqueda en la página | (query: string) |
| 'próximo' | Sobre cómo encontrar el próximo partido | (query: string, forward: boolean) |
| 'entrada de enfoque' | Centrándose en la ventana de búsqueda | () |
| 'encontró' | En alguna palabra que coincida con la consulta de búsqueda | (activeMatch: number, allMatch: number) |
Puede utilizar animación CSS para la animación de la ventana de búsqueda. Si no desea animar una ventana de búsqueda cuando la vista web esté montada, utilice el nombre de clase search-firstpaint como se muestra a continuación:
. 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 clase search-firstpaint se eliminará al abrir la ventana de búsqueda por primera vez.
La instancia InPageSearch retrasa la creación del elemento <webview> para una ventana de búsqueda hasta que se llama por primera vez openSearchWindow . Esto es mejor en términos de eficiencia de la memoria porque <webview> bifurca un nuevo proceso.
Si desea cargar una ventana de búsqueda por adelantado, configure preloadSearchWindow: true en el segundo argumento de la llamada searchInPage() .
Distribuido bajo la licencia MIT
