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

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');
  });