当 contextIsolation 设置为 true 时，如何从 HTML 文件访问 require

Question

我正在尝试将 electron 放入这个 HTML 文件中，但是 require 未定义：

<script>
    const electron = require("electron");
    const {icpRenderer} = electron;

    const form = document.querySelector("form");
    form.addEventListener("submit", submitForm);

    function submitForm(e){
        e.preventDefault();
        const item = document.querySelector("#item").value;
    }
</script>

我将 nodeIntegration 设置为 True，将 contextIsolation 设置为 True 用于防止安全警告的 Web 首选项。我怎样才能通过这个文件得到require？

Full source code

Guide Video Adding Script tags

在main.js中：

function createAddWindow(){
    addWindow = new BrowserWindow({
        width: 300,
        height: 200,
        title: "Add Inventory Item",
        webPreferences: {
            nodeIntegration: true,
            worldSafeExecuteJavaScript: true,
            contextIsolation: true
        }
    });

    addWindow.loadURL(url.format({
        pathname: path.join(__dirname, "addWindow.html"),
        protocol: "file",
        slashes: true
    }));

    addWindow.on("close", function(){
        addWindow = null;
    })
}

Answer 1

我遇到的主要问题是启用 contextIsolation 后无法使用 require.

要在启用 contextIsolation 的情况下访问 ipcRenderer，预加载文件与 contextBridge 一起使用以公开 ipcRenderer:

中的某些功能

preload.js

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

contextBridge.exposeInMainWorld("myAPI", {
    ipcSend: (...args) => ipcRenderer.send(...args),

    ipcOn: (key, handler) => ipcRenderer.on(key, (event, ...args) => handler(...args))
});

main.js

function createAddWindow(){
    subWindowOpen = true;
    addWindow = new BrowserWindow({
        width: 400,
        height: 300,
        title: "Add Inventory Item",
        webPreferences: {
            worldSafeExecuteJavaScript: true,
            contextIsolation: true,
            preload: path.join(__dirname, "preload.js")
        }
    });

    addWindow.loadURL(url.format({
        pathname: path.join(__dirname, "addWindow.html"),
        protocol: "file",
        slashes: true
    }));
}

addWindow.html

<script>
    myAPI.ipcSend("item:add", item);
</script>

nodeIntegration 可以在不启用 contextIsolation 的情况下使用，但这被认为是不安全的。最好只公开某些功能而不是整个对象。

当 contextIsolation 设置为 true 时，如何从 HTML 文件访问 require

How to access require, from an HTML file, when contextIsolation is set to true

html

javascript

node.js

requirejs

electron