javascript - Chrome 扩展程序上下文菜单创建多个子项并且仅在弹出窗口打开时有效

Question

我正在尝试在我的 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);
  }
});

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

Answer 1

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

How can I enable background capabilities for this?

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

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

How do I make sure it does not create those subitems, what is the cause of this?

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

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

Why does it only works while the popup is open?

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