折腾Chrome 插件，怎么给右键菜单增加“选项”？

折腾Chrome插件不必感到头大，尤其是当我们想要增强用户与网页的互动时。这一章，我们就来聊聊如何为我们的“智能笔记”插件添加一个实用的小魔术——在右键菜单上添加一个“选项”，从而让用户能够不费吹灰之力地将所选文本加入到他们的笔记中。

manifest.json 更新

让我们先从manifest.json着手，给文件添上contextMenus的味道，并且为上下文菜单项设置适当的调味料。

{
  "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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

background.js 更新：

紧接着，让我们在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}”`);
    
    // 添加存储逻辑还早，但知道在哪儿加是个好开始
    // ...
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在上述代码中，chrome.contextMenus.create方法是用来创建一个新的上下文菜单项的。此方法接受一个参数对象，其中contexts字段指定了菜单项应该出现的上下文，也就是说，它定义了这个菜单项可以在什么情况下被显示。

contexts字段是一个字符串数组，允许你指定多种不同的上下文类型，这些类型定义菜单项何时应该出现。例如，当你选中了页面上的文本、图片、链接，或是在页面的不同部分点击右键时，都可以显示不同的菜单项。

以下是一些可能的contexts值：

• "all"：在任何上下文中都显示菜单项。
• "page"：当用户点击页面上的任何地方时显示。
• "frame"：当用户在框架上点击时显示。
• "selection"：只有当用户选择了页面上的文本时才显示。
• "link"：当用户点击链接时显示。
• "editable"：当用户点击输入字段时显示。
• "image"：当用户点击图片时显示。
• "video"：当用户点击视频时显示。
• "audio"：当用户点击音频时显示。

对于“智能笔记”插件，我们使用了["selection"]作为上下文，这意味着我们的上下文菜单项只会在用户选择了页面上的文本之后出现。这是非常适合添加笔记功能的，因为通常用户会先选择他们想要添加笔记的文本，然后通过上下文菜单来进行操作。

所以，contexts字段在chrome.contextMenus.create方法中起到了非常重要的限制与定位作用，它确保了菜单项只在合适的上下文中被触发，提供了用户友好和准确的交互方式。

运行/测试

完成后，别忘了重启插件，给它点时间重新拾起刚才的任务。再打开网页，用鼠标像往常一样选择文本，右键，你将发现一个新的选项“将**添加到智能笔记”在那神秘地出现了。

就这样，你的Chrome插件多了一点魔法，上下文菜单得到了新伙伴。用户只需轻轻一点，选中的文本便跃入笔记之中。我们利用chrome.contextMenusAPI不费吹灰之力完成了这一切，现在，我们的插件正踏着稳健的步伐向前进发。

下一章，我们将拓展我们的插件魔法库，通过内容脚本来处理用户的标注行为，并在网页上妙手偶得，展示这些标记以供世人瞻仰。