如何在MV3版Chrome扩展的图标上添加含分享链接的上下文菜单？

效果参考 #

核心差异说明 #

Manifest V3 不再支持MV2版本的background page方案，上下文菜单的注册和事件监听都需要在service worker中实现，同时需要在配置文件中声明对应权限。

步骤1：配置manifest.json #

在配置文件中添加contextMenus权限，同时指定后台service worker文件：

{
  "manifest_version": 3,
  "name": "快捷分享工具",
  "version": "1.0.0",
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "contextMenus"
  ]
}

步骤2：编写后台service worker逻辑 #

在background.js中完成菜单注册和点击事件监听：

// 扩展安装时注册菜单，避免重复注册报错
chrome.runtime.onInstalled.addListener(() => {
  // 注册分享到Facebook菜单项
  chrome.contextMenus.create({
    id: "share_fb",
    title: "分享到Facebook",
    contexts: ["action"]
  });
  // 注册分享到Twitter菜单项
  chrome.contextMenus.create({
    id: "share_twitter",
    title: "分享到Twitter",
    contexts: ["action"]
  });
  // 注册跳转Facebook主页菜单项
  chrome.contextMenus.create({
    id: "open_fb_home",
    title: "打开Facebook主页",
    contexts: ["action"]
  });
});

// 监听菜单点击事件
chrome.contextMenus.onClicked.addListener((menuInfo) => {
  switch(menuInfo.menuItemId) {
    case "share_fb":
      // 自行替换实际需要分享的页面链接参数
      chrome.tabs.create({url: "https://www.facebook.com/sharer/sharer.php?u=YOUR_SHARE_URL"});
      break;
    case "share_twitter":
      // 自行替换实际需要分享的链接和文案参数
      chrome.tabs.create({url: "https://twitter.com/intent/tweet?url=YOUR_SHARE_URL&text=YOUR_SHARE_TEXT"});
      break;
    case "open_fb_home":
      chrome.tabs.create({url: "https://www.facebook.com/"});
      break;
  }
});

注意事项 #

• contexts参数指定为action，即可实现仅右键点击扩展图标时显示对应菜单，对应MV2版本的browser_action上下文配置
• 不要反复调用contextMenus.create注册相同ID的菜单，否则会抛出重复注册的错误
• 如果需要实现获取当前页面地址作为分享链接的需求，可以在点击事件中调用chrome.tabs.query获取当前激活标签页的url参数

内容的提问来源于stack exchange，提问作者AGamePlayer