My Chrome extension development experience with Svelte and Firebase

Hi guys👋, my name is Fabio and in this article I’m going to guide you into the Chrome extensions development realm using Svelte and Firebase✨

Motivation

Since when I started the development of my first Chrome extension I noticed the lack of a solid community about this platform and documentation about using different tools to develop an extension, so I hope that this guide will be helpful.

What have I built?

This extension will let people comments under Youtube videos with comments disabled.

Development stack

• Chrome extension APIs
• Svelte
• Firebase
• Youtube APIs
• Bootstrap

Note: I’m assuming you already have a basic knowledge of what a Chrome extension is, and its core concepts. If this isn’t the case, I suggest you to have a look at the official documentation.

Let’s start!

Okay, first of all we are going to start with an empty folder named “extension”. Inside it, we are going to add the manifest. It is a json file that contains all the information the browser need to know in order to run the extension; ours looks like this:

The content_security_policy field is essential in order to use Google APIs and Firebase.

Note: Manifest V3 is available, and you should prefer it over manifest V2. However, I encountered some issues using the Firebase SDK with manifest V3. This is the reason I’m still using version 2.

Since we are going to use this extension only for Youtube videos, we need to dynamically enabling/disabling the popup action based on the url of the tab. To do so, we need a background page and a simple script:

The first two lines of background.html are needed to initialize the firebase SDK.

And finally our popup.html:

Hold on, why is the body so empty? 🤔 That’s because all the UI and logic will be developed with Svelte and compiled into a Javascript file, which is imported at line 12 😉

Add a Svelte project

Now that the setup is finished, it’s time to dive into the actual extension development. First of all, create a new Svelte project. If you aren’t sure how to do that, take a look at the Svelte website. Move the “extension” folder we created earlier inside the root folder of the project.

Now if you run the ‘npm run build’ command on the Svelte project, a new folder named “public” will appear. This is where the bundles generated by svelte are. We want to include our extension folder inside it at every build. To do so, we are going to install a library called cpx:

npm install --save cpx

and edit the package.json file’s “scripts>build” field like this:

{ “name”: “svelte-app”, 
  “version”: “1.0.0”, 
  “private”: true, 
  “scripts”: { 
    “build”: “cpx -C public/** public/** && rollup -c && cpx extension/**/*.* public”, 
    “dev”: “rollup -c -w”, 
    “start”: “sirv public — no-clear”
  },
  ...
}

Firebase🔥

Authentication and database functionalities are taken care by Firebase. Run the following command to install it:

npm install --save firebase

Inside App.svelte we have to initialize the firebase app:

import firebase from “firebase/app”;
var firebaseConfig = {
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
}
firebase.initializeApp(firebaseConfig);

where firebaseConfig is an object that you can find in your firebase project’s console under Project’s settings > Generals > Your apps (make sure you added a web app to you firebase project first).

Every time you want to use a firebase service just import the firebase object from “firebase/app” and the specific feature you need, like

import “firebase/auth”; //for authentication

or

import “firebase/firestore”; //for the database

❗ Authentication with Firebase

I would like to dive into the details of the Firebase authentication in a Chrome extension. In particular, I know two ways you can do it: with an extension’s background script, or directly inside your svelte app.

With the background script

Using this method you have to append all the methods you need for authentication to background.js and use the Chrome’s message APIs to exchange messages with Svelte

and inside the Svelte project:

With Firebase methods directly in Svelte

In this case you don’t need to modify background.js. Just use the firebase SDK methods inside your Svelte app like this:

Looks easier… 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:

// This is the same file of the previous example
.then((result)=>{
  // login successful 
  chrome.storage.local.set({ user: result.user }, function () {
    console.log("User data has been stored in storage");
  });
})

To check whether the user is logged in, just check whether the user key is contained in the local storage:

chrome.storage.local.get("user", function(result){
  if ("user" in result)
    // user logged in
});

Finally, when the user asks to logout we’ll have to delete the user entry from the storage:

chrome.storage.local.remove(“user”);

If you want to know more about Firebase authentication in Chrome extension, I suggest you this article:

👉Chrome extensions development: authentication with Firebase

Application states

I decided to divide the extension logic in states, and manage them individually. In my case the state is just a variable of type Writable stores (doc here) that let me dynamically update the UI when I change its value.

I suggest to use a “stores” variable whenever you want to instantly update the UI when its value changes.

I like to keep all my stores in a separate Javascript file and import them if necessary.

Load the extension in Chrome

Now that we have our Chrome extension, let’s try it in action. Go to the extensions manager panel of your browser and enable the developer mode. Now you should see the “Load unpacked” button. Click it, and select the “public” folder. This is where the previous command, ‘npm run build’, put our bundled files.

Remember: you have to run ‘npm run build’ every time you want to make your changes visible in the browser.

Conclusions

I know I didn’t covered everything, but my goal with this article is to share what I’ve learned and put you in the right direction to build a real world Chrome extension that goes beyond the “Hello world” examples of most tutorials.

You can find the full code here.

If you have any question or suggestion to improve this article, please let me know in the comments😉