JavaScript

Using Electron's remote module

The remote module is only available in the renderer process. It provides a simple way to do inter-process communication (IPC) between the renderer process (web page) and the main process. See https://electronjs.org/docs/api/remote.

//renderer.js, importing remote module

const remote = require('electron').remote;

The remote module provides access to modules normally available only to the main process. By importing this module in our renderer.js file, we can in turn access the following main process’s modules within our Render process:

app
autoUpdater
BrowserWindow
contentTracing
dialog
globalShortcut
ipcMain
Menu
MenuItem
powerMonitor
powerSaveBlocker
protocol
session
webContents
tray

How to use BrowserWindow module in renderer process

Here is a simple BrowserWindow example:

//renderer.js
const { remote } = require('electron'),
window = remote.getCurrentWindow();

The remote.getCurrentWindow() returns a reference to the BrowserWindow instance to which this web page belongs (index.html).

How to close the current window from the renderer process using remote module

Now that we have a reference to the index.html window, we can resize, close or minimize it using methods provided in https://electronjs.org/docs/api/browser-window. For example to close the current window:

//renderer.js
/*Close the current window*/

const { remote } = require('electron'),
currWindow   = remote.getCurrentWindow(),
appCloseBtn  = document.querySelector('#close');

appCloseBtn.addEventListener('click', e =>{
 currWindow.close();
});

How to use dialog module in renderer process

The dialog module is restricted to the main process, meaning to interact with it we will either need to call its methods from a menu event, via the inter-process communication IPC modules (https://electronjs.org/docs/api/ipc-main and https://electronjs.org/docs/api/ipc-renderer) from the renderer process, or by using the remote module.

Display confirmation dialog box using remote module

The following example demonstrates how to display a confirmation box before closing the current window:

//renderer.js
/*Close the current window*/

const { remote } = require('electron'),
currWindow = remote.getCurrentWindow(),
appCloseBtn = document.querySelector('#close'),

dialog = remote.dialog;

appCloseBtn.addEventListener('click', e =>{
 const options = {
  type: 'warning',
  buttons: ['Yes', 'No'],
  message: 'Do you really want to quit?'
 }
 dialog.showMessageBox(options, i => {
  if (i == 1) return;
  window.close();
 })
});

How to display context menu with the help of remote module

Here is a simple contextual menu:

//renderer.js

const { remote } = require('electron');
const myContextMenu = remote.Menu.buildFromTemplate ([
{ label: 'Exit', role: 'quit' },
{ label: 'Minimize', role: 'minimize' },
{ type: 'separator' },
{ label: 'Start', click() { console.log('Start the app') } }
])

window.addEventListener('contextmenu', (event) => {
 event.preventDefault();
 myContextMenu.popup();
})

Visit Electron’s documentation for more information:

  1. https://electronjs.org/docs/api/menu
  2. https://electronjs.org/docs/api/menu-item
Advertisement:
Advertisement: