Utiliser un contenu script pour accéder aux variables et fonctions du contexte de la page.

Question

J'apprends à créer des extensions pour Chrome. Je viens de commencer à en développer une pour capter les événements de YouTube. Je veux l'utiliser avec le lecteur flash de YouTube (plus tard, j'essaierai de le rendre compatible avec HTML5).

manifest.json :

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js :

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

Le problème est que la console me donne le "Commencé !" mais il n'y a pas de "L'État a changé !" lorsque je joue/pause des vidéos YouTube.

Lorsque ce code est mis dans la console, il a fonctionné. Qu'est-ce que je fais de mal ?

Answer 1

Si vous souhaitez injecter une fonction pure, au lieu d'un texte, vous pouvez utiliser cette méthode :

function inject(){
    document.body.style.backgroundColor = 'blue';
}

// this includes the function as text and the barentheses make it run itself.
var actualCode = "("+inject+")()"; 

document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');

Et vous pouvez passer des paramètres (malheureusement pas d'objets ni de tableaux pouvant être stringifiés) aux fonctions. Ajoutez-le dans les baretheses, comme ceci :

function inject(color){
    document.body.style.backgroundColor = color;
}

// this includes the function as text and the barentheses make it run itself.
var color = 'yellow';
var actualCode = "("+inject+")("+color+")";