CODEWITHSUNDEEP
electron
Goran Radulovic
Goran Radulovic

Reputation: 1987

Sending commands to the web app in electron renderer process since contextIsolation changes

I understand that contextIsolation changes are introduced for security purposes, and i read about contextBridge which exposes custom API to the webapp running in the renderer process so web app can control electron app in which is runing.

electron preload script

const contextBridge = require("electron").contextBridge;
contextBridge.exposeInMainWorld("electronApi", {
  'doSomething' : function () {
     // some code to execute
  }
});

web app

window.electronApi.doSomething();

This is perfectly clear and i understand why is this done this way.

However, i do not understand how can communication work the other way, so how can electron execute web app commands? Let's take following example, web app has window.someWebAppMethod defined and electron should execute it

web app

window.someWebAppMethod = function () {
  // do somehing web app related
}

electron preload script

window.someWebAppMethod()

^^ this does not work because of contextIsolation which was whole point of contextIsolation, but i still need to have a certain way of triggering web app commands from electron. Most obvious reason is let's say i have electron main menu with command labeled "Open Quick Jump" which should tell the web app loaded in rendered process to execute method which will show the "Quick Jump" function of the web app.

Maybe i'm missing something painfully obvious, but i'd still appreciate any help i can get.

Thanks

Upvotes: 0

Views: 345

Answers (1)

Goran Radulovic
Goran Radulovic

Reputation: 1987

I found a way of doing this. Not sure it's obvious or if it is secure enough, but here it is:

electron preload script

const contextBridge = require("electron").contextBridge;

let doSomethingInWebApp = null;

contextBridge.exposeInMainWorld("electronApi", {
  'exposeDoSomethingInWebApp' : function (callback) {
     doSomethingInWebApp = callback;
  }
});

web app

if (window.electronApi && window.electronApi.exposeDoSomethingInWebApp) {
  window.electronApi.exposeDoSomethingInWebApp(function () {
    // execute whatever you need to execute in webapp
  });
}

electron preload script

if (doSomethingInWebApp) {
  // execute previously defined custom behavior in web app
  doSomethingInWebApp();
}

So it's quite simple and it works.

Upvotes: 2

Related Questions