Using FCM in a Chrome Extension (manifest v3)

[Sam Stern]

Hey all,

I am trying to build a Chrome extension which receives FCM push notifications from my server. This feels like it should be a fairly common task but I have yet to find a reliable example demonstrating how to do this.

After a few hours of trial an error I finally got to a point where I can get "getToken" to work in a Chrome Extension but I had to do some pretty unsavory things:

1. I had to download firebase-app.js, firebase-messaging.js, and firebase-messaging-sw.js from gstatic and put them directly into my Chrome Extension source.
2. Within each of those files I had to change the "import { ... } from "https://gstatic.com/firebasejs/..." statements to be local relative imports

Downloading the JS files felt bad enough but the fact that I had to modify them to run (because Chrome extensions can't import outside code) makes me pretty sure this isn't how it's supposed to be done.

Has anybody gotten this to work in a cleaner way? Is receiving FCM messages in a Chrome Extension actually not something I am meant to do?

Thanks in advance for any help,

Sam

[Alan deLespinasse]

Can't you install the client libraries in your dev environment with npm or yarn, then build them into a minified JS bundle using Webpack/Babel/etc (same as you'd do for a regular web app)? Or does that still try to download something from gstatic at run time? As far as I can tell it doesn't...

(I haven't done this for a browser extension; the only extensions I've written have been extremely simple ones that didn't have any dependencies.)

[10basetom]

Have you tried this?

https://blog.plasmo.com/p/firebase-cloud-messaging-chrome-extension

[Joshua Dance]

Facing the same issue building an extension that uses Firestore.

I hadn't used npm or webpack before this, but since you can't use <script> tags to access the code from gstatic I had to learn both. But then I hit the issue that I was using v8 not modular v9 code in my app/extension and v8 doesn't play well with Chrome extensions because of the use of xhttp so I had to upgrade to v9. I tried the compat libraries but nothing was working, so ended up building the app back from scratch using modular v9.

I am now back to a working v9 Firebase app with Firestore using npm and webpack.

Next I am going to use chrome.identity to get a Google token, then pass that to Firestore to authenticate the user. 

Once I get that working I will update you here. 

But I agree, it seems way harder than it should have been to use v3 Manifest and Firebase together.