0
230
VistasConecte una extensión de Chrome Manifest versión 3 a una base de datos de firestore
El problema
Estoy escribiendo una extensión de Chrome que los usuarios usarán para completar formularios usando contenido alojado en una base de datos de Firestore. El problema principal al que me enfrento es que la versión 3 del manifiesto de Chrome Extension no parece ser compatible con ninguno de los mecanismos de Google para interactuar con Firestore.
Anteriormente, con la versión 2 del Manifiesto, vincularía los scripts de firebase alojados en CDN en su archivo background.html de la siguiente manera:
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-firestore.js"></script>Con MV3, el código alojado de forma remota ya no está permitido por razones de seguridad, a pesar de que el script al que estoy tratando de vincularme es de Google, y al intentar hacerlo arroja errores tan pronto como carga la extensión desempaquetada.
Mi pregunta:
¿Cómo puedo conectar una extensión de Chrome Manifest versión 3 a una base de datos de Firestore?
lo que he probado
Pasé bastante tiempo experimentando extrayendo los scripts de cdn localmente y luego importándolos directamente a mi background.js así:
try { importScripts('firebase/firebase-firestore.js'); } catch (error) { console.log(error); }Este enfoque me llevó a lo más profundo de la madriguera del conejo porque tampoco funcionó, pero aparentemente por diferentes razones. Específicamente, con MV3, XMLHttpRequest no se admite en un trabajador de servicio.
Posibles próximos pasos
De la lectura que he hecho, y realmente espero que alguien aquí pueda señalarme algo que me he perdido, parece que no será posible conectar Firestore a una extensión directamente. He leído en otra parte que se puede acceder a la base de datos en tiempo real de Firebase a través de una extensión de cromo MV3.
Configurar algún enlace entre Firestore y la base de datos en tiempo real para el contenido relevante al que nuestros usuarios necesitan poder acceder con la extensión de Chrome y luego conectar la base de datos en tiempo real a la extensión parece ser el siguiente paso. ¿Es esto viable?
¿Por qué no usar la versión 2 del manifiesto?
Simplemente para preparar nuestra aplicación para el futuro, no queremos quedarnos luchando cuando MV2 esté obsoleto. Si bien no aparece una fecha de obsolescencia para MV2 en ningún canal oficial, el blog de cromo dice :
"Si bien no hay una fecha exacta para eliminar el soporte para las extensiones de Manifest V2, los desarrolladores pueden esperar que el período de migración dure al menos un año desde que Manifest V3 aterriza en el canal estable".
Lo que pone el final de la vida de MV2 en algún momento a principios de 2022.
Editar para agregar:
Anunciaron algunas fechas duras , enero de 2022 dejan de aceptar nuevas extensiones MV2 pero el mantenimiento de las ya existentes puede continuar hasta enero de 2023 cuando todas las extensiones deben ser MV3.
1 Respuestas
Responde la pregunta0
Acabo de ver esta pregunta porque solo estoy haciendo una extensión con manifest v3 y firebase y he estado con el mismo problema durante aproximadamente dos días, pero creo que finalmente llegué a una solución.
Importar los archivos de base de fuego
En primer lugar, está el problema de que el manifiesto v3 no acepta archivos externos. En su documento, dicen que puede usar npm install firebase y seguir su documento para conectarlo, pero esto aún no funciona. Lo que he hecho es descargar los archivos de las urls de firebase y crear una carpeta con todos ellos adentro. Esas URL tienen este patrón:
https://www.gstatic.com/firebasejs/VERSION/firebase-SERVICE.js --> (donde VERSION es la versión del SDK como 9.6.4 y SERVICIO es un nombre de SDK como firebase-firestore)
Todos estos archivos pueden estar en una carpeta como esta: 
Conéctese a firebase Luego debe crear su archivo de fondo. En mi caso lo he llamado firebase.js. En este archivo las primeras líneas serán las importaciones.
import { initializeApp } from "/firebase/firebase-app.js"; import { HERE YOU WRITE THE SERVICES YOU WANT } from '/firebase/firebase-auth.js'; import {HERE YOU WRITE THE SERVICES YOU WANT} from '/firebase/firebase-firestore.js';Como puede ver, debe usar la ruta relativa a los archivos.
Una cosa importante que debe saber es que todos los archivos de servicio de firebase dependen de firebase-app.js, por lo que debe editar sus importaciones en la ruta relativa de firebase-app.js en su proyecto.
Luego debes declarar la configuración de firebase:
const firebaseConfig = { apiKey: "///////", authDomain: "///////", projectId: "///////", storageBucket: "///////", messagingSenderId: "///////", appId: "///////", measurementId: "///////" };(Puede encontrar esta información en la página de configuración del proyecto de firebase)
Finalmente, debe inicializar su aplicación Firebase y todos los servicios de esta manera (ejemplo con los servicios de autenticación y almacenamiento de fuego):
const firebase = initializeApp(firebaseConfig); const auth = getAuth(firebase); const db=getFirestore(firebase);Adaptar el archivo de manifiesto
Debido a que está utilizando importaciones, su background.js (firebase.js en mi caso) debe ser un módulo, por lo que en su archivo manifest.json escriba lo siguiente:
"background": { "service_worker": "firebase.js", "type": "module" }Los próximos pasos dependen del servicio que desee utilizar. A partir de aquí, la documentación es lo suficientemente buena.
Finalmente una advertencia rápida. Debido a cómo funciona el manifiesto v3, creo que algunos servicios no funcionan en absoluto, pero no estoy muy seguro.
Espero que esto te ayude a ti o a cualquier persona con este problema: D