Objetivo: Quiero agregar la funcionalidad sin conexión a la página web en línea a través de la extensión del navegador Chrome.

TLDR:

• [✔️] Inyección de CSS
• [✔️] inyección JS personalizada
• [✔️] Activos JS de la página web redirigidos internamente a través de declarativeNetRequest
• [❌] inyectó service-worker.js en "el sitio web" para que Chrome pueda "instalar PWA sin conexión"

información adicional

Estado actual: Cambiar cualquier CSS o JS no es problema. Se hace con scripts de contenido ( https://developer.chrome.com/docs/extensions/mv3/content_scripts/ ). Y para la funcionalidad adicional de JavaScript, estoy inyectando un script adicional injection.js a través de injector.js .

El código para inyector.js se ve así:

 const s = document.createElement("script"); s.src = chrome.runtime.getURL("script-dist.js"); (document.head || document.documentElement).appendChild(s); s.onload = function () { s.parentNode.removeChild(s); };

Los scripts que ya están en el sitio web en línea se verifican "en carga" a través de chrome.declarativeNetRequest ( https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/ ) y se intercambian a una copia de archivo preparada a través de Redirección interna (Código 307) que Lo descargué del sitio web y lo incluí en los archivos en la extensión del navegador.

El problema: Pero aquí está el truco. No puedo entender cómo inyectar un archivo "completo". Debido a que la aplicación Progressive Web Apps (PWA) necesita tener un archivo js como service-worker.js , no he descubierto cómo "inyectarlo" en el sitio web actual. Todo lo que obtengo son errores de uso compartido de recursos de origen cruzado (CORS).

Aquí hay una plantilla de PWA Offline Fallback que quiero inyectar en la página existente: https://glitch.com/edit/#!/offline-fallback-demo?path=service-worker.js%3A1%3A0 , donde lo más importante es el service-worker.js y offline.html

¿Cómo resolverías este problema?