@dimensional-innovations/electron-background NPM

@dimensional-innovations/electron-background

electron-background aims to simplify electron apps by providing a simple api to customize the electron application.

Getting Started

Install

Add the package using npm or yarn:

npm install @dimensional-innovations/electron-background

yarn add @dimensional-innovations/electron-background

Setup for Vue CLI / Webpack

If you are using the Vue CLI, add the following to your main or background file.

import { AutoUpdater, DevTools, VueElectronSettings, init, KioskBrowserWindow, PrivilegedSchemes, StaticFileDir, TouchEvents, VueElectronVersion } from '@dimensional-innovations/electron-background';
import { config } from '../package';

init({
  appUrl: process.env.WEBPACK_DEV_URL ? process.env.WEBPACK_DEV_URL : 'app://index.html',
  config,
  plugins: [
    new AutoUpdater(),
    new DevTools(),
    new KioskBrowserWindow(),
    new PrivilegedSchemes(['app']),
    new StaticFileDir('app', __dirname),
    new TouchEvents(),
    new VueElectronSettings(),
    new VueElectronVersion()
  ]
});

Setup for Vite

If you are using Vite, add the following to your main or background file.

import { AutoUpdater, DevTools, VueElectronSettings, init, KioskBrowserWindow, PrivilegedSchemes, TouchEvents, VueElectronVersion } from '@dimensional-innovations/electron-background';
import { app } from 'electron';
import { config } from '../package';

init({
  appUrl: process.env['ELECTRON_RENDERER_URL']
    ? process.env['ELECTRON_RENDERER_URL']
    : `file://${join(__dirname, '../renderer/index.html')}`,
  config,
  plugins: [
    new AutoUpdater(),
    new DevTools(),
    new KioskBrowserWindow(),
    new TouchEvents(),
    new VueElectronSettings(),
    new VueElectronVersion()
  ]
});

Plugins

By default, the init method creates a BrowserWindow and loads the specified application into the window. All other features of an application are managed through plugins. Each plugin customizes the application instance during the init process. The built-in plugins are listed below.

If a feature you need isn't listed below, you can still add it to the init script by defining the plugin in your application. For example, if we wanted to customize the autoplay policy flag in electron, we would add the following to our init method.

import { init } from '@dimensional-innovations/vue-electron-background';
import { app } from 'electron';
import { config } from '../package';

init({
  appUrl: ...,
  config,
  plugins: [
    ...,
    { beforeReady: () => app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required') }
    ...,
  ]
});