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

简介: 折腾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不费吹灰之力完成了这一切,现在,我们的插件正踏着稳健的步伐向前进发。

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


相关文章
|
26天前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
177 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
3月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
297 8
|
3月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
113 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
4月前
|
Web App开发 数据可视化 前端开发
Chrome插件实现问题之content-scripts能访问哪些Chrome API
Chrome插件实现问题之content-scripts能访问哪些Chrome API
|
4月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之在Manifest V2中,设置插件的图标要如何解决
Chrome插件实现问题之在Manifest V2中,设置插件的图标要如何解决
|
4月前
|
缓存 安全 Web App开发
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
|
4月前
|
Web App开发 存储 JavaScript
Chrome插件实现问题之Manifest V2切换MV3会带来什么问题,如何解决
Chrome插件实现问题之Manifest V2切换MV3会带来什么问题,如何解决
|
4月前
|
JavaScript 前端开发 API
Chrome插件实现问题之 content_script.js能做什么
Chrome插件实现问题之 content_script.js能做什么
|
3月前
|
Web App开发 人工智能 iOS开发
灵办AI助手Chrome插件全面评测:PC Web端的智能办公利器
《灵办AI助手:Mac OS下的高效办公利器》 灵办AI助手是一款专为提升工作效率而设计的浏览器插件,适用于Chrome、Edge等主流浏览器,在Mac OS系统中表现尤其出众。本文将深入评测其核心功能,包括网页翻译、AI对话、AI阅读及代码辅助等,展示如何在实际工作中运用这些功能来提升效率。此外,文中还提供了详细的安装与设置指南,帮助读者轻松上手这款办公神器。无论你是学生、职场人还是开发者,灵办AI助手都能成为你提高生产力的理想选择。
114 0