Chrome Extension opens up all the specified links in contextMenus regardless of which option I am choosing. How can I avoid this?

Question

Good morning, I have been trying to fix this error myself but I cannot fully comprehend what it is going wrong yet. In summary:

• I have made a Chrome Extension that I would like to use kind of like a Bookmarks bar. The links within the extension will be supplied by myself. They all are URLs hosted online.
• In order for them to be easy to find, I have categorically organised them using the Chrome's contextMenus feature.
• Whenever I click one of the sections in the menu, instead of only opening the selected one it opens up ALL of them.

manifest.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');
};

Any ideas in regards of what you think it is wrong would be really appreciated!

UPDATE - background.JS now looks like this:**

// 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);

These changes enable Chrome to run the extension with no errors, however, it will not open a link at all. I am currently still working through this and I really appreciate the time of the users that suggested changes.

If you notice something that looks strange, please do let me know!

Answer 1

You shouldn't have multiple listeners. They're all being run when you select from the menu, because there's nothing that attaches them to specific menu items.

Just define one listener, and it should check which menu item it's being run for and open the appropriate page. You'll need to add an id property to the menu items so you can dispatch on this.

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);