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?

Any link in the popup would redirect the *popup itself* to your target URL, not the main page. However, external targets in the popup are not allowed, so nothing happens. You will have to use some `javascript` to add a click listener that executes `chrome.tabs.create`. — minj, Jan 12 '16 at 13:34

score 13 · Accepted Answer · answered Jan 14 '16 at 15:47

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

Siddharth · Answer 2 · 2016-01-12T07:16:06.840

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

Pure HTML Chrome Extension Link not working

2 Answers2