如何用Nextron（Electron）创建自定义菜单？加载错误及兼容问题咨询

核心结论 #

完全可以基于当前Nextron（Electron+Next.js+TypeScript）技术栈实现需求，无需改用原生JS/纯React重构项目。以下是针对性解决方案：

一、自定义Electron菜单兼容问题解决 #

1. 图标加载失败修复 #

你遇到的图标路径错误，本质是主进程与Next.js渲染进程的路径解析逻辑不同：主进程无法直接识别Next.js的public目录相对路径，必须通过Electron的API获取正确的应用根路径。

示例代码（在/main目录下的主进程文件中）：

import { app, Menu, BrowserWindow } from 'electron';
import path from 'path';

// 封装获取图标路径的方法
const getIconAbsolutePath = (iconFilename: string) => {
  // 通过app.getAppPath()定位项目根目录，再拼接public下的图标路径
  return path.join(app.getAppPath(), 'public', iconFilename);
};

// 创建自定义菜单
const setupCustomMenu = () => {
  const menuTemplate = [
    {
      label: '导航',
      submenu: [
        {
          label: '返回应用首页',
          icon: getIconAbsolutePath('home-icon.png'), // 使用绝对路径
          click: () => {
            // 触发主窗口跳转至Next.js首页
            const mainWindow = BrowserWindow.getAllWindows()[0];
            mainWindow.webContents.send('navigate-to-home');
          }
        }
      ]
    },
    {
      label: '本地存储',
      submenu: [
        {
          label: '添加到播放列表',
          click: () => {
            // 后续结合IPC实现存储逻辑
          }
        },
        {
          label: '添加到词典',
          click: () => {
            // 后续结合IPC实现存储逻辑
          }
        }
      ]
    }
  ];

  const customMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(customMenu);
};

// 在app ready后初始化菜单
app.whenReady().then(() => {
  setupCustomMenu();
  // ...其他窗口初始化逻辑
});

同时确保图标文件确实放在项目根目录的public文件夹下，文件名和代码中的一致。

2. 本地存储需求实现 #

通过Electron的IPC通信机制实现渲染进程（Next.js页面）与主进程的数据交互，主进程利用Node.js能力做本地持久化：

• 渲染进程（Next.js页面）：收集用户选择的YouTube链接/词汇，通过ipcRenderer发送给主进程
• 主进程：用node:fs模块写入本地文件，或使用更便捷的electron-store库做键值对存储

示例（渲染进程代码，需通过预加载脚本暴露IPC接口）：

// 预加载脚本/preload.ts
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronIPC', {
  saveToPlaylist: (videoUrl: string) => ipcRenderer.send('save-playlist-item', videoUrl),
  saveToDictionary: (word: string) => ipcRenderer.send('save-dictionary-item', word)
});

主进程监听存储事件：

// 主进程文件
import { ipcMain } from 'electron';
import Store from 'electron-store';

const store = new Store();

// 存储播放列表
ipcMain.on('save-playlist-item', (_, videoUrl) => {
  const playlist = store.get('playlist', []) as string[];
  if (!playlist.includes(videoUrl)) {
    playlist.push(videoUrl);
    store.set('playlist', playlist);
  }
});

// 存储词典
ipcMain.on('save-dictionary-item', (_, word) => {
  const dictionary = store.get('dictionary', []) as string[];
  if (!dictionary.includes(word)) {
    dictionary.push(word);
    store.set('dictionary', dictionary);
  }
});

二、外部网站的浮动按钮/侧边栏实现 #

由于目标网站禁止iframe嵌入，可通过Electron独立打开外部窗口，并在窗口加载完成后注入自定义JS/CSS添加交互控件：

1. 主进程打开外部窗口并注入脚本 #

// 主进程文件
import { BrowserWindow, ipcMain } from 'electron';
import path from 'path';

// 打开外部网站窗口
ipcMain.handle('open-external-site', async (_, url: string) => {
  const externalWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 安全起见禁用Node集成
      contextIsolation: true,
      preload: path.join(__dirname, 'preload-external.ts') // 外部窗口预加载脚本
    }
  });

  await externalWindow.loadURL(url);

  // 页面加载完成后注入浮动按钮
  externalWindow.webContents.on('did-finish-load', () => {
    externalWindow.webContents.executeJavaScript(`
      // 创建浮动返回按钮
      const floatButton = document.createElement('button');
      floatButton.textContent = '返回应用';
      floatButton.style.cssText = \`
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        background: #2563eb;
        color: white;
        border: none;
        border-radius: 8px;
        z-index: 99999;
        cursor: pointer;
        font-size: 14px;
      \`;
      floatButton.addEventListener('click', () => {
        window.externalIPC.backToMainApp();
      });
      document.body.appendChild(floatButton);
    `);
  });
});

2. 外部窗口预加载脚本 #

// /preload-external.ts
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('externalIPC', {
  backToMainApp: () => {
    ipcRenderer.send('activate-main-window');
  }
});

3. 主进程激活原应用窗口 #

// 主进程文件
ipcMain.on('activate-main-window', () => {
  const mainWindow = BrowserWindow.getAllWindows().find(win => win.isMainWindow());
  if (mainWindow) {
    mainWindow.show();
    mainWindow.focus();
    // 可选：触发主窗口跳转至首页
    mainWindow.webContents.send('navigate-to-home');
  }
});

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