Firebase Cloud Messaging in a Chrome Extension with MV3
Step by Step Guide on Integrating FCM in a Manifest Version 3 Chrome Extension
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
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:
Use chrome.gcm to enable apps and extensions to send and receive messages through the Google Cloud Messaging Service.
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:
- Our extension registers itself to Firebase
- Our extension receives a registration token from Firebase upon successful registration
- 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:
🖱️ Click on the Gear and select Project Settings
Going to the Cloud Messaging Tab and finding your Sender ID:
☁️ Find your Sender ID by going to the Cloud Messaging Tab
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.
Thanks for reading! 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, reach out, or sign up for Itero to get started.