Hysen Labschrome-extension-mv3-firebase-boilerplate
The Chrome Extension with MV3 version shows example of authentication of Firebase SDK9 with Google Sign In enable. This boilerplate uses Webpack to speed up the process of writing modular Javascript code, loading HTML and CSS easily, and re-rendering the browser based on changes.
A Chrome extension boilerplate that outgrew MV2
Manifest V2 extensions sunset in January 2023. This boilerplate is a working example of an MV3 extension with Firebase SDK9 Google Sign In, bundled with Webpack.
What you get
It is a Chrome extension built on Manifest V3 that demonstrates Firebase SDK9 authentication with Google Sign In enabled. Webpack does the heavy lifting, making modular JavaScript easier to write, loading HTML and CSS without fuss, and re-rendering the browser when files change. For anyone starting a new extension in 2023 or later, this is the shape a project has to take anyway.
Why the migration matters
The motivation is concrete. Every extension supporting Manifest Version v2 sunset in January 2023, so new extensions have to target Version V3. The biggest security change in MV3 is that remotely hosted code, meaning JavaScript loaded from elsewhere, is no longer allowed. An extension codebase therefore has to be bundled and structured in a modular fashion. The Firebase side has its own wrinkle: the latest version points at SDK9, which needs module bundler support, and the built in FirebaseUI sign in library does not work at the moment because it does not support module bundling optimizations.
Project layout and setup
The boilerplate assumes you already know how to add Firebase Authentication to a web app and are comfortable with the Chrome Extension and Webpack docs. All extension development code goes in the src folder, including the manifest. The project ships with a popup, an options page, and a background page, and identity is added to permissions to support the authentication flow. Setup means installing the webpack packages, filling in the Firebase app details by replacing strings, then running npm install followed by npm run build. Separate scripts cover development and production release, and the gitignore keeps node modules and the dist folder out of the repository.
Community notes