折腾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"
  }
}
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}"`);
    
    // 添加存储逻辑还早,但知道在哪儿加是个好开始
    // ...
  }
});

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

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

以下是一些可能的contexts值:

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

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

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

运行/测试

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

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

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

相关推荐
weixin_4723394638 分钟前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
枯萎穿心攻击1 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue3 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762903 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
典学长编程4 小时前
Linux操作系统从入门到精通!第二天(命令行)
linux·运维·chrome
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端