Chrome 扩展上下文菜单会创建多个子项，并且仅在弹出窗口打开时有效答案

【问题标题】：Chrome Extension Context Menu creates several Subitems & Only works when Popup is openChrome 扩展上下文菜单会创建多个子项，并且仅在弹出窗口打开时有效
【发布时间】：2016-12-06 20:27:41
【问题描述】：

我正在尝试在我的 chrome 扩展中实现上下文菜单，以便您可以选择文本并右键单击以进一步处理它。

菜单在那里，它部分有效，但是我有两个问题：

由于某种原因，每次右键单击某些文本时它都会创建子项，它在 2 和 5 之间变化。我猜这与扩展程序没有正确更新上下文菜单有关。

第二个问题是处理（因此下面的函数在点击时执行）仅在弹出窗口打开时起作用，否则它不会调用该函数。我的猜测是需要在后台做一些事情，目前所有的功能都位于popup.js中。

function contextMenuClick(selectionText) {

   chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
   var selection = selectionText;
   console.log(selectionText);
   //further processing
})
};

chrome.contextMenus.create({
  title: "Push: %s", 
  contexts:["selection"], 
  onclick: function(info, tab) { 
    contextMenuClick(info.selectionText);
  }
});

问题：我如何确保它不会创建这些子项，这是什么原因？为什么它只在弹出窗口打开时有效？如何为此启用后台功能？

【问题讨论】：

我建议您阅读Chrome extension architecture overview（也许可以阅读从那里链接的页面）。它包含整体架构信息，有助于您了解事物的一般组织/完成方式。
请edit 成为主题的问题：包括一个完整 minimal reproducible example 重复该问题。包括一个manifest.json，一些后台和内容脚本。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。

标签： javascript google-chrome-extension

【解决方案1】：

您的主要问题是您的 popup.js 中有问题中显示的代码，而不是 background script。这是属于您的后台脚本的代码。

如何为此启用后台功能？

您可以通过将background 键添加到您的manifest.json 来定义后台脚本。对于名为 background.js 的脚本文件：

"background": {
    "scripts": [
        "background.js"
    ]
},

我如何确保它不会创建这些子项，这是什么原因？

每次执行chrome.contextMenus.create() 时都会创建一个新的上下文菜单项。如果您创建多个条目，它们会自动放置在带有扩展名的下拉菜单中。鉴于此代码在您的 popup.js 中，您可能会在每次打开弹出窗口时创建一个新条目。您没有提供足够的代码让我们知道这实际上是正在发生的事情，但很有可能。

您确保不会通过仅创建单个上下文菜单项来创建右拉菜单和子项。执行此操作的最简单方法之一是在后台脚本中调用 chrome.contextMenus.create()，它将在其中执行一次，而不是每次打开弹出窗口时执行。

为什么它只在弹出窗口打开时才有效？

弹出窗口就像一个网页。如果没有显示，则不存在。因此，除非弹出窗口打开，否则您从上下文菜单 onclick 事件侦听器中调用的函数 contextMenuClick 不存在。如果不存在，则无法调用。

【讨论】：