Estoy desarrollando una extensión de Chrome para realizar algunos cambios en el sitio de Github, mientras que el postfijo de la URL coincide con el tipo de código fuente (por ejemplo, xxx.cpp)
Espero que content.js se ejecute cada vez que la pestaña termine de cargar los elementos DOM. Sin embargo, solo se ejecuta cuando presiono el botón de actualización. Si hago clic en los hipervínculos y voy a otra URL, content.js no se ejecutará.
¿Qué hice mal? Gracias.
Los siguientes son el código.
manifiesto.json
{ "name": "My Chrome Ext", "description": "change appearance of source code on Github", "version": "0.1", "manifest_version": 3, "permissions": ["storage", "activeTab"], "action": {}, "content_scripts": [ { "matches": ["*://github.com/*cpp"], "all_frames": true, "js": ["content.js"], "run_at": "document_end" } ] }contenido.js
window.alert("start running content.js");El script de contenido de la extensión de Chrome solo se cargará cuando se cargue una página web completamente nueva que coincida con la URL especificada en su archivo de manifiesto. En esta era de aplicaciones web de una sola página, muchos sitios web, incluido GitHub, usan marcos Javascript y llamadas Ajax para actualizar solo partes del contenido de la página web existente a medida que el usuario navega por el sitio. Aunque la barra de direcciones se está actualizando, la mayoría de las veces no se ejecutan cargas de página reales, por lo que su extensión de Chrome no se activará.
Esto mejora el rendimiento del sitio web, pero significa que las extensiones del navegador no siempre pueden depender de que se carguen sus scripts de contenido, incluso si el navegador muestra una URL coincidente.
¿Mi solución? Habilite la extensión para todo el sitio y abra la funcionalidad de la secuencia de comandos de contenido detrás de un MutationObserver que verifica window.location.href cada vez que se llama a la devolución de llamada:
function addLocationObserver(callback) { // Options for the observer (which mutations to observe) const config = { attributes: false, childList: true, subtree: false } // Create an observer instance linked to the callback function const observer = new MutationObserver(callback) // Start observing the target node for configured mutations observer.observe(document.body, config) } function observerCallback() { if (window.location.href.startsWith('https://github.com')) { initContentScript() } } addLocationObserver(observerCallback) observerCallback()También invoco la devolución de llamada inmediatamente cuando se llama al script de contenido para garantizar que el script se active correctamente en una recarga de página. Es posible que deba jugar con la configuración del observador para asegurarse de que el observador active la devolución de llamada en los momentos correctos.
Tenga en cuenta que el nodo de destino para el observador debe permanecer en el documento a menos que se actualice toda la página. Si se sobrescribe, perderá al observador y su secuencia de comandos no se activará. En mi caso, document.body funciona bien.