Скрипт preload и contextBridge

Скрипт preload — файл, который Electron выполняет в окне до загрузки страницы. У него есть доступ к части API Electron, и через модуль contextBridge он может положить в объект window страницы нужные ей функции. Так страница получает ровно то, что ей разрешили, и ничего больше.

Создание скрипта

Создайте в корне проекта preload.js:

// preload.js
const { contextBridge } = require('electron');
 
contextBridge.exposeInMainWorld('appInfo', {
  electron: process.versions.electron,
  chrome: process.versions.chrome,
  node: process.versions.node,
});

exposeInMainWorld принимает имя и объект. На странице этот объект появится как window.appInfo.

Подключение к окну

Скрипт указывают в webPreferences окна в main.js:

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
 
function createWindow() {
  const win = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

Теперь скрипт выполнится перед каждой загрузкой страницы в этом окне.

Использование на странице

Добавьте в index.html перед ul абзац <p id="versions"></p>, а в renderer.js — строки:

// renderer.js
const versions = document.querySelector('#versions');
versions.textContent =
  `Electron ${window.appInfo.electron}, Chromium ${window.appInfo.chrome}, Node.js ${window.appInfo.node}`;

После npm start под заголовком появится строка с версиями. Страница прочитала данные, которых у неё самой нет: process существует только в preload.

Функции, а не модули

Передавать можно строки, числа, объекты и функции. Объект копируется, поэтому страница не может изменить его в preload. Обычно через мост передают функции-обёртки над IPC — так будет устроен объект window.notes в следующих уроках:

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
 
contextBridge.exposeInMainWorld('notes', {
  load: () => ipcRenderer.invoke('notes:load'),
});

Страница вызывает window.notes.load() и не знает, как это устроено внутри.

Что доступно в preload

По умолчанию preload работает в песочнице (sandbox) и может загрузить только:

Также доступен ограниченный объект process: версии, платформа.

Частая ошибка

Строка require('fs') в preload закончится ошибкой загрузки модуля: в песочнице модулей Node.js для работы с файлами нет. Не отключайте ради этого песочницу. Чтение файла делает главный процесс, а preload передаёт странице функцию, которая просит его об этом через IPC.