How to add custom menu in menubar in mac with electron?

首先，Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用的框架。在 Electron 中添加自定义菜单到 macOS 的菜单栏可以通过使用 Electron 的 Menu 模块来实现。

步骤概述：

1. 引入 Menu 模块
2. 创建菜单模板
3. 添加自定义项和功能
4. 将菜单模板应用于应用程序

具体实现：

首先，需要在主进程文件（通常是 main.js 或 index.js）中引入 Menu 模块：

javascript
const { Menu } = require('electron')

然后，可以定义一个菜单模板，菜单模板是一个数组，每个元素代表一个菜单项，每个菜单项可以是一个子菜单或一个具体操作。

javascript
const menuTemplate = [
  {
    label: '文件',
    submenu: [
      { label: '新建', click: () => { console.log('新建文件') } },
      { label: '打开', click: () => { console.log('打开文件') } }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { label: '复制', role: 'copy' },
      { label: '粘贴', role: 'paste' }
    ]
  },
  {
    label: '视图',
    submenu: [
      { label: '重新加载', role: 'reload' },
      { label: '全屏', role: 'togglefullscreen' }
    ]
  }
]

在这个例子中，我创建了三个主要的菜单项，分别是“文件”、“编辑”和“视图”，每个菜单项下面有对应的子菜单项。例如，在“文件”菜单下有“新建”和“打开”操作，点击这些菜单项会执行对应的函数。

接下来，使用 Menu.buildFromTemplate() 方法根据模板创建菜单，然后使用 Menu.setApplicationMenu() 设置为应用的菜单。

javascript
const menu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menu)

实际应用：

例如，如果我们正在开发一个文本编辑器，用户可能需要在菜单栏快速访问文件操作、编辑操作和视图设置等。通过上述方法，我们可以方便地添加这些功能到菜单栏，提升用户操作的便捷性和应用的整体用户体验。

以上就是在 Electron 中如何添加自定义菜单到 macOS 菜单栏的步骤。