Question

66

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

rated 0 times [ 67] [ 1] / answers: 1 / hits: 26181 / 7 Years ago, tue, january 24, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elishaannac

Add To Favorites

Follow

Total Points: 28

Total Questions: 97

Total Answers: 101

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

elishaannac questions

1 Getting warning in 'eslint-plugin-react-settings' while running eslint

Fri, Mar 11, 22, 00:00, 2 Years ago

1 React-router-dom (v6) with Framer Motion (v4)

Sun, Dec 5, 21, 00:00, 3 Years ago

1 can I display custom javascript in streamlit web app

Mon, Jun 14, 21, 00:00, 3 Years ago

1 Handling state with multiple checkboxes in React Native

Mon, Jul 22, 19, 00:00, 5 Years ago

1 How to add custom row on the end of the table (b-table)

Mon, Jul 8, 19, 00:00, 5 Years ago

View All

answered 7 Years ago dominiquezachariahh · Accepted Answer

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

  });