QR → Open (Edge/Chromium Extension)

A lightweight browser extension that scans QR codes using your laptop webcam and automatically opens the decoded URL in a new tab.
Designed for speed, robustness, and ease of use.

---

🎯 Goal

• Launch instantly from the browser toolbar.
• Use the laptop camera for real-time scanning.
• Handle both standard and stylized QR codes (round dots, logos, inverted).
• Open decoded URLs directly in a new browser tab.
• Provide a fallback (image upload) if the camera struggles.

---

🧩 Architecture

Extension Type

• Manifest V3 (MV3) is used:
  • Modern Chrome/Edge standard.
  • Inline scripts and remote CDNs are not allowed.
  • Safer, but requires all JS libraries to be local.

Camera Access

• API: navigator.mediaDevices.getUserMedia()
• Constraints:

  { width: { ideal: 1920 }, height: { ideal: 1080 }, frameRate: { ideal: 30 } }

Great 🚀 Here’s your ready-to-use README.md. Just copy this whole thing into a file called README.md in your qr-edge-ext/ folder.

---

# QR → Open (Edge/Chromium Extension)

A lightweight browser extension that scans QR codes using your **laptop webcam** and automatically opens the decoded URL in a new tab.  
Designed for speed, robustness, and ease of use.

---

## 🎯 Goal

- Launch instantly from the browser toolbar.  
- Use the laptop camera for **real-time scanning**.  
- Handle both standard and stylized QR codes (round dots, logos, inverted).  
- Open decoded URLs directly in a **new browser tab**.  
- Provide a fallback (image upload) if the camera struggles.

---

## 🧩 Architecture

### Extension Type
- **Manifest V3 (MV3)** is used:
  - Modern Chrome/Edge standard.
  - Inline scripts and remote CDNs are **not allowed**.
  - Safer, but requires all JS libraries to be **local**.

### Camera Access
- API: `navigator.mediaDevices.getUserMedia()`
- Constraints:
  ```js
  { width: { ideal: 1920 }, height: { ideal: 1080 }, frameRate: { ideal: 30 } }

• Why: Higher resolution improves recognition of screen-displayed QRs.

---

🔎 Decoding Pipeline

1. BarcodeDetector API (if available)

   • Fastest, native decoding.
   • Limited robustness against stylized codes.

2. ZXing-js

   • JavaScript port of the well-known ZXing (“Zebra Crossing”) library.

   • More tolerant to QRs with logos, dots, and distortions.

   • Used via:

     const reader = new ZXing.BrowserQRCodeReader();
     reader.decodeFromVideoElementContinuously(video, callback);

3. jsQR

   • Small, pure JS decoder.

   • Enhanced with preprocessing:

     • contrast(150%) brightness(115%) grayscale(100%)
     • Global threshold binarization

   • Helps handle glare and screen flicker.

---

🛠 Preprocessing Steps

• Contrast boost: separates black/white better.
• Brightness boost: compensates for dim screens.
• Grayscale: removes color noise.
• Thresholding: converts to binary (black/white only).

These mimic ZBar’s (pyzbar) robustness from the Python version.

---

🖥️ User Interface

• Popup window:

  • <video> shows live camera feed.
  • <canvas> overlay draws a green bounding box when a QR is detected.

• Automatic actions:

  • If payload is a URL → open new tab.
  • If not a URL → show raw text in popup.

• Fallback:

  • File input allows the user to upload a saved PNG/JPG.
  • Useful if the camera cannot decode due to glare or styling.

---

⚠️ Error Handling

• Stops camera tracks when popup closes → frees webcam.

• Resets ZXing reader to avoid memory leaks.

• Handles common errors:

  • NotAllowedError: user denied camera access.
  • NotFoundError: no webcam detected.

---

🔄 Alternatives Considered

• Python + pyzbar (ZBar)

  • Very robust, but requires Python runtime.
  • Not practical for a one-click browser workflow.

• QuaggaJS

  • Supports barcodes + QR codes, but heavier.

• OpenCV.js + WASM ZBar

  • Extremely powerful, but much larger bundle size.

Chosen Stack:

• BarcodeDetector → ZXing → jsQR
• This balance gives speed, robustness, and small footprint.

---

📦 Folder Structure

qr-edge-ext/
  manifest.json
  popup.html
  popup.js
  jsQR.min.js
  libs/
    zxing.min.js
  icon16.png
  icon48.png
  icon128.png
  README.md

---

🚀 How to Use

1. Save all files locally.

2. Open Edge/Chrome → edge://extensions/ or chrome://extensions/.

3. Enable Developer mode.

4. Click Load unpacked → select qr-edge-ext/ folder.

5. Click the extension icon in the toolbar → allow camera access.

6. Point your webcam at a QR:

   • ✅ If it’s a URL, a new tab opens.
   • ℹ️ If it’s text, it shows in the popup.

---

📚 Future Enhancements

• Adaptive thresholding (per region, like ZBar).
• Auto-focus/exposure control using ImageCapture API.
• Multiple QR detection per frame.
• Mobile Edge/Chrome variant (scan directly on phone).

---

📝 Summary

• BarcodeDetector = fastest native decoder.
• ZXing = robust, handles stylized codes.
• jsQR = lightweight fallback with preprocessing.
• Together, they achieve the robustness of Python’s pyzbar in a lightweight browser extension.

---

✅ This is Markdown — it will render beautifully on GitHub, VS Code’s preview, or Obsidian.