Aprende a implementar y personalizar un menú contextual nativo en Electron Framework.

Cómo implementar un menú contextual nativo (con elemento de inspección) en Electron Framework

Dentro de una aplicación de Electron, podrá crear menús contextuales con HTML, CSS y JavaScript, sin embargo, a veces no son suficientes si queremos equivocarnos con cosas nativas en la aplicación, como copiar texto, seleccionar todo el texto o cambiar a pantalla completa. Si desea agregar un menú contextual personalizado a su aplicación que usa la interfaz nativa del sistema operativo, puede usar el módulo electron-context-menu para lograrlo.

En este artículo, le mostraremos cómo implementar y personalizar fácilmente el menú contextual nativo de su aplicación Electron.

1. Instalar el menú contextual de Electron

Electron no tiene un menú contextual incorporado. Se supone que debes manejar eso tú mismo. Pero es tedioso y difícil de hacer bien. Este módulo le ofrece un bonito menú contextual extensible con elementos como Cortar / Copiar / Pegar para texto, Guardar imagen para imágenes y Copiar enlace para enlaces. También agrega un elemento de menú Inspeccionar elemento cuando está en desarrollo para ver rápidamente elementos en el inspector como en Chrome. Puede utilizar este módulo directamente tanto en el proceso principal como en el de representación. Para instalar este módulo, abra el terminal, cambie al directorio de su proyecto electrónico y ejecute el siguiente comando:

npm install electron-context-menu

Esto instalará el módulo en su proyecto y le permitirá solicitarlo require('electron-context-menu') en su código más adelante. Para obtener más información sobre este módulo, visite el repositorio oficial en Github aquí .

2. Aprender cómo funciona el menú contextual

El menú contextual es básicamente una función que se puede solicitar a través del menú contextual de electrones. Esta función espera como primer argumento un objeto con las opciones que soporta la API (más información aquí) . Puede personalizar el menú contextual cuando se encuentra en el proceso principal:

// ./main.js
const {app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');

// Agregue un elemento al menú contextual que aparece solo cuando hace clic en una imagen
contextMenu({
	prepend: (params, browserWindow) => [{
		label: 'Rainbow',
		// Mostrarlo solo al hacer clic con el botón derecho en las imágenes
		visible: params.mediaType === 'image'
	}]
});

// Tu código que inicia una nueva aplicación
let win;
(async () => {
	await app.whenReady();
	win = new BrowserWindow();
})();

O directamente desde el proceso de renderizado también:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <!-- Todas las API de Node.js están disponibles en este proceso de renderizado. -->
        We are using Node.js <script>document.write(process.versions.node)</script>,
        Chromium <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.

        <script>
            const contextMenu = require('electron-context-menu');

             // Este código agrega 2 elementos nuevos al menú contextual para acercar la ventana (adentro y afuera)
             // Lea otros pasos para obtener más información
            contextMenu({
                prepend: (params, browserWindow) => [
                    {
                        role: "zoomIn"
                    },
                    {
                        role: "zoomOut"
                    },
                ],
            });
        </script>
    </body>
</html>

2.1. Agregar elementos al menú contextual con un comportamiento personalizado

Si desea agregar un elemento que ejecute una función JavaScript personalizada en el proyecto, debe verificar la documentación de la clase MenuItem de Electron , ya que este es básicamente el objeto que debe anteponer o agregar al menú contextual. Puede agregar un nuevo elemento al menú contextual con una acción personalizada, agregando un objeto a la matriz de anteponer / agregar del menú contextual con al menos una etiqueta y una devolución de llamada de clic que se ejecuta cuando el usuario hace clic en la nueva opción:

const contextMenu = require('electron-context-menu');

contextMenu({
    prepend: (params, browserWindow) => [
        {
            label: 'Destroy Atomic Bombs',
            click: (menuItem, browserWindow, event) => {
                // Tenga en cuenta que la función de alerta solo está disponible en el proceso de renderizado
                //alert("You destroyed all the atomic bombs in the world, thanks :3")

                // Si se ejecuta desde el proceso principal, la función de registro de la consola aparecerá en la terminal, no en las herramientas de desarrollo.
                console.log("You destroyed all the atomic bombs in the world, thanks :3")
            }
        }
    ]
});

Tenga en cuenta que el código anterior se ejecutó en el proceso de renderizado, por lo que la función console.log generará la información en la pestaña de la consola de las herramientas de desarrollo:

Custom Context Menu Option Electron

2.2. Agregar elementos al menú contextual con comportamientos predefinidos

Los comportamientos predefinidos en el menú contextual de Electron están destinados a ejecutar funciones a nivel de navegador, como minimizar una ventana, cerrarla, hacer zoom sobre ella, seleccionar todo el texto, etc. Esto se puede asignar a través de la propiedad de rol de un MenuItem. Es mejor especificar para cualquier elemento del menú que coincida con un rol estándar, en lugar de intentar implementar manualmente el comportamiento en una función, de modo que el comportamiento integrado proporcione la mejor experiencia nativa. Los valores y son opcionales cuando se usa un y se establecerán de forma predeterminada en los valores apropiados para cada plataforma. Cada elemento de menú debe tener ya sea una , o en el caso de un separador de una . La propiedad puede tener los siguientes valores: role  click  role  label  accelerator  role  role label type role 

  • undo
  • redo
  • cut
  • copy
  • paste
  • pasteAndMatchStyle
  • selectAll
  • delete
  • minimize - Minimizar la ventana actual.
  • close - Cerrar la ventana actual.
  • quit - Salir de la aplicación.
  • reload - Vuelve a cargar la ventana actual.
  • forceReload - Vuelve a cargar la ventana actual ignorando el caché.
  • toggleDevTools - Alternar herramientas de desarrollador en la ventana actual.
  • toggleFullScreen - Alternar el modo de pantalla completa en la ventana actual.
  • resetZoom - Restablezca el nivel de zoom de la página enfocada al tamaño original.
  • zoomIn - Zoom en la página enfocada en un 10%.
  • zoomOut - Reducir la página enfocada en un 10%.
  • editMenu - Menú completo "Editar" predeterminado (Deshacer, Copiar, etc.).
  • windowMenu - Todo el menú "Ventana" predeterminado (Minimizar, Cerrar, etc.).

Las siguientes funciones adicionales están disponibles en macOS : 

  • about - Mapa de la acción. orderFrontStandardAboutPanel 
  • hide - Mapa de la acción. hide 
  • hideOthers - Mapa de la acción. hideOtherApplications 
  • unhide - Mapa de la acción. unhideAllApplications 
  • startSpeaking - Mapa de la acción. startSpeaking 
  • stopSpeaking - Mapa de la acción. stopSpeaking 
  • front - Mapa de la acción. arrangeInFront 
  • zoom - Mapa de la acción. performZoom 
  • toggleTabBar - Mapa de la acción. toggleTabBar 
  • selectNextTab - Mapa de la acción. selectNextTab 
  • selectPreviousTab - Mapa de la acción. selectPreviousTab 
  • mergeAllWindows - Mapa de la acción. mergeAllWindows 
  • moveTabToNewWindow - Mapa de la acción. moveTabToNewWindow 
  • window - El submenú es un menú "Ventana".
  • help - El submenú es un menú de "Ayuda".
  • services - El submenú es un menú "Servicios".
  • recentDocuments - El submenú es un menú "Abrir reciente".
  • clearRecentDocuments - Mapa de la acción. clearRecentDocuments 

Al especificar un en macOS, y son las únicas opciones que afectarán el elemento del menú. Todas las demás opciones serán ignoradas. Las minúsculas , por ejemplo , todavía se admiten. Las propiedades y no están disponibles para los elementos del menú de nivel superior en la bandeja en MacOS. Por ejemplo, para agregar 2 nuevas opciones al menú contextual que permite al usuario acercar y alejar, las agregaríamos así: role  label  accelerator  role toggledevtools enabled  visibility 

contextMenu({
	prepend: (params, browserWindow) => [
        {
            role: "zoomIn"
            // Si desea cambiar la etiqueta "Acercar"
            // label: "Custom Zoom In Text"
        },
        {
            role: "zoomOut"
            // Si desea cambiar la etiqueta "Alejar"
            // label: "Custom Zoom Out Text"
        },
    ],
});

Esto generaría el siguiente menú contextual:

Electron Context Menu With Zoom In and Zoom Out

2.3. Personalizar etiquetas de comportamientos predefinidos

Requerido para la localización, puede anular el texto que aparece en acciones predefinidas del menú contextual, por ejemplo en español:

Electron Framework Spanish Context Menu

Estas etiquetas se pueden anular a través de la propiedad de etiquetas del menú contextual de esta manera:

contextMenu({
     // Cambiar las etiquetas del menú contextual predefinido
     // por ejemplo, cortar, copiar, pegar
    labels: {
        cut: 'Custom Cut Text',
        copy: 'Custom Copy Text',
        paste: 'Custom Paste Text',
        save: 'Custom Save Image Text',
        saveImageAs: 'Custom Save Image As… Text',
        copyLink: 'Custom Copy Link Text',
        copyImageAddress: 'Custom Copy Image Address Text',
        inspect: 'Custom Inspect Element Text'
    }
});

Tenga en cuenta que la etiqueta de los elementos con un comportamiento predefinido debe asignarse durante la asignación de la misma, no en la propiedad de etiquetas del menú contextual. Para terminar este artículo, le recomendamos que lea también la documentación oficial del módulo, porque tiene mucho que ofrecer y no cubrimos todo excepto lo básico aquí, así que consulte la documentación.

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