需求
开发谷歌插件，想实现选中文本之后然后右键出现我们的自定义菜单的功能。
如何实现
manifest.json 文件需要如下修改
{
"manifest_version": 3,
"name": "笔记助手",
"version": "1.0",
"permissions": [
"contextMenus",
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"icons": {
"48": "icon.png"
}
}
background.js 文件：
// 设置上下文菜单项
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'saveNote', // 上下文菜单项的唯一标识符，一块身份牌
title: '将“%s”添加到笔记助手', // %s 代表选中的那块肉——用户选中的文本
contexts: ['selection'] // 只在用户捕获了文字的时候显示这个选项
});
});
// 监听上下文菜单项的点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'saveNote') {
// 找到选中的文字，藏在info.selectionText里
const selectedText = info.selectionText;
console.log(`选中的文本：“${selectedText}”`);
// 添加存储逻辑还早，但知道在哪儿加是个好开始
// ...
}
});
在上述代码中，chrome.contextMenus.create方法是用来创建一个新的上下文菜单项的。此方法接受一个参数对象，其中contexts字段指定了菜单项应该出现的上下文，也就是说，它定义了这个菜单项可以在什么情况下被显示。
contexts字段是一个字符串数组，允许你指定多种不同的上下文类型，这些类型定义菜单项何时应该出现。例如，当你选中了页面上的文本、图片、链接，或是在页面的不同部分点击右键时，都可以显示不同的菜单项。
以下是一些可能的contexts值：
-
“all”：在任何上下文中都显示菜单项。 -
“page”：当用户点击页面上的任何地方时显示。 -
“frame”：当用户在框架上点击时显示。 -
“selection”：只有当用户选择了页面上的文本时才显示。 -
“link”：当用户点击链接时显示。 -
“editable”：当用户点击输入字段时显示。 -
“image”：当用户点击图片时显示。 -
“video”：当用户点击视频时显示。 -
“audio”：当用户点击音频时显示。
对于“笔记助手”插件，我们使用了[“selection”]作为上下文，这意味着我们的上下文菜单项只会在用户选择了页面上的文本之后出现。这是非常适合添加笔记功能的，因为通常用户会先选择他们想要添加笔记的文本，然后通过上下文菜单来进行操作。
所以，contexts字段在chrome.contextMenus.create方法中起到了非常重要的限制与定位作用，它确保了菜单项只在合适的上下文中被触发，提供了用户友好和准确的交互方式。
运行/测试
完成后，重新加载插件，再打开网页，用鼠标像往常一样选择文本，右键，你将发现一个新的选项出现了。
原文始发于微信公众号（干货食堂）：Chrome 插件开发-怎么给右键菜单增加“选项”
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/288256.html
