javascript - extension - Código de extensión de Chrome vs Guiones de contenido vs Guiones de inyección

css chrome extension

Question

Estoy intentando que mi extensión de Chrome ejecute la función init() cada vez que se carga una página nueva, pero tengo problemas para tratar de entender cómo hacerlo. Por lo que entiendo, necesito hacer lo siguiente en background.html:

1. Utilice chrome.tabs.onUpdated.addListener() para comprobar cuándo se cambia la página
2. Use chrome.tabs.executeScript para ejecutar un script.

Este es el código que tengo:

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

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

También me pregunto si la función init () tendrá acceso a mis otras funciones ubicadas en otros archivos JS.

Answer 1

El código JavaScript en las extensiones de Chrome se puede dividir en los siguientes grupos:

• Código de extensión: acceso completo a todas las API chrome.* Permitidas.
  Esto incluye la página de fondo y todas las páginas que tienen acceso directo a través de chrome.extension.getBackgroundPage() , como las ventanas emergentes del navegador .

• Scripts de contenido (a través del archivo de manifiesto o chrome.tabs.executeScript ) - Acceso Partial a algunas de las API de chrome , acceso completo al DOM de la página ( no a ninguno de los objetos de la window , incluidos los marcos).
  Los scripts de contenido se ejecutan en un ámbito entre la extensión y la página. El objeto de window global de una secuencia de comandos de Contenido es distinto del espacio de nombres global de la página / extensión.

• Scripts inyectados (a través de este método en un script de Contenido) - Acceso completo a todas las propiedades en la página. Sin acceso a ninguna de las API chrome.* .
  Las secuencias de comandos inyectadas se comportan como si la página las incluyera y no están conectadas a la extensión de ninguna manera. Consulte esta publicación para obtener más información sobre los diversos métodos de inyección.

Para enviar un mensaje desde el script inyectado al script de contenido, los eventos deben ser utilizados. Vea esta respuesta para un ejemplo. Nota: Los mensajes transportados dentro de una extensión de un contexto a otro son automáticamente (JSON) -serializados y analizados .

En su caso, el código en la página de fondo ( chrome.tabs.onUpdated ) probablemente se chrome.tabs.onUpdated antes de que se evalúe el script de contenido script.js . Entonces, obtendrás un ReferenceError , porque init no lo es.

Además, cuando utiliza chrome.tabs.onUpdated , asegúrese de probar si la página está completamente cargada, porque el evento se dispara dos veces: antes de la carga y al finalizar:

//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();"});
    }
});