javascript - matches - Los scripts de contenido de Chrome no funcionan: el escucha DOMContentLoaded no se ejecuta

make a google chrome extension

Question

Estoy intentando codificar la extensión que corrige errores ortográficos en 1 foro.

Estoy intentando acceder a la etiqueta <p> , con script de contenido, pero no cambia nada (usando el código siguiente):

document.addEventListener("DOMContentLoaded", function() {
    document.getElementsByTagName("P")[4].innerHTML = "correct_word"; 
}); 

No cambia nada cuando se agrega como una extensión, aparentemente, si wget la página y pongo el script allí, todo funciona. ¿Alguna idea?

Mi archivo manifest.json :

{
    "manifest_version": 2,
    "name": "Extension",
    "description": "Description",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": ["http://example.com/"],
        "js": ["script.js"]
    }],
    "web_accessible_resources": ["Filedeleted(really).html"]
}

Sé que las secuencias de comandos de contenido y las páginas WWW tienen diferentes areneros, tal vez las secuencias de comandos de contenido no pueden acceder a la página (y a la etiqueta).

Answer 1

Está inyectando su secuencia de comandos después del evento que está escuchando en busca de incendios (en este caso, DOMContentLoaded ). Por lo tanto, cualquier código que tenga en el oyente no se ejecutará, porque el evento nunca se dispara después de haber agregado su oyente.

En extensiones de Chrome y WebExtensions de Firefox, cuando se especifica una hora para la inyección de un script de contenido , puede especificar "document_start" , "document_end" o "document_idle" . ¹ En manifest.json este es el valor indicado para la propiedad run_at . Para tabs.executeScript() , es la propiedad runAt .

• document_start
  La inyección tiene lugar antes de que se cree el DOM, o de las secuencias de comandos de la página que se está ejecutando. Esto significa que document.body y document.head aún no existen. Los DOMContentLoaded y load window aún no se han DOMContentLoaded . Puede agregar cosas al DOM agregándolas al document.documentElement . Es posible que necesite usar un MutationObserver para observar los elementos que le interesan agregar al DOM, o espere que un evento como DOMContentLoaded indique que el DOM está disponible.
• document_end (predeterminado)
  La inyección tiene lugar después de que el DOM esté completo, pero antes de que se carguen los subrecursos (por ejemplo, imágenes y marcos). Esto DOMContentLoaded generalmente después de que DOMContentLoaded haya disparado, pero antes de que se active el evento de load la window .

• document_idle
  La inyección se lleva a cabo en algún momento después de document_end e inmediatamente después de window load evento de load la window . La respuesta a "¿Cuándo se ejecuta un script de script run_at: document_idle?" indica que este es el anterior de:

  • Después de window load evento de load la window , o
  • 200ms después del evento DOMContentLoaded disparado.

  Esto significa que su script de contenido se inyectará después de que DOMContentLoaded haya disparado, pero el evento de load la window puede, o no, haberse disparado.

Cuando escuche DOMContentLoaded , o load window , primero debe verificar document.readyState

Siempre que utilice un oyente de load DOMContentLoaded , o un oyente de load window , siempre debe verificar document.readyState antes de agregar el oyente para asegurarse de que está agregando el oyente antes de que se DOMContentLoaded evento DOMContentLoaded (o antes del evento de load ser despedido, si eso es lo que estás escuchando). Esto debería ser un hábito normal cuando desee escuchar estos eventos. Si agrega el oyente después de que se haya disparado el evento, el oyente nunca se ejecutará.

Para agregar un oyente DOMContentLoaded , debe usar algo como:

if(document.readyState === ''loading'') {
    document.addEventListener(''DOMContentLoaded'',afterDOMLoaded);
} else {
    afterDOMLoaded();
}

function afterDOMLoaded(){
    //Everything that needs to happen after the DOM has initially loaded.
}

Para agregar un oyente de load window , podría usar algo como:

if(document.readyState !== ''complete'') {
    window.addEventListener(''load'',afterWindowLoaded);
} else {
    afterWindowLoaded();
}

function afterWindowLoaded(){
    //Everything that needs to happen after the window is fully loaded.
}

1. Si usa tabs.executeScript() , el valor que proporciona para runAt solo indica la fecha más temprana en que desea que se runAt el script. Si está ejecutando tabs.executeScript() antes de ese momento, entonces la inyección se retrasa hasta el tiempo especificado. Tenga en cuenta que para document_start el punto en que ejecutar tabs.executeScript() será válido para una página nueva es un tema complejo, que merece su propia pregunta / respuesta.
2. Partes de esta respuesta se copiaron de mi respuesta a "Detectar y manejar un clic de botón en la página HTML activa" .