electron-dynamic-preload
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

electron-dynamic-preload

Sometimes it's handy to be able to pass parameters to Electron preload scripts

This module uses the session.setPreloads() API introduced in Electron 2.x.x. It won't work on older releases!

addPreloadWithParams(modulePath, exportName[, params, session])

Parameter Type Description Default
modulePath string Path to file to load in preload
exportName string Name of export to execute
params any[] Parameters to pass to default exported function []
session Electron.session The session to add preload scripts to session.defaultSession

Points to note:

  • All params to the renderer are serialised so dont expect anything to make it through that doesn't survive JSON.parse(JSON.stringify(data)).

  • Electron preload scripts are passed to the renderer via command line arguments. There is probably a limit to the amount of data that can be passed this way. If you have to look up this limit, you're probably attempting to pass something ridiculously large. Do it another way!

Full Example

Say you want to make a library that allows you to set the background colour of all BrowserWindows from the main process (yes this is an oversimplified example):

script.js

import { addPreloadWithParams } from 'electron-dynamic-preload';
 
export function setBackgroundColor(color) {
  if (process.type === 'browser') {
    addPreloadWithParams(__filename, setBackgroundColor.name, arguments);
  } else {
    window.addEventListener('DOMContentLoaded', () => {
      document.body.style.backgroundColor = color;
    });
  }
}

main.js

import { BrowserWindow, app } from 'electron';
import { setBackgroundColor } from './script';
import * as path from 'path';
 
// This call in the main process is all that's required!
setBackgroundColor('red');
 
app.on('ready', () => {
  var win = new BrowserWindow();
  win.loadURL(path.join(__dirname, 'index.html'));
});

How Does It Work?

The Electron session.setPreloads API only lets us pass absolute paths as preload scripts. To get round this, we append a magic string, the export name and the encoded parameters to ensure it still looks like an absolute path.

The above example results in the following --preload-scripts argument being passed to the renderer process.

--preload-scripts="/user/me/my-app/node_modules/electron-dynamic-preload/dist/wrap-require;/user/me/my-app/script.js/edp-require-with-params/setBackgroundColor/%5B%22red%22%5D"

electron-dynamic-preload ensures that the first preload script wraps require. This ensures that subsequent preload scripts have the magic string removed, parameters decoded and then pass them to the named export.

FAQ

  1. Is this not super hacky and 🤮

    Yes, probably!

Readme

Keywords

none

Package Sidebar

Install

npm i electron-dynamic-preload

Weekly Downloads

2

Version

0.3.0

License

MIT

Unpacked Size

13.5 kB

Total Files

9

Last publish

Collaborators

  • timfish