Getting error while connecting firebase with chrome extension (locally)

I have tried everything I could find on the internet to enable firebase in my chrome extension, but nothing seems to be working. I couldn't get the firebase objects.

The errors that I am facing right now:

Error 1: Uncaught ReferenceError: firebase is not defined at firebase.js:11

Image Reference Here!

manifest.js

Here is the manifest.json file.

    {
        "version": "1.0.0",
        "manifest_version": 2,
        "name": "Chrome Proxy",
        "permissions": [
            "proxy",
            "tabs",
            "unlimitedStorage",
            "storage",
            "<all_urls>",
            "webRequest",
            "webRequestBlocking"
        ],
        "browser_action": {
            "default_popup": "home.html",
            "default_icon": "logo.png"
        },
        "background": {
            "scripts": ["background.js"]
        },
        "content_security_policy": "script-src 'self' https://www.gstatic.com/ 
         https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"
    }

home.html

Here is the home.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="https://www.gstatic.com/firebasejs/9.6.7/firebase.js"></script>
    <script type="module" src="https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js"></script>
    <script type="module" src="https://www.gstatic.com/firebasejs/9.6.7/firebase-database.js"></script>
    
    <script type="module" src="firebase.js"></script>
    <title>CPM Extension</title>
</head>

<body>
    <p id="hasham">Hasham Here!</p>
</body>

</html>

firebase.js

Here is the firebase.js file.

const firebaseConfig = {
    apiKey: "my_api_key",
    authDomain: "my_auth_name",
    databaseURL: "my_database_url",
    projectId: "my_project_id",
    storageBucket: "my_storage_bucket",
    messagingSenderId: "my_messaginge_sender_id",
    appId: "my_app_id"
}

firebase.initializeApp( firebaseConfig )
console.log(firebase)

Solution

I thought about your implementation and I found a quick way you could achieve what you want. 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

If you haven't set up npm yet, there are plenty of tutorials online (and if you don't understand, feel free to ask me ;) After you have done that you can proceed to set up firebase. 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);

Next, you will set the output file as a source in your html popup (in this case it will be 'main.budle.js'). When you run npm start, webpack will create another folder (the 'dist' folder). This folder is the chrome exstension with firebase set up!

I hope I was able to answer your question! If you need any help, feel free to comment and ask questions.

Best of luck!