Estoy aprendiendo a crear extensiones de Chrome. Empecé a desarrollar uno para captar eventos de YouTube. Quiero usarlo con YouTube flash player (luego intentaré hacerlo compatible con HTML5).

manifiesto.json:

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

miScript.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 la “¡Empezado!”pero no hay “¡Estado cambiado!” cuando reproduzco/pauso videos de YouTube.

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

Causa subyacente:

Los scripts de contenido se ejecutan en un “mundo aislado” ambiente.

Solución:

Inyecte el código en la página usando DOM; ese código podrá acceso funciones/variables del contexto de la página (“mundo principal”) o exponer funciones/variables al contexto de la página (en su caso es el state() método).

• Nota en caso de que se necesite comunicación con el script de la página:

  Usar DOM CustomEvent manipulador. Ejemplos: uno, dos y tres.

• Nota en caso chrome Se necesita API en el script de la página:

  Ya que chrome.* Las API no se pueden usar en la secuencia de comandos de la página, debe usarlas en la secuencia de comandos de contenido y enviar los resultados a la secuencia de comandos de la página a través de mensajes DOM (consulte la nota anterior).

Advertencia de seguridad:
Una página puede redefinir o aumentar/enganchar un prototipo incorporado, por lo que su código expuesto puede fallar si la página lo hizo de manera incompatible. Si desea asegurarse de que su código expuesto se ejecute en un entorno seguro, debe a) declarar su secuencia de comandos de contenido con “run_at”: “document_start” y use los Métodos 2-3, no 1, o b) extraiga los integrados nativos originales a través de un iframe vacío, por ejemplo. Tenga en cuenta que con document_start es posible que necesite usar DOMContentLoaded evento dentro del código expuesto para esperar DOM.

Tabla de contenido

• Método 1: inyectar otro archivo – compatible con ManifestV3
• Método 2: Inyectar código incrustado – MV2
• Método 2b: Usando una función – MV2
• Método 3: Uso de un evento en línea: compatible con ManifestV3
• Método 4: usar el mundo de executeScript – solo ManifestV3
• Valores dinámicos en el código inyectado

Método 1: inyectar otro archivo (ManifestV3/MV2)

Particularmente bueno cuando tienes mucho código. Ponga el código en un archivo dentro de su extensión, digamos script.js. Luego cárguelo en su script de contenido de esta manera:

var s = document.createElement('script');
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

El archivo js debe estar expuesto en web_accessible_resources:

• ejemplo de manifest.json para ManifestV2

  "web_accessible_resources": ["script.js"],
  

• ejemplo de manifest.json para ManifestV3

  "web_accessible_resources": [{
    "resources": ["script.js"],
    "matches": ["<all_urls>"]
  }]
  

De lo contrario, aparecerá el siguiente error en la consola:

Denegar la carga de chrome-extension://[EXTENSIONID]/script.js. Los recursos deben estar incluidos en la clave de manifiesto web_accessible_resources para que las páginas fuera de la extensión los carguen.

Método 2: Inyectar código incrustado (MV2)

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: literales de plantilla solo se admiten en Chrome 41 y superior. 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: Usando una función (MV2)

Para una gran parte del código, citar la cadena no es factible. En lugar de usar una matriz, se puede usar una función y convertirla en cadenas:

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 vinculadas se pierden.

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

Método 3: Usar un evento en línea (ManifestV3/MV2)

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

Una alternativa, pero no recomendado 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, se bloquean los detectores de eventos en línea. Los scripts en línea inyectados por la extensión, por otro lado, aún se ejecutan. Si aún desea usar 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 asume que no hay otros detectores de eventos globales que manejen el reset evento. 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 uno de los eventos disponibles.

Método 4: Usar la API de chrome.scripting world (Solo manifiesto V3)

• Chrome 95 o posterior, chrome.scripting.executeScript con world: 'MAIN'
• Chrome 102 o posterior, chrome.scripting.registerContentScripts con world: 'MAIN'también permite runAt: 'document_start' para garantizar la ejecución temprana del script de la página.

A diferencia de los otros métodos, este es para la secuencia de comandos de fondo o la secuencia de comandos emergente, no para la secuencia de comandos de contenido. Ver el documentación y ejemplos

Valores dinámicos en el código inyectado (MV2)

Ocasionalmente, necesita 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úrate de implementarlo correctamente! La siguiente voluntad no trabajar:

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.stringify antes 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.stringify una vez, para mejorar la legibilidad, de la siguiente manera:

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

Valores dinámicos en el código inyectado (ManifestV3)

• El método 1 puede establecer la URL del elemento del script en el script de contenido:

  s.src = chrome.runtime.getURL('script.js?') + new URLSearchParams({foo: 1});
  

  Entonces script.js puede leerlo:

  const params = new URLSearchParams(document.currentScript.src.split('?')[1]);
  console.log(params.get('foo'));
  

• El método 4 executeScript tiene args parámetro, registerContentScripts actualmente no lo hace (esperemos que se agregue en el futuro).

La única cosa perdido oculto de la excelente respuesta de Rob W es cómo comunicarse entre el script de página inyectado y el script 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 (script de contenido o script de página inyectado) 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 solo puede transferir 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 objetivo usando cloneInto (una función integrada), 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 para encontrar mejores formas.

en el script de contenido, agrego una etiqueta de script al encabezado que vincula 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 de mensajes, por lo que obtengo una 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 detector de URL de mensaje posterior

//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 una comunicación bidireccional entre CS y Real Dom. Es muy útil, por ejemplo, si necesita escuchar eventos de webscoket, o cualquier variable o evento 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 es 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 (lamentablemente, no se pueden clasificar objetos ni matrices) a las funciones. Añádelo a las 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+")";