Hi 
The users of our browser extension log in via firebase. The tokens Firebase issues last for 1 hour, but the User object in the Firebase SDK handles token refreshing transparently. This is why wanted to include the Firebase SDK in my addon.
Loading the Firebase js SDK in the context of a webextension does not work in Firefox. It does for Chrome. I’ve created a test repository, which logs a test user into a test application here.
The app will try to log in the user after the application button is clicked.
With Firefox 55.0.2 (Linux 64bit), the following errors occur prior to clicking the button (merely by loading the addon):
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 52: SyntaxError: test for equality (==) mistyped as assignment (=)?
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 57: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 57: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 82: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 101: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 106: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 107: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 125: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 177: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 272: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 274: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 396: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 412: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 471: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 475: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 477: SyntaxError: test for equality (==) mistyped as assignment (=)?
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 28: ReferenceError: reference to undefined property "name_"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 285: ReferenceError: reference to undefined property "a"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 28: ReferenceError: reference to undefined property "Auth"
And then after clicking the button:
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 279: ReferenceError: reference to undefined property "currentUser"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 59: ReferenceError: reference to undefined property "closure_lm_434254"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 54: ReferenceError: reference to undefined property "storage"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 176: ReferenceError: reference to undefined property "Va"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 176: ReferenceError: reference to undefined property "Oe"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 91: ReferenceError: reference to undefined property "readystatechange"
Additionally, the console shows a blocked CORS request to www.googleapis.com
(note this domain is whitelisted in the CPS directive in manifest.json) and a
Firebase error auth/network-request-failed.
Detailed instructions are in the Readme.
My question is: does Firebase just not work with Firefox, or is there anything I can do to make it work? In particular, am I missing some stuff in the manifest.json or do I need to first pipe the Firebase SDK through Babel, because SpiderMonkey doesn’t understand some JS that V8 does?
For the record, loading Firebase in a web-page with Firebase works without a hitch.
For completeness, MWE as follows:
manifest.json
{
"description": "Firebase & Firefox test case",
"homepage_url": "https://github.com/adimit/test-firebase",
"manifest_version": 2,
"name": "firebase-test-case",
"version": "1.0.0",
"icons": {
"64": "icons/logo-64.png"
},
"browser_action": {
"browser_style": true,
"default_icon": {
"64": "icons/logo-64.png"
}
},
"background": {
"scripts": [
"firebase.js", "background.js"
]
},
"content_security_policy": "script-src 'self' 'unsafe-eval' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
"permissions": [
"tabs",
"storage"
]
}
background.js:
const clickButton = () => {
console.log("firebase object", firebase);
var config = {
apiKey: "AIzaSyABe5Ge-PSeZzfZU2EhllUI-w3fMb1nci8",
authDomain: "webext-firefox.firebaseapp.com",
databaseURL: "https://webext-firefox.firebaseio.com",
projectId: "webext-firefox",
storageBucket: "",
messagingSenderId: "909758240321"
};
firebase.initializeApp(config);
const user = {
id: "no.email@example.com",
password: "test-password"
};
firebase.auth().signInWithEmailAndPassword(
user.id,
user.password
).then(
user => {
console.log("user", user);
},
error => {
console.log("error", error);
}
);
};
chrome.browserAction.onClicked.addListener(clickButton);
You have to copy firebase from a CDN. Something like curl -LO "https://www.gstatic.com/firebasejs/4.0.0/firebase.js" should do.
Though I suggest if you want to try it out, you use the above repo I linked.