0.6.13

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+public/wasm
 
 # Editor directories and files
 .vscode/*

README.md

@@ -20,6 +20,26 @@ Monitor and capture your clipboard history in real-time.
 - Clears history on demand.
 - Privacy-focused: Data is processed locally and never sent to any server.
 
+### 🔗 URL Cleaner
+Clean tracking parameters and clutter from URLs.
+- **Privacy:** Removes known tracking parameters (UTM, fbclid, gclid, etc.).
+- **Bulk Processing:** Clean list of URLs at once.
+- **Customizable:** Manage exceptions to keep specific parameters.
+- **Smart:** "Direct Clean" mode for quick single-URL cleaning.
+
+### ⬛ QR Generator
+Create custom QR codes instantly.
+- **Customizable:** Adjustable error correction level and size.
+- **Download:** Save as PNG (raster) or SVG (vector) for high-quality printing.
+- **Persistent Settings:** Remembers your preferences.
+
+### 📷 QR Scanner
+Scan QR codes directly from your camera or device.
+- **Privacy First:** Works entirely in the browser using local `BarcodeDetector` API. No images are sent to any server.
+- **Multi-Camera:** Support for front and back cameras with easy switching.
+- **History:** Keeps a log of scanned codes with options to copy or download as JSON.
+- **Responsive:** Fullscreen mode for immersive scanning experience.
+
 ---
 
 ## Chrome Extension 🧩

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "tools-app",
-  "version": "0.6.4",
+  "version": "0.6.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.6.4",
+      "version": "0.6.13",
       "hasInstallScript": true,
       "dependencies": {
         "barcode-detector": "^3.1.0",
         "lucide-vue-next": "^0.575.0",
+        "marked": "^17.0.3",
         "qrcode": "^1.5.4",
         "vue": "^3.5.25",
-        "vue-qrcode-reader": "^5.7.3",
         "vue-router": "^5.0.3"
       },
       "devDependencies": {
@@ -2518,12 +2518,6 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
-    "node_modules/@types/dom-webcodecs": {
-      "version": "0.1.18",
-      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.18.tgz",
-      "integrity": "sha512-vAvE8C9DGWR+tkb19xyjk1TSUlJ7RUzzp4a9Anu7mwBT+fpyePWK1UxmH14tMO5zHmrnrRIMg5NutnnDztLxgg==",
-      "license": "MIT"
-    },
     "node_modules/@types/emscripten": {
       "version": "1.41.5",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
@@ -4757,6 +4751,18 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.3.tgz",
+      "integrity": "sha512-jt1v2ObpyOKR8p4XaUJVk3YWRJ5n+i4+rjQopxvV32rSndTJXvIzuUdWWIy/1pFQMkQmvTXawzDNqOH/CUmx6A==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5472,12 +5478,6 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "license": "MIT"
     },
-    "node_modules/sdp": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
-      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
-      "license": "MIT"
-    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -6381,38 +6381,6 @@
         }
       }
     },
-    "node_modules/vue-qrcode-reader": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-5.7.3.tgz",
-      "integrity": "sha512-iSGko42FsEvdHyizBMBs/X+HMO9Z5ONDxjW+mQdoraOR5emRNedmjC5SEJdYzGz8ZP5ME3lwB4iHy3S7MOt5Qw==",
-      "license": "MIT",
-      "dependencies": {
-        "barcode-detector": "2.2.2",
-        "webrtc-adapter": "8.2.3"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/vue-qrcode-reader/node_modules/barcode-detector": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
-      "integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/dom-webcodecs": "^0.1.11",
-        "zxing-wasm": "1.1.3"
-      }
-    },
-    "node_modules/vue-qrcode-reader/node_modules/zxing-wasm": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
-      "integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/emscripten": "^1.39.10"
-      }
-    },
     "node_modules/vue-router": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",
@@ -6471,19 +6439,6 @@
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
-    "node_modules/webrtc-adapter": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
-      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "sdp": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=6.0.0",
-        "npm": ">=3.10.0"
-      }
-    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.6.4",
+  "version": "0.6.13",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,9 +12,9 @@
   "dependencies": {
     "barcode-detector": "^3.1.0",
     "lucide-vue-next": "^0.575.0",
+    "marked": "^17.0.3",
     "qrcode": "^1.5.4",
     "vue": "^3.5.25",
-    "vue-qrcode-reader": "^5.7.3",
     "vue-router": "^5.0.3"
   },
   "devDependencies": {

src/components/Main.vue

@@ -1,11 +1,99 @@
 <script setup>
-import { ref } from 'vue'
+import { marked } from 'marked'
+import { computed } from 'vue'
+import readmeContent from '../../README.md?raw'
 
+const htmlContent = computed(() => {
+  return marked(readmeContent)
+})
 </script>
 
 <template>
-  main
+  <div class="readme-container glass-panel">
+    <div class="markdown-body" v-html="htmlContent"></div>
+  </div>
 </template>
 
 <style scoped>
+.readme-container {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.markdown-body :deep(h1) {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: var(--primary-accent);
+}
+
+.markdown-body :deep(h2) {
+  font-size: 1.5rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  padding-bottom: 0.5rem;
+  color: var(--text-strong);
+}
+
+.markdown-body :deep(h3) {
+  font-size: 1.25rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--text-strong);
+}
+
+.markdown-body :deep(p) {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  color: var(--text-color);
+}
+
+.markdown-body :deep(ul) {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-body :deep(li) {
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+}
+
+.markdown-body :deep(a) {
+  color: var(--primary-accent);
+  text-decoration: none;
+}
+
+.markdown-body :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.markdown-body :deep(code) {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body :deep(pre) {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  border: 1px solid var(--glass-border);
+}
+
+.markdown-body :deep(pre code) {
+  background: none;
+  padding: 0;
+  color: #e6e6e6;
+}
+
+.markdown-body :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--glass-border);
+  margin: 2rem 0;
+}
 </style>

src/components/tools/QrScanner.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import { QrcodeStream } from 'vue-qrcode-reader'
+import { SwitchCamera, Trash2, Copy, Download, X, Maximize2, Minimize2 } from 'lucide-vue-next'
-import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
 
 const error = ref('')
 const facingMode = ref('environment')
@@ -9,22 +8,117 @@ const scannedCodes = ref([])
 const hasMultipleCameras = ref(false)
 const isFullscreen = ref(false)
 const videoAspect = ref(1)
-const isFront = computed(() => facingMode.value === 'user')
+const isMirrored = ref(false)
 const wrapperRef = ref(null)
-let frontMirrorObserver = null
 const bgCanvas = ref(null)
 let bgRafId = null
+
+// Native scanner state
+const videoRef = ref(null)
+let stream = null
+let scanRafId = null
+let barcodeDetector = null
+
+const overlayCanvas = ref(null)
+
+const paintDetections = (codes) => {
+  const canvas = overlayCanvas.value
+  const video = videoRef.value
+
+  if (!canvas || !video) return
+
+  const ctx = canvas.getContext('2d')
+  const { width, height } = canvas.getBoundingClientRect()
+
+  // Update canvas size if needed (to match CSS size)
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width
+    canvas.height = height
+  }
+
+  ctx.clearRect(0, 0, width, height)
+
+  if (!codes || codes.length === 0) return
+
+  const vw = video.videoWidth
+  const vh = video.videoHeight
+  if (!vw || !vh) return
+
+  // Calculate object-fit: cover scaling
+  const videoRatio = vw / vh
+  const canvasRatio = width / height
+
+  let drawWidth, drawHeight, startX, startY
+
+  if (canvasRatio > videoRatio) {
+    // Canvas is wider than video (video cropped top/bottom)
+    drawWidth = width
+    drawHeight = width / videoRatio
+    startX = 0
+    startY = (height - drawHeight) / 2
+  } else {
+    // Canvas is taller than video (video cropped left/right)
+    drawHeight = height
+    drawWidth = height * videoRatio
+    startY = 0
+    startX = (width - drawWidth) / 2
+  }
+
+  const scale = drawWidth / vw
+   // Canvas is mirrored via CSS if isMirrored is true, so no manual coordinate mirroring needed
+
+   // Styles
+   const styles = getComputedStyle(document.documentElement)
+   const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
+
+   ctx.lineWidth = 4
+   ctx.strokeStyle = accent
+   ctx.fillStyle = accent
+
+   codes.forEach(code => {
+     const points = code.cornerPoints
+     if (!points || points.length < 4) return
+
+     ctx.beginPath()
+
+     const transform = (p) => {
+       let x = p.x * scale + startX
+       let y = p.y * scale + startY
+       return { x, y }
+     }
+
+    const p0 = transform(points[0])
+    ctx.moveTo(p0.x, p0.y)
+
+    for (let i = 1; i < points.length; i++) {
+      const p = transform(points[i])
+      ctx.lineTo(p.x, p.y)
+    }
+
+    ctx.closePath()
+    ctx.stroke()
+
+    // Draw corners
+    points.forEach(p => {
+      const tp = transform(p)
+      ctx.beginPath()
+      ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
+      ctx.fill()
+    })
+  })
+}
+
 const updateVideoAspect = () => {
-  const videoEl = document.querySelector('.camera-wrapper video')
+  if (videoRef.value && videoRef.value.videoWidth && videoRef.value.videoHeight) {
-  if (videoEl && videoEl.videoWidth && videoEl.videoHeight) {
+    videoAspect.value = videoRef.value.videoWidth / videoRef.value.videoHeight
-    videoAspect.value = videoEl.videoWidth / videoEl.videoHeight
   }
 }
+
 const startBackgroundLoop = () => {
   const draw = () => {
-    const videoEl = document.querySelector('.camera-wrapper video')
+    const videoEl = videoRef.value
     const canvas = bgCanvas.value
-    if (!videoEl || !canvas) {
+    if (!videoEl || !canvas || videoEl.paused || videoEl.ended) {
       bgRafId = requestAnimationFrame(draw)
       return
     }
@@ -56,13 +150,114 @@ const startBackgroundLoop = () => {
   bgRafId = requestAnimationFrame(draw)
 }
 
-// front mirror canvas removed to restore stable behavior
 const stopBackgroundLoop = () => {
   if (bgRafId) {
     cancelAnimationFrame(bgRafId)
     bgRafId = null
   }
 }
+
+const initDetector = async () => {
+  if (!barcodeDetector) {
+    if ('BarcodeDetector' in window) {
+      try {
+        // Formats are optional, but specifying qr_code might be faster
+        const formats = await window.BarcodeDetector.getSupportedFormats()
+        if (formats.includes('qr_code')) {
+          barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code'] })
+        } else {
+          barcodeDetector = new window.BarcodeDetector()
+        }
+      } catch (e) {
+        // Fallback
+        barcodeDetector = new window.BarcodeDetector()
+      }
+    } else {
+      error.value = 'Barcode Detection API not supported'
+    }
+  }
+}
+
+const startScan = async () => {
+  stopScan()
+  error.value = ''
+
+  try {
+    await initDetector()
+    if (!barcodeDetector) {
+      error.value = 'Barcode Detector failed to initialize'
+      return
+    }
+
+    const constraints = {
+      video: {
+        facingMode: facingMode.value,
+        width: { ideal: 1280 },
+        height: { ideal: 720 }
+      }
+    }
+
+    stream = await navigator.mediaDevices.getUserMedia(constraints)
+
+    // Detect actual facing mode to mirror front camera correctly
+    const videoTrack = stream.getVideoTracks()[0]
+    if (videoTrack) {
+      const settings = videoTrack.getSettings()
+      if (settings.facingMode) {
+        isMirrored.value = settings.facingMode === 'user'
+      } else {
+        // Fallback: check label for desktop cameras or assume requested mode
+        const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
+        if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
+          isMirrored.value = true
+        } else {
+          isMirrored.value = facingMode.value === 'user'
+        }
+      }
+    }
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream
+      // Wait for metadata to play
+      videoRef.value.onloadedmetadata = () => {
+        videoRef.value.play().catch(e => console.error('Play error', e))
+        updateVideoAspect()
+        detectLoop()
+        startBackgroundLoop()
+      }
+    }
+  } catch (err) {
+    onError(err)
+  }
+}
+
+const stopScan = () => {
+  if (scanRafId) cancelAnimationFrame(scanRafId)
+  if (stream) {
+    stream.getTracks().forEach(t => t.stop())
+    stream = null
+  }
+  stopBackgroundLoop()
+}
+
+const detectLoop = async () => {
+  if (!videoRef.value || videoRef.value.paused || videoRef.value.ended) {
+    scanRafId = requestAnimationFrame(detectLoop)
+    return
+  }
+
+  try {
+    const codes = await barcodeDetector.detect(videoRef.value)
+    paintDetections(codes)
+    if (codes.length > 0) {
+      onDetect(codes)
+    }
+  } catch (e) {
+    // console.error('Detection error', e)
+  }
+  scanRafId = requestAnimationFrame(detectLoop)
+}
+
 const desktopFullscreenStyle = computed(() => {
   if (!isFullscreen.value) return {}
   const isDesktop = window.innerWidth >= 768
@@ -140,61 +335,10 @@ const onDetect = (detectedCodes) => {
   processCodes(validCodes)
 }
 
-const onCameraOn = async (capabilities) => {
+watch(facingMode, () => {
-  // Camera is ready
+  startScan()
-  setTimeout(updateVideoAspect, 100)
-  setTimeout(startBackgroundLoop, 150)
-  // Flip is handled via global CSS; no JS flips needed
-}
-
-const ensureFrontMirror = () => {
-  // No-op: mirror is applied via CSS selectors
-}
-
-const startFrontMirrorObserver = () => {
-  // No-op: mirror is applied via CSS selectors
-}
-
-const stopFrontMirrorObserver = () => {
-  // No-op
-}
-
-watch(isFront, () => {
-  // CSS-based; nothing to do
 })
 
-const paintDetections = (detectedCodes, ctx) => {
-  try {
-    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
-    const styles = getComputedStyle(document.documentElement)
-    const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
-    detectedCodes.forEach(code => {
-      if (code.format && code.format !== 'qr_code') return
-      const points = code.cornerPoints || []
-      if (points.length < 4) return
-      ctx.beginPath()
-      ctx.moveTo(points[0].x, points[0].y)
-      for (let i = 1; i < points.length; i++) {
-        ctx.lineTo(points[i].x, points[i].y)
-      }
-      ctx.closePath()
-      ctx.lineWidth = 3
-      ctx.strokeStyle = accent
-      ctx.shadowColor = accent
-      ctx.shadowBlur = 8
-      ctx.stroke()
-      ctx.shadowBlur = 0
-      ctx.fillStyle = accent
-      points.forEach(p => {
-        ctx.beginPath()
-        ctx.arc(p.x, p.y, 2.5, 0, Math.PI * 2)
-        ctx.fill()
-      })
-    })
-  } catch (e) {
-    // ignore drawing errors
-  }
-}
 const onError = (err) => {
   if (err.name === 'NotAllowedError') {
     error.value = 'Camera permission denied'
@@ -245,12 +389,14 @@ onMounted(() => {
       stopBackgroundLoop()
     }
   }, { immediate: true })
+
+  startScan()
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateVideoAspect)
   window.removeEventListener('resize', startBackgroundLoop)
-  stopBackgroundLoop()
+  stopScan()
 })
 
 const switchCamera = (event) => {
@@ -324,6 +470,7 @@ const isUrl = (string) => {
             v-if="isFullscreen"
             ref="bgCanvas"
             class="camera-bg"
+            :class="{ 'is-mirrored': isMirrored }"
           ></canvas>
           <button v-if="isFullscreen" class="close-fullscreen-btn" @click="toggleFullscreen">
             <X size="24" />
@@ -331,20 +478,25 @@ const isUrl = (string) => {
 
           <div
             class="camera-wrapper"
-            :class="{ 'clickable': !isFullscreen, 'is-front': isFront }"
+            :class="{ 'clickable': !isFullscreen, 'is-mirrored': isMirrored }"
             :style="desktopFullscreenStyle"
             ref="wrapperRef"
             @click="!isFullscreen && toggleFullscreen()"
           >
-            <QrcodeStream
+            <video
-              :constraints="{ facingMode }"
+              ref="videoRef"
-              @detect="onDetect"
+              class="camera-feed"
-              @error="onError"
+              :class="{ 'is-mirrored': isMirrored }"
-              @camera-on="onCameraOn"
+              autoplay
-              :track="paintDetections"
+              playsinline
-            >
+              muted
+            ></video>
+
+            <canvas ref="overlayCanvas" class="scan-overlay-canvas" :class="{ 'is-mirrored': isMirrored }"></canvas>
+
             <div v-if="error" class="error-overlay">
               <p>{{ error }}</p>
+              <button @click="startScan" class="retry-btn">Retry</button>
             </div>
 
             <button
@@ -355,7 +507,6 @@ const isUrl = (string) => {
             >
               <SwitchCamera size="24" />
             </button>
-            </QrcodeStream>
           </div>
 
           <div class="results-section">
@@ -488,6 +639,35 @@ const isUrl = (string) => {
   z-index: 0;
 }
 
+.camera-bg.is-mirrored {
+  transform: scaleX(-1);
+}
+
+.camera-feed {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.camera-feed.is-mirrored {
+  transform: scaleX(-1);
+}
+
+.scan-overlay-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.scan-overlay-canvas.is-mirrored {
+  transform: scaleX(-1);
+}
+
 /* front mirror canvas removed */
 
 .error-overlay {