Uncaught TypeError: Impossible de lire la propriété 'colors' de undefined

Question

J'essaie de créer une extension chrome qui permet à un utilisateur d'ajouter une nouvelle couleur à Desmos, une calculatrice graphique, lorsque le bouton d'extension est cliqué.

Les deux fichiers de base:

chrome.browserAction.onClicked.addListener(function (tab) { 
    chrome.tabs.executeScript(tab.ib, { 
    file: "add_color.js" 
    }); 
}); 

et

(function() { 

    if (window.location.href === "https://www.desmos.com/calculator") { 

    var name = prompt("What would you like the name of the new color to be?"); 
    var hex = prompt("What should the hex code of the new color be?"); 

    window.Calc.colors[name] = hex; 

    }; 

})(); 

Mais lorsque je tente de l'exécuter, je reçois Uncaught TypeError: Cannot read property 'colors' of undefined. Si je l'utilise avec la console DevTools, il fonctionne parfaitement. Quelqu'un pourrait-il expliquer pourquoi?

Answer 1

Vous ne pouvez pas accéder aux variables JavaScript évaluées d'une page Web à partir d'un script de contenu. Votre script d'extension, votre script de contenu et le script de la page s'exécutent dans différents contextes. Votre script de contenu a accès au DOM de la page et non au contexte d'exécution. Ainsi, vous avez besoin de votre script de contenu pour injecter directement du code dans le DOM de la page via l'ajout de tags de script.

Résumé.

• Le script d'extension a accès aux onglets de chrome.
• Le script de contenu a accès à la page DOM. Le script Page s'exécute dans un contexte différent des autres scripts.
• Le script de contenu doit injecter du code via l'ajout de balises de script.
• Le code injecté peut accéder aux variables javascript évaluées de la page.
• Code Injecté peut communiquer de nouveau à l'aide du script de contenu window.postMessage
• Ensuite le script contenu peut communiquer de nouveau au script d'extension via chrome API.

Ce n'est pas amusant ...