Site | NPM Module | GitHub Repo

Ultimate Browser Extension is a template that helps you jumpstart your Jekyll sites and is fueled by an intuitive incorporation of npm, gulp, and is fully SEO optimized and blazingly fast.

🦄 Features

* Build for Any Browser: Export to Chrome, Firefox, Edge, and Opera.
* NPM & Gulp: Fueled by an intuitive incorporation of npm and gulp.

🚀 Getting started

1. Create a repo from the Ultimate Browser Extension template.
2. Clone the repo to your local machine.
3. Run these command to get everything setup and sync'd!
``

bash
npm install
npx bxm setup
npm start


4. Open your browser and navigate to

chrome://extensions

 (or the equivalent for your browser).
5. Enable Developer mode.
6. Click on Load unpacked and select the

dist

 folder in your project directory.
7. Your extension should now be loaded and ready to use!
📦 How to sync with the template

1. Simply run

npx bxm setup

 in Terminal to get all the latest updates from the Ultimate Browser Extension template.
🌐 Automatic Translation

When you run

npm run build, BXM automatically translates your src/_locales/en/messages.json

 to 16 languages using Claude CLI:

zh, es, hi, ar, pt, ru, ja, de, fr, ko, ur, id, bn, tl, vi, it


Only missing translations are generated - existing translations are preserved.
🌎 Publishing your extension
$3

1. Run

npm run build

 in Terminal to build your extension for production.
2. Upload the

.zip

 file to the browser's extension store.
$3

BXM can automatically publish to Chrome, Firefox, and Edge stores when

BXM_IS_PUBLISH=true:

`bash BXM_IS_PUBLISH=true npm run build`

Setup: Add store credentials to your .env file:

`bash

`Chrome Web Store`


CHROME_EXTENSION_ID="your-extension-id"
CHROME_CLIENT_ID="your-client-id"
CHROME_CLIENT_SECRET="your-client-secret"
CHROME_REFRESH_TOKEN="your-refresh-token"
Firefox Add-ons

FIREFOX_EXTENSION_ID="your-extension-id"
FIREFOX_API_KEY="your-api-key"
FIREFOX_API_SECRET="your-api-secret"
Microsoft Edge Add-ons

EDGE_PRODUCT_ID="your-product-id"
EDGE_CLIENT_ID="your-client-id"
EDGE_API_KEY="your-api-key"


Only stores with configured credentials will be published to.
🔐 Authentication
BXM provides built-in authentication that syncs across all extension contexts (popup, options, pages, sidepanel, background).
$3
Background.js is the source of truth. Auth syncs via messaging (no storage).

- Sign-in: User clicks .auth-signin-btn → opens /tokenpage on website → website authenticates and redirects with token → background.js signs in and broadcasts to all open contexts - Context load: Each context compares its UID with background's UID on load; syncs if different - Sign-out: User clicks.auth-signout-btn → context signs out → notifies background → background broadcasts sign-out to all contexts

`$3`

1. Add authDomain to your Firebase config in config/browser-extension-manager.json2. Addtabs permission to src/manifest.json (for URL monitoring)

`$3`

| Class | Action | |-------|--------| |.auth-signin-btn | Opens /tokenpage on website | |.auth-signout-btn| Signs out via Web Manager | |.auth-account-btn | Opens /account page on website |

`$3`

html

  User


$3

-

@show auth.user / @show !auth.user

 - Show/hide based on auth state
-

@text auth.user.displayName / @text auth.user.email

 - Display user info
-

@attr src auth.user.photoURL

 - Set avatar image

Site | NPM Module | GitHub Repo Ultimate Browser Extension is a template that helps you jumpstart your Jekyll sites and is fueled by an intuitive incorporation of npm, gulp, and is fully SEO optimized and blazingly fast.

`🦄 Features`


* Build for Any Browser: Export to Chrome, Firefox, Edge, and Opera.
* NPM & Gulp: Fueled by an intuitive incorporation of npm and gulp.
🚀 Getting started

1. Create a repo from the Ultimate Browser Extension template.
2. Clone the repo to your local machine.
3. Run these command to get everything setup and sync'd!
``bash
npm install
npx bxm setup
npm start
`
4. Open your browser and navigate to chrome://extensions (or the equivalent for your browser).
5. Enable Developer mode.
6. Click on Load unpacked and select the dist folder in your project directory.
7. Your extension should now be loaded and ready to use!
📦 How to sync with the template

1. Simply run npx bxm setup in Terminal to get all the latest updates from the Ultimate Browser Extension template.
🌐 Automatic Translation

When you run npm run build, BXM automatically translates your src/_locales/en/messages.json to 16 languages using Claude CLI:
zh, es, hi, ar, pt, ru, ja, de, fr, ko, ur, id, bn, tl, vi, it
Only missing translations are generated - existing translations are preserved.
🌎 Publishing your extension
$3

1. Run npm run build in Terminal to build your extension for production.
2. Upload the .zip file to the browser's extension store.
$3

BXM can automatically publish to Chrome, Firefox, and Edge stores when BXM_IS_PUBLISH=true:`bash
BXM_IS_PUBLISH=true npm run build
`
Setup: Add store credentials to your .env file:
`bash
Chrome Web Store

CHROME_EXTENSION_ID="your-extension-id"
CHROME_CLIENT_ID="your-client-id"
CHROME_CLIENT_SECRET="your-client-secret"
CHROME_REFRESH_TOKEN="your-refresh-token"
Firefox Add-ons

FIREFOX_EXTENSION_ID="your-extension-id"
FIREFOX_API_KEY="your-api-key"
FIREFOX_API_SECRET="your-api-secret"
Microsoft Edge Add-ons

EDGE_PRODUCT_ID="your-product-id"
EDGE_CLIENT_ID="your-client-id"
EDGE_API_KEY="your-api-key"
`
Only stores with configured credentials will be published to.
🔐 Authentication
BXM provides built-in authentication that syncs across all extension contexts (popup, options, pages, sidepanel, background).
$3
Background.js is the source of truth. Auth syncs via messaging (no storage).- Sign-in: User clicks .auth-signin-btn → opens /token page on website → website authenticates and redirects with token → background.js signs in and broadcasts to all open contexts
- Context load: Each context compares its UID with background's UID on load; syncs if different
- Sign-out: User clicks .auth-signout-btn → context signs out → notifies background → background broadcasts sign-out to all contexts
$3
1. Add authDomain to your Firebase config in config/browser-extension-manager.json
2. Add tabs permission to src/manifest.json (for URL monitoring)
$3
| Class | Action |
|-------|--------|
| .auth-signin-btn | Opens /token page on website |
| .auth-signout-btn | Signs out via Web Manager |
| .auth-account-btn | Opens /account page on website |
$3

`html

  User
  

`
$3

- @show auth.user / @show !auth.user - Show/hide based on auth state
- @text auth.user.displayName / @text auth.user.email - Display user info
- @attr src auth.user.photoURL - Set avatar image