Pure HTML Chrome Extension Link not working

Question

I am trying to create a very basic Chrome extension, which would contain nothing but HTML & CSS. Basically, the extension should just provide a couple of links for me to click. Everything is static, no JavaScript needed.

I have one problem, though. When I load my extension and click the link, it doesn't take me anywhere. When I right-click it and open it in a new tab, everything works fine. I know JavaScript, but I don't intend to create anything more complicated, so consider me a novice. Why aren't the links working?

Answer 1

A pure HTML solution without any JS would be simply using target:

<a href="http://www.example.com" target="_blank">Link</a>

Note that it will make the popup lose focus and close. If you need to keep it open, see this question (but it will require JS).

Answer 2

In your popup.js.

$(document).ready(function(){
   $('body').on('click', 'a', function(){
     chrome.tabs.create({url: $(this).attr('href')});
     return false;
   });
});

I have used jquery . You can write it in pure javascript also:

document.getElementsByTagName("BODY")[0].onclick = function(e) {
  e = e || event      
  var target = e.target || e.srcElement    
  if (target.nodeName != 'A') return        
  var href = target.href    
  chrome.tabs.create({url: href});
  return false;   
}