将上下文菜单项添加到 Chrome 扩展程序的浏览器操作按钮 (Manifest v3)答案

【问题标题】：Add contextmenu items to a Chrome extension's browser action button (Manifest v3)将上下文菜单项添加到 Chrome 扩展程序的浏览器操作按钮 (Manifest v3)
【发布时间】：2021-12-03 02:23:36
【问题描述】：

我知道 manifest v2 的答案：Add contextmenu items to a Chrome extension's browser action button

在将清单从 v2 迁移到 v3 之前，它一直运行良好。

我现在的manifest.json：

{
  "manifest_version": 3,
  "version": "0.1.1",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "all_frames": false,
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["contextMenus"],
   ...
}

现在这不会向我的扩展程序的浏览器操作按钮添加上下文菜单项：

chrome.contextMenus.create({
  id: 'foo',
  title: 'first',
  contexts: ['browser_action'],
  onclick: function () {
    alert('first')
  }
})

我检查了'selection' 上下文是否正确地将上下文菜单添加到网页上的选定文本中。要从 v2 迁移到 v3，我需要做些什么吗？

【问题讨论】：

标签： google-chrome google-chrome-extension contextmenu chrome-extension-manifest-v3

【解决方案1】：

自己找到了解决方案。上下文应该是'action' 而不是'browser_action'。看起来onclick 属性已被弃用。所以，它应该是这样的：

chrome.contextMenus.create({
  id: 'foo',
  title: 'first',
  contexts: ['action']
})

function contextClick(info, tab) {
  const { menuItemId } = info

  if (menuItemId === 'foo') {
    // do something
  }
}

chrome.contextMenus.onClicked.addListener(contextClick)

【讨论】：