Open Chrome extension link within popup

Question

I am trying to create sub menus in a very simple Chrome extension within popup.html . I've been successful at creating links to open pages in a new tab using html. For instance:

<a class="two" href="https://chrome.google.com/webstore">
  <img width="16" height="16" src="webstore.png" />Chrome Web Store
</a>

I added the following event listener to popup.js to get this to work:

document.addEventListener('DOMContentLoaded', function () {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    (function () {
      var ln = links[i];
      var location = ln.href;
      ln.onclick = function () {
        chrome.tabs.create({active: true, url: location});
      };
    })();
  }
});

In order to minimize the number of links in popup.html , I would like to create a submenu system, where a user clicks on a link to open a new html document in the popup.

<a class="two" href="submenu.html">
  <img width="16" height="16" src="submenu.png" />Submenu
</a>

The popup will contain more links like the one to the Chrome Webstore in the first example. Of course, this opens submenu.html in a new tab, not within the Chrome extension popup. Is there an easy way to open a link within the popup, rather than in a new tab?

Thank you.

Answer 1

I think I answered my own question:

1. First add apply EventListener only when name="newtab"

    document.addEventListener('DOMContentLoaded', function () { var links = document.getElementsByName("newtab"); for (var i = 0; i < links.length; i++) { (function () { var ln = links[i]; var location = ln.href; ln.onclick = function () { chrome.tabs.create({active: true, url: location}); }; })(); } });` 

2. Add name="newtab" to each <a> where you want to open in a new tab.

3. For all other links, proceed normally; they will open in the popup.