javascript - 无论我选择哪个选项，Chrome 扩展都会打开 contextMenus 中的所有指定链接。我怎样才能避免这种情况？

Question

早上好，我一直在尝试自己修复这个错误，但我还不能完全理解它出了什么问题。总结:

• 我制作了一个 Chrome 扩展程序，我想将其用作书签栏。扩展中的链接将由我自己提供。它们都是在线托管的 URL。
• 为了便于查找，我使用 Chrome 的上下文菜单功能对它们进行了明确的组织。
• 每当我点击菜单中的某个部分时，它不会只打开所选部分，而是会打开所有部分。

list .JSON:

{
"name": "My Chrome Extension",
"description": "Bookmarks in a Chrome Extension",
"version": "0.1",
"permissions": ["contextMenus","tabs"],
"background": {
"scripts": ["background.js"]
 },
"manifest_version": 2
}

background.JS:

// A generic onclick callback function.
function genericOnClick(info, tab) {
  console.log("item " + info.menuItemId + " was clicked");
  console.log("info: " + JSON.stringify(info));
  console.log("tab: " + JSON.stringify(tab));
}

// Create one test item for each context type.
var contexts = ["page", "selection", "link", "editable", "image", "video",
  "audio"
];
for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "Quick Access";
  var id = chrome.contextMenus.create({
    "title": title,
    "contexts": [context],
    "onclick": genericOnClick
  });
  console.log("'" + context + "' item:" + id);
}

// Create a parent item and two children.
var parent1 = chrome.contextMenus.create({
  "title": "Essentials"
});
var child1 = chrome.contextMenus.create({
  "title": "Google",
  "parentId": parent1,
  "onclick": genericOnClick
});
chrome.contextMenus.onClicked.addListener(onClickHandlerGoogle);

function onClickHandlerGoogle(info, tab) {
  var urlgoogle = "https://www.google.com/";
  window.open(urlgoogle, '_blank');
};

var child2 = chrome.contextMenus.create({
  "title": "CNN",
  "parentId": parent1,
  "onclick": genericOnClick
});
chrome.contextMenus.onClicked.addListener(onClickHandlerCNN);

function onClickHandlerCNN(info, tab) {
  var urlCNN = "https://www.cnn.com";
  window.open(urlCNN, '_blank');
};

对于您认为错误的任何想法，我们将不胜感激!

更新 - background.JS 现在看起来像这样:**

// A generic onclick callback function.
function genericOnClick(info, tab) {
  console.log("item " + info.menuItemId + " was clicked");
  console.log("info: " + JSON.stringify(info));
  console.log("tab: " + JSON.stringify(tab));
}

// Create one test item for each context type.
var contexts = ["page","selection","link","editable","image","video",
            "audio"];
for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "Quick Access";
  var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                   "onclick": genericOnClick});
  console.log("'" + context + "' item:" + id);
}

// Create a parent item and two children.
var parent1 = chrome.contextMenus.create({"title": "Essentials"});
var child1 = chrome.contextMenus.create({
    "id": "google",
    "title": "Google",
    "parentId": parent1,
    "onclick": genericOnClick
});
var child2 = chrome.contextMenus.create({
    "id": "cnn",
    "title": "CNN",
    "parentId": parent1,
    "onclick": genericOnClick
});

function clickHandler(info, tab) {
    var url;
    switch(info.id) {
        case "google":
            url = "https://www.google.com";
            break;
        case "cnn":
            url = "https://www.cnn.com";
            break;
    }
    if (url) {
        window.open(url, "_blank");
    }
}
chrome.contextMenus.onClicked.addListener(clickHandler);

这些更改使 Chrome 能够无错误地运行扩展程序，但是，它根本不会打开链接。我目前仍在努力解决这个问题，我非常感谢用户提出更改建议的时间。

如果您发现一些看起来很奇怪的东西，请务必告诉我!

Answer 1

你不应该有多个听众。当您从菜单中选择时，它们都会运行，因为没有任何东西可以将它们附加到特定的菜单项。

只需定义一个监听器，它就会检查正在为哪个菜单项运行并打开相应的页面。您需要向菜单项添加一个 id 属性，以便您可以对此进行调度。

var child1 = chrome.contextMenus.create({
  "id": "google",
  "title": "Google",
  "parentId": parent1,
  "onclick": genericOnClick
});
var child2 = chrome.contextMenus.create({
  "id": "cnn",
  "title": "CNN",
  "parentId": parent1,
  "onclick": genericOnClick
});

function clickHandler(info, tab) {
    var url;
    switch(info.menuItemId) {
    case "google":
        url = "https://www.google.com";
        break;
    case "cnn":
        url = "https://www.cnn.com";
        break;
  }
  if (url) {
      window.open(url, "_blank");
  }
}
chrome.contextMenus.onClicked.addListener(clickHandler);