DivZero DivZero - 1 year ago 147
Javascript Question

Firebase authentication in Chrome Extension popup

I'm trying to get authentication (email/password) to work in a Chrome Extension. I seems to work just fine if I put my authentication code in the background script. However I can't seem to get it to work as a browser action script.

I used the following code as the base of my extension: https://github.com/firebase/firebase-chrome-extension

I changed browser_action.js to:

var f = new Firebase('https://myapp.firebaseio.com/');

email : "a@b.cd",
password : "1234"
}, function(error, authData) {
if (error) {
alert("Login Failed!", error);
} else {
alert("Authenticated successfully with payload:", authData);

And I kept the existing browser_action.html unchanged:

<!doctype html>

<style type="text/css">
#mainPopup {
padding: 10px;
height: 200px;
width: 400px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
h1 {
font-size: 2em;

<div id="mainPopup">
<h1>Firebase test!</h1>
<p>Clicks: <span id="contents"></span></p>

<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="browser_action.js"></script>

When I load the extension and click on the icon it gives the following error in the console:

Uncaught TypeError: f.authWithPassword is not a function

If I move the firebase code and authentication code to background.js file it works and gives me an alert that it is succesfully authenticated.

What am I doing wrong or why is this not possible?

Answer Source

That example chrome extension hasn't been updated in 3 years, so its version of Firebase is out-of-date. Replace https://cdn.firebase.com/v0/firebase.js with https://cdn.firebase.com/js/client/2.2.1/firebase.js in browser_action.html and you should be able to use authWithPassword successfully.