Next QR Code Generator

A addon to generate Chromium-style QR codes featuring the iconic Firefox logo.

🌟 Features

• Chromium-Style QR Codes: Generates QR codes with the exact same styling as Chrome's native implementation
• Firefox Logo Center: Features the Firefox logo in the center of QR codes
• Instant Generation: Automatically generates QR codes for the current page URL
• Custom Text Support: Create QR codes for any text or URL you enter
• One-Click Copy: Copy QR codes to clipboard as high-quality PNG images
• Easy Download: Download QR codes with smart filename generation
• Perfect Sizing: Matches Chrome's exact QR code dimensions and styling
• Dark Mode Support: Seamlessly integrates with your browser's theme

From Firefox Add-ons Store

You can install the extension directly from the Firefox Add-ons Store.

Manual Installation (Development)

1. Clone the repository

1. Install dependencies

1. Build the extension

1. Load in Firefox
2. Open Firefox and navigate to about:debugging#/runtime/this-firefox
3. Click "Load Temporary Add-on"
4. Select the manifest.json file from the .output/firefox-mv2 folder

1. Access the Extension: Click the QR code icon in your browser's toolbar
2. Auto-Fill Current URL: The extension automatically loads the current page's URL
3. Custom Text: Replace the URL with any text you want to convert to a QR code
4. Copy to Clipboard: Click the "Copy" button to copy the QR code as an image
5. Download: Click "Download" to save the QR code as a PNG file

• Framework: WXT - Modern web extension framework
• Frontend: React 19 + TypeScript
• Styling: Tailwind CSS 4.0 + Radix UI components
• QR Generation: WebAssembly (WASM) module for Chromium-exact QR code generation
• Build System: Vite + Rollup
• Package Manager: pnpm

Prerequisites

• Node.js ≥ 24.3.0
• pnpm ≥ 10.12.4

# Start development server pnpm dev

pnpm format

Project Structure

src/ ├── components/ │ └── ui/ # Reusable UI components ├── hooks/ │ ├── use-qrcode.ts # QR code generation logic │ └── use-dark-mode.ts ├── lib/ │ ├── wasm-loader.ts # WASM module loader │ └── utils.ts ├── popup/ │ ├── App.tsx # Main popup component │ └── main.tsx # Entry point ├── providers/ │ └── theme.tsx # Theme provider ├── styles/ │ └── base.css # Global styles └── types/ # TypeScript type definitions

🎨 Features in Detail

Chromium-Exact QR Generation

The extension uses a WebAssembly module that replicates Chrome's native QR code generation algorithm, ensuring:

• Identical visual appearance to Chrome's built-in QR codes
• Same module styling (circles vs squares)
• Rounded locator patterns
• Exact sizing and margins

Downloaded QR codes automatically get meaningful filenames:

• qrcode_example.com.png for domain names
• qrcode_firefox.png for other content

• Full keyboard navigation support
• Screen reader compatible
• High contrast mode support
• Proper ARIA labels and descriptions

This project uses automated releases through GitHub Actions.

Creating a Release

# Stable release (publish to store) pnpm version 1.0.0 git push origin main git push origin 1.0.0

pnpm version prerelease --preid='[alpha｜beta|rc]' git push origin main git push origin 1.0.0-alpha.0

Version Types

• Stable (1.0.0): Auto-published to Firefox Add-ons Store
• Alpha/Beta/RC (1.0.0-alpha.0): GitHub releases only for testing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

1. Follow the existing code style
2. Add TypeScript types for new features
3. Test on Firefox
4. Update documentation as needed

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Chrome team for the original QR code implementation
• WXT for the excellent extension framework
• Radix UI for accessible components
• Tailwind CSS for styling utilities

If you encounter any issues or have questions:

• Open an issue on GitHub