代码之家 › 专栏 › 技术社区 › vikrant verma

无法在电子应用程序中使用Process

electron node.js javascript

vikrant verma · 技术社区 · 4 年前

无法在电子中使用任何与电子或节点相关的操作。未定义获取错误过程。我在他们的指南中查看了添加节点支持的各个地方,但这已经完成了,所以留在这里我的主要应用程序代码是

const electron = require("electron");
const { app, BrowserWindow } = electron;

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true },
  });

  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

以及Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body style="background: white">
    <h1>Hello World!</h1>
    <p>
      We are using node
      <script>
        document.write(process.versions.node);
      </script>
      , Chrome
      <script>
        document.write(process.versions.chrome);
      </script>
      , and Electron
      <script>
        document.write(process.versions.electron);
      </script>
      .
    </p>
  </body>
</html>

0 回复 | 直到 4 年前

aabuhijleh 3 年前

更新:以下答案是一种解决方法。您不应该禁用 contextIsolation 你不应该启用 nodeIntegration 相反,你应该使用 preload script 以及 contextBridge API .

In Electron 12 , 上下文隔离 现在默认为 true

如果你将其设置为 false ,您将可以在渲染过程中访问Node.js API

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { 
     contextIsolation: false,
     nodeIntegration: true
    },
  });

  win.loadFile("index.html");
}

值得注意的是,不建议这样做!

Electron维护人员更改默认值是有充分理由的。 请参阅 this discussion

如果没有contextIsolation,在渲染器进程中运行的任何代码都可以很容易地进入Electron内部或预加载脚本,并执行您不希望任意网站执行的特权操作。

customcommander 3 年前

没有理由提升渲染器的权限。该页面上的任何第三方脚本都将以相同的权限运行,这绝对不是你想要的。

相反,您应该使用具有该权限的预加载脚本(即默认情况下可以使用Node.js API),但保留 contextIsolation=true (无论如何,这都是默认值)。如果需要在预加载脚本和渲染器脚本之间共享数据,请使用 contextBridge .

在我的示例中,我在一个相当愚蠢的名称空间下将预加载脚本中的数据暴露给渲染器脚本( window.BURRITO )为了清楚地表明你是负责人:

main.js

const {app, BrowserWindow} = require('electron'); //<- v13.1.7
const path = require('path');

app.whenReady().then(() => {
  const preload = path.join(__dirname, 'preload.js');
  const mainWindow = new BrowserWindow({ webPreferences: { preload }});
  mainWindow.loadFile('index.html');
});

preload.js

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

contextBridge.exposeInMainWorld('BURRITO', {
  getNodeVer: () => process.versions.node,
  getChromeVer: () => process.versions.chrome,
  getElectronVer: () => process.versions.electron
});

renderer.js

const onClick = (sel, fn) => document.querySelector(sel).addEventListener('click', fn);
onClick('#btn1', () => alert(BURRITO.getNodeVer()));
onClick('#btn2', () => alert(BURRITO.getChromeVer()));
onClick('#btn3', () => alert(BURRITO.getElectronVer()));

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <button id="btn1">Node?</button>
    <button id="btn2">Chrome?</button>
    <button id="btn3">Electron?</button>
    <script src="./renderer.js"></script>
  </body>
</html>