Firebase Cloud Messaging in a Chrome Extension with MV3

The documentation is relatively sparse regarding how to get FCM to work on a Chrome Extension. This blog post attempts to change that by diving into exactly what needs to be done to get Firebase Cloud Messaging working in an MV3 extension.

Framework

We'll use the Plasmo framework for this post since it's the easiest way to build a browser extension.

If you'd like to follow along,

1pnpm dlx plasmo init

To see a fully built example, check out with-firebase-fcm.

Prerequisites

• Firebase Account
• Firebase Project
• Plasmo Framework

Creating Your Background Script

Create a new file in your Plasmo directory called background.ts, and make sure to export an empty object since it's a module.

background.ts

1export {}
2
3// write your code here

First, let's clear things up, shall we?

If you look at the current Chrome extension documentation, you'll notice an API called chrome.gcm.

At the time of writing, Google's docs state:

Google deprecated Google Cloud Messaging years ago and is now using Firebase Cloud Messaging. However, the documentation and API interface have not been updated and reference GCM.

chrome.gcm is the easiest way to interface with Firebase Cloud Messaging.

Here's a high-level overview:

1. Our extension registers itself to Firebase
2. Our extension receives a registration token from Firebase upon successful registration
3. We can use this registration token to reference the particular user when sending our message

Permissions

Make sure to add the gcm permission in your manifest file.

Registering Ourselves with Firebase Cloud Messaging (FCM)

Remember, all the code we write here should go in the background service worker file.

The first step is to register ourselves:

1chrome.gcm.register(["<SENDER ID HERE>"], someCallBackFunc)

The register function expects a list of sender IDs and a callback function. Each Firebase Project has a Sender ID that you can find by going to your Project Settings and the Cloud Messaging tab.

Going to the Firebase Project settings:

‎

Going to the Cloud Messaging Tab and finding your Sender ID:

Getting the Registration Token from FCM

chrome.gcm.register expects a callback function with a single parameter. It'll pass a registration_id back to us. This is the token we can use in the future to reference this particular extension when sending messages.

1function tokenRegistered(registration_id) {
2  // The token can be used to send messages specifically to this
3  // user. So you can store it server side and when you need to send
4  // a message, you can do so.
5  console.log("Registered: ", registration_id)
6  if (chrome.runtime.lastError) {
7    console.log("failed")
8    return
9  }
10}

You can save this token however you'd like. However, that's outside the scope of this guide. So, we'll copy it into our clipboard once we see it in the console rather than saving it.

Sending a Message to the Extension from FCM

We'll need to be able to listen to messages, so let's write a listener.

1chrome.gcm.onMessage.addListener((message) => {
2  console.log("message", message)
3})

Now that we have everything in place let's send a test message.

Head back to your Cloud Messaging tab where you got your Sender ID, and look for the "legacy Server key" section.

---

Locate your Server Key

---

Replace <Your API Key> with this Server Key, and replace <User token> with the registration token you saved when we registered the user with chrome.gcm.register.

1curl -X POST --header "Authorization: key=<Your API Key>” \
2    --Header "Content-Type: application/json" \
3    https://fcm.googleapis.com/fcm/send \
4    -d "{\"to\”:\”<User token>\”,\”notification\":{\"title\":\"Hello\",\"body\":\"Yellow\"}}"

You should see the message logged in your background service worker's console if you did everything correctly!

Waking a Service Worker with FCM

With the move to Manifest Version 3, one of the most important things to be intimately familiar with is what wakes a service worker up.

FCM is the only way to wake a service worker up outside the browser. This opens up a lot of attractive solutions to problems that arise from the MV3 architecture.

Examples where FCM might be useful

• You can replace existing web socket listeners with an FCM-based approach.
• When an event takes place outside the browser, you can use FCM to let your Chrome extension know about it.
• You can use FCM to send push notifications to your extension's users.

Plasmo

Thanks for reading our post on Firebase Cloud Messaging in a Chrome Extension! We're Plasmo, a company on a mission to improve browser extension development for everyone. If you're a company looking to level up your browser extension's reliability and security, reach out! We offer a cloud service that automatically tests your extension on millions of sites, a solution for distributing Chrome extensions to your team automatically, and more.

Back to Blog