I'm trying to write a chrome extension that uses the firebase auth, specifically Google Sign-in.
My first attempt was to load all necessary firebase code in the popup.js, like
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js';
import { getAuth, onAuthStateChanged, connectAuthEmulator,signOut,signInWithEmailAndPassword, GoogleAuthProvider,signInWithPopup } from 'https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js';
import { getFirestore, setDoc, getDoc, collection, doc, connectFirestoreEmulator, query, where, getDocs } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";
const firebaseApp = initializeApp({
apiKey: "xxx",
authDomain: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
});
const auth = getAuth(firebaseApp);
const provider = new GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
provider.setCustomParameters({
'login_hint': 'xxx@gmail.com'
});
onAuthStateChanged(auth, user => {
if (user) {
console.log('Logged in as ${user.email}' );
} else {
console.log('No user');
}
});
connectAuthEmulator(auth, "http://localhost:9099");
var db = getFirestore(firebaseApp);
connectFirestoreEmulator(db, 'localhost', 8080);
...
signInWithPopup(auth, provider)
.then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const user = result.user;
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
const email = error.email;
const credential = GoogleAuthProvider.credentialFromError(error);
});
...
But this does not work in manifest v3 because extension pages cannot make 'unsafe' script loads like this one.
So I thought, OK, let's do this in a background page via message passing, and define it like so in the manifest:
...
"background": {
"service_worker": "background.js",
"type" : "module"
},
...
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'",
"sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://www.gstatic.com/' 'https://*.firebaseio.com' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'"
},
...
However, I then get errors about window not being defined when the background.js gets loaded:
Uncaught ReferenceError: window is not defined
https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js
Stack Trace
https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js:6913 (anonymous function)
That makes sense, as the background window does not have a window really, I use the background script only to login and logout. But I get that a window might be used for Google sign-in as a popup window is needed for the user to select which account to use.
So, I seem stuck. Is it impossible to do Google signin via firebase in manifest v3 ?
If so, can someone give a pointer ?
Many thanks!