Cómo habilitar el menú de búsqueda para encontrar rápidamente una palabra o frase en la aplicación en Electron Framework

Cómo habilitar el menú de búsqueda para encontrar rápidamente una palabra o frase en la aplicación en Electron Framework

De forma predeterminada, en cualquier navegador sensato, puede encontrar o buscar una palabra o frase específica en una página web, mientras navega con un procedimiento simple. Verá que la barra de búsqueda es útil para búsquedas rápidas y desaparecerá automáticamente después de un tiempo. En caso de que esté trabajando en su proyecto electrónico y el contenido generado pueda ser muy extenso, puede guardar un problema a su usuario e implementar una función de búsqueda en la aplicación.

En este artículo, le mostraremos cómo crear una función de búsqueda en la página en su aplicación electrónica.

1. Instale Electron en la búsqueda de páginas

El módulo de búsqueda electrónica en la página proporciona la función de búsqueda en la página nativa de Chrome para las aplicaciones Electron. Electron expone la API nativa de Chrome a JavaScript. Pero la API de búsqueda nativa en la página tiene algunas dificultades y tiene algunos estados. Por lo tanto, este paquete lo envuelve y proporciona API más fáciles y sin errores.

Para instalarlo en su proyecto, ejecute el siguiente comando en su terminal:

npm i electron-in-page-search

La búsqueda en la página se puede utilizar para la ventana del navegador o la vista web (instancia o <webview>etiqueta de BrowserWindow ) en la aplicación Electron. Puede usar solo una función para ambos en el proceso de renderizado. Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí .

2. Habilitar en el menú de búsqueda

El menú se puede habilitar en el proceso de renderización con el siguiente código. Debe utilizar la función predeterminada del módulo de búsqueda de electrones en la página y debe requerir el módulo remoto de electrones. Inicialice la searchInPagefunción proporcionando como primer argumento el contenido de la Ventana y eso sería suficiente. Puede abrir el menú utilizando el método openSearchWindow:

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

// Create an instance with the current window
const inPageSearch = searchInPage(remote.getCurrentWebContents());

// Display the search menu
inPageSearch.openSearchWindow();

A continuación, deberá incluir el CSS del menú de búsqueda. Esto es muy útil, ya que puede modificar el menú como desee para que coincida con el estilo de su aplicación. Además, se puede colocar donde quieras porque puedes manejarlo como cualquier elemento DOM.

En este ejemplo, haremos que se vea como el elemento del menú de búsqueda predeterminado en el navegador Chrome:

/*
* .electron-in-page-search-window is a class specified to default
* <webview> element for search window.
*/
.electron-in-page-search-window {
    position: fixed;
    top: 0;
    right: 0;
    border: solid grey 1px;
    background-color: white;
    width: 300px;
    height: 36px;
}

/*
* .search-inactive is added to search window <webview> when the window
* is inactive.
*/
.search-inactive {
    visibility: hidden;
}

/*
* .search-inactive is added to search window <webview> when the window
* is active.
*/
.search-active {
    visibility: visible;
}

Una vez que el estilo y el código de inicialización se hayan colocado en su aplicación, estará listo para ejecutar su aplicación y utilizar el menú de búsqueda ejecutando npm start.

3. Ejemplo

El siguiente ejemplo muestra una aplicación de electrones muy mínima que muestra el menú de búsqueda en el mismo estilo del navegador Chrome:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <style>
            /*
            * .electron-in-page-search-window es una clase especificada por defecto
            * <webview> element for search window.
            */
            .electron-in-page-search-window {
                position: fixed;
                top: 0;
                right: 0;
                border: solid grey 1px;
                background-color: white;
                width: 300px;
                height: 36px;
            }

            /*
            * .search-inactive is added to search window <webview> when the window
            * is inactive.
            */
            .search-inactive {
                visibility: hidden;
            }

            /*
            * .search-inactive se agrega a la ventana de búsqueda <webview> cuando la ventana
            * is active.
            */
            .search-active {
                visibility: visible;
            }
        </style>
    </head>
    
    <body>
        <h1>Hello World!</h1>
        <p>Hello, some demo text.</p>
        <p>Click on the following button to search for text on the document.</p>
        <input type="button" id="trigger-search" value="Search on document"/>
        <p>
            Text example. Try to find "esternocleidomastoideo" in the document and the word will be highlighted in the same way as the browser.
        </p>
    </body>

    <script>
        // obtener el módulo de búsqueda de electrones en la página
        const searchInPage = require('electron-in-page-search').default;
        const remote = require('electron').remote;
        // o
        // import searchInPage from 'electron-in-page-search';
        
        // Crea una instancia con la ventana actual
        const inPageSearch = searchInPage(remote.getCurrentWebContents());
        
        // Adjunte un detector de eventos para abrir el menú de búsqueda
        document.getElementById('trigger-search').addEventListener('click', () => {
            inPageSearch.openSearchWindow();
        });

        // Alternativamente, agregue el detector de eventos clave [CTRL + F]
        window.addEventListener("keydown", (e) => {
            if ((e.ctrlKey || e.metaKey) && e.keyCode === 70) {
                inPageSearch.openSearchWindow();
            }
        }, false);
    </script>

</html>

La plantilla generará la ventana que se muestra en la imagen del artículo.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable