web-dev-qa-db-fra.com

Extension de chrome; ouvrir un lien depuis popup.html dans un nouvel onglet

Je fais une extension Chrome et on m'a aidé dans ce post ici . 

Mon problème maintenant est comment ouvrir un nouvel onglet de chrome qui a pour URL le lien sur lequel j'ai cliqué dans le popup.html. J'ai essayé de faire comme certaines personnes suggérées dans leurs réponses à une question similaire, comme définir l'attribut de <a> avec target à _blank, mais le seul résultat est que chrome ouvre un nouvel onglet, mais mon popup.html. 

Aucune idée sur la façon de résoudre ça?

Merci.

google-chromegoogle-chrome-extension
38
Advicer

Vous devez utiliser chrome.tabs module pour ouvrir manuellement le lien souhaité dans un nouvel onglet. Essayez d’utiliser cet extrait de code jQuery dans votre popup.html:

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

Voir mon commentaire https://stackoverflow.com/a/17732609/1340178

J'ai eu le même problème et c'était mon approche:

  1. Créez le fichier popup.html avec lien (et les liens ne fonctionnent pas lorsque vous cliquez dessus, car Chrome les bloque).
  2. Créez un fichier popup.js et associez-le à la page: <script src="popup.js" ></script>

  3. Ajoutez le code suivant à 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});
            };
        })();
    }
});

C'est tout, les liens devraient fonctionner après cela.

34
lasantha

Si vous ne voulez pas utiliser JQuery, insérez-le dans votre popup.js et tous vos liens seront ouverts dans un nouvel onglet lorsque vous cliquez dessus.

N'oubliez pas de déclarer l'autorisation "onglets" dans le fichier manifest.json 

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

Les autres réponses fonctionnent. Pour être complet, un autre moyen consiste à ajoutez simplementtarget="_blank"

Ou si vous souhaitez ajouter "manuellement" des liens particuliers, voici une méthode (basée sur les autres réponses déjà présentes):

popup.html

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

popup.js

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

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

J'ai eu le même problème. La solution de Konrad semblait fonctionner, mais elle ouvrait plusieurs onglets à la fois. Cela s'est produit seulement après la première installation de l'extension. Alors je l'ai changé pour

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

et tout fonctionne comme prévu.

0
Strabek

Envoyer l'URL de l'onglet pour partager le blog dans un nouvel onglet:

// 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});
    };
});
0
sonichy