How to pass parameters from main process to render processes in Electron

In Electron, communication between the main process and the renderer process can primarily be achieved through the ipcMain and ipcRenderer modules. Here, we focus on how to pass parameters from the main process to the renderer process. There are several methods to achieve this:

1. Using IPC Communication

Electron provides a mechanism called IPC (Inter-Process Communication) that enables message passing between the main process and the renderer process. We can use the ipcMain and ipcRenderer modules to send and receive messages.

In the main process:

javascript
// In the main process
const { ipcMain } = require('electron');

ipcMain.on('request-data', (event, arg) => {
  console.log(arg);  // Log the data received from the renderer process
  // Assuming the data we need to send back
  const responseData = { name: 'Electron', type: 'Framework' };
  event.sender.send('response-data', responseData);
});

In the renderer process:

javascript
// In the renderer process
const { ipcRenderer } = require('electron');

// Send a request message to the main process
ipcRenderer.send('request-data', 'Need some data');

// Receive data from the main process
ipcRenderer.on('response-data', (event, arg) => {
  console.log(arg);  // Log the received data
});

2. Using the remote Module

The remote module in Electron allows the renderer process to directly access objects in the main process. This method is straightforward, but from Electron 10 onwards, due to security and performance considerations, it is gradually deprecated.

In the main process:

javascript
// In the main process, set a global variable
global.sharedObject = { someProperty: 'default value' };

In the renderer process:

javascript
// In the renderer process, access the global variable
const { remote } = require('electron');
const mainProcessData = remote.getGlobal('sharedObject');
console.log(mainProcessData.someProperty);

3. Sending Data via WebContents

Data can also be sent directly to the renderer process through specific WebContents instances.

In the main process:

javascript
const { app, BrowserWindow } = require('electron');
let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({...});

  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('message-from-main', 'Hello from Main Process');
  });

  mainWindow.loadURL('...');
});

In the renderer process:

javascript
const { ipcRenderer } = require('electron');
ipcRenderer.on('message-from-main', (event, message) => {
  console.log(message);  // Output 'Hello from Main Process'
});

These are several common methods for passing parameters from the main process to the renderer process. Each method has its applicable scenarios, and the choice of which method to use depends on the specific situation and development requirements.