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.

`` should work, but it'll replace the current popup document and all its scripts of course. — wOxxOm, Jul 23 '17 at 18:29
I guess the question is more like: How can i get it to ignore the previous event listener. If I remove it completely, the links I want to open in a new tab will not work. I imagine I would have to set `id="myLink"` within for `` but I'm not sure if that is the right approach. — Jesse Durst, Jul 24 '17 at 03:43
Simply add `target="_blank"` to the external links and remove the listener code altogether. — wOxxOm, Jul 24 '17 at 03:54
Thank you. I was having the same problem described [here](https://stackoverflow.com/questions/8915845/chrome-extension-open-a-link-from-popup-html-in-a-new-tab). I'm going to see if I can get it to only apply to links I want to open in a new tab and not to the `submenu.html` link. — Jesse Durst, Jul 24 '17 at 19:45

Jesse Durst · Answer 1 · 2017-07-30T18:20:47.373

I think I answered my own question:

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});
            };
        })();
    }
});`

Add name="newtab" to each <a> where you want to open in a new tab.
For all other links, proceed normally; they will open in the popup.

Open Chrome extension link within popup

1 Answers1