Electron v23如何在React渲染代码执行前注入配置到window对象？

我有一个基于Electron v23的应用，它会读取配置文件并确定相关配置项，配置完成后会打开独立React项目的URL。我需要在React客户端代码执行前，将配置对象注入到渲染进程的window对象中。

我尝试了两种方法但均未成功：

方法1：preload脚本+contextBridge（失败） #

通过preload脚本使用contextBridge暴露getConfig等方法，窗口配置开启contextIsolation，但出现内部脚本无法访问electron.app.isPackaged的错误，调整nodeIntegration也无效。

preload.js代码：

const validChannels = ['something'];
const { contextBridge, ipcRenderer } = require("electron");
const { getConfig } = require("./config");

contextBridge.exposeInMainWorld("electron", {
    getConfig: () => {
        return getConfig();
    },
    send: (channel, data) => {
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receive: (channel, func) => {
        if (validChannels.includes(channel)) {
            // Deliberately strip event as it includes `sender` and is a security risk
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    },
});

窗口初始化代码：

const win = new BrowserWindow({
    width: 1600,
    height: 1000,
    webPreferences: {
        nodeIntegration: false,
        devTools: true,
        contextIsolation: true,
        sandbox: false,
        preload: path.join(__dirname, "preload.js"),
    }
});

方法2：did-finish-load事件注入（失败） #

通过did-finish-load等事件执行JavaScript注入配置，但配置注入时机过晚，React初始化脚本获取到的是undefined，后续才能拿到实际配置。

代码：

win.webContents.on("did-finish-load", () => {
    win.webContents.executeJavaScript(`window.__configFromElectron = ${JSON.stringify(getConfig())};`);
});

我也尝试过阻塞React渲染直到配置可用，但配置在单例中提前被求值，该方案并不优雅。重构React应用为异步获取配置的改动过大，请问正确的实现方式是什么？

正确实现方式 #

方案：加载React URL前同步注入配置 #

核心思路是先注入配置到window对象，再加载React项目的URL，确保React初始化时配置已经存在。

1. 主进程中准备完整配置：
   把需要的配置项（包括主进程的app.isPackaged）整理好，避免在渲染进程中直接访问主进程模块：

   const { app, BrowserWindow } = require('electron');
   const path = require('path');
   const { getConfig } = require('./config');
   
   // 整合业务配置与Electron环境信息
   const appConfig = {
     ...getConfig(),
     isPackaged: app.isPackaged
   };
   
   // 创建窗口
   const win = new BrowserWindow({
     width: 1600,
     height: 1000,
     webPreferences: {
       nodeIntegration: false,
       devTools: true,
       contextIsolation: true,
       sandbox: false
     }
   });
   
   // 先注入配置，再加载React页面
   win.webContents.executeJavaScript(`window.__configFromElectron = ${JSON.stringify(appConfig)};`)
     .then(() => {
       win.loadURL('你的React项目URL'); // 替换为实际React项目地址
     })
     .catch(err => {
       console.error('配置注入失败:', err);
     });
   

2. React中直接访问配置：
   在React代码中可以直接同步读取window对象上的配置，无需修改原有逻辑：

   // React组件示例
   const config = window.__configFromElectron;
   
   function App() {
     return (
       <div>
         <p>环境类型: {config.isPackaged ? '生产环境' : '开发环境'}</p>
         <p>业务配置项: {config.yourCustomKey}</p>
       </div>
     );
   }
   

方案优势 #

• 时机可靠：配置注入在React页面加载前完成，确保初始化时配置已就绪
• 改动极小：无需重构React应用为异步逻辑，保持原有同步读取方式
• 安全合规：保持contextIsolation开启、nodeIntegration关闭的安全配置，符合Electron最佳实践

内容的提问来源于stack exchange，提问作者sasidhar