How to call a function/module in Electron from my webpage?

Question

I'll try to describe a minimized question in short paragraphs.

In short, I want to use some logic or call some functions in my Electron App from the webpage that is in my Electron App (I am actually wrapping an electron app 'shell' for my webpage).

Suppose I want to expose a function in my Electron app. Say,

function printNumbers () {
  console.log(1)
}

notice that it should be located in my Electron code.

Then after running my app, I'd like to call this function from my webpage(clicking a button in my webpage which is loaded from a website, then open a new window in my Electron App). For now, I think I can check whether printNumber works by using the developer console.

I have checked how to use remote module to call functions/modules inside electron. But I didn't find a way to call a function I write in my electron code base.

BTW: I can enable the nodeIntegration option.

Answer 1

There are two main ways to communicate between the renderer process and the main process.

1. One way would be to use the remote module to require the code you want to take from the main process. This object will contain anything you export from your main process code.

// main process, for example app/main.js
exports.test = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

mainProcess.test(); // 'Yay'

2. Another way would be to use Inter Process Communication to send/receive events between the main process and the renderer process:

// main process, for example app/main.js
myWindow.webContents.send('my-cool-log-event', 'Yay');

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');
ipcRenderer.on('my-cool-log-event', (evt, msg) => console.log(msg)); // 'Yay'

---

If you want to call a function from the main process when a click event fires in a renderer process, you can use either approach.

1.

// main process, for example app/main.js
exports.onClick = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    mainProcess.onClick();
  });

2.

// main process, for example app/main.js
const { ipcMain } = require('electron')
ipcMain.on('click', () => console.log('do something'));

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    ipcRenderer.send('click');
  });