个性化阅读
专注于IT技术分析

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

本文概述

在Electron应用程序内部, 你将能够使用HTML, CSS和JavaScript创建上下文菜单, 但是如果我们想弄乱应用程序上的本机内容(例如复制文本, 选择所有文本或切换), 有时它们还不够用到全屏。如果要向使用操作系统本机界面的应用程序添加自定义上下文菜单, 则可以使用Electron上下文菜单模块来实现它。

在本文中, 我们将向你展示如何轻松实现和自定义Electron Application的本机上下文菜单。

1.安装Electron上下文菜单

Electron没有内置的上下文菜单。你应该自己处理。但这既繁琐又难以正确。该模块为你提供了一个不错的可扩展上下文菜单, 其中包括诸如文本的剪切/复制/粘贴, 图像的保存图像和链接的复制链接等项目。它还在开发时添加了”检查元素”菜单项, 以像在Chrome中一样在检查器中快速查看项目。你可以在主过程和渲染器过程中直接使用此模块。要安装此模块, 请打开终端, 切换到Electron项目的目录, 然后运行以下命令:

npm install electron-context-menu

这将在你的项目中安装该模块, 并允许你稍后在代码中使用require(‘electron-context-menu’)来使用它。有关此模块的更多信息, 请访问Github上的官方存储库。

2.了解上下文菜单的工作方式

上下文菜单基本上是可以通过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选项卡上输出信息:

自定义上下文菜单选项Electron

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"
        }, ], });

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

Electron上下文菜单,具有放大和缩小

2.3。自定义预定义行为标签

本地化所必需, 你可以覆盖上下文菜单的预定义操作上显示的文本, 例如西班牙语:

Electron框架西班牙语上下文菜单

可以通过上下文菜单的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属性中进行分配。为了完成本文, 我们建议你也阅读该模块的官方文档, 因为它提供了很多东西, 除了此处的基础知识之外, 我们没有涵盖其他所有内容, 因此请查看文档。

编码愉快!

赞(0)
未经允许不得转载:srcmini » 如何在Electron Framework中实现本机上下文菜单(带有检查元素)

评论 抢沙发

评论前必须登录!