Estoy creando una extensión de Chrome en la versión 3 usando firebase firestore. He descargado toda la API en extensión y quiero usar importScript para obtener el ejemplo de la API: firebase-app.js y firebase-firestore.js. pero no me funciona. El error en la consola dice "TypeError: no se pudo ejecutar 'importScripts' en 'WorkerGlobalScope': los scripts del módulo no son compatibles con importScripts ().". Lleva 3 días buscando en la red pero no hay solución. Por favor, ¿alguna ayuda?
Aquí hay una solución rápida: en resumen, deberá instalar webpack, que es un paquete de módulos (lo que significa que su propósito principal es agrupar archivos JavaScript para usar en un navegador). Si ya ha configurado npm, puede ejecutar este comando en su proyecto:
npm install webpackUna vez que haya hecho eso, puede proceder a configurar firebase (que, por lo que puedo ver en su imagen, ya ha hecho). Deberá ejecutar otro comando:
npm install firebaseContinuando con la configuración de webpack, deberá crear un archivo webpack.config.js y allí configurar la entrada y la salida. Nuevamente, puede encontrar muchos tutoriales en línea, pero aquí hay una implementación de ejemplo rápida:
webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin'); const webpack = require('webpack'); const path = require('path'); module.exports = { mode: 'production', entry: { main: './src/main' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/ }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader', ], }, ], }, devServer: { contentBase: './dist', overlay: true, hot: true }, plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'manifest.json', to: 'manifest.json' }, ], }), new CopyWebpackPlugin({ patterns: [ { from: 'images', to: 'images' }, ], }), new CopyWebpackPlugin({ patterns: [ { from: 'popup.html', to: 'popup.html' }, ], }), new webpack.HotModuleReplacementPlugin() ], };Una vez que haya hecho eso, en su archivo de entrada (el punto de entrada), puede importar firebase y configurarlo:
principal.js
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);Cuando ejecuta npm start, webpack creará otra carpeta (la carpeta 'dist'). ¡Esta carpeta es la extensión de Chrome con Firebase configurado!
Espero haber podido ayudarte. ¡Si tiene alguna pregunta, sientase con libertad de preguntar!