Electron v26中嵌入站点与应用通信的技术问询

原始问题 #

我正在把Electron应用从低版本升级到v26。旧版本里，我们通过preload脚本给window对象添加属性，让自有嵌入站点能发送频道消息触发应用操作。升级后按Electron要求设置contextIsolation = true、nodeIntegration = false，用contextBridge实现渲染进程和主进程通信，但原来的window属性方法失效了。

试过两种方案都有问题：

• 通过<webview>加载preload脚本暴露contextBridge API：本地运行正常，打包后失效。
• 用window.postMessage通信：未成功，示例代码如下：

嵌入网站代码：

window.postMessage({'test': 'testing sending message'});

Electron的renderer.js：

window.addEventListener('message', (event) => {
    electronApi.ipcRenderer.send('postMessage', event.data);
});

Electron的main.js：

ipcMain.on('postMessage', () => {
   console.log('We received message from renderer');
});

想知道如何实现嵌入站点向Electron频道发送消息。

更新尝试的方案及问题 #

后来想到通过Electron注入window属性的方案，但无法预加载这个window对象供嵌入站点使用。已经用主进程的executeJavaScript()设置window属性，代码如下：

renderer.js：

webview.addEventListener('dom-ready', (event) => {
    window.api.ipcRenderer.invoke('setWindowProps', webview.getWebContentsId()).then((response) => {
        console.log('Window properties have been set');
        return Promise.resolve();
    }).catch((error) => {
        logError(error);
        return Promise.reject(error);
    });
});

main.js：

ipcMain.handle('setWindowProps', (event, webContentsId) => {
    return getGuestWebContents(webContentsId, event.sender).executeJavaScript(`
        window.sendToElectron = (channel, params) => {
            console.log('send', channel, params);
            ipcRenderer.send(channel, params);
        }
    `);
});

preload.js：

contextBridge.exposeInMainWorld('api',
    {
        hasPopOutCapabilities: true,
        supportsNewInteleviewerFlow: true,
        ipcRenderer: {
            on: (channel, callback) => ipcRenderer.on(channel, callback),
            send: (channel, args) => ipcRenderer.send(channel, args),
            invoke: (channel, data, arg) => ipcRenderer.invoke(channel, data, arg)
        }
    }
);

现在的问题是window.sendToElectron在Electron定义它之前就被调用了，想知道有没有办法预加载这个window对象，让它在嵌入站点任何代码执行前就存在。当前webPreferences配置：

mainWindow = new BrowserWindow({
        x: mainWindowState.x,
        y: mainWindowState.y,
        width: mainWindowState.width,
        height: mainWindowState.height,
        minHeight: 480,
        minWidth: 480,
        id: "mainwindow",
        webPreferences: {
            nodeIntegration: false,
            sandbox: false,
            webviewTag: true,
            plugins: true,
            contextIsolation: true,
            preload: preloadPath
        }
    })  

可行解决方案 #

方案1：给webview单独指定preload脚本（解决打包失效问题） #

之前webview加载preload本地有效打包失效，大概率是打包时preload路径配置错误。正确做法是给每个webview单独设置preload，且打包时确保preload脚本被正确打包到资源目录。

修改webview的HTML属性，指定preload：

<webview src="你的嵌入站点URL" preload="${path.join(__dirname, 'webview-preload.js')}"></webview>

注意：用Electron的path.join(__dirname, 'webview-preload.js')生成绝对路径，打包时通过electron-builder/electron-packager的配置确保该脚本被包含进资源。

webview-preload.js内容（单独给嵌入站点用的preload）：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('sendToElectron', {
    send: (channel, params) => {
        // 增加频道白名单校验，提升安全性
        const validChannels = ['postMessage', 'your-custom-channel'];
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, params);
        }
    }
});

这样嵌入站点就能直接调用window.sendToElectron.send('postMessage', data)，且API在页面加载前就已注入，不会出现提前调用的问题。

方案2：修复postMessage通信的问题 #

之前postMessage未成功，可能是缺少消息来源验证或监听时机不对。

修改renderer.js的监听逻辑，加上来源校验：

window.addEventListener('message', (event) => {
    // 只处理自有站点的消息，替换成你的嵌入站点域名
    if (event.origin !== 'https://your-embedded-site.com') return;
    
    window.api.ipcRenderer.send('postMessage', event.data);
});

嵌入站点发送消息时指定目标origin，避免广播：

window.postMessage({'test': 'testing sending message'}, 'electron://your-app-origin');

如果是file协议开发环境，可临时用'*'，但生产环境必须严格限制origin。

方案3：提前注入全局对象（解决executeJavaScript时机问题） #

如果坚持用executeJavaScript的方式，要在页面开始加载时就注入，而非等待dom-ready：

修改renderer.js：

webview.addEventListener('did-start-loading', (event) => {
    window.api.ipcRenderer.invoke('setWindowProps', webview.getWebContentsId());
});

同时在嵌入站点代码里做兼容处理，避免提前调用：

function sendToElectronSafe(channel, params) {
    if (window.sendToElectron) {
        window.sendToElectron(channel, params);
    } else {
        setTimeout(() => sendToElectronSafe(channel, params), 100);
    }
}
// 调用时用这个兼容方法
sendToElectronSafe('postMessage', data);

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