How to add Firebase SDK version 9 to a Service Worker Chrome Extension Manifest Version MV3?

Question

I found this video How to add Firebase to a Service Worker - Chrome Extension Manifest Version MV3 created at 26 Jan 2021

Importing the files in the same way he did in the video I got the following error:

"SyntaxError: Unexpected token 'export'"

To try solve this I changed manifest.json to include "type"="module" (because firebase SDK version 9 uses es module)

{
    "background": {
        "service_worker": "firebase.js",
        "type": "module" 
    }
}

And now the error is:

"importScripts() of new scripts after service worker installation is not allowed"

So I dowloaded to the extension https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js to include Firebase static js files in the extension in a folder called firebase and try to import as follows.

import * as firebase from "../firebase/firebase-app.js"; 
...
firebase.initializeApp(firebaseConfig); 

Also tried:

import { initializeApp } from "../firebase/firebase-app.js";
...
initializeApp(firebaseConfig); 

But in both cases I get the following errors:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

DevTools failed to load source map: Could not load content for chrome-extension://hoopapahcqwsdaerotpablmamhgdbhga/firebase/firebase-app.js.map: System error: net::ERR_FILE_NOT_FOUND

Any advice?

Answer 1

I think I found the solution to the issue, at the end of firebase-app.js is the following:

//# sourceMappingURL=firebase-app.js.map

So I went to https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js.map and copy its content in a file named firebase-app.js.map and place it in the same folder that firebase-app.js and now the code works ok.