https://github.com/itw-creative-works/browser-extension-manager
Easily create browser extensions for Chrome, Firefox, Opera & more!
https://github.com/itw-creative-works/browser-extension-manager
browser browser-extension chrome css edge firefox html js
Last synced: 3 months ago
JSON representation
Easily create browser extensions for Chrome, Firefox, Opera & more!
- Host: GitHub
- URL: https://github.com/itw-creative-works/browser-extension-manager
- Owner: itw-creative-works
- License: mit
- Created: 2025-03-25T09:18:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-20T10:33:12.000Z (4 months ago)
- Last Synced: 2026-02-20T14:28:36.887Z (4 months ago)
- Topics: browser, browser-extension, chrome, css, edge, firefox, html, js
- Language: SCSS
- Homepage: https://itwcreativeworks.com
- Size: 905 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/itw-creative-works/ultimate-browser-extension/generate) 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
### Manual Upload
1. Run `npm run build` in Terminal to build your extension for production.
2. Upload the `.zip` file to the browser's extension store.
### Automatic Publishing
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).
### How It Works
**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
### Required Setup
1. Add `authDomain` to your Firebase config in `config/browser-extension-manager.json`
2. Add `tabs` permission to `src/manifest.json` (for URL monitoring)
### Auth Button Classes
| 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 |
### Example
```html
Sign In
User
Sign Out
```
### Reactive Bindings
- `@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