上下文菜单
上下文菜单是弹出菜单，当在应用程序界面中的某处右键单击（或在 Windows 上按下 Shift + F10 等快捷键）时出现。
Electron 默认不会出现上下文菜单。但是，可以通过在 Menu 类的实例上使用 menu.popup 函数来创建上下文菜单。您需要手动监听特定的上下文菜单事件并设置 menu.popup 的触发器。
在 Electron 中，有两种方法可以监听上下文菜单事件：一种是通过主进程，使用 webContents；另一种是在渲染进程中，使用 contextmenu Web 事件。
使用 context-menu 事件（主进程）
每当在特定 WebContents 实例的边界内检测到右键单击时，就会触发 context-menu 事件。传递给监听器的 params 对象提供了大量属性，用于区分哪个类型的元素正在接收事件。
例如，如果要为链接提供上下文菜单，请检查 linkURL 参数。如果要检查可编辑元素（如 <textarea/>），请检查 isEditable 参数。
- main.js
- index.html
const { app, BrowserWindow, Menu } = require('electron/main')
function createWindow () {
const win = new BrowserWindow()
const menu = Menu.buildFromTemplate([
{ role: 'copy' },
{ role: 'cut' },
{ role: 'paste' },
{ role: 'selectall' }
])
win.webContents.on('context-menu', (_event, params) => {
// only show the context menu if the element is editable
if (params.isEditable) {
menu.popup()
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<textarea></textarea>
</body>
</html>
使用 contextmenu 事件（渲染进程）
或者，您也可以监听渲染进程中 DOM 元素上可用的 contextmenu 事件，并通过 IPC 调用 menu.popup 函数。
提示
要了解更多关于 Electron 中 IPC 的基础知识，请参阅 进程间通信 指南。
- main.js
- preload.js
- index.html
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain, Menu } = require('electron/main')
const path = require('node:path')
function createWindow () {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
const menu = Menu.buildFromTemplate([
{ role: 'copy' },
{ role: 'cut' },
{ role: 'paste' },
{ role: 'selectall' }
])
ipcMain.on('context-menu', (event) => {
menu.popup({
window: BrowserWindow.fromWebContents(event.sender)
})
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
const { ipcRenderer } = require('electron/renderer')
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.getElementById('editable')
textarea.addEventListener('contextmenu', (event) => {
event.preventDefault()
ipcRenderer.send('context-menu')
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<textarea id="editable"></textarea>
</body>
</html>
macOS 其他菜单项（例如，写作工具）
在 macOS 上，Electron 中的上下文菜单默认禁用了 写作工具、自动填充 和 服务 菜单项。要启用这些功能，请将与目标 webContents 关联的 WebFrameMain 传递给 menu.popup 中的 frame 参数。
将 Frame 与上下文菜单关联
const { BrowserWindow, Menu } = require('electron/main')
const menu = Menu.buildFromTemplate([{ role: 'editMenu' }])
const win = new BrowserWindow()
win.webContents.on('context-menu', (_event, params) => {
// Whether the context is editable.
if (params.isEditable) {
menu.popup({
frame: params.frame
})
}
})