Estoy aprendiendo cómo crear extensiones de Chrome. Acabo de comenzar a desarrollar uno para ver los eventos de YouTube. Quiero usarlo con YouTube Flash Player (más adelante intentaré hacerlo compatible con 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!");

El problema es que la consola me da el "¡Iniciado!" , pero no hay "¡Estado cambiado!" cuando reproduzco / detengo videos de YouTube.

Cuando este código se coloca en la consola, funcionó. ¿Qué estoy haciendo mal?

Los scripts de contenido se ejecutan en un entorno de "mundo aislado" . Tienes que inyectar tu state()método en la página misma.

Cuando desee utilizar una de las chrome.*API en el script, debe implementar un controlador de eventos especial, como se describe en esta respuesta: Extensión de Chrome: recuperación del mensaje original de Gmail .

De lo contrario, si no tiene que usar chrome.*API, le recomiendo que inyecte todo su código JS en la página agregando una <script>etiqueta:

Tabla de contenido

• Método 1: inyectar otro archivo
• Método 2: inyectar código incrustado
• Método 2b: uso de una función
• Método 3: usar un evento en línea
• Valores dinámicos en el código inyectado

Método 1: inyectar otro archivo

Este es el método más fácil / mejor cuando tienes mucho código. Incluya su código JS real en un archivo dentro de su extensión, digamos script.js. Luego, deje que su script de contenido sea el siguiente (explicado aquí: Google Chome "Acceso directo a la aplicación" Javascript personalizado ):

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

Nota: Si usa este método, el script.jsarchivo inyectado debe agregarse a la "web_accessible_resources"sección ( ejemplo ). Si no lo hace, Chrome se negará a cargar su script y mostrará el siguiente error en la consola:

Negar la carga de chrome-extension: // [EXTENSIONID] /script.js. Los recursos deben estar listados en la clave de manifiesto web_accessible_resources para que las páginas que se encuentren fuera de la extensión puedan cargarlos.

Método 2: inyectar código incrustado

Este método es útil cuando desea ejecutar rápidamente un pequeño fragmento de código. (Consulte también: ¿Cómo deshabilitar las teclas de acceso rápido de Facebook con la extensión de Chrome? ).

var actualCode = `// Code here.
// If you want to use a variable, use $ and curly braces.
// For example, to use a fixed random number:
var someFixedRandomValue = ${ Math.random() };
// NOTE: Do not insert unsafe variables in this way, see below
// at "Dynamic values in the injected code"
`;

var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();

Nota: los literales de plantilla solo son compatibles con Chrome 41 y versiones posteriores. Si desea que la extensión funcione en Chrome 40-, use:

var actualCode = ['/* Code here. Example: */' + 'alert(0);',
                  '// Beware! This array have to be joined',
                  '// using a newline. Otherwise, missing semicolons',
                  '// or single-line comments (//) will mess up your',
                  '// code ----->'].join('\n');

Método 2b: uso de una función

Para una gran porción de código, no es factible citar la cadena. En lugar de usar una matriz, se puede usar una función y stringificar:

var actualCode = '(' + function() {
    // All code is executed in a local scope.
    // For example, the following does NOT overwrite the global `alert` method
    var alert = null;
    // To overwrite a global variable, prefix `window`:
    window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();

Este método funciona, porque el +operador en cadenas y una función convierte todos los objetos en una cadena. Si tiene la intención de usar el código más de una vez, es aconsejable crear una función para evitar la repetición del código. Una implementación podría verse así:

function injectScript(func) {
    var actualCode = '(' + func + ')();'
    ...
}
injectScript(function() {
   alert("Injected script");
});

Nota: ¡Dado que la función está serializada, el alcance original y todas las propiedades enlazadas se pierden!

var scriptToInject = function() {
    console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output:  "undefined"

Método 3: usar un evento en línea

A veces, desea ejecutar un código inmediatamente, por ejemplo, ejecutar un código antes de <head>crear el elemento. Esto se puede hacer insertando una <script>etiqueta con textContent(ver método 2 / 2b).

Una alternativa, pero no recomendada, es usar eventos en línea. No se recomienda porque si la página define una política de seguridad de contenido que prohíbe los scripts en línea, entonces los escuchas de eventos en línea están bloqueados. Los scripts en línea inyectados por la extensión, por otro lado, aún se ejecutan. Si aún desea utilizar eventos en línea, así es como:

var actualCode = '// Some code example \n' + 
                 'console.log(document.documentElement.outerHTML);';

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

Nota: Este método supone que no hay otros escuchas de eventos globales que manejen el resetevento. Si lo hay, también puede elegir uno de los otros eventos globales. Simplemente abra la consola de JavaScript (F12), escriba document.documentElement.ony seleccione los eventos disponibles.

Valores dinámicos en el código inyectado

Ocasionalmente, debe pasar una variable arbitraria a la función inyectada. Por ejemplo:

var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
    alert(GREETING + NAME);
};

Para inyectar este código, debe pasar las variables como argumentos a la función anónima. ¡Asegúrese de implementarlo correctamente! Lo siguiente no funcionará:

var scriptToInject = function (GREETING, NAME) { ... };
var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME + ')';
// The previous will work for numbers and booleans, but not strings.
// To see why, have a look at the resulting string:
var actualCode = "(function(GREETING, NAME) {...})(Hi, I'm ,Rob)";
//                                                 ^^^^^^^^ ^^^ No string literals!

La solución es usar JSON.stringifyantes de pasar el argumento. Ejemplo:

var actualCode = '(' + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';

Si tiene muchas variables, vale la pena usar JSON.stringifyuna vez, para mejorar la legibilidad, de la siguiente manera:

...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';

La única cosa desaparecido oculto de la excelente respuesta de Rob W está cómo comunicarse entre el guión de la página inyectada y el guión de contenido.

En el lado receptor (ya sea su secuencia de comandos de contenido o la secuencia de comandos de la página inyectada) agregue un detector de eventos:

document.addEventListener('yourCustomEvent', function (e) {
  var data = e.detail;
  console.log('received', data);
});

En el lado del iniciador (secuencia de comandos de contenido o secuencia de comandos de página inyectada) envíe el evento:

var data = {
  allowedTypes: 'those supported by structured cloning, see the list below',
  inShort: 'no DOM elements or classes/functions',
};

document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data }));

Notas:

• La mensajería DOM utiliza un algoritmo de clonación estructurado, que puede transferir solo algunos tipos de datos además de los valores primitivos. No puede enviar instancias de clase o funciones o elementos DOM.

• En Firefox, para enviar un objeto (es decir, no un valor primitivo) desde el script de contenido al contexto de la página, debe clonarlo explícitamente en el destino utilizando cloneInto(una función incorporada), de lo contrario fallará con un error de violación de seguridad .

  document.dispatchEvent(new CustomEvent('yourCustomEvent', {
    detail: cloneInto(data, document.defaultView),
  }));
  

También me enfrenté al problema de ordenar los scripts cargados, que se resolvió mediante la carga secuencial de scripts. La carga se basa en la respuesta de Rob W .

function scriptFromFile(file) {
    var script = document.createElement("script");
    script.src = chrome.extension.getURL(file);
    return script;
}

function scriptFromSource(source) {
    var script = document.createElement("script");
    script.textContent = source;
    return script;
}

function inject(scripts) {
    if (scripts.length === 0)
        return;
    var otherScripts = scripts.slice(1);
    var script = scripts[0];
    var onload = function() {
        script.parentNode.removeChild(script);
        inject(otherScripts);
    };
    if (script.src != "") {
        script.onload = onload;
        document.head.appendChild(script);
    } else {
        document.head.appendChild(script);
        onload();
    }
}

El ejemplo de uso sería:

var formulaImageUrl = chrome.extension.getURL("formula.png");
var codeImageUrl = chrome.extension.getURL("code.png");

inject([
    scriptFromSource("var formulaImageUrl = '" + formulaImageUrl + "';"),
    scriptFromSource("var codeImageUrl = '" + codeImageUrl + "';"),
    scriptFromFile("EqEditor/eq_editor-lite-17.js"),
    scriptFromFile("EqEditor/eq_config.js"),
    scriptFromFile("highlight/highlight.pack.js"),
    scriptFromFile("injected.js")
]);

En realidad, soy un poco nuevo en JS, así que siéntete libre de enviarme un ping a las mejores formas.

en la secuencia de comandos de contenido, agrego una etiqueta de secuencia de comandos a la cabeza que une un controlador 'onmessage', dentro del controlador que uso, eval para ejecutar el código. En el script de contenido de la cabina, también uso el controlador onmessage, por lo que obtengo comunicación bidireccional. Documentos de Chrome

//Content Script

var pmsgUrl = chrome.extension.getURL('pmListener.js');
$("head").first().append("<script src='"+pmsgUrl+"' type='text/javascript'></script>");


//Listening to messages from DOM
window.addEventListener("message", function(event) {
  console.log('CS :: message in from DOM', event);
  if(event.data.hasOwnProperty('cmdClient')) {
    var obj = JSON.parse(event.data.cmdClient);
    DoSomthingInContentScript(obj);
 }
});

pmListener.js es un oyente de URL de mensaje de publicación

//pmListener.js

//Listen to messages from Content Script and Execute Them
window.addEventListener("message", function (msg) {
  console.log("im in REAL DOM");
  if (msg.data.cmnd) {
    eval(msg.data.cmnd);
  }
});

console.log("injected To Real Dom");

De esta manera, puedo tener comunicación de 2 vías entre CS a Real Dom. Es muy útil, por ejemplo, si necesita escuchar eventos de webcoket o cualquier evento o variable en memoria.

Puede usar una función de utilidad que he creado con el fin de ejecutar código en el contexto de la página y recuperar el valor devuelto.

Esto se hace serializando una función en una cadena e inyectándola en la página web.

La utilidad está disponible aquí en GitHub .

Ejemplos de uso -

// Some code that exists only in the page context -
window.someProperty = 'property';
function someFunction(name = 'test') {
    return new Promise(res => setTimeout(()=>res('resolved ' + name), 1200));
}
/////////////////

// Content script examples -

await runInPageContext(() => someProperty); // returns 'property'

await runInPageContext(() => someFunction()); // returns 'resolved test'

await runInPageContext(async (name) => someFunction(name), 'with name' ); // 'resolved with name'

await runInPageContext(async (...args) => someFunction(...args), 'with spread operator and rest parameters' ); // returns 'resolved with spread operator and rest parameters'

await runInPageContext({
    func: (name) => someFunction(name),
    args: ['with params object'],
    doc: document,
    timeout: 10000
} ); // returns 'resolved with params object'

Si desea inyectar una función pura, en lugar de texto, puede usar este método:

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');

Y puede pasar parámetros (desafortunadamente no se pueden clasificar en cadena objetos y matrices) a las funciones. Agréguelo a los baretheses, así:

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+")";