Pass objects from browser to renderer-side at window creation, as argument of "new BrowserWindow()" or ".loadUrl()", to avoid pollution of the global scope

[cronvel]

The remote module is really handy, however I don't like to pollute the global scope of the browser-side just to provide some objects to the renderer's remote module, using remote.getGlobal(name).

It would be nice if we can pass some objects from browser-side to renderer-side, either at the BrowserWindow creation or when using .loadUrl().

Implementation example, browser-side:

var somethingIWantToShare = {
  myFunction: function() {
    // some code
  } ,
  ...
  // some properties and methods here
} ;

mainWindow.loadUrl( 'file://' + __dirname + '/html/main.html' , {
  rendererSideName: somethingIWantToShare ,
  anotherRendererSideName: ... // another object to share
} ) ;

Renderer-side:

remote.rendererSideName.myFunction() ;
remote.anotherRendererSideName.myOtherFunction() ;

[zcbenz]

You can do it in this way:

browser side:

mainWindow.rendererSideName = somethingIWantToShare;

renderer side:

remote.getCurrentWindow().rendererSideName.myFunction();

[jprichardson]

@cronvel I wrote https://github.com/jprichardson/electron-window for this purpose. It uses the same method as atom. It also keeps track of global window refs so that you don't have to worry about it.

[cronvel]

@jprichardson Thanks a lot, I will look into it!

[manvir-singh]

@zcbenz I tried that in v0.36.4 and it doesent work. I basically need to pass an object between two windows.

[meghadev]

The approach mentioned here didn't work for me. Any possible reason?

[denu5]

@meghadev I think some things changed have since 2015 but I can tell you a solution that works for me in Electron 1.6

In the main process:

e.g. index.ts

// typed to 'any', because we add a custom property later
 let myWindow: any = new BrowserWindow({ 
        height: 500, 
        width: 700,
        frame: false,
        resizable: false
    });
.....

 myWindow.custom = {
        'whatever': 'youwant'
    };

Then on the renderer side it's accessible like this:

e.g. index.html

<script>
var electron = require('electron');
var currentWindow = electron.remote.getCurrentWindow();
 
console.log(currentWindow.custom);

I'm not happy that it breaks the typing of the BrowserWindow and having said that, I'm pretty sure that this isn't best practice.

To use it in JS just remove :any

[IndieRobert]

can we get a 'opened' event to send data please.

[trusktr]

@denu5 How can we do this reference passing if we're using a <webview> element and not a BrowserWindow? For example, between a BrowserWindow and <webview> that resides inside of it?

[JeevanJain]

+1

[dingchaoyan1983]

+1 how to pass object reference to <webview>?

[subbiah95]

@zcbenz , I saw your method it did work, but is there a way where i can pass from render process to main process, I tried the reverse as its, but it did not work

[HafizMuhammad-Farooq786]

@meghadev I think some things changed have since 2015 but I can tell you a solution that works for me in Electron 1.6

In the main process:

e.g. index.ts

// typed to 'any', because we add a custom property later
 let myWindow: any = new BrowserWindow({ 
        height: 500, 
        width: 700,
        frame: false,
        resizable: false
    });
.....

 myWindow.custom = {
        'whatever': 'youwant'
    };

Then on the renderer side it's accessible like this:

e.g. index.html

<script>
var electron = require('electron');
var currentWindow = electron.remote.getCurrentWindow();
 
console.log(currentWindow.custom);

I'm not happy that it breaks the typing of the BrowserWindow and having said that, I'm pretty sure that this isn't best practice.

To use it in JS just remove :any

Sir, I used your code. but I face an issue.