Accéder à l'objet DOM de l'onglet en cours à partir de "popup.html"?

Question

Je développe une extension pour le navigateur Google Chrome. Je n'arrivais pas à comprendre comment accéder à l'objet DOM de l'onglet courant à partir de la page "popup.html". des suggestions?

Answer 1

Par défaut, dans popup.js/popup.html, l'objet "document" se réfère uniquement au document de la fenêtre contextuelle de l'extension. Pour obtenir le DOM pour un onglet spécifique (par exemple l'onglet actuellement actif), vous devez utiliser content scripts communications. Par exemple, nous devons envoyer une demande de la extension à votre script de contenu via popup, donc dans le popup.html vous faites quelque chose comme ceci:

chrome.tabs.getSelected(null, function(tab) { 
    // Send a request to the content script. 
    chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) { 
    console.log(response.dom); 
    }); 
}); 

maintenant dans le script de contenu, nous avons besoin de listen for those events venant de la extension, donc dans certains fichiers que nous avons appelé dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
if (request.action == "getDOM") 
    sendResponse({dom: "The dom that you want to get"}); 
else 
    sendResponse({}); // Send nothing.. 
}); 

maintenant, rappelez-vous de configurer votre manifest pour inclure le script de contenu et l'autorisation d'onglet.

Answer 2

Cette réponse semble ne pas fonctionner avec la dernière API. Ceci est un exemple de travail.

popup.js:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    var tab = tabs[0]; 
    console.log(tab.url, tab.title); 
    chrome.tabs.getSelected(null, function(tab) { 
     chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(msg) { 
      msg = msg || {}; 
      console.log('onResponse', msg.farewell); 
     }); 
    }); 
}); 

getDescription.js:

window.onload = function() { 
    chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) { 
     console.log('onMessage', msg); 
     if (msg.greeting == "hello") { 
      sendResponse({farewell: "goodbye"}); 
     } else{ 
      sendResponse({}); 
     } 
    }); 
}; 

parties pertinentes de manifest.json:

{ 
    "permissions": [ 
     "tabs" 
    ], 

    "content_scripts": [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js": ["getDescription.js"] 
    } 
    ] 
} 

Answer 3

Ceci est la dernière solution:

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { 
     console.log(response.farewell); 
    }); 
}); 

(Note: l'console.log ci-dessus (response.farewell) est pour popup.html, pas votre onglet en cours)

de contentscript.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.greeting == "hello") 
     sendResponse({farewell: "goodbye"}); 
    }); 

Source: https://developer.chrome.com/extensions/messaging