如何在Electron Framework中实现本机上下文菜单(带有检查元素) _Framework

本文概述

1.安装Electron上下文菜单
2.了解上下文菜单的工作方式

在Electron应用程序内部, 你将能够使用HTML, CSS和JavaScript创建上下文菜单, 但是如果我们想弄乱应用程序上的本机内容(例如复制文本, 选择所有文本或切换), 有时它们还不够用到全屏。如果要向使用操作系统本机界面的应用程序添加自定义上下文菜单, 则可以使用Electron上下文菜单模块来实现它。
在本文中, 我们将向你展示如何轻松实现和自定义Electron Application的本机上下文菜单。
1.安装Electron上下文菜单 Electron没有内置的上下文菜单。你应该自己处理。但这既繁琐又难以正确。该模块为你提供了一个不错的可扩展上下文菜单, 其中包括诸如文本的剪切/复制/粘贴, 图像的保存图像和链接的复制链接等项目。它还在开发时添加了” 检查元素” 菜单项, 以像在Chrome中一样在检查器中快速查看项目。你可以在主过程和渲染器过程中直接使用此模块。要安装此模块, 请打开终端, 切换到Electron项目的目录, 然后运行以下命令：

npm install electron-context-menu

这将在你的项目中安装该模块, 并允许你稍后在代码中使用require(‘ electron-context-menu’ )来使用它。有关此模块的更多信息, 请访问Github上的官方存储库。
2.了解上下文菜单的工作方式 【如何在Electron Framework中实现本机上下文菜单(带有检查元素)】上下文菜单基本上是可以通过Electron上下文菜单来实现的功能。该函数将带有API支持的选项的对象作为第一个参数(此处有更多信息)。在主过程中, 可以自定义上下文菜单：

// ./main.js const {app, BrowserWindow} = require('electron'); const contextMenu = require('electron-context-menu'); // Add an item to the context menu that appears only when you click on an image contextMenu({ prepend: (params, browserWindow) => [{ label: 'Rainbow', // Only show it when right-clicking images visible: params.mediaType === 'image' }] }); // Your code that starts a new application let win; (async () => { await app.whenReady(); win = new BrowserWindow(); })();

或直接在渲染器过程中：

< !DOCTYPE html> < html> < head> < meta charset="UTF-8"> < title> Hello World!< /title> < /head> < body> < h1> Hello World!< /h1> < !-- All of the Node.js APIs are available in this renderer process. --> We are using Node.js < script> document.write(process.versions.node)< /script> , Chromium < script> document.write(process.versions.chrome)< /script> , and Electron < script> document.write(process.versions.electron)< /script> .< script> const contextMenu = require('electron-context-menu'); // This code adds 2 new items to the context menu to zoom in the window (in and out) // Read other steps for more information contextMenu({ prepend: (params, browserWindow) => [ { role: "zoomIn" }, { role: "zoomOut" }, ], }); < /script> < /body> < /html>

2.1。使用自定义行为将项目添加到上下文菜单
如果要在项目中添加执行自定义JavaScript函数的项目, 则需要检查Electron的MenuItem类的文档, 因为基本上这是你需要在上下文菜单之前或之后添加的对象。你可以使用自定义操作将新项目添加到上下文菜单, 将对象添加到上下文菜单的prepend / append数组中, 该对象至少具有标签和当用户单击新选项时执行的click回调：

const contextMenu = require('electron-context-menu'); contextMenu({ prepend: (params, browserWindow) => [ { label: 'Destroy Atomic Bombs', click: (menuItem, browserWindow, event) => { // Note that the alert function is only avaialble in the renderer process //alert("You destroyed all the atomic bombs in the world, thanks :3")// If executed from the main process, the console log function will appear in the terminal, not in the developer tools console.log("You destroyed all the atomic bombs in the world, thanks :3") } } ] });

请注意, 先前的代码是在渲染器进程中执行的, 因此console.log函数将在开发人员工具的console选项卡上输出信息：

文章图片
2.2。使用预定义的行为将项目添加到上下文菜单
Electron上下文菜单上的预定义行为旨在执行浏览器级别的功能, 例如最小化窗口, 关闭窗口, 缩放窗口, 选择所有文本等。这可以通过MenuItem的role属性进行分配。最好为与标准角色匹配的任何菜单项指定角色, 而不是尝试在单击功能中手动实现该行为, 因此内置角色行为将提供最佳的本机体验。标签和加速器值在使用角色时是可选的, 并且将默认使用每个平台的适当值。每个菜单项都必须具有角色, 标签, 或者在分隔符的情况下必须具有类型。角色属性可以具有以下值：

撤消
重做
切
复制
糊
pasteAndMatchStyle
全选
删除
最小化-最小化当前窗口。
关闭-关闭当前窗口。
退出-退出应用程序。
重新加载-重新加载当前窗口。
forceReload-重新加载当前窗口, 忽略缓存。
toggleDevTools-在当前窗口中切换开发人员工具。
toggleFullScreen-在当前窗口上切换全屏模式。
resetZoom-将焦点页面的缩放级别重置为原始大小。
zoomIn-将焦点页面放大10％。
zoomOut-将焦点页面缩小10％。
editMenu-整个默认的” 编辑” 菜单(撤消, 复制等)。
windowMenu-整个默认的” 窗口” 菜单(最小化, 关闭等)。

以下附加角色在macOS上可用：

关于-映射到orderFrontStandardAboutPanel操作。
hide-映射到hide操作。
hideOthers-映射到hideOtherApplications操作。
取消隐藏-映射到unhideAllApplications操作。
startSpeaking-映射到startSpeaking操作。
stopSpeaking-映射到stopSpeaking操作。
front-映射到arrangeInFront操作。
zoom-映射到performZoom操作。
toggleTabBar-映射到toggleTabBar操作。
selectNextTab-映射到selectNextTab操作。
selectPreviousTab-映射到selectPreviousTab操作。
mergeAllWindows-映射到mergeAllWindows操作。
moveTabToNewWindow-映射到moveTabToNewWindow操作。
window-子菜单是” 窗口” 菜单。
help-子菜单是” 帮助” 菜单。
服务-子菜单是” 服务” 菜单。
最近的文档-子菜单是” 打开最近的” 菜单。
clearRecentDocuments-映射到clearRecentDocuments操作。

在macOS上指定角色时, 标签和加速器是唯一会影响菜单项的选项。所有其他选项将被忽略。小写的角色, 例如toggledevtools, 仍然受支持。 MacOS托盘中的顶级菜单项未启用和可见性属性。例如, 要将2个新选项添加??到上下文菜单中以允许用户放大和缩小, 我们可以这样添加它们：

contextMenu({ prepend: (params, browserWindow) => [ { role: "zoomIn" // If you want to change the label "Zoom In" // label: "Custom Zoom In Text" }, { role: "zoomOut" // If you want to change the label "Zoom Out" // label: "Custom Zoom Out Text" }, ], });

这将生成以下上下文菜单：

文章图片
2.3。自定义预定义行为标签
本地化所必需, 你可以覆盖上下文菜单的预定义操作上显示的文本, 例如西班牙语：

文章图片
可以通过上下文菜单的labels属性覆盖这些标签, 如下所示：

contextMenu({ // Change the labels of the predefined context menu // e.g Cut, Copy, Paste labels: { cut: 'Custom Cut Text', copy: 'Custom Copy Text', paste: 'Custom Paste Text', save: 'Custom Save Image Text', saveImageAs: 'Custom Save Image As… Text', copyLink: 'Custom Copy Link Text', copyImageAddress: 'Custom Copy Image Address Text', inspect: 'Custom Inspect Element Text' } });

请注意, 具有预定义行为的项目标签需要在分配期间进行分配, 而不是在上下文菜单的labels属性中进行分配。为了完成本文, 我们建议你也阅读该模块的官方文档, 因为它提供了很多东西, 除了此处的基础知识之外, 我们没有涵盖其他所有内容, 因此请查看文档。
编码愉快！