raphaelheinz · NamanS4ini · Jul 13, 2025 · Jul 13, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,57 @@
+# Changelog
+
+## [0.0.15] - Cross-Browser Compatibility Update
+
+### Added
+- ✨ **Firefox Support**: Full compatibility with Firefox browsers using Manifest V2
+- 🔧 **Browser Polyfill**: Unified API layer for Chrome and Firefox compatibility  
+- 📦 **Build System**: Automated build scripts for Chrome and Firefox distributions
+- 📖 **Cross-Browser Guide**: Comprehensive documentation for multi-browser support
+- 🧪 **Testing**: Browser polyfill test page for verification
+
+### Enhanced
+- 🌐 **Chrome Support**: Maintained full Chrome/Edge/Opera compatibility with Manifest V3
+- 📋 **Manifest Files**: Separate optimized manifests for each browser
+- 🚀 **Build Commands**: New npm scripts for browser-specific builds
+- 📚 **Documentation**: Updated README with cross-browser installation instructions
+
+### Technical Details
+- Browser polyfill provides unified `chrome.*` and `browser.*` APIs
+- Chrome build uses Manifest V3 with service workers
+- Firefox build uses Manifest V2 with background scripts  
+- Automatic browser detection and API mapping
+- Robust error handling for API compatibility
+
+### Build Commands
+```bash
+npm run build:chrome   # Build for Chrome/Edge/Opera
+npm run build:firefox  # Build for Firefox
+npm run build:all      # Build for all browsers
+```
+
+### Browser Support Matrix
+| Browser | Version | Manifest | Status |
+|---------|---------|----------|--------|
+| Chrome  | Latest  | V3       | ✅ Full Support |
+| Firefox | 109+    | V2       | ✅ Full Support |
+| Edge    | Latest  | V3       | ✅ Full Support |
+| Opera   | Latest  | V3       | ✅ Full Support |
+
+### Migration Guide
+Existing Chrome users: No changes needed, extension continues to work normally.
+New Firefox users: See [Cross-Browser Compatibility Guide](CROSS_BROWSER_GUIDE.md) for installation.
+
+### Files Added
+- `src/js/browser-polyfill.js` - Cross-browser API compatibility layer
+- `manifest-firefox.json` - Firefox-specific manifest file
+- `scripts/build-chrome.js` - Chrome build automation
+- `scripts/build-firefox.js` - Firefox build automation  
+- `CROSS_BROWSER_GUIDE.md` - Comprehensive cross-browser documentation
+- `test/polyfill-test.html` - Browser compatibility testing page
+
+### Files Modified
+- `manifest.json` - Enhanced for Chrome with additional permissions
+- `src/html/popup.html` - Added browser polyfill script
+- `src/html/welcome.html` - Added browser polyfill script
+- `package.json` - Added build scripts and commands
+- `README.md` - Updated with cross-browser information
diff --git a/CROSS_BROWSER_GUIDE.md b/CROSS_BROWSER_GUIDE.md
@@ -0,0 +1,168 @@
+## 🔁 Cross-Browser Compatibility
+
+LeetHub now works on both **Chrome-based browsers** (Chrome, Edge, Opera) and **Firefox-based browsers** (like Zen browser).  
+This was achieved using `webextension-polyfill` and Firefox-specific manifest support.
+
+Thanks to [@NamanS4ini](https://github.com/NamanS4ini) for the cross-browser patch 🙌
+
+## Browser Support
+
+- ✅ **Chrome** (Manifest V3)
+- ✅ **Firefox** (Manifest V2)
+- ✅ **Edge** (Uses Chrome build)
+- ✅ **Opera** (Uses Chrome build)
+
+## Architecture
+
+The extension uses a browser compatibility layer (`src/js/browser-polyfill.js`) that provides a unified API interface for both browsers. This allows the same codebase to work across different browsers without modification.
+
+### Key Features:
+- **Unified API**: The polyfill ensures that `chrome.*` APIs work in Firefox and `browser.*` APIs work in Chrome
+- **Automatic Detection**: The extension automatically detects which browser it's running in
+- **No Code Changes**: Existing code continues to work without modifications
+
+## Building for Different Browsers
+
+### Prerequisites
+```bash
+npm install
+```
+
+### Build Commands
+
+#### For Chrome/Edge/Opera (Manifest V3)
+```bash
+npm run build:chrome
+```
+This creates a `build/chrome/` folder with Chrome-compatible files.
+
+#### For Firefox (Manifest V2)
+```bash
+npm run build:firefox
+```
+This creates a `build/firefox/` folder with Firefox-compatible files.
+
+#### Build for All Browsers
+```bash
+npm run build:all
+```
+This creates both Chrome and Firefox builds.
+
+## Installation
+
+### Chrome/Edge/Opera
+1. Run `npm run build:chrome`
+2. Open Chrome and go to `chrome://extensions/`
+3. Enable "Developer mode"
+4. Click "Load unpacked" and select the `build/chrome/` folder
+
+### Firefox
+1. Run `npm run build:firefox`
+2. Open Firefox and go to `about:debugging`
+3. Click "This Firefox"
+4. Click "Load Temporary Add-on"
+5. Select the `manifest.json` file from `build/firefox/` folder
+
+## Distribution
+
+### Chrome Web Store
+1. Build with `npm run build:chrome`
+2. Zip the `build/chrome/` folder
+3. Upload to Chrome Web Store
+
+### Firefox Add-ons (AMO)
+1. Build with `npm run build:firefox`
+2. Zip the `build/firefox/` folder
+3. Upload to Firefox Add-ons
+
+## Technical Details
+
+### Manifest Differences
+
+**Chrome (Manifest V3)**:
+- Uses `action` instead of `browser_action`
+- Uses `service_worker` for background scripts
+- Requires `host_permissions` for external sites
+- Uses `tabs` permission explicitly
+
+**Firefox (Manifest V2)**:
+- Uses `browser_action`
+- Uses `scripts` array for background scripts
+- Includes permissions in main `permissions` array
+- Different CSP format
+
+### API Compatibility
+
+The browser polyfill handles these API differences:
+- `chrome.runtime.*` ↔ `browser.runtime.*`
+- `chrome.tabs.*` ↔ `browser.tabs.*`
+- `chrome.storage.*` ↔ `browser.storage.*`
+
+### OAuth2 Flow
+
+Both browsers use the same OAuth2 flow with GitHub:
+- Client ID: `0114dd35b156d4729fac`
+- Redirect URL: `https://github.com/`
+- Scopes: `['repo']`
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Extension not loading in Firefox**
+   - Make sure you used `npm run build:firefox`
+   - Check that you're loading from the `build/firefox/` folder
+   - Verify Firefox version is 109.0 or higher
+
+2. **APIs not working**
+   - Ensure `browser-polyfill.js` is loaded first in all HTML files
+   - Check browser console for polyfill errors
+
+3. **Permission errors**
+   - Chrome: Check `host_permissions` in manifest
+   - Firefox: Check `permissions` array includes URLs
+
+### Debug Mode
+
+To enable debug logging, open browser console and check for:
+- Polyfill initialization messages
+- API call traces
+- Permission warnings
+
+## Development
+
+When developing new features:
+
+1. **Use chrome.* APIs**: The polyfill will handle Firefox compatibility
+2. **Test in both browsers**: Use the build commands to test in each browser
+3. **Update permissions**: Add new permissions to both manifest files
+4. **Check CSP**: Ensure Content Security Policy works in both browsers
+
+## Contributing
+
+When contributing cross-browser fixes:
+
+1. Test changes in both Chrome and Firefox
+2. Update both manifest files if needed
+3. Ensure polyfill covers new APIs
+4. Update this documentation
+
+## Browser-Specific Notes
+
+### Chrome
+- Full Manifest V3 support
+- Service worker background scripts
+- Robust extension APIs
+
+### Firefox
+- Uses Manifest V2 (more stable than V3 in Firefox)
+- Background scripts (not service workers)
+- Promise-based APIs by default
+
+### Edge
+- Uses Chrome build (Chromium-based)
+- Full compatibility with Chrome version
+
+### Opera
+- Uses Chrome build (Chromium-based)
+- Full compatibility with Chrome version
diff --git a/README.md b/README.md
@@ -19,7 +19,15 @@
 
 ## What is LeetHub-3.0?
 
-A chrome extension that automatically pushes your code to GitHub when you pass all tests on a <a href="http://leetcode.com/">Leetcode</a> problem. It's forked from <a href="https://github.com/arunbhardwaj/LeetHub-2.0">LeetHub-2.0</a> which is not compatible with Leetcode anymore since the latest updates.
+A cross-browser extension that automatically pushes your code to GitHub when you pass all tests on a <a href="http://leetcode.com/">Leetcode</a> problem. It's forked from <a href="https://github.com/arunbhardwaj/LeetHub-2.0">LeetHub-2.0</a> which is not compatible with Leetcode anymore since the latest updates.
+
+### Browser Support
+- ✅ **Chrome** (Manifest V3)
+- ✅ **Firefox** (Manifest V2) 
+- ✅ **Edge** (Chromium-based)
+- ✅ **Opera** (Chromium-based)
+
+> 📖 **See [Cross-Browser Compatibility Guide](CROSS_BROWSER_GUIDE.md) for detailed installation and building instructions for each browser.**
 
 
 ## Why LeetHub?
@@ -49,32 +57,48 @@ In the meantime, we have added a manual synchronization button next to notes ico
 
 ## Installation
 
+### Chrome/Edge/Opera
+
 <div align="center">
     <a href="https://chromewebstore.google.com/u/1/detail/leethub-v3/kdkgpjpenaeoodajljkflmlnkoihkmda" rel="Download leetcode plugin">
         <img src="https://embedsignage.com/wp-content/uploads/2016/04/embed-signage-chromeos-web-store-button.png" alt="Download leetcode plugin" width="300" />
     </a>
 </div>
 
-1. **Chrome Web Store**
+Install from Chrome Web Store (recommended for automatic updates).
+
+### Firefox
+
+Firefox support is available! See the [Cross-Browser Compatibility Guide](CROSS_BROWSER_GUIDE.md) for detailed Firefox installation instructions.
+
+### Manual Installation (All Browsers)
 
-    Install this plugin using Chrome Web Store. Please find the link above. This is the preferred way of installation. Updates are installed automatically.
+For manual installation or development:
 
+1. **Download and Setup**
+   ```bash
+   git clone https://github.com/raphaelheinz/LeetHub-3.0.git
+   cd LeetHub-3.0
+   npm run setup
+   ```
 
-2. **(Optional) Manual installation**
+2. **Build for your browser**
+   ```bash
+   # For Chrome/Edge/Opera
+   npm run build:chrome
+
+   # For Firefox  
+   npm run build:firefox
+
+   # For all browsers
+   npm run build:all
+   ```
 
-    You can also install the plugin manually. Please follow the steps below.
+3. **Load Extension**
+   - **Chrome/Edge**: Go to `chrome://extensions`, enable Developer mode, click "Load unpacked", select `build/chrome/` folder
+   - **Firefox**: Go to `about:debugging`, click "This Firefox", click "Load Temporary Add-on", select `manifest.json` from `build/firefox/` folder
 
-    * Create your own OAuth app in GitHub (https://github.com/settings/applications/new) and store CLIENT_ID and CLIENT_SECRET confidentially
-        * Application name: [CUSTOM]
-        * Homepage URL: https://github.com/raphaelheinz/LeetHub-3.0
-        * Authorization callback URL: https://github.com/
-    * Download the project ZIP (<a href="https://github.com/raphaelheinz/LeetHub-3.0/releases">Releases</a>) or clone this repository
-    * Run ```npm run setup``` to install the developer dependencies
-    * Update CLIENT_ID and CLIENT_SECRET in ```src/js/authorize.js``` and ```src/js/oauth2.js``` with your ids
-    * Go to <a href="chrome://extensions">chrome://extensions</a>
-    * Enable <a href="https://www.mstoic.com/enable-developer-mode-in-chrome/">Developer mode</a> by toggling the switch on top right corner
-    * Click **"Load unpacked"**
-    * Select the entire LeetHub folder
+> 📖 **For detailed instructions, OAuth setup, and troubleshooting, see [Cross-Browser Compatibility Guide](CROSS_BROWSER_GUIDE.md)**
 
 
 ## Setup
@@ -94,6 +118,9 @@ npm run format        # Auto-format JavaScript, HTML/CSS
 npm run format-test   # Test if code is formatted properly
 npm run lint          # Lint JavaScript
 npm run lint-test     # Test if code is linted properly
+npm run build:chrome  # Build Chrome/Edge/Opera extension
+npm run build:firefox # Build Firefox extension
+npm run build:all     # Build for all browsers
 ```
 
 ## Contribution

diff --git a/manifest-firefox.json b/manifest-firefox.json
@@ -0,0 +1,50 @@
+{
+  "manifest_version": 2,
+  "name": "LeetHub-3.0",
+  "description": "Automatically integrate your Leetcode submissions to GitHub",
+  "homepage_url": "https://github.com/raphaelheinz/LeetHub-3.0",
+  "version": "0.0.15",
+  "author": "Raphael Heinz",
+  "browser_action": {
+    "default_icon": "assets/thumbnail.png",
+    "default_popup": "src/html/popup.html"
+  },
+  "icons": {
+    "16": "assets/thumbnail.png",
+    "48": "assets/thumbnail.png",
+    "128": "assets/thumbnail.png"
+  },
+  "background": {
+    "scripts": ["src/js/browser-polyfill.js", "src/js/background.js"],
+    "persistent": true
+  },
+  "permissions": [
+    "unlimitedStorage",
+    "storage",
+    "tabs",
+    "https://leetcode.com/*",
+    "https://github.com/*",
+    "https://api.github.com/*"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "https://leetcode.com/*",
+        "https://github.com/*"
+      ],
+      "js": [
+        "src/js/browser-polyfill.js",
+        "src/js/leetcode.js",
+        "src/js/authorize.js"
+      ],
+      "run_at": "document_idle"
+    }
+  ],
+  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "leethub@firefox.vthree",
+      "strict_min_version": "109.0"
+    }
+  }
+}