如何将Electron应用设置为Windows 10默认网页浏览器

嘿，我之前刚好折腾过这个需求，把踩过的坑和可行的步骤给你梳理下——核心是利用Windows的注册表关联机制，结合Electron的API和打包配置来实现：

一、核心原理 #

Windows通过注册表管理默认应用的协议（比如HTTP/HTTPS）和文件类型（比如.html）关联。我们需要让Electron应用在注册表中注册对应的关联项，同时确保应用能处理外部触发的链接/文件打开请求。

二、具体实现步骤 #

1. 配置Electron应用的协议与文件关联（主进程代码） #

在你的主进程文件（比如main.js）中，调用Electron的API注册协议处理，同时处理外部触发的请求：

const { app, BrowserWindow } = require('electron');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      preload: './preload.js' // 推荐用preload桥接渲染进程和主进程
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  // 注册HTTP和HTTPS协议关联
  app.setAsDefaultProtocolClient('http');
  app.setAsDefaultProtocolClient('https');

  // 处理应用已运行时的外部链接触发事件
  app.on('open-url', (event, url) => {
    event.preventDefault();
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
      mainWindow.loadURL(url);
    }
  });

  // 处理外部HTML文件打开事件
  app.on('open-file', (event, filePath) => {
    event.preventDefault();
    const fileUrl = `file://${filePath.replace(/\\/g, '/')}`;
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
      mainWindow.loadURL(fileUrl);
    }
  });
});

// 处理Windows多实例问题，确保只有一个实例接收外部请求
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
} else {
  app.on('second-instance', (event, commandLine) => {
    const target = commandLine.find(arg => 
      arg.startsWith('http://') || arg.startsWith('https://') || arg.endsWith('.html')
    );
    if (target && mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
      if (target.startsWith('http')) {
        mainWindow.loadURL(target);
      } else {
        const fileUrl = `file://${target.replace(/\\/g, '/')}`;
        mainWindow.loadURL(fileUrl);
      }
    }
  });
}

2. 打包工具配置（以electron-builder为例） #

打包时必须配置协议和文件关联，同时申请管理员权限（修改注册表需要）。在package.json的build字段中添加：

{
  "name": "your-custom-browser",
  "version": "1.0.0",
  "build": {
    "win": {
      "target": "nsis", // NSIS安装包支持自动配置注册表
      "requestedExecutionLevel": "highestAvailable" // 触发UAC获取必要权限
    },
    "protocols": [
      {
        "name": "HTTP Protocol",
        "schemes": ["http"],
        "role": "Viewer"
      },
      {
        "name": "HTTPS Protocol",
        "schemes": ["https"],
        "role": "Viewer"
      }
    ],
    "fileAssociations": [
      {
        "ext": ["html", "htm"],
        "name": "HTML Document",
        "role": "Viewer"
      }
    ]
  }
}

3. 引导用户确认默认设置 #

即使注册表配置正确，Windows可能仍需要用户手动确认默认应用。你可以在应用内添加一个按钮，引导用户打开Windows默认设置页面：

// 在渲染进程的按钮点击事件中（通过preload桥接）
document.getElementById('set-default-btn').addEventListener('click', () => {
  window.electronAPI.openDefaultAppsSettings();
});

// 在preload.js中暴露API
const { shell, contextBridge } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  openDefaultAppsSettings: () => shell.openExternal('ms-settings:defaultapps')
});

三、关键注意事项 #

• 管理员权限：修改系统注册表必须有管理员权限，requestedExecutionLevel配置是核心，否则协议关联会静默失败。
• 打包后测试：开发环境下的Electron无法完成注册表关联，必须打包成exe安装包后测试效果。
• 多实例处理：用requestSingleInstanceLock确保只有一个应用实例接收外部请求，避免重复打开窗口。
• 卸载清理：electron-builder会自动在卸载时清理注册表的关联项，无需手动处理。

内容的提问来源于stack exchange，提问作者dav