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:
Firebase.enableLogging(true);
var f = new Firebase('https://myapp.firebaseio.com/');
f.authWithPassword({
email : "[email protected]",
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;
}
</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 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?