Haciendo una extensión de Google Chrome y necesito ejecutar una secuencia de comandos después de cargar la cabecera, porque hay scripts en el encabezado y los necesito para ejecutarlos. Y antes de que se cargue DOM, porque hay un script en línea allí que necesito vencer.¿Cómo ejecuto un script justo después de cargar el encabezado, pero antes del DOM?
¿Cómo podría hacer esto? ¿Cómo puedo detectar cuándo carga la cabeza?
Simplemente póngalo en la parte superior de la etiqueta <body>. Las secuencias de comandos se ejecutan donde se colocan y bloquean el resto de la página, por lo que una secuencia de comandos en la parte superior del cuerpo tendrá conocimiento de todo en la cabeza, pero no conocimiento del resto del DOM, que aún se está cargando. Si lo coloca en la parte inferior de <body>, seguirá estando antes de DOMReady y antes del evento de carga de página, además debe poder acceder a los elementos DOM que precedieron a la secuencia de comandos. Una forma en que esto puede ser útil si necesita agregar scripts dinámicamente al <head> - no puede hacer eso con un script que está dentro del <head>, por lo que debe hacerlo en el <body>.
[Editar] Mi respuesta puede aplicarse en general a cualquier documento HTML, pero la respuesta de Mohamed se aplica más directamente a las extensiones de Google. Me inclinaría a llevar su respuesta antes que la mía, aunque ambas probablemente sean correctas.
Cuando inyecte su secuencia de comandos de contenido, dentro del manifiesto puede indicar que el parámetro "run_at" es "document_start", los archivos se inyectan después de cualquier archivo de css, pero antes de que se construya cualquier otro DOM o cualquier otro script correr. Se puede encontrar más información en here.
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"run_at": "document_start"
}
],
...
}
* Editado, agregó un ejemplo. Se podría usar uno de los tipos mutations event.
manifest.json
{
"name": "Content Script test",
"version": "0.1",
"description": "Content Script test",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["cs.js"],
"run_at": "document_start",
"all_frames": true
}
]
}
document.addEventListener('DOMSubtreeModified', OnSubtreeModified, false);
function OnSubtreeModified(event) {
console.log('Hello from extension!');
document.removeEventListener('DOMSubtreeModified', OnSubtreeModified, false);
}
<html>
<head>
<script>
alert('Hello from Web!');
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Se hará dos alertas, en el orden:
Esto es lo que estoy usando. Pero se ejecuta antes de ejecutar cualquiera de los scripts en la cabecera. Así que estoy tratando de descubrir cómo detectar cuándo es eso. – fent
Edité mi respuesta y puse un ejemplo. Puede aprovechar el run_at document_start para ver qué se ha agregado o eliminado del dominio. Por ejemplo, también podría usar otro evento llamado 'DOMNodeInserted'. –
Eh, eso podría no ser bueno para su caso porque las secuencias de comandos de la página ya se han ejecutado. Entonces, si tiene acceso a esa página web, coloque su código JavaScript después de
–
Esto es para una extensión. No tengo acceso al sitio web en sí y no puedo editarlo desde el servidor. Si lo hago desde el lado del cliente, para cuando lo coloque sobre la etiqueta del cuerpo, todos los guiones se habrán ejecutado para entonces. – fent