Chrome extensions development: authentication with Firebase

Hi guys👋, my name is Fabio, and this is the first in a series of articles about developing a Chrome extension with Svelte and Firebase. In this series I would like to dive into key aspects of real-world Chrome extension development that in my opinion are very little covered by the official documentation. Enjoy😄

4 min readAug 2, 2021

Introduction

Firebase is a popular choice among developers who want an easy and rapid way to implement common services in their projects. In this article I’m going to show you everything you need to know about implementing Firebase authentication in your Chrome extension.

Note: I’m assuming you already have a basic experience developing Chrome extensions. If you have not, I suggest you to take a look at the official documentation

Firebase setup

Okay, first of all we have to setup the Firebase project. Go to your Firebase project’s console and add a new web app.

Copy the second step’s script in a notepad, we’ll need it later.

After that, enable Google authentication. Go to the authentication page using the menu on the left and enable the Google provider.

Finally, add your chrome extension id to the authorized domains:

You can find the id in the extension manager page of the browser, once you have loaded the extension.

Manifest

Now that Firebase is setup, let’s move to our Chrome extension. Inside manifest.json we have to add a background page and modify the content security policies like this:

{
  "name": "My Chrome extension",
  "version": "1.0",
  "manifest_version": 2,  "browser_action": {
    "default_popup": "popup.html"
  },  "background": {
    "persistent": false,
    "page": "background.html"
  },  "content_security_policy": "script-src 'self'    https://www.gstatic.com/ https://*.firebaseio.com   https://www.googleapis.com https://apis.google.com; object-src   'self'"
}

Create two new files, background.html and background.js. background.html should looks like this:

<script src=”https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<script src=”https://www.gstatic.com/firebasejs/7.16.0/firebase-auth.js"></script>
<script src=”background.js”></script>

while the content of background.js depends on the option you will choose later.

Firebase SDK

If you haven’t already, create a new Svelte project:

npx degit sveltejs/template my-svelte-project

and install the Firebase module:

npm install --save firebase

At this point, there are two options you can choose from: keep everything inside the Svelte project (my personal preference) or delegate authentication methods to the background script.

First method: everything inside the Svelte project

If you choose this option, then you don’t need a background page, so you can remove it from manifest.json (unless you have to use some Chrome API to listen for events, in this case keep it and put the listeners into background.js).

Open App.svelte. Here we are going to initialize the Firebase SDK and check whether the user has already logged in. Inside the script tag, import the firebase/app and the “firebase/auth” modules.

import firebase from "firebase/app";
import "firebase/auth";

To initialize the firebase app:

firebase.initializeApp(firebaseConfig);

You can find the firebaseConfig object in the script you copied earlier from the firebase console.

If the user is not logged in we want to prompt him to login. In the login page, retrieve the Google provider (the same procedure is applicable to other providers too) and call the signInWithPopup method (this is the only login method available for Chrome extensions).

// login_page.svelte
var provider = new firebase.auth.GoogleAuthProvider();firebase.auth().signInWithPopup(provider)
  .then((result) => {    
    // login successful
    let user = result.user;
    // ...
  }
);

Easy… right? Well, yes but there is a problem. Every time you close the extension popup, you loose the authentication data and the user will have to login in again. That’s pretty annoying, but fortunately I found a workaround. We just have to save the user’s info when he logs in the first time. I achieve this using the Chrome’s storage API. Add the storage permission in the manifest:

{
  ...
  
  "permissions": [
    "storage"
  ]
}

And edit the login page like this:

// login_page.svelte
.then((result)=>{
  // login successful 
  let user = result.user;
  chrome.storage.local.set({ user: user }, function () {
    console.log("User data has been stored in storage");
  });
})

To check whether the user is logged in or not:

// App.svelte
chrome.storage.local.get("user", function (result) {
  if ("user" in result)
    // user logged in
    let user = result.user;
  else
    // user not logged in
});

Last but not least, the logout function:

firebase.auth().signOut().then(()=>{
  // logout successful
  chrome.storage.local.remove("user");
  // go to login page
});

Remember to import firebase/app and firebase/auth in every file.

Second method: using the background script

The second option consists in sending messages from the Svelte app to the background script every time we want to use an authentication method. In this case you don’t have to store any user data because authentication is maintained.

Put this inside background.js:

and in the Svelte app:

Logout and user authentication checking are the same, just change the command parameter properly.

Conclusions

I hope you have found this article helpful😊.

If you have a question or suggestion to improve this article, let me know in the comments.