Electron中如何实现自定义URL与本地HTML文件的关联

Electron 实现类似 chrome://settings、about:config 这类自定义特殊URL映射本地HTML，有两种常用的可落地方案：

方案一：注册自定义协议（推荐，无路径跳转问题） #

该方案通过Electron内置的protocol模块注册专属协议，所有匹配该协议的请求都会被拦截并映射到本地静态资源，地址栏会保留自定义URL样式。

实现步骤： #

• 第一步：在app初始化完成前，注册自定义协议的权限，避免后续出现跨域、权限不足问题

const { app, protocol, net } = require('electron')
const path = require('path')

// 必须在 app.whenReady() 触发前执行
protocol.registerSchemesAsPrivileged([
  {
    scheme: 'chrome', // 可替换为你需要的协议名，比如about、app等
    privileges: {
      secure: true,
      standard: true,
      supportFetchAPI: true,
      corsEnabled: true
    }
  }
])

• 第二步：app就绪后注册协议的请求处理逻辑，映射到本地文件

app.whenReady().then(() => {
  protocol.handle('chrome', (request) => {
    // 解析请求路径 比如chrome://settings 拿到路径部分为settings
    const requestPath = new URL(request.url).hostname
    // 本地HTML文件存放目录，自行调整
    const localHtmlDir = path.join(__dirname, 'static-pages')
    // 映射本地文件，默认找不到的话返回404页面即可
    const targetFile = path.join(localHtmlDir, `${requestPath}.html`)
    return net.fetch(`file://${targetFile}`)
  })
})

配置完成后，用户输入chrome://settings就会直接加载本地static-pages/settings.html文件，地址栏不会跳转变更。

方案二：拦截导航请求（适合小批量自定义URL场景） #

如果你的自定义URL数量不多，可以直接拦截所有页面导航请求，匹配到预设URL时直接加载本地文件即可。

const { BrowserWindow } = require('electron')
const path = require('path')

// 自定义URL和本地文件的映射表
const customUrlMap = {
  'chrome://settings': path.join(__dirname, 'pages/settings.html'),
  'about:config': path.join(__dirname, 'pages/config.html')
}

// 创建浏览器窗口时绑定拦截事件
const createWindow = () => {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 })
  mainWindow.webContents.on('will-navigate', (event, navigationUrl) => {
    if (customUrlMap[navigationUrl]) {
      // 阻止默认跳转逻辑
      event.preventDefault()
      // 加载本地HTML文件
      mainWindow.loadFile(customUrlMap[navigationUrl])
      // 如果需要保留地址栏显示自定义URL，可以执行JS修改地址栏展示值
      // mainWindow.webContents.executeJavaScript(`document.querySelector('#address-input').value = '${navigationUrl}'`)
    }
  })
}

注意：该方案默认使用loadFile加载本地文件后，地址栏会显示本地文件的file://路径，需要自行修改地址栏的展示内容适配需求。

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