How to open a new tab from chrome extension popup

2
votes

I am new to chrome extension. I have tried the first sample exercise for creating extension. Now I am trying to open an URL in a new tab from the extension popup. Just I have added a HTML anchor tag in the popup.html page.

a href="www.google.com">Click</a>

But its not opening. It is trying to open the URL with following url within the popup itself.

chrome-extension://ljamgfaclheagbikmcagffcbdbcoodna/www.google.com

My popup.html has this code.

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
    </style>
    <!-- JavaScript and HTML must be in separate files for security. -->
     </head>
  <body>
  <b>Karthick</b>
  <a href="www.google.com">Click</a>
  </body>
</html>

And My Manifest.json have the following JSON

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

I dont have written anything in popup.js I searched for it how to do it. But they said that I have to use the following.

chrome.tabs.getSelected({}, function(tab) {
  chrome.tabs.update(tab.id, {url: 'http://google.com'});
});

But I don't know the proper way/where to do it. Please tell me the steps to do it. Thanks in advance.

3
javascriptgoogle-chromegoogle-chrome-extension

3 Answers

3
votes

here is the solution, just add the following code to popup.js:

$(function() {
  $('#s').click(function() {
     chrome.tabs.create({url: 'http://www.google.com'});
  });
});

document.addEventListener('DOMContentLoaded');

and update your anchor tag to look something like this:

<a id="s" href="www.google.com">Click</a>

since we are using jquery selectors update your popup.html to:

<!doctype html>
<html>
  <head>
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
  <b>Karthick</b>
  <a href="www.google.com">Click</a>
  </body>
</html>

and to allow jquery in popup.html update your manifest to look something like:

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ],  //<<--- do not miss this ","
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

If this does not work, lemme send you the crx of this. Cheers!

2
votes

You may add a onclick-listener for the link. 

var link = document.getElementById("link");
link.addEventListener("click", function(){
  chrome.tabs.getSelected({}, function(tab) {
    chrome.tabs.update(tab.id, {url: 'http://google.com'});
  });
}, false);

However i would use the chrome.tabs.create() function.

2
votes

Easy. Put this in popup.html:

<a href='google.com' target='_newtab'>Click</a>

Or put this in the JS file:

window.open('http://google.com','_newtab');