如何让 chrome.contextMenus.onClicked.addListener 区分不同的上下文菜单 id？

Question

在为 Chrome 开发基于上下文菜单的扩展时，我遇到了这样一种情况，即在循环中调用 chrome.contextMenus.onClicked.addListener 会为每个子上下文菜单项累积添加操作。

因此，当单击子上下文菜单时，它会触发所有子上下文菜单的事件侦听器，而不是被单击的上下文菜单。

     var parent;
     chrome.runtime.onInstalled.addListener(() => {
        parent = chrome.contextMenus.create({"title": "CCM", "id":"CCM", "contexts":["selection"]});
     });


     Object.keys(msgs).forEach(function(key) {
        chrome.runtime.onInstalled.addListener(() => {
        var createCM = chrome.contextMenus.create(
            {"title": "subcontextmenu"+key, "id":"scm"+key, "parentId": parent, "contexts":["selection"]});
        }); 
        chrome.contextMenus.onClicked.addListener(function(info,tab){openAction(info,tab,JSON.stringify(msgs[key]['msg']));}
        );  
     });

在上面的示例中，msgs 是一个 JSON 对象，其中包含单击每个子上下文菜单时要显示的消息。此外，msgs JSON 上下文必然会动态变化。因此，我们无法调整 openAction 来硬编码数字并关联消息。

希望我的问题很清楚。消除这种困惑的任何帮助对我来说都会节省很多时间。

Answer 1

对 onInstalled 和 onClicked 使用一个侦听器（它在其参数中提供 menuItemId）。

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({title: 'CCM', id: 'CCM', contexts: ['selection']});
  Object.keys(msgs).forEach(key => {
    chrome.contextMenus.create({
      title: 'subcontextmenu' + key,
      id: 'scm' + key,
      parentId: 'CCM',
      contexts: ['selection'],
    });
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  openAction(info, tab, JSON.stringify(msgs[info.menuItemId].msg));
});

如何让 chrome.contextMenus.onClicked.addListener 区分不同的上下文菜单 id？

How to make chrome.contextMenus.onClicked.addListener distinguish for different context menu ids?

google-chrome-extension

addeventlistener

chrome-extension-manifest-v3

custom-contextmenu