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

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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