Insert Firebase functions inside website using Chrome Extension. Web Version 9 CDN modular Firebase Firestore.

1. Manifest V3 Firebase Chrome.md

For Manifest V3

https://gist.github.com/cheadrian/8424217dda5a28724f290eef7fb4e059

or

https://www.youtube.com/watch?v=UjH2INUPmF4

Example bellow works only for Chrome Extension Manifest V2

firebase_config.js

//This file will be injected before body tag.
//Add file to src or modify path accordingly in manifest.json

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js"
import { getFirestore, collection, query, where, getDocs } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-firestore.js"

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXX",
  authDomain: "XXXXXX.firebaseapp.com",
  projectId: "XXXXXX",
  storageBucket: "XXXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXX",
  appId: "1:XXXXXXXXXX:web:XXXXXXXXXXXXX"
};

const firebase_app = initializeApp(firebaseConfig);

console.log(firebase_app)

const db = getFirestore(firebase_app);

async function get_database_elements(db_name){
    const q = query(collection(db, db_name));
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
        console.log(doc.id, " => ", doc.data());
    });
}

//In order to use firebase_app and db inside the injected website
//pass to global scope is needed, because in module it has local scope
globalThis.firebase_app = firebase_app;
globalThis.db = db;
globalThis.get_database_elements = get_database_elements;

inject.js

//This will inject the module.
//Add file to src

function injectModule(file, node) {
    var th = document.getElementsByTagName(node)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'module');
    s.setAttribute('src', file);
    th.appendChild(s);
}

//Can be deleted. Use only if you need to inject custom css
function injectStyle(file, node) {
    var th = document.getElementsByTagName(node)[0];
    var s = document.createElement('link');
    s.setAttribute('rel', 'stylesheet');
    s.setAttribute('type', 'text/css');
    s.setAttribute('href', file);
    th.appendChild(s);
}

//Can be deleted. Use only if you need to inject custom Javascript
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);
}

function add_base_url(url, node) {
    var th = document.getElementsByTagName(node)[0];
    var s = document.createElement('base_ext');
    s.setAttribute('url', url);
    s.setAttribute('ext_id', chrome.runtime.id)
    th.appendChild(s);
}

var base_url = chrome.extension.getURL('');
add_base_url(base_url, 'body');
injectModule(chrome.extension.getURL('js/firebase_config.js'), 'body');

manifest.json

  {
        "comment" : "This is not complete manifest.json, just append what is need for Firebase to work.",
  }

"manifest_version": 2,
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com https://www.googletagmanager.com; object-src 'self'",
"content_scripts": [
  {
    "js": [
      "src/inject/inject.js"
    ],
    "run_at": "document_idle",
    "all_frames": true
  }
],
"web_accessible_resources": [
  "firebase_config.js"
],

@cheadrian is it possible for "manifest_version": 3 ?

Any chance of getting this to work on V3?

Looking forward to update it.
Actually I didn't test with manifest V3.

Ok @ArtemKorneevGA @diegoromerodev manage to make it work for V3:

https://gist.github.com/cheadrian/8424217dda5a28724f290eef7fb4e059