谷歌插件开发 – 常见功能实现
设置图标
插件在工具栏上显示的图标，也由 action 对象指定，具体为 default_icon 字段。插件在管理页面、权限警示框等场景也会显示图标，可以通过 manifest 配置 icons 字段指定
{
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
右键菜单
方法一
这种写法的一级菜单默认就是插件的名字
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);
}
});
方法二
这种写法，可以自定义一级菜单
chrome.contextMenus.create({
title: '右键快捷菜单', //菜单的名称
id: '10', //一级菜单的id
contexts: ['page'], // 选中文字时用：selection
});
chrome.contextMenus.create({
title: '百度', //菜单的名称
id: '1101', //二级菜单的id
parentId: '10', //父级id
contexts: ['page'],
});
chrome.contextMenus.create 函数创建的参数解释
【参数】
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中。
插件右键菜单点击插件名跳转主页设置
{
"name": "CE-Demo",
"homepage_url": "https://blog.share888.top/"
}
原文始发于微信公众号（干货食堂）：谷歌插件开发 – 常见功能实现
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/289123.html
