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!

    Keywords

    none

    Install

    npm i electron-dynamic-preload

    DownloadsWeekly Downloads

    0

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • timfish