Geek Answers Handbook

Firebase Authentication in Chrome Extension Popup

I am trying to get authentication (email / password) to work in the Chrome extension. It seems to work fine if I put the authentication code in the background of the script. However, I cannot get it to work as a browser script action.

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

I changed browser_action.js to:

Firebase.enableLogging(true); var f = new Firebase('https://myapp.firebaseio.com/'); f.authWithPassword({ email : " a@b.cd ", password : "1234" }, function(error, authData) { if (error) { alert("Login Failed!", error); } else { alert("Authenticated successfully with payload:", authData); } });

And I saved the existing browser_action.html file 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; } </style> <div id="mainPopup"> <h1>Firebase test!</h1> <p>Clicks: <span id="contents"></span></p> </div> <script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script> <script src="browser_action.js"></script>

When I download 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 translate the firebase code and the authentication code into the background.js file, it works and warns that it completed successfully.

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

+7
javascript google-chrome-extension firebase firebase-authentication
source share
2 answers

This example of the chrome extension did not update after 3 years, so its version of Firebase is deprecated. 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 can successfully use authWithPassword .

+4
source share

For those who have come across this since July 2016, Firebase has an updated set of instructions for configuring auth for Chrome extensions (in their example, they use Google Auth). I jumped through a bunch of hoops before I stumbled upon this post ... to reliably save someone. https://github.com/firebase/quickstart-js/tree/master/auth/chromextension

+3
source share

More articles:


All Articles