firebasefirefoxfirefox-addonmanifest.json

Uncaught ReferenceError when connecting firebase real time database with firefox extension


I want to create a firefox extension that connect to firebase but no luck every time i add import to the backgroud.js script i get this error:

Uncaught ReferenceError: firebase is not defined or Uncaught SyntaxError: import declarations may only appear at top level of a module

manifest.json

{
    "manifest_version": 2,
    "name": "Firebase Connection Test",
    "version": "1.0",
    "permissions": [
      "storage"
    ],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    }
  }
  

background.js:

// Import the functions you need from the Firebase SDKs
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.24.0/firebase-app.js";
import { getDatabase, ref, get } from "https://www.gstatic.com/firebasejs/9.24.0/firebase-database.js";

// Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY", // Replace with your API key
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com", // Replace with your Database URL
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Reference to your database
const database = firebase.database();

// Check the connection
database.ref('.info/connected').once('value').then((snapshot) => {
    if (snapshot.val() === true) {
        console.log('Connected to Firebase Realtime Database');
    } else {
        console.log('Not connected to Firebase');
    }
});

Is there any way to connect to firebase in firefox extension?


Solution

  • The default for background scripts is that they're classic JavaScript files. To make Firefox treat them as ES modules, add "type": "module" to the background node:

    "background": {
      "scripts": ["background.js"],
      "type": "module",
      "persistent": false
    }
    

    From the Mozilla docs on the background property in manifests, which says:

    type - A String value.

    Determines whether the scripts specified in "scripts" are loaded as ES modules.

    classic indicates the background scripts or service workers are not included as an ES Module.
    module indicates the background scripts or service workers are included as an ES Module. This enables the background page or service worker to import code.

    If omitted, this property defaults to classic.