Giter VIP home page Giter VIP logo

electron-dynamic-preload's Introduction

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!

electron-dynamic-preload's People

Contributors

timfish avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

petr-vysotskiy

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.