cheadrian/Chrome Extension Manifest V3 Firebase Javascript.md

Hey thanks for this, but I get an error "Uncaught Error: Service firestore is not available" at line 20 of firebase_config. Any idea why?

@noovil did you modify the firebase-firestore.js line one according to .md?
You can't import anything remotely with manifest V3, except localhost.

@cheadrian Hey, indeed I forgot to change the first line.

I am injecting your firebase_config.js and my own script in a site, but I can't access the global variables in my own script, they are shown as undefined.

Edit: Instead using global variables, I did it by sending custom events from my injected script to my content script, and from the content script I transferred the event to background script. Then I sent the response from background script to my content script and from there to my injected script.

In short, I used the content script as an intermediate forwarder between background and injected script.

"Modify all firebase JS files to ensure all imports are from extension package, as remote script inserting is not allowed anymore in Manifest V3." In your case, it is ALLOWED. It is NOT allowed in the service worker. Inject inserts a tag script and it works quite well with remote scripts and without local ones (firbase-app, etc).

thank you for this tip! i was able to integrate google sign-on with mv3 using this approach. nice!

@bhdrozgn could you provide an example of how you achieved this? Currently struggling with the same.

@bhdrozgn could you provide an example of how you achieved this? Currently struggling with the same.

content-scripts.js

window.addEventListener("PassToBackground", (ev) => {
    if (ev.detail.command != "keep-awake") {
        console.log("sent", ev.detail);
    }
    chrome.runtime.sendMessage(ev.detail, (response) => {
        if (ev.detail.command != "keep-awake") {
            console.log("response", response);
        }
    });
}, false);

var script = document.createElement("script");
var url = window.location.href;
if (url.startsWith("https://www.randomwebsite.com/")) {
    script.src = chrome.runtime.getURL("js/randomwebsite.js");
}
script.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(script);

I use an event listener in content-scripts.js to send structured events to background.js from randomwebsite.js which is the script injected to www.randomwebsite.com. You can ignore 'keep-awake' events. I just used them to keep background script awake by sending non-functional events every 5 seconds.

You can send an event in randomwebsite.js like:

const message = {
    command: "post",
    timestamp: Object.keys(data)[0],
    data: data
};
const event = new CustomEvent("PassToBackground", { detail: message });
window.dispatchEvent(event);

Finally, this is the background.js, where I handle every event sent here:

import {
    initializeApp
} from "../firebase/firebase-app.js";
import {
    getAuth,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    signOut,
    updateProfile,
    onAuthStateChanged
} from "../firebase/firebase-auth.js";
import {
    getFirestore,
    collection,
    doc,
    setDoc,
    writeBatch,
} from "../firebase/firebase-firestore.js";

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

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

chrome.runtime.onMessage.addListener((msg, sender, resp) => {
    if (user || (msg.command != "post" && msg.command != "fetch" && msg.command != "fetch-all")) {
        access_db(msg, sender, resp, user?.uid);
    }
    return true;
});

async function access_db(msg, sender, resp) {
    if (msg?.command == 'post') {
        // firebase commands to store data to db
    }
}

Inversely, you can also get info from background.js and pass it to some script via content-scripts.js

can't you just use self.importScripts in the service worker? instead of writing all that inject code?

  self.importScripts(
        "js/firebase/firebase_config.js",
        "js/firebase/firebase-app.js",
        "js/firebase/firebase-firestore.js",
        "js/firebase/firebase-database.js"
  );

can't you just use self.importScripts in the service worker? instead of writing all that inject code?

  self.importScripts(
        "js/firebase/firebase_config.js",
        "js/firebase/firebase-app.js",
        "js/firebase/firebase-firestore.js",
        "js/firebase/firebase-database.js"
  );

I was developing an extension for manifest v3 for the first time and I just needed a few functions from firebase, this was what worked for me in the past. I don't know if yours will work or not, but worth trying.

@bhdrozgn How to configure in the Action script popup?

@bhdrozgn could you provide an example of how you achieved this? Currently struggling with the same.

content-scripts.js

window.addEventListener("PassToBackground", (ev) => {
    if (ev.detail.command != "keep-awake") {
        console.log("sent", ev.detail);
    }
    chrome.runtime.sendMessage(ev.detail, (response) => {
        if (ev.detail.command != "keep-awake") {
            console.log("response", response);
        }
    });
}, false);

var script = document.createElement("script");
var url = window.location.href;
if (url.startsWith("https://www.randomwebsite.com/")) {
    script.src = chrome.runtime.getURL("js/randomwebsite.js");
}
script.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(script);

I use an event listener in content-scripts.js to send structured events to background.js from randomwebsite.js which is the script injected to www.randomwebsite.com. You can ignore 'keep-awake' events. I just used them to keep background script awake by sending non-functional events every 5 seconds.

You can send an event in randomwebsite.js like:

const message = {
    command: "post",
    timestamp: Object.keys(data)[0],
    data: data
};
const event = new CustomEvent("PassToBackground", { detail: message });
window.dispatchEvent(event);

Finally, this is the background.js, where I handle every event sent here:

import {
    initializeApp
} from "../firebase/firebase-app.js";
import {
    getAuth,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    signOut,
    updateProfile,
    onAuthStateChanged
} from "../firebase/firebase-auth.js";
import {
    getFirestore,
    collection,
    doc,
    setDoc,
    writeBatch,
} from "../firebase/firebase-firestore.js";

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

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

chrome.runtime.onMessage.addListener((msg, sender, resp) => {
    if (user || (msg.command != "post" && msg.command != "fetch" && msg.command != "fetch-all")) {
        access_db(msg, sender, resp, user?.uid);
    }
    return true;
});

async function access_db(msg, sender, resp) {
    if (msg?.command == 'post') {
        // firebase commands to store data to db
    }
}

Inversely, you can also get info from background.js and pass it to some script via content-scripts.js

Would you mind sharing how you worked around imports not being allowed in anything other than modules?

can i have a look at your manifest

"Modify all firebase JS files to ensure all imports are from extension package, as remote script inserting is not allowed anymore in Manifest V3." In your case, it is ALLOWED. It is NOT allowed in the service worker. Inject inserts a tag script and it works quite well with remote scripts and without local ones (firbase-app, etc).

function injectScript(file, node) {
    var th = document.getElementsByTagName(node)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', file);
    th.appendChild(s);
}
injectScript('https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js', 'head');

Refused to load the script 'https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Extension Pages Policy

The extension_pages policy cannot be relaxed beyond this minimum value.

You can relax these directives on the sandbox space, but this would require to implement the message API, like @bhdrozgn .