Aprende a implementar pestañas del navegador en su aplicación de Electron Framework utilizando el módulo de pestañas electrónicas.

Cómo implementar pestañas similares al navegador en Electron Framework

Cuando era niño, siempre quise crear keygens y otros programas extraños que ya existían, pero con mi propio diseño. Una de esas locas ideas fue la idea de crear un navegador web que solo debería usarse para transacciones bancarias, etc. Locura, ¿verdad? Bueno, hasta la fecha, aunque no creé mi propio motor de navegador, esto se puede hacer fácilmente con tecnologías web gracias a Electron. La función de pestañas también se puede crear con un módulo útil que lo ayudará con la implementación de las pestañas sin alterar el código nativo, solo HTML, CSS y JavaScript.

En este artículo, le mostraremos cómo implementar un navegador como pestañas de navegación de sitios web.

1. Instale electron-tabs

El módulo electron-tabs es una utilidad bastante simple que le permite implementar pestañas de navegación simples para aplicaciones Electron, en el mismo Chrome, Brave o cualquier navegador web sensato. Podrá incluir nuevas pestañas utilizando la vista web de Electron. Tenga en cuenta que el estilo de la etiqueta webview usa display: flex; internamente para garantizar que el elemento iframe secundario llene la altura y el ancho completos de su contenedor de vista web cuando se usa con diseños tradicionales y flexbox. No sobrescriba la pantalla predeterminada: flex; Propiedad CSS, a menos que se especifique display: inline-flex; para el diseño en línea.

Podrá renderizar archivos locales o sitios web remotos fácilmente. Para instalar este módulo, ejecute el siguiente comando en su terminal (siempre que se encuentre en el directorio del proyecto):

npm install --save electron-tabs

Después de la instalación del módulo, podrá solicitarlo desde el proceso de renderizado como explicaremos más adelante. Para obtener más información sobre este módulo, visite el repositorio oficial en Github aquí .

2. Implementación de las pestañas

Todo el marcado que necesita para representar pestañas en su proyecto es el siguiente:

<div class="etabs-tabgroup">
    <div class="etabs-tabs"></div>
    <div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>

Sin embargo, esto se representa como HTML simple en la aplicación, lo que significa que debe estilizarlo de acuerdo con sus necesidades. Como es html en línea, ocupará espacio en su DOM, por lo que la lógica con la que está trabajando en su aplicación debe cambiar. Su archivo index.html original ahora debería ser solo un contenedor con las pestañas.

El siguiente archivo index.html contiene un diseño bastante funcional que será suficiente para casi todos los proyectos que necesitan pestañas en la aplicación:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <!-- 
            1. Incluye CSS que define los estilos de las pestañas.
            Puede utilizar los estilos predeterminados del módulo o incluir sus propios estilos.
        -->
        <link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
        <style>
            /* Como la pestaña debe estar en el borde de la vista, elimine el margen de la etiqueta del cuerpo */
            body{
                margin: 0;
            }
        </style>
    </head>
    <body>
        <!-- 2. Incluir el marcado básico de la vista de pestañas -->
        <div class="etabs-tabgroup">
            <div class="etabs-tabs"></div>
            <div class="etabs-buttons"></div>
        </div>
        <div class="etabs-views"></div>

        <!--
            3. Incluya el código de inicialización, puede incluir otro archivo js
            O escriba directamente el código JS aquí.
        -->
        <script>
            // También puede requerir que otros archivos se ejecuten en este proceso
            require('./renderer.js')
        </script>
    </body>
</html>

Como puede ver, el marcado es bastante básico y contiene solo 4 elementos div con algunas clases. La lógica debe implementarse, sin embargo, con JavaScript, esto debe hacerse dentro del proceso de Renderer (ya sea desde un archivo JS cargado en el archivo de índice o con una etiqueta de script). En nuestro ejemplo, estamos incluyendo un archivo en el mismo directorio que el archivo index.html, es decir, renderer.js que contiene el siguiente código:

// ./renderer.js

// 1. Requerir el módulo
const TabGroup = require("electron-tabs");

// 2. Definir la instancia del grupo de pestañas (contenedor)
let tabGroup = new TabGroup({
    // Si desea un nuevo botón que agregue una nueva pestaña, incluya:
    newTab: {
        title: 'New Tab',
         // El archivo deberá ser local, probablemente un archivo local-ntp.html
         // como en el navegador Google Chrome.

        //src: "./some-index-file.html",
        //visible: true,
        //webviewAttributes: {
        //    nodeintegration: true
        //}
    }
});

// 3. Agregar una pestaña de un sitio web
let tab1 = tabGroup.addTab({
    title: "Our Code World",
    src: "https://ourcodeworld.com",
    visible: true
});

// 4. Agregar una nueva pestaña que contiene un archivo HTML local
let tab2 = tabGroup.addTab({
    title: "Local File",
    src: "./local.html",
    visible: true,
     // Si la página necesita acceder a los módulos de Node.js, asegúrese de
     // habilitar la integración de nodos
    webviewAttributes: {
        nodeintegration: true
    }
});

En este ejemplo, incluimos solo 2 pestañas. Como primer paso, debe crear una instancia del grupo de pestañas que almacenará todas las instancias de las pestañas. Nuestra primera pestaña carga un sitio web remoto, a saber, ourcodeworld.com, por lo que no necesita muchas propiedades, solo el atributo src que define la URL del sitio web, aunque puede ser local. Por ejemplo, nuestra segunda pestaña carga un archivo local en su proyecto y usa nodeintegration (puede ejecutar JavaScript con características nativas). Tenga en cuenta que la opción newTab durante la inicialización del le permite agregar un nuevo botón que carga otro archivo, normalmente debería ser una página de índice como la de Google Chrome:

Index Chrome Page

Eso permite al usuario navegar a una nueva página oa algún archivo local. ¡Como puede ver, es bastante simple crear su propio navegador usando Electron Framework!

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores