如何在 window 中应用电子上下文菜单？

Question

我使用命令安装了 electron-context-menu

npm i electron-context-menu

然后我使用了这个 site

上的代码

const {app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');
    
contextMenu({
    showSaveImageAs: true
});
    
let mainWindow;

(async () => {
    await app.whenReady();
    
    mainWindow = new BrowserWindow({
        webPreferences: {
            spellcheck: true
        }
    });
})();

但是当我右键单击 window 时，没有出现带有项目的上下文菜单。

白色window只出现：

我应该怎么做才能让 ContextMeu 出现？

Answer 1

您不需要库来执行此操作（在我看来，您不应该这样做）。 electron API 已经给你一个 context-menu 可以使用了。如果您已经在使用 contextBridge，只需按照 electron site steps.

main.ts

// ...
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup(BrowserWindow.fromWebContents(event.sender))
})

renderer.ts

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})

ipcRenderer.on('context-menu-command', (e, command) => {
  // What it will do when this options is click it
})

如果需要，您也可以为每个操作创建一个 preload 另外，如果你想要浏览器默认的上下文菜单，.

如何在 window 中应用电子上下文菜单？

how to apply electron-context-menu in window?

contextmenu

electron