Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

290
Vistas
How to import javascript files in background.js in chrome extension using version 3

I am building a chrome extension in version 3 using firebase firestore. I have downloaded all the api in extension and I want to use importScript to fetch the api example: firebase-app.js and firebase-firestore.js. but it not working for me. The error in the console says "TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Module scripts don't support importScripts().". Is 3 days now searching the net but no solution. Please any help?

Code of the issue

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Here's a quick solution: in short, you will need to install webpack, which is a module bundler (it means that its main purpose is to bundle JavaScript files for usage in a browser). If you have npm already set up, you can execute this command in your project:

npm install webpack

After you have done that you can proceed to set up firebase (which, from what I can see from your image, you have already done). You will need to run another command:

npm install firebase

Continuing the setup of webpack, you will need to create a webpack.config.js file and there set the entry and the output. Again, you can find plenty of tutorials online, but here's a quick example implementation:

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()
    ],


};

Once you've done that, in your entry file (the entry point), you can import firebase and set it up:

main.js

 import { initializeApp } from 'firebase/app';
    
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

When you run npm start, webpack will create another folder (the 'dist' folder). This folder is the chrome exstension with firebase set up!

Hope I was able to help you. If you have any questions feel free to ask!

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda