popup.js

(async () => {
  const video   = document.getElementById('v');
  const overlay = document.getElementById('ov');
  const octx    = overlay.getContext('2d');
  const fileInp = document.getElementById('file');
  const msg     = document.getElementById('msg');

  const work = document.createElement('canvas');
  const wctx = work.getContext('2d', { willReadFrequently: true });

  // ---------- helpers
  function show(t){ msg.textContent = t; }
  function handle(text){
    if (/^https?:\/\//i.test(text)) { chrome.tabs.create({ url: text }); window.close(); }
    else show(`Scanned (not a URL): ${text.slice(0,200)}${text.length>200?'…':''}`);
  }
  function drawBox(points, color='#00c853'){
    octx.clearRect(0,0,overlay.width,overlay.height);
    if (!points || points.length<2) return;
    octx.lineWidth = 3; octx.strokeStyle = color;
    octx.beginPath(); octx.moveTo(points[0].x, points[0].y);
    for (let i=1;i<points.length;i++) octx.lineTo(points[i].x, points[i].y);
    octx.closePath(); octx.stroke();
  }

  function syncToVideoSize(){
    const W = video.videoWidth  || 640;
    const H = video.videoHeight || 480;
    if (!W || !H) return false;
    if (overlay.width!==W || overlay.height!==H){
      overlay.width=W; overlay.height=H; work.width=W; work.height=H;
    }
    return true;
  }

  // simple global threshold (helps dotted/logo QRs)
  function thresholdImage(imgData){
    const data = imgData.data;
    let sum=0;
    for (let i=0;i<data.length;i+=4){
      const g = (data[i]*0.2126 + data[i+1]*0.7152 + data[i+2]*0.0722);
      sum += g;
    }
    const mean = sum / (data.length/4);
    for (let i=0;i<data.length;i+=4){
      const g = (data[i]*0.2126 + data[i+1]*0.7152 + data[i+2]*0.0722);
      const v = g > mean*0.95 ? 255 : 0; // slightly below mean -> more aggressive
      data[i]=data[i+1]=data[i+2]=v; data[i+3]=255;
    }
    return imgData;
  }

  // ---------- image file fallback
  fileInp.addEventListener('change', async () => {
    const f = fileInp.files && fileInp.files[0];
    if (!f) return;
    const img = new Image();
    img.onload = async () => {
      work.width = img.naturalWidth; work.height = img.naturalHeight;
      wctx.imageSmoothingEnabled = false;
      wctx.drawImage(img, 0, 0);
      // try ZXing first
      if (globalThis.ZXing){
        try {
          const reader = new ZXing.BrowserQRCodeReader();
          const tmp = document.createElement('img'); tmp.src = work.toDataURL('image/png');
          const res = await reader.decodeFromImageElement(tmp);
          if (res && res.text) return handle(res.text);
        } catch {}
      }
      // then jsQR with preprocessing
      let imgData = wctx.getImageData(0,0,work.width,work.height);
      const res1 = jsQR(imgData.data, work.width, work.height, { inversionAttempts:"attemptBoth" });
      if (res1 && res1.data) return handle(res1.data);
      imgData = thresholdImage(imgData); // binarize
      wctx.putImageData(imgData,0,0);
      const res2 = jsQR(imgData.data, work.width, work.height, { inversionAttempts:"dontInvert" });
      if (res2 && res2.data) return handle(res2.data);
      show('Couldn’t decode this image. Try a flatter/brighter shot.');
    };
    img.src = URL.createObjectURL(f);
  });

  // ---------- camera start (native ZXing → BarcodeDetector → jsQR)
  let stream;
  try {
    stream = await navigator.mediaDevices.getUserMedia({
      video: { width:{ideal:1920}, height:{ideal:1080}, frameRate:{ideal:30, max:30} }
    });
    video.srcObject = stream;
  } catch(e){ show(`Camera failed: ${e.name||''} ${e.message||e}`); return; }

  // prefer ZXing; let ZXing control video.play()
  if (globalThis.ZXing){
    try { video.pause(); } catch {}
    const reader = new ZXing.BrowserQRCodeReader();
    reader.decodeFromVideoElementContinuously(video, (result, err) => {
      if (result && result.text){ 
        const pts=(result.resultPoints||[]).map(p=>({x:p.x,y:p.y})); 
        if (syncToVideoSize() && pts.length>=3) drawBox(pts, '#1abc9c'); 
        handle(result.text);
      }
    });
    window.addEventListener('unload', () => { try{reader.reset();}catch{}; stream?.getTracks().forEach(t=>t.stop()); });
    return;
  }

  // else BarcodeDetector if present
  const hasBD = 'BarcodeDetector' in globalThis;
  if (hasBD){
    try { await video.play(); } catch {}
    const detector = new BarcodeDetector({ formats:['qr_code'] });
    const loop = () => {
      if (!syncToVideoSize()) return requestAnimationFrame(loop);
      detector.detect(video).then(codes=>{
        if (codes && codes.length){
          const pts = codes[0].cornerPoints?.map(p=>({x:p.x,y:p.y}));
          if (pts) drawBox(pts);
          handle(codes[0].rawValue);
        } else {
          octx.clearRect(0,0,overlay.width,overlay.height);
        }
        requestAnimationFrame(loop);
      }).catch(()=>requestAnimationFrame(loop));
    };
    requestAnimationFrame(loop);
    window.addEventListener('unload', () => { stream?.getTracks().forEach(t=>t.stop()); });
    return;
  }

  // fallback: jsQR with preprocessing
  try { await video.play(); } catch {}
  const loopJS = () => {
    if (!syncToVideoSize()) return requestAnimationFrame(loopJS);
    // draw native resolution, then preprocess
    wctx.imageSmoothingEnabled = false;
    wctx.filter = "contrast(150%) brightness(115%) grayscale(100%)";
    wctx.drawImage(video, 0, 0, work.width, work.height);
    wctx.filter = "none";
    let imgData = wctx.getImageData(0,0,work.width,work.height);
    let res = jsQR(imgData.data, work.width, work.height, { inversionAttempts:"attemptBoth" });
    if (!res){
      imgData = thresholdImage(imgData);
      res = jsQR(imgData.data, work.width, work.height, { inversionAttempts:"dontInvert" });
    }
    if (res){
      drawBox([
        res.location.topLeftCorner,
        res.location.topRightCorner,
        res.location.bottomRightCorner,
        res.location.bottomLeftCorner
      ]);
      handle(res.data);
    } else {
      octx.clearRect(0,0,overlay.width,overlay.height);
    }
    requestAnimationFrame(loopJS);
  };
  requestAnimationFrame(loopJS);
  window.addEventListener('unload', () => { stream?.getTracks().forEach(t=>t.stop()); });
})();