Chrome extension navigate to URL

Question

I am trying to make a Chrome extension in which I already have an HTML file with several anchors and am trying to make Chrome open a new tab with that URL when clicked.

For that purpose, I have "permissions": ["tabs"] in my manifest.json and

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': event.target.href})
})

in my JS file; but that is just not working. What could I be missing?

Regards, mto

Answer 1

This is how I usually do it (example: Clicking on a link in popup.html)

popup.html

<a href="http://whereever.you.go.com/whatever.html" class="clickme">Click</a>

popup.js

$('.clickme').click(function() {
   chrome.tabs.create({url: $(this).attr('href')});
});

or vanilla Javascript (every element with class clickme is an anchor)

window.addEventListener('load', function() {
   var theAnchors = document.getElementsByClassName('clickme');
   for(i=0, len=theAnchors.length; i<len; i++) {
      theAnchors[i].addEventListener('click', function() {
         chrome.tabs.create({url: this.href});
      }, false);
   }
}, false);

Answer 2

At last I was able to do it.

The code I needed was:

document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('click', function(e) {
    chrome.tabs.create({'url': event.target.href});
  });
});

Thanks a lot to those who even attempted to help :)

Regards, K.

Answer 3

Rewrite using jQuery, that I hinted at in comments to another answer:

// Wait for the DOM to be ready, jQuery-style:
$(document).ready( function() {
  // Bind a click handler to all <a> elements:
  $('a').click( function(e) {
    // Event is passed into the handler as parameter "e"
    chrome.tabs.create({'url': e.target.href});
  });
});