需求
Chrome 插件开发-浏览器页面右键菜单选项设置。右键菜单指的是我们在浏览器页面里鼠标弹出来的菜单，我们可以在这个菜单里加入我们插件的功能选项，高端大气上档次。而且方便我们的增加新的功能。
比如我们需要实现，在页面上右键出现我们插件的自定义菜单。
比如这样
如何实现
1、需要申请权限 manifest.json
{
"permissions": ["contextMenus"]
}
background.js
const menuList = [
{
id: 'element-plus',
title: 'element-plus',
onclick: function () {
chrome.tabs.create({
url: 'https://element-plus.gitee.io/zh-CN/component/table-v2.html',
});
},
},
{
id: 'vue-api',
title: 'vue-api',
onclick: function () {
chrome.tabs.create({
url: 'https://cn.vuejs.org/api/',
});
},
},
];
// 批量创建菜单
chrome.runtime.onInstalled.addListener(function () {
menuList.forEach((item) => {
chrome.contextMenus.create({
id: item.id,
title: item.title,
contexts: ['page'],
});
});
});
// 实现点击事件监听
chrome.contextMenus.onClicked.addListener(function (info, tab) {
let selectItem = menuList.filter((item) => item.id === info.menuItemId)[0];
if (selectItem) {
selectItem.onclick(info, tab);
}
});
详细参数文档
create -help
integer Chrome.contextMenus.create(object createProperties, function callback)
创建一个新的右键菜单项。注意：如果在创建的过程中出现错误，会在回调函数触发后才能捕获到，错误详细信息保存在Chrome.extension.lastError中。
【参数】
createProperties ( object )
type ( optional enumerated string ["normal", "checkbox", "radio", "separator"] )
右键菜单项的类型。默认为“normal”。
title ( optional string )
右键菜单项的显示文字；除非为“separator”类型，否则此参数是必须的。如果类型为“selection”，您可以在字符串中使用%s显示选定的文本。例如，如果参数的值为 "Translate '%s' to Pig Latin"，而用户还选中了文本“cool”，那么显示在菜单中的将会是 "Translate 'cool' to Pig Latin"。
checked ( optional boolean )
Checkbox或者radio的初始状态：true代表选中，false代表未选中。在给定的radio中只能有一个处于选中状态。
contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )
右键菜单项将会在这个列表指定的上下文类型中显示。默认为“page”。
onclick ( optional function )
当菜单项被点击时触发的函数。
【参数】
info ( OnClickData )
右键菜单项被点击时相关的上下文信息。
tab ( Tab )
右键菜单项被点击时，当前标签的详细信息。
parentId ( optional integer )
右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单。
documentUrlPatterns ( optional array of string )
这使得右键菜单只在匹配此模式的url页面上生效（这个对框架也适用）。详细的匹配格式见：模式匹配页面。
targetUrlPatterns ( optional array of string )
类似于documentUrlPatterns，但是您可以针对img/audio/video标签的src属性和anchor标签的href做过滤。
enabled ( optional boolean )
启用或者禁用此菜单项，启用为true，禁用为false。默认为true。
callback ( optional function )
在创建完菜单项后触发。如果创建过程中有错误产生，其详细信息在Chrome.extension.lastError中。
插件右键菜单点击插件名跳转主页设置
① 核心代码演示 manifest.json 文件加上 homepage_url，当点击 name 时就会跳转到我们指定的地址了。
{
"name": "CE-Demo",
"homepage_url": "https://blog.share888.top/"
}
如何测试呢？我们需要重新加载一下谷歌插件，如何把鼠标放到插件图标上，然后右键，就会出现插件的名字，点击name就会跳转到指定的url地址去。
这样的好处就是，可以给我们的插件引流，比如，可以设置插件的官方网站地址，或者文档页面，有助于插件的推广。
★
公众号：干货食堂
如果本篇文章对你有帮助，希望麻烦您点赞，再看，转发三联下，您的支持是我最大的动力。
原文始发于微信公众号（干货食堂）：Chrome 插件开发-浏览器页面右键菜单选项设置
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/287007.html
