web-dev-qa-db-fra.com

Chrome vs scripts de contenu vs scripts injectés

J'essaie d'obtenir mon Chrome pour exécuter la fonction init() chaque fois qu'une nouvelle page est chargée, mais j'ai du mal à comprendre comment faire. De quoi Je comprends, je dois faire ce qui suit dans background.html:

  1. Utilisez chrome.tabs.onUpdated.addListener() pour vérifier quand la page est modifiée
  2. Utilisation chrome.tabs.executeScript pour exécuter un script.

Voici le code que j'ai:

//background.html
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    chrome.tabs.executeScript(null, {code:"init();"});
});

//script.js
function init() {
    alert("It works!");
}

Je me demande aussi si la fonction init () aura accès à mes autres fonctions situées dans d'autres fichiers JS?

javascriptgoogle-chrome-extensionscopecontent-script
55
Jon

Code JavaScript dans Chrome peuvent être divisées dans les groupes suivants:

  • Code d'extension - Accès complet à toutes les API autorisées chrome.*
    Cela inclut la page d'arrière-plan , et toutes les pages qui y ont un accès direct via chrome.extension.getBackgroundPage() , comme la fenêtres contextuelles du navigateur .

  • Scripts de conten (via le fichier manifeste ou chrome.tabs.executeScript ) - Partiel accès à certains des chrome APIs , accès complet au DOM de la page ( pas à aucun des window objets, y compris les cadres).
    Les scripts de contenu s'exécutent dans une étendue entre l'extension et la page. L'objet global window d'un script Content est distinct de l'espace de noms global de la page/extension.

  • Scripts injectés (via cette méthode dans un script de contenu) - Accès complet à toutes les propriétés de la page. Aucun accès à aucune des API chrome.*.
    Les scripts injectés se comportent comme s'ils étaient inclus par la page elle-même et ne sont en aucun cas connectés à l'extension. Voir cet article pour en savoir plus sur les différentes méthodes d'injection.

Pour envoyer un message du script injecté au script de contenu, des événements doivent être utilisés. Voir cette réponse pour un exemple. Remarque: Les messages transportés dans une extension d'un contexte à un autre sont automatiquement (JSON) -sérialisés et analysés .

Dans votre cas, le code de la page d'arrière-plan ( chrome.tabs.onUpdated ) est probablement appelé avant l'évaluation du script de contenu script.js. Ainsi, vous obtiendrez un ReferenceError, car init ne l'est pas.

En outre, lorsque vous utilisez chrome.tabs.onUpdated, Assurez-vous de tester si la page est entièrement chargée, car l'événement se déclenche deux fois: avant le chargement et à la fin:

//background.html
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        // Execute some script when the page is fully (DOM) ready
        chrome.tabs.executeScript(null, {code:"init();"});
    }
});
159
Rob W