Add QR Code Generator Icon Back To Address Bar

A Extension To Add QR Code Generator Icon Back To Address Bar

A Chrome extension that restores QR code generation to your browser's address bar with Chromium-style codes featuring the Chrome dinosaur. ✨ CORE FEATURES • Chromium-Style QR Codes - Exact visual match to Chrome's native implementation • Chrome Dinosaur Center - Beloved mascot positioned at QR code center • Instant URL Capture - Auto-generates codes for current page • Custom Text Support - Create codes for any entered text/URL • One-Click PNG Copy - Copy high-quality images to clipboard • Smart Download - Auto-generated filenames for saved codes • Perfect Sizing - Matches Chrome's exact dimensions • Dark Mode Integration - Seamless theme adaptation ⚙️ INSTALLATION From Chrome Web Store You can install the extension directly from https://chromewebstore.google.com/detail/add-qr-code-generator-ico/kacblhilkacgfnkjfodalohcnllcgmjd Manual Installation Clone repository: git clone https://github.com/chromium-style-qrcode/add-qrcode-generator-icon-back-to-address-bar.git cd add-qrcode-generator-icon-back-to-address-bar Install dependencies: pnpm install Build extension: pnpm build Load in Chrome: → Navigate to chrome://extensions/ → Enable Developer mode → Select .output/chrome-mv3 folder 🚀 USAGE GUIDE Click toolbar QR icon Current URL auto-populates Edit text field for custom content Copy PNG to clipboard Download with auto-naming 🛠️ TECHNOLOGY STACK • Framework: WXT (modern extension framework) • Frontend: React 19 + TypeScript • Styling: Tailwind CSS 4.0 + Radix UI • QR Engine: WebAssembly module • Build System: Vite + Rollup • Package Manager: pnpm 🧩 PROJECT STRUCTURE src/ ├─ components/ui/ # Reusable UI ├─ hooks/ # Custom hooks │ ├─ use-qrcode.ts # QR core logic │ └─ use-dark-mode.ts ├─ lib/ # Utilities │ ├─ wasm-loader.ts # WASM loader │ └─ utils.ts ├─ popup/ # Interface │ ├─ App.tsx # Main component │ └─ main.tsx # Entry point └─ providers/ # Services └─ theme.tsx # Theme manager 🔍 TECHNICAL HIGHLIGHTS Pixel-Perfect QR Generation • Chrome-native algorithm replication • Hybrid circle/square modules • Rounded locator patterns • Precision margin control Intelligent File Naming • Domain detection: qrcode_example.com.png • Generic content: qrcode_chrome.png Accessibility Focus • Full keyboard navigation • Screen reader optimized • High contrast support • Semantic ARIA labeling 🤝 CONTRIBUTION GUIDELINES Maintain existing code style Add TypeScript types for new features Test on Chrome & Firefox Update documentation accordingly 📜 LICENSE MIT License - See project LICENSE file 🙏 ACKNOWLEDGMENTS • Chrome team for original implementation • WXT extension framework • Radix UI accessibility components • Tailwind CSS styling system 📮 SUPPORT Report issues via GitHub: https://github.com/chromium-style-qrcode/add-qrcode-generator-icon-back-to-address-bar/issues