上下文菜单项
此用户界面选项向浏览器的右键菜单添加一个或多个项。右键菜单是用户在网页上右键单击时出现的菜单。标签页和书签也可以有右键菜单，可以通过 menus API 访问。
您可以使用此选项来公开与特定浏览器或网页上下文相关的特性。例如，您可以显示当用户单击图像时打开图形编辑器的特性，或者当页面部分内容被选中时提供保存页面内容的特性。您可以向菜单添加纯文本菜单项、复选框项、单选按钮组和分隔符。一旦使用 menus.create 添加了右键菜单项，它就会显示在所有浏览器标签页中，但您可以通过使用 menus.remove 删除它来隐藏它。
支持的上下文的完整列表可在 menus.ContextType 中找到，其中包含网页以外的上下文，例如浏览器 UI 中的书签项。例如，“在容器标签页中打开书签”扩展程序添加了一个菜单项，允许用户在新容器标签页中打开书签 URL。
您还可以使用 menus.overrideContext 来覆盖扩展程序页面（如自定义侧边栏和弹出窗口）中显示的右键菜单，以便使用标签页或书签右键菜单代替默认的右键菜单。当您的扩展程序提供自定义的标签页或书签表示时，这是一个有用的方法。菜单会自动包含已定义标签页或书签右键菜单项的任何其他扩展程序的菜单项。您可以选择是否包含默认的右键菜单项。隐藏默认项可以让扩展程序完全控制渲染的原生右键菜单中显示的项，如下图所示的 Tree Style Tab 扩展程序。
指定右键菜单项
您可以使用 contextMenus API 以编程方式管理右键菜单项。但是，您需要在 manifest.json 中请求 contextMenus 权限才能利用该 API。
"permissions": ["contextMenus"]
然后，您可以在扩展程序的后台脚本中添加（以及更新或删除）右键菜单项。要创建菜单项，您需要指定其 ID、标题以及它应该出现在哪些上下文中。
browser.contextMenus.create(
{
id: "log-selection",
title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
contexts: ["selection"],
},
onCreated,
);
然后，您的扩展程序会监听菜单项的点击事件。关于点击项、发生点击的上下文以及发生点击的标签页的详细信息可以用来调用相应的扩展程序功能。
browser.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "log-selection":
console.log(info.selectionText);
break;
// …
}
});
图标
有关如何创建用于右键菜单的图标的详细信息，请参阅 Acorn Design System 文档中的 图标设计。
示例
GitHub 上的 webextensions-examples 存储库包含两个实现右键菜单项的扩展示例：
- menu-demo 向浏览器右键菜单添加了多个项。
- context-menu-copy-link-with-types 向链接添加了一个右键菜单项，该项将链接 URL 以纯文本和富 HTML 格式复制到剪贴板。