Comment puis-je obtenir l'URL de l'onglet actuel à partir d'une extension Google Chrome?

Réponses:

219

Utilisez chrome.tabs.query()comme ceci:

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

Cela nécessite que vous demandiez l'accès à l' chrome.tabsAPI dans votre manifeste d'extension :

"permissions": [ ...
   "tabs"
]

Il est important de noter que la définition de votre "onglet actuel" peut différer selon les besoins de votre extension.

La configuration lastFocusedWindow: truedans la requête est appropriée lorsque vous souhaitez accéder à l'onglet actuel dans la fenêtre ciblée de l'utilisateur (généralement la fenêtre la plus élevée).

Le paramètre currentWindow: truevous permet d'obtenir l'onglet actuel dans la fenêtre où le code de votre extension est en cours d'exécution. Par exemple, cela peut être utile si votre extension crée une nouvelle fenêtre / popup (changement de focus), mais souhaite toujours accéder aux informations de l'onglet depuis la fenêtre où l'extension a été exécutée.

J'ai choisi d'utiliser lastFocusedWindow: truedans cet exemple, car Google évoque les cas dans lesquels il se currentWindow peut que ce ne soit pas toujours présent .

Vous êtes libre d'affiner davantage votre requête d'onglet en utilisant l'une des propriétés définies ici: chrome.tabs.query

thauburger
la source
27
Pourquoi l'URL est-elle toujours indéfinie?
nnm
2
Si l'URL n'est pas définie, essayez de recharger votre extension à partir de chrome: // extensions Cela rechargera la configuration de l'extension et appliquera la permission "onglets" nouvellement ajoutée.
flashbackzoo
2
l'url n'est pas définie car stackoverflow.com/questions/28786723/… (réponse: fermez votre fenêtre d'outils de développement ou passez à currentWindow au lieu de lastFocusedWindow)
kspearrin
2
Je n'ai pas été défini lorsque ma fenêtre d'outils de développement a été désancrée. L'ancrage a résolu le problème non défini.
Fisu
Cela ne renvoie pas l'URL de la variable à l'appelant. Je voudrais une simple fonction url = GetCurrentTabUrl () qui renvoie l'url de l'onglet actuel à l'appelant. Ici, la variable est à l'intérieur de la fonction de rappel. Je peux le passer à une autre fonction mais cela rend la structure du code difficile. Je voudrais également éviter d'utiliser des variables globales. une idée @thauburger?
Thierry Dalon
78

Avertissement! chrome.tabs.getSelectedest obsolète . Veuillez utiliser chrome.tabs.querycomme indiqué dans les autres réponses.


Tout d'abord, vous devez définir les autorisations pour l'API dans manifest.json:

"permissions": [
    "tabs"
]

Et pour stocker l'URL:

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});
Axiol
la source
1
La raison pour laquelle c'est juste pour le popup (action de page, action de navigateur) est que votre envoi dans un "null" dans le premier paramètre. code.google.com/chrome/extensions/tabs.html#method-getSelected L'état de la documentation, le premier paramètre est le windowId, si vous souhaitez l'utiliser dans les options ou la page d'arrière-plan, vous devrez mettre dans l'ID de la fenêtre ou vous obtiendrez l'onglet actuel de votre affichage qui n'est pas défini, respectivement les options.
Mohamed Mansour
1
oui cela fonctionne, mais je ne sais pas pourquoi la méthode chrome.tabs.getSelected ne peut pas être trouvée dans le document de référence.
Swimmingfisher
Cette chose ne fonctionne pas pour moi, chrome.tabs.getSelectedn'est pas définie, dois-je la poser dans une question séparée?
Mostafa Shahverdy
11
La chrome.tabs.getSelectedméthode est obsolète, la méthode correcte est répertoriée dans la réponse ci-dessous .
Rob W
1
Et, comment obtenir les liens de tous les onglets ouverts
Enve
48

D'autres réponses supposent que vous voulez le savoir à partir d'un script contextuel ou d'arrière-plan.

Si vous souhaitez connaître l'URL actuelle à partir d'un script de contenu , la méthode standard JS s'applique:

window.location.toString()

Vous pouvez utiliser les propriétés de window.locationpour accéder à des parties individuelles de l'URL, telles que l'hôte, le protocole ou le chemin.

Xan
la source
1
Très bonne réponse. Tout ce que je voulais, c'était window.location.hostvoir si je suis sur "stackoverflow.com" ou non.
Salyangoz
1
C'est en fait ce que je cherchais. J'étais tellement pris par les mécanismes d'extension que j'ai oublié que vous pouvez simplement saisir l'URL de la page avec window.location.href.
felwithe
Cela nécessite une match:"<all_urls>"situation sur la section content_script et Chrome n'est pas recommandé <all_urls>.
mcan
@Tahtakafa Non, ce n'est pas le cas. Il suppose qu'un script de contenu est déjà en cours d'exécution (que ce soit via une autorisation d'hôte pour cette page ou activeTab).
Xan
Assurez-vous de l'exécuter dans contentScript.jset non dans le background.js. Transmettez simplement toutes les données que vous avez filtrées de l'URL dans le message background.js. Exemple: let message = { type: "fetchVideoDate", id: getVideoId() };getVideoId()contient une exécution de window.location.toString(). Sinon, vous obtiendrez des chrome://temp_background_file.htmldonnées. Notez également que parfois messageest appelé request.
DavidHulsman
25

Le problème est que chrome.tabs.getSelected est asynchrone. Ce code ci-dessous ne fonctionnera généralement pas comme prévu. La valeur de 'tablink' sera toujours indéfinie lorsqu'elle est écrite dans la console car getSelected n'a pas encore appelé le rappel qui réinitialise la valeur:

var tablink;
chrome.tabs.getSelected(null,function(tab) {
    tablink = tab.url;
});
console.log(tablink);

La solution consiste à encapsuler le code là où vous utiliserez la valeur dans une fonction et à l'invoquer par getSelected. De cette façon, vous êtes assuré d'avoir toujours une valeur définie, car votre code devra attendre que la valeur soit fournie avant d'être exécuté.

Essayez quelque chose comme:

chrome.tabs.getSelected(null, function(tab) {
    myFunction(tab.url);
});

function myFunction(tablink) {
  // do stuff here
  console.log(tablink);
}
Nyk Cowham
la source
Merci pour le code, cela a fonctionné pour moi, "tabs" doit être ajouté aux permissions dans le fichier manifest.json "permissions": ["tabs"]
Doug Molineux
Et, comment obtenir les liens de tous les onglets ouverts
Enve
2
J'ai essayé ceci mais obtenir l'URL indéfinie pourquoi est-ce?
nnm
1

Bonjour, voici un exemple de Google Chrome qui envoie par e-mail le site actuel à un ami. L'idée de base derrière est ce que vous voulez ... tout d'abord, il récupère le contenu de la page (ce qui ne vous intéresse pas) ... ensuite, il obtient l'URL (<- bonne partie)

De plus, c'est un bon exemple de code de travail, que je préfère vivement à la lecture de documents.

Peut être trouvé ici: Envoyer cette page par e-mail

Bastianneu
la source
1

Cette solution est déjà TESTÉE.

définir les autorisations pour l'API dans manifest.json

"permissions": [ ...
   "tabs",
    "activeTab",
    "<all_urls>"
]

Lors de la première fonction d'appel de charge. https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {  
  sendCurrentUrl()
})

Sur la fonction d'appel de changement. https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
  sendCurrentUrl()
})

la fonction pour obtenir l'URL

function sendCurrentUrl() {
  chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url
    console.log(tablink)
  })
Sandra Rl
la source
0

Pour ceux qui utilisent le context menu api, les documents ne sont pas immédiatement clairs sur la façon d'obtenir des informations sur les onglets.

  chrome.contextMenus.onClicked.addListener(function(info, tab) {
    console.log(info);
    return console.log(tab);
  });

https://developer.chrome.com/extensions/contextMenus

lfender6445
la source
-2

Vous devez vérifier cela .

HTML

<button id="saveActionId"> Save </button>

manifest.json

  "permissions": [
    "activeTab",
    "tabs"
   ]

JavaScript
Le code ci-dessous enregistrera toutes les URL de la fenêtre active dans l'objet JSON lors d'un clic sur le bouton.

var saveActionButton = document.getElementById('saveActionId');
saveActionButton.addEventListener('click', function() {
    myArray = [];
    chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
    function (array_of_Tabs) {  //Tab tab
        arrayLength = array_of_Tabs.length;
        //alert(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            myArray.push(array_of_Tabs[i].url);
        }
        obj = JSON.parse(JSON.stringify(myArray));
    });
}, false);
Kanagavelu Sugumar
la source
Mon extension Chrome pour enregistrer les URL sur les fenêtres actives est chrome.google.com/webstore/detail/tabstore-plugin/…
Kanagavelu Sugumar