fix: scan document qr code

apps/holder/projects/browser-extension/src/content-script.ts

@@ -1,8 +1,9 @@
 import jsQR from 'jsqr';
+import crypto from "crypto";
 
 
 
-let codes: string[] = [];
+let scannedQrCodeImages  = new Map();
 
 /**
  * Gets the image data from the given url and sends it to the callback.
@@ -43,15 +44,15 @@ function readImage(
     // const protocols = ['openid-credential-offer', 'openid4vp'];
     if (code) {
       //TODO: in case we detected something, we could manipulate the DOM here by passing the html element
-      htmlElement.style.border = '5px solid green';
-      codes.push(code.data);
+      addScanButton(htmlElement as HTMLImageElement);
+      scannedQrCodeImages.set(extractIdFromDataURL((htmlElement as HTMLImageElement).src), code.data);
       chrome.runtime.sendMessage({ action: 'addQRCode', data: code.data });
     }
     toProcess--;
     if (toProcess === 0) {
       chrome.runtime.sendMessage({
         action: 'process',
-        data: { action: 'scanned', value: codes },
+        data: { action: 'scanned', value: scannedQrCodeImages },
       });
     }
   };
@@ -77,10 +78,64 @@ function scanForQRCode() {
 
 chrome.runtime.onMessage.addListener(function (request) {
   if (request.action === 'rescanQRCode') {
-    codes = [];
+    scannedQrCodeImages = new Map();
     chrome.runtime.sendMessage({ action: 'reset' });
     scanForQRCode();
   }
 });
 
+
+/**
+ *
+ * function to add a button to the scanned QR code image
+ * @param element
+ * @returns
+ */
+function addScanButton(element:HTMLImageElement) {
+  if (scannedQrCodeImages.has(`${extractIdFromDataURL(element.src)}`)) {
+    console.log("QR code already scanned");
+    return;
+  }
+  // Create button
+  const button = document.createElement("button");
+  button.id = element.src; // Set button id to the image src
+  button.style.position = "absolute";
+  button.style.top = element.offsetTop + "px";
+  button.style.right = element.offsetLeft + "px";
+  button.style.zIndex = "1000";
+  button.style.backgroundColor = "#ff670096";
+  button.style.color = "white";
+  button.style.border = "none";
+  button.style.padding = "10px";
+  button.style.cursor = "pointer";
+  button.style.borderRadius = "5px";
+  button.onclick = () => {
+    console.log(scannedQrCodeImages.get(element.src)); // Access button id directly
+  };
+  element.parentElement!.appendChild(button); // Removed the redundant exclamation mark
+}
+
+/**
+ * Extracts the id from a data URL and hash it.
+ * @param {string} imageSrc
+ * @returns {string}
+ */
+function extractIdFromDataURL(imageSrc: string) {
+  // Check if the URL starts with 'data:image'
+  if (imageSrc.startsWith('data:image')) {
+    // Split the URL by comma
+    const parts = imageSrc.split(',');
+    // Check if the URL has two parts (data type and data)
+    if (parts.length === 2) {
+      const dataPart = parts[1];
+      const id = crypto.createHash("md5").update(dataPart).digest('hex')
+      return id;
+    }
+    return imageSrc;
+  } else {
+    return imageSrc;
+  }
+}
+
+
 scanForQRCode();