如何使用electron-builder向macOS的Info.plist正确添加自定义协议？

1. 配置electron-builder打包参数 #

在项目的package.json中，找到build.mac.extendInfo配置项，添加macOS注册自定义协议所需的CFBundleURLTypes字段，配置示例如下：

{
  "name": "your-electron-app",
  "version": "1.0.0",
  "build": {
    "mac": {
      "target": "dmg",
      "extendInfo": {
        "CFBundleURLTypes": [
          {
            "CFBundleTypeRole": "Editor",
            "CFBundleURLName": "com.yourcompany.yourapp",
            "CFBundleURLSchemes": [
              "myapp"
            ]
          }
        ]
      }
    }
  }
}

参数说明：

• CFBundleTypeRole：固定填Editor即可，符合应用处理自定义协议跳转的权限要求
• CFBundleURLName：填写应用的唯一Bundle ID，保证全局唯一避免冲突
• CFBundleURLSchemes：数组内填写你自定义的协议名称，比如示例中的myapp，后续浏览器通过myapp://xxx形式的链接即可唤起应用

2. Electron主进程逻辑适配 #

打包后应用的协议注册会由配置自动完成，你只需要在主进程中添加唤起事件的监听逻辑即可：

const { app } = require('electron')
// 和你上面配置的协议名保持一致
const CUSTOM_PROTOCOL = 'myapp'

// 本地开发环境手动注册协议，打包后无需调用该方法
if (!app.isPackaged) {
  app.setAsDefaultProtocolClient(CUSTOM_PROTOCOL)
}

// 监听macOS下的应用唤起事件
app.on('open-url', (event, url) => {
  // 阻止默认行为
  event.preventDefault()
  // url为浏览器唤起时传入的完整链接，可自行解析参数处理对应逻辑，比如登录回调的token解析
  console.log('唤起链接：', url)
  // 业务逻辑示例：将参数传递给渲染进程处理登录
  // mainWindow.webContents.send('login-callback', parseUrlParams(url))
})

验证方式 #

打包安装应用后，直接在浏览器地址栏输入myapp://test回车，即可触发应用唤起，同时主进程会打印对应的唤起链接。 #

内容的提问来源于stack exchange，提问作者Mr. Robot