Chrome extension: How to open a link in new tab?

Question

In my Stackoverflow folder, I have stackoverflow.ico and 2 bellow files. When importing it to Chrome, it shows the icon in address bar, but when I click on it, Chrome doesn't open any new tab. What am I doing wrong?

manifest.json

{
  "name": "Stackoverflow",
  "version": "1",
  "browser_action":
  {
    "default_icon": "stackoverflow.ico"
  },
  "background":
  {
    "page": "index.html"
  },
  "permissions": ["tabs"],
  "manifest_version": 2
}

index.html

<html>
  <head>
    <script>
      chrome.browserAction.onClicked.addListener(function(activeTab)
      {
        var newURL = "http://stackoverflow.com/";
        chrome.tabs.create({ url: newURL });
      });
    </script>
  </head>
</html>

score 148 · Accepted Answer · answered May 12 '13 at 05:46

148

The problem is that you are violating manifest version 2's content security policy. To fix it all you have to do is get rid of inline script, in this case your background page. Turn it into a background script like this:

manifest.json

"background":{
  "scripts": ["background.js"]
},

background.js

chrome.browserAction.onClicked.addListener(function(activeTab){
  var newURL = "http://stackoverflow.com/";
  chrome.tabs.create({ url: newURL });
});

If, for some reason, you do need it to be a page, then simply include the script as an external file and declare it as a page like before.

answered May 12 '13 at 05:46

BeardFist

8,031
3
35
40

how can i send the newURL from popup.js ? – Nikhil Kulkarni Nov 25 '19 at 07:36
This is working fine.. but opening multiple tabs with subsequent clicks. Any tips? – san Dec 18 '21 at 06:13

score 35 · Answer 2 · answered Aug 03 '18 at 13:55

35

In my case I needed to open link in a new tab when I clicked a link within extension popup window, it worked fine with target attribute set to _blank:

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

answered Aug 03 '18 at 13:55

Be Kind

4,712
1
38
45

6

Well, this will open new tab in a browser, but it will close the popup (what is not always desired). – fvrab Oct 01 '18 at 15:02

score 7 · Answer 3 · edited Mar 04 '20 at 03:52

7

I would prefer simpler solution - just add action to onclick

$('body').on('click', 'a[target="_blank"]', function(e){
    e.preventDefault();
    chrome.tabs.create({url: $(this).prop('href'), active: false});
    return false;
});

This will open all links (even links that were dynamically created) that have target="_blank" attribute in a new tab without loosing popup focus.

edited Mar 04 '20 at 03:52

poundifdef

18,726
23
95
134

answered Oct 01 '18 at 15:07

fvrab

698
8
14

where do you call this one? i mean is it written under content.js or background.js? – gumuruh Nov 05 '19 at 01:06
it's written in content.js – fvrab Nov 05 '19 at 09:46

score 4 · Answer 4 · answered Oct 19 '21 at 21:22

4

You do not need jQuery. Just use window.open("http://example.com", "_blank").

answered Oct 19 '21 at 21:22

Jaxon

63
1
4

Chrome extension: How to open a link in new tab?

4 Answers4

Linked