Chrome extension; open a link from popup.html in a new tab

Question

I'm doing a Chrome extension and I got helped in this post here.

My problem now is how to open a new tab of chrome that has as URL the link I clicked in the popup.html. I tried to do like someone suggested in their answers in other similar question like setting <a>'s attribute target to _blank but the only result is that chrome does open a new tab but in the new tab is my popup.html.

Any idea how to solve this?

Thanks.

Possible duplicate of [How to make popup.html links open in tab?](http://stackoverflow.com/questions/4549869/how-to-make-popup-html-links-open-in-tab) — rogerdpack, Oct 20 '16 at 19:50

score 78 · Accepted Answer · edited Oct 20 '16 at 19:45

78

You should use chrome.tabs module to manually open the desired link in a new tab. Try using this jQuery snippet in your popup.html:

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

edited Oct 20 '16 at 19:45

rogerdpack

62,887
36
269
388

answered Jan 18 '12 at 19:26

Konrad Dzwinel

36,825
12
98
105

Shouldn't that a's attribute I put as URL 'href'. Bytheway it doesn't work in both cases. It opens me a tab with this url: chrome-extension://ceapmkdonphjngfdcjcoahdmkenpbgpn/?action=read&idnotizia=71189 – Advicer Jan 19 '12 at 10:20
You are right about 'href', sorry for that - i fixed my answer. You need to supply full url in href if you want it to open. Currently you have links like this `` change them to full URLs ``. – Konrad Dzwinel Jan 19 '12 at 10:31
I thought it was a problem with my extension. I concatenated the domain name to the string and now works perfectly. – Advicer Jan 19 '12 at 11:00
Note this only works for links that exist in the document at load time, and is also very inefficient. To catch ALL link clicks efficiently, no matter when the link appeared, use $('body').on('click', 'a', function ()... – phreakhead Sep 17 '13 at 00:16

score 45 · Answer 2 · edited May 23 '17 at 12:09

45

See my comment https://stackoverflow.com/a/17732609/1340178

I had the same issue and this was my approach:

Create the popup.html with link (and the links are not working when clicked as Chrome block them).
Create popup.js and link it in the page: <script src="popup.js" ></script>

Add the following code to popup.js:

document.addEventListener('DOMContentLoaded', function () {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        (function () {
            var ln = links[i];
            var location = ln.href;
            ln.onclick = function () {
                chrome.tabs.create({active: true, url: location});
            };
        })();
    }
});

That's all, links should work after that.

edited May 23 '17 at 12:09

Community

1
1

answered Jul 18 '13 at 19:50

lasantha

825
8
7

I use the same javascript for options.html and popup.html, this code solves the problem for popup.html but also causes trouble for options.html when it opens two tabs for the same link (because options.html doesn't need that fix), but I don't want to use separate js files, do you have any idea how to solve it? – user25 Jun 10 '18 at 19:08
seems I found a solution to check if page is popup or options: `if (chrome.extension.getViews({ type: "popup" }).length > 0) { // execute your code }` – user25 Jun 10 '18 at 19:12
also we need this only for Google Chrome and Opera, but we should not add this code in Firefox extensions (WebExtensions) cause in Firefox it works fine without any fix, if you add it, it will open two tabs with Firefox extension – user25 Jun 10 '18 at 19:16

score 23 · Answer 3 · answered Oct 06 '14 at 13:10

23

If you don't want to use JQuery, insert this into your popup.js and it will make all your links open in a new tab when clicked

Remember to declarer the "tabs" permission in the manifest.json

window.addEventListener('click',function(e){
  if(e.target.href!==undefined){
    chrome.tabs.create({url:e.target.href})
  }
})

answered Oct 06 '14 at 13:10

Kwiksilver

775
4
13

1

I'd suggest to use the "activeTab" permission instead: https://developer.chrome.com/extensions/activeTab – Saulo Silva Oct 12 '16 at 02:17

score 15 · Answer 4 · edited Aug 08 '21 at 01:31

15

The other answers work. For completeness, another way is to just add target="_blank"

Or if you have want to "manually" add particular links, here's a way (based on the other answers already here):

popup.html

<a id="index_link">My text</a>.

popup.js

document.addEventListener('DOMContentLoaded', () => {
   var y = document.getElementById("index_link");
   y.addEventListener("click", openIndex);
});

function openIndex() {
   chrome.tabs.create({active: true, url: "http://my_url"});
}

edited Aug 08 '21 at 01:31

Zev Eisenberg

8,080
5
38
82

answered Oct 20 '16 at 19:54

rogerdpack

62,887
36
269
388

3

whoah this needs more attention.. :) – krivar Aug 29 '18 at 13:22
2

Can confirm that `target="_blank"` behaves as expected on both Firefox (version 72) and Chrome (version 79). – Tenders McChiken Jan 18 '20 at 12:26

score 2 · Answer 5 · answered Dec 03 '20 at 17:43

A bit more concise and actual syntax in 2020:

document.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll("a");

  links.forEach(link => {
    const location = link.getAttribute('href');
    link.addEventListener('click', () => chrome.tabs.create({active: true, url: location}));
  });
});

score 1 · Answer 6 · answered Jan 10 '20 at 16:20

A bit more concise version in modern JS:

document.addEventListener('DOMContentLoaded', function () {
  for (const anchor of document.getElementsByTagName('a')) {
    anchor.onclick = () => {
      chrome.tabs.create({active: true, url: anchor.href});
    };
  };
});

score 0 · Answer 7 · answered Nov 05 '16 at 16:12

I had the same problem. Looked like Konrad's solution would worked, but it opened multiple tabs at once. This happened only after first extension install. So I changed it to

if (e.target.classList.contains("a-link")) {
    chrome.tabs.create({url: $(e.target).attr('href')});
    return false;
}

and all is working as expected.

score 0 · Answer 8 · answered Feb 17 '19 at 03:58

Send tab url to share blog in new tab:

// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs){        
    var url = tabs[0].url;
    var title = tabs[0].title;
    document.getElementById('linkQZone').onclick = function () {
        var url1 = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&desc=&summary=&site=';
        chrome.tabs.create({active: true, url: url1});
    };

    document.getElementById('linkQQ').onclick = function () {
        var url1 = 'https://connect.qq.com/widget/shareqq/index.html?url=' + url + '&title=' + title + '&desc=&summary=&site=';
        chrome.tabs.create({active: true, url: url1});
    };
});

score 0 · Answer 9 · answered Oct 27 '20 at 19:17

0

open with ctrl-click or middle-click

$('body').on('click auxclick', 'a', e => {
    if (e.ctrlKey || e.button == 1) {
        e.preventDefault();
        chrome.tabs.create({ url: e.currentTarget.href, selected: false});
    }
});

answered Oct 27 '20 at 19:17

Matt

2,096
14
20

Chrome extension; open a link from popup.html in a new tab

9 Answers9

Linked