electron上下文隔离，如何处理最小化和关闭功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在electron中，如何给window对象添加自己的属性或方法，如窗口最小化和关闭方法

一、上下文隔离是什么？

上下文隔离功能将确保您的 预加载脚本 和 Electron的内部逻辑 运行在所加载的 webcontent网页 之外的另一个独立的上下文环境里。 这对安全性很重要，因为它有助于阻止网站访问 Electron 的内部组件 和 您的预加载脚本可访问的高等级权限的API 。

这意味着，实际上，您的预加载脚本访问的 window 对象并不是网站所能访问的对象。 例如，如果您在预加载脚本中设置 window.hello = ‘wave’ 并且启用了上下文隔离，当网站尝试访问window.hello对象时将返回 undefined。

自 Electron 12 以来，默认情况下已启用上下文隔离，并且它是 所有应用程序推荐的安全设置。

二、使用步骤

1.启用上下文隔离

Electron 提供一种专门的模块来无阻地帮助您完成这项工作。 contextBridge 模块可以用来安全地从独立运行、上下文隔离的预加载脚本中暴露 API 给正在运行的渲染进程。 API 还可以像以前一样，从 window.myAPI 网站上访问。

在preload.js添加

// 在上下文隔离启用的情况下使用预加载
const { contextBridge, ipcRenderer  } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  doMinWindow: () => {ipcRenderer.invoke('doMinWindow')},
  doCloseWindow:  () => {ipcRenderer.invoke('doCloseWindow')},
})

2. 在main.js实现invoke方法

代码如下（示例）：

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
function createWindow () {	
  const win = new BrowserWindow({
    width: 1080,
    height: 768,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 这两个方法处理
  ipcMain.handle("doMinWindow", () => win.minimize());
  ipcMain.handle("doCloseWindow", () => win.close());
}

最后，在网页上就可以使用window.myAPI.doMinWindow()和window.myAPI.doCloseWindow()方法

3. 在vue使用

<template>
  <el-button @click="doMinWindow()">最小化</el-button>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const doMinWindow = () => {
	  window.myAPI.doMinWindow()
	}
    return {
      doMinWindow 
    }
  }
})
</script>

参考

electron + vue项目中自定义标题栏实现最大化、最小化、关闭功能