Electron 预加载脚本 | Quasar 框架

Quasar CLI 与 Vite - @quasar/app-vite

Electron 预加载脚本

出于安全原因，渲染线程（来自 /src 的 UI 代码）无法访问 Node.js 内容。但是，您可以运行 Node.js 代码并通过位于 /src-electron/electron-preload.[js|ts] 的 Electron 预加载脚本将其桥接到渲染线程。使用 contextBridge（来自 electron 包）来公开 UI 所需的内容。

由于预加载脚本从 Node.js 运行，因此请谨慎使用它以及公开给渲染线程的内容！

如何使用它

在 /src-electron/ 文件夹中，有一个名为 electron-preload.js 的文件。用您的预加载代码填充它。

确保您的 /src-electron/electron-main.[js|ts] 具有以下内容（在“webPreferences”部分附近）

// Add this at the top:
import path from 'path'

// ...

function createWindow () {
  // ...
  mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
      // HERE IS THE MAGIC:
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
    }
  })

/src-electron/electron-preload.[js|ts] 内容示例

// example which injects window.myAPI.doAThing() into the renderer
// thread (/src/*)

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {}
})

警告

请注意，此文件在 Node.js 上下文中运行。
如果您从 node_modules 中导入任何内容，那么请确保该包在 /package.json > “dependencies” 中指定，而不是在“devDependencies” 中。

安全注意事项

仅仅使用 contextBridge 并不自动意味着您所做的一切都是安全的。例如，以下代码是不安全的

// BAD code; DON'T!!
contextBridge.exposeInMainWorld('myAPI', {
  send: ipcRenderer.send
})

它直接公开了一个强大的 API，没有任何参数过滤。这将允许任何网站发送任意 IPC 消息，而您可能不希望这样做。公开基于 IPC 的 API 的正确方法应该是为每个 IPC 消息提供一个方法。

// Good code
contextBridge.exposeInMainWorld('myAPI', {
  loadPreferences: () => ipcRenderer.invoke('myAPI:load-prefs')
})

现在，loadPreferences 在您的 javascript 代码中全局可用（例如：window.myAPI.loadPreferences）。

警告

确保选择不会与现有 Window 键冲突的名称。

使用上述代码以及在主线程中对 load-prefs 的 invoke 将具有这样的代码

ipcMain.handle('myAPI:load-prefs', () => {
  return {
    // object that contains preferences
  }
})

预加载脚本的自定义路径

如果您希望更改预加载脚本（甚至主线程文件）的位置，请编辑 /quasar.config 文件

// should you wish to change default files
sourceFiles: {
  electronMain: 'src-electron/electron-main.js',
  electronPreload: 'src-electron/electron-preload.js'
}

发现错误了吗？在浏览器中编辑此页面

1. 简介

2. 如何使用它

3. 安全注意事项

4. 预加载脚本的自定义路径