Connect a Manifest Version 3 Chrome Extension to a firestore database

The Problem

I'm writing a chrome extension that users will use to fill forms using content hosted in a firestore database. The core problem I'm facing is that Chrome Extension's Manifest Version 3 does not appear to support any of google's mechanisms for interacting with firestore.

Previously, with Manifest Version 2, you'd link to the CDN hosted firebase scripts in your background.html file like so:

<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-firestore.js"></script>

With MV3, remotely hosted code is no longer allowed for security reasons, despite the fact that the script I'm trying to link to is google's, and attempting to do so throws errors as soon as you load the unpacked extension.

My question:

How can I connect a Manifest Version 3 Chrome Extension to a firestore database?

What I've tried

I spent quite a lot of time experimenting with pulling the cdn scripts locally and then importing them directly into my background.js like so:

try {
    importScripts('firebase/firebase-firestore.js');
} catch (error) {
    console.log(error);
}

This approach led me deep down a rabbit hole because this also did not work but apparently for different reasons. Specifically, with MV3, XMLHttpRequest is not supported in a service worker.

Possible next steps

From the reading I've done, and I really hope somebody here can point me to something I've missed, it appears that it will not be possible to connect firestore to an extension directly. I have read elsewhere that the firebase realtime data base can be accessed via a MV3 chrome extension.

Setting up some link between firestore and the realtime database for the relevant content our users need to be able to access with the chrome extension and then connecting the realtime database to the extension seems like it is the next step. Is this viable?

Why not use Manifest Version 2?

Simply to future proof our app, we don't want to be left scrambling when MV2 is deprecated. While no deprecation date for MV2 appears on any official channel, the chromium blog says:

"While there is not an exact date for removing support for Manifest V2 extensions, developers can expect the migration period to last at least a year from when Manifest V3 lands in the stable channel."

Which puts MV2's end of life sometime early in 2022.

Edit to add:

They announced some hard dates, January 2022 they stop accepting new MV2 extensions but maintenance of those already existing may continue until January 2023 when all extensions must be MV3.

Solution 1:

I've just seen this question because I'm just doing an extension with manifest v3 and firebase and I've been with the same problem for about two days but I think I've finally reach a solution.

Import the firebase files

First of all there's the problem of manifest v3 not accepting extern files. In their doc they say that you can use npm install firebase and follow their doc in order to connect it but this is still broken. What I've done is download the files from the urls of firebase and create a folder with all of them inside. Those URLS have this pattern:

https://www.gstatic.com/firebasejs/VERSION/firebase-SERVICE.js --> (where VERSION is the SDK version such as 9.6.4 and SERVICE is an SDK name such as firebase-firestore)

All these files can be in a folder just like this:

Connect to firebase Then you must create your background file. In my case I've called it firebase.js . In this file the first lines will be the imports

import { initializeApp } from "/firebase/firebase-app.js";
import { HERE YOU WRITE THE SERVICES YOU WANT } from '/firebase/firebase-auth.js';
import {HERE YOU WRITE THE SERVICES YOU WANT} from '/firebase/firebase-firestore.js';

As you can see you must use the relative path to the files.

One important thing you must know is that all service files of firebase depends on firebase-app.js so you must edit its imports to the relative path of the firebase-app.js in your project.

Then you must declare the firebase config:

const firebaseConfig = {
    apiKey: "///////",
    authDomain: "///////",
    projectId: "///////",
    storageBucket: "///////",
    messagingSenderId: "///////",
    appId: "///////",
    measurementId: "///////"
};

(You can find this information in the project settings page of firebase)

Finally you must initalize your firebase app and all the services just like this (example with the auth and firestore services):

const firebase = initializeApp(firebaseConfig);
const auth = getAuth(firebase);
const db=getFirestore(firebase);

Adapt the manifest file

Because you are using imports, your background.js (firebase.js in my case) must be module so in your manifest.json file write the following:

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

The next steps depends of the service you want to use. From here the documentation is good enough.

Finally one quick warning. Because of how manifest v3 works I think some services don't work at all but I'm not quite sure.

Hope this helps you or anyone with this problem :D