谷歌插件-右键菜单("manifest_version": 3)

564 阅读1分钟

效果图展示

image.png

manifest.json主要代码摘录

{
  "manifest_version": 3,  
  "background": { 
    "service_worker": "js/RightCick.js"
  },  
  "permissions": ["contextMenus"]
}

RightCick.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'],
});

其它说明

本插件主要是快捷打开一些网站,其它功用欢迎交流