34

I have an Electron app that can open different windows.

On app launch the app open a set of window(s) (that load the same HTML and JS files) but with params to change each window displayed infos.

Example :

app.on('ready', async () => {
  ...
  // open window for stuff 1
  win1 = new BrowserWindow({
     width: 1024,
     height: 728
  });
  win1.loadURL(`file://${__dirname}/app/app.html?id=1`);

  // open window for stuff 2
  win2 = new BrowserWindow({
     width: 1024,
     height: 728
  });
  win2.loadURL(`file://${__dirname}/app/app.html?id=2`);

Obviously passing params in file:// path doesn't work. I can't find a clear solution in Electron documentation or elsewhere on Internet to condition my rendered window to a param.

I can probably use IPC communication after window ready but it seems a little bit too complicated until I just want pass a variable to my child view.

P.S. : to be totally honest my application is built with React/Redux and the param I want to pass to view is the redux store key to listen for this view.

6
  • Passing params (and a hash) in the file:// path works just fine for me. All params are in location as expected.
    – Fozi
    Jul 12, 2016 at 20:32
  • I wouldn't use this parameterized URL concept for a file, if you would provide them on an HTTP Server ok. Instead you could do different things, e.g. use Cookies, read them on start. Or just use win1.webContents.executeJavaScript("var query = {id:1}")... at least it is a one liner
    – Fer To
    Jul 13, 2016 at 15:23
  • I think both of your answer made the deal.
    – damien
    Jul 15, 2016 at 10:05
  • I don't see any problems with providing (short) parameters to a file://; That said I also use a preload script file from which I get a (possibly large) JSON page data string from the main thread and make it available to the page. This way the page data is available already during page load.
    – Fozi
    Jul 15, 2016 at 16:18
  • You seem to be asking the same question every 4 hours. youtube.com/watch?v=jKzBJAowmGg Jul 15, 2016 at 23:38

9 Answers 9

56

A few methods:

loadURL Query String

The query string method others have posted seems to work fine. It might even be the easiest.

additionalArguments

Electron's documentation says additionalArguments is:

Useful for passing small bits of data down to renderer process preload scripts.

Main

const win = new BrowserWindow({
  width: 800,
  height: 600,
  backgroundColor: '#000000'
  webPreferences: {
    additionalArguments: ["myvarvalue", "secondvarvalue", "--another=something"]
  }
});

Renderer

window.process.argv is going to look something like:

["--num-raster-threads=2",
"--enable-gpu-memory-buffer-compositor-resources",
"--enable-gpu-async-worker-context",
...
"--renderer-client-id=4",
"myvarvalue",
"secondvarvalue",
"--another=something"]

It will append an array of strings. You could do something window.process.argv.slice(-3) to grab the last items in the array.


IPC Main / Render

Like you said, it seems complicated for what you are trying to do, but maybe this helps:

Main

const { ipcMain } = require('electron');

var mainProcessVars = {
  somevar: "name",
  anothervar: 33
}

ipcMain.on('variable-request', function (event, arg) {
  event.sender.send('variable-reply', [mainProcessVars[arg[0]], mainProcessVars[arg[1]]]);
});

Renderer

const { ipcRenderer } = electron;

electron.ipcRenderer.send('variable-request', ['somevar', 'anothervar']);

ipcRenderer.on('variable-reply', function (event, args) {
  console.log(args[0]); // "name"
  console.log(args[1]); // 33
});

This way allows you to send data besides strings.

4
  • 1
    window.process is undefined in renderer nowadays unless webPreferences: { nodeIntegration: true, contextIsolation: false }. See stackoverflow.com/questions/66612493/… Aug 24, 2021 at 20:25
  • 1
    @PsychoX I'ts true that process is undefined in renderer, but it can be accessed in preload script. You can then expose that (safely?) to renderer via contextBridge. Jan 7, 2022 at 15:56
  • 1
    additionalArguments work well, but I noticed that on Windows (or at least on my colleague's setup) there would be an additional argument (/prefetch:1) appended after them, so slice(-3) is not a reliable way of reading them. Jan 25, 2022 at 14:38
  • 1
    additionalArguments is great. as @BartvanHeukelom suggested, I'd add a prefix to each string, for example "id=", and replace .slice() with let idArray = process.argv.filter((str) => str.startsWith('id='));
    – Yigal
    Jun 13, 2022 at 9:26
20

According atom source code the query string method is a reliable way to do that very simply, especially when we only need to pass a unique string param:

// main process
win1.loadURL(`file://${__dirname}/app/app.html?id=${id}`);

// rendered process
console.log(global.location.search);

https://github.com/electron/electron/issues/6504

2
  • better to be received as json object. Is there a way to achieve so? May 20, 2019 at 20:55
  • @MagedSaeed yes, use global varialbe (check my answer below) Nov 4, 2019 at 8:17
17

Using query string along with win.loadFile(),

// main process or renderer process 1
data = {"age": 12, "healthy": true}

let win = new BrowserWindow({
        webPreferences: {
          nodeIntegration: true
        }
      });

win.loadFile("public/print.html", {query: {"data": JSON.stringify(data)}});
// renderer process 2
const querystring = require('querystring');
let query = querystring.parse(global.location.search);
let data = JSON.parse(query['?data'])
4
  • Is there a limit to how much data may be passed on the query string? Thanks!
    – tnrich
    Apr 16, 2021 at 19:56
  • @majorBummer I'm not sure. I never hit the limit. Apr 17, 2021 at 2:09
  • I used this until it turned out to suffer from inappropriate caching. That is, the value of location.search (which in my case should be different every time I run the program) would be that of a previous invocation. Jan 25, 2022 at 14:35
  • 1
    querystring is now deprecated. The querystring API is considered Legacy. While it is still maintained, new code should use the URLSearchParams API instead. Sep 10, 2022 at 9:04
3

We can inject Javascript code execution (on window did-finish-load event) and trigger react re-rendering with correct redux state portion. But it requires additional lifecycle step in rendered process.

Using hash or query in "local filepath" sounds a little bit weird but in my case it take sense since the hash describe the redux store branch to take in consideration in this window (file://which-code-to-load#which-content).

So even if i'm not totally at ease with this approach right now I'll take the second option.

It's a shame that the API doesn't provide any way to declare global vars from main process on window opening. I'll post a feature request.

1
  • can you elaborate / give examples for how these would work?
    – mix3d
    Apr 2, 2020 at 16:34
2

Actually use the invoke and handle combo can work as well. In my example, i especially need to establish a connection at the very beginning.

In preload

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.invoke('init').then(res => {
    window.alert(res)
    // render(e(App, {}), elem)
  })
})

And in main

const { ipcMain } = require('electron')

ipcMain.handle('init', async () => {
  return 'Abc'
})

You might even try to make a sync call via ipcRenderer.sendSync, maybe this is quicker, but I haven't tried that.

1

For example:

Process script

In your main script write:

global.varsForWindow = {
    platform: process.platform
};

Window script

Where you need it in a window script:

var varsFromMainScript = require('electron').remote.getGlobal('varsForWindow');
console.log(varsFromMainScript.platform);
1
  • Doesn't work if you need to pass different values to different windows...
    – mix3d
    Apr 2, 2020 at 16:35
1

You can share data between main and renderer processor using global variable:

Main processor:

global.id = 1;

Renderer processor:

let id = remote.getGlobal('id');
3
  • 1
    I don't recommend this way. if developers want to create multiple windows consecutively. Dec 15, 2019 at 18:37
  • 1
    the remote module has been deprecated and is no longer recommended for use
    – tnrich
    Apr 18, 2021 at 17:20
  • besides, what is remote? another global?
    – windmaomao
    Oct 31, 2021 at 23:25
0

If you're creating a new instance of BrowserWindow the query parameters don't seem to work at least in these versions:

"electron": "^26.2.2",
"nextron": "^8.12.0",

The workaround I found was to pass parameters through additionalArguments

      webPreferences: {
        additionalArguments: [
          `--metadata=${JSON.stringify(arg.data)}`,
        ],
      },

Then on your preload script

const metadata = process.argv.filter((arg) => arg.startsWith('--metadata='))[0]?.split('=')?.[1]
const data = JSON.parse(metadata || '{}')

contextBridge.exposeInMainWorld('appInfo', {
  metadata: data,
})

And then you can get it on your component with

global.appInfo.metadata
-5

Unfortunately, it seems pretty complicated. You probably won't be able to add variables to .html you render in electron in a nice way.

Of course - you can use url but it slows down booting very much (vy seconds) or you can execute Javascript in BrowserWindo, which also slows boot down.

The only way is the IPC and leaving javascript .html agnostic to variables from main process. Very sad though..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.