ElectronでBrowserWindow側にメインプロセスの変数を引き渡す

TL;DR

ElectronでBrowserWindow側にメインプロセスの変数を引き渡す際のやり方のメモ。

実装

以下、サンプルです。

Electronはindex.jsで開始し、その中でどこからか取得した文字列をpreload.js経由でBrowserWindowに引き渡します。この例では定数で宣言しちゃっていますが。

index.js

const electron = require('electron')
const app = electron.app
let mainWindow

// Electron起動時にグローバル変数を宣言しておく
global.hoge= "Hello World!"

app.on('ready', function () {
  let opt
  opt.webPreferences = {
    nodeIntegration: false,
    preload: `${__dirname}/preload.js`
  }
  mainWindow = new BrowserWindow(opt)
  mainWindow.loadURL(`file://${__dirname}/index.html`)

  mainWindow.on('closed', function () {
    mainWindow = null
  })
})

BrowserWindowが呼び出される前に実行されるpreload.jsでは、remote.getGlobal() を使ってグローバル変数を取得。

preload.js

const { remote } = require('electron')
// リモートプロセス(Electronのメインプロセス)からグローバル変数を取得する。
global.hoge= remote.getGlobal('hoge')

ブラウザアプリ側では、app.jsを読み込んで処理を行っているという想定だと、以下のように読み込んだ変数を利用できます。

app.js

// preloadの段階ではまだNode.jsで動いているためグローバルはglobalだが、
// BrowserWindow側ではChroniumで動くのでグローバルはwindowとなる。
console.log(window.hoge)

他に別解はあると思いますが、まあこんなやり方もありますよ、ということで。