ContextBridge remains undefined in preload.js giving error: Cannot read property 'exposeInMainWorld' of undefined in packaged Electron app?

Question

我有一个用 Electron 封装的 angular 应用程序。我已经使用 electron-builder 生成了安装程序。根据与渲染器进程通信的建议，我使用 preload.js 作为 preload 脚本。

脚本在开发环境下运行良好。但是，一旦我打包并安装了应用程序，它就会显示错误 Cannot read 属性 'exposeInMainWorld' of undefined

这是我的preload.js

window.onload = () => {
    const {
        contextBridge,
        ipcRenderer
    } = require("electron");

    const validChannels = ['event-1', 'event-2', 'event-3'];

    // Expose protected methods that allow the renderer process to use the ipcRenderer without exposing the entire object
    contextBridge.exposeInMainWorld(
        "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
    );
};

我的Main.js

        this._win = new BrowserWindow({
            width: 1024,
            height: 768,
            webPreferences: {
                nodeIntegration: false,
                webSecurity: true,
                allowEval: false,
                allowRunningInsecureContent: false,
                contextIsolation: true, // protect against prototype pollution
                enableRemoteModule: false, // turn off remote
                preload: path.join(__dirname, "./preload.js") // use a preload script
            },
            title: this._appTitle,
            autoHideMenuBar: true,
            icon: path.join(__dirname, '/../dist/some-path/favicon.ico')
        });

我将 main.js 和 preload.js 都保存在根级别的文件夹 electron 中，其中 package.json 可用。如果您需要查看我的 builder-config.yaml，它位于 this link。

请提出建议。

P.S。 : preload.js 在开发模式下工作得很好。问题仅出现在使用 electron-builder

打包应用程序之后

Answer 1

我写的时候出现了这样的错误：

getPlatform: () => window.remote.getPlatform(),

然后我得到Uncaught Error: Uncaught TypeError: Cannot read property 'getPlatform' of undefined

在

console.log('window.remote.getPlatform()', window.remote.getPlatform && window.remote?.getPlatform())

当我把它改成

getPlatform: () => process.platform,

一切正常。

Answer 2

我得到了这个工作。实际上我builder-config.yaml中提到的electron版本是5.0.13。 contextbridge api 那时还没有引入。当我把 electron 的版本改成 9 及以上时，它工作得很好。谢谢

ContextBridge remains undefined in preload.js giving error: Cannot read property 'exposeInMainWorld' of undefined in packaged Electron app?

ContextBridge remains undefined in preload.js giving error: Cannot read property 'exposeInMainWorld' of undefined in packaged Electron app?

javascript

electron

electron-builder