feat: use tab capture only for drm protected content and canvas method for none-drm videos

Author: igorlogius

copy-video-frame/background.js

@@ -27,28 +27,46 @@ browser.menus.create({
   onclick: async (info, tab) => {
     try {
       // first we get the <video>
-      await browser.tabs.executeScript(tab.id, {
-        frameId: info.frameId,
-        code: `var vidEl = browser.menus.getTargetElement(${info.targetElementId})`,
-      });
-      // then we get the video coords + size (x,y,width,height)
-      let elBrect = await browser.tabs.executeScript(tab.id, {
-        frameId: info.frameId,
-        file: "getElBRect.js",
-      });
-      elBrect = elBrect[0];
-      // then we capture visible area of the video
-      const dataURI = await browser.tabs.captureVisibleTab(tab.windowId, {
-        rect: elBrect,
-      });
+      const drmProtected = (
+        await browser.tabs.executeScript(tab.id, {
+          frameId: info.frameId,
+          code: `var vidEl = browser.menus.getTargetElement(${info.targetElementId});
+var drmProtected = vidEl.mediaKeys !== null;
+if(!drmProtected){
+    let canvas = document.createElement('canvas');
+    canvas.width = vidEl.videoWidth;
+    canvas.height = vidEl.videoHeight;
+    let context = canvas.getContext('2d');
+    context.drawImage(vidEl, 0, 0, vidEl.videoWidth, vidEl.videoHeight);
+    browser.runtime.sendMessage({ "dataURI": canvas.toDataURL() });
+}
+drmProtected;
+`,
+        })
+      )[0];
+
+      console.log("drmProtected", drmProtected);
 
+      if (drmProtected) {
+        // then we get the video coords + size (x,y,width,height)
+        let elBrect = await browser.tabs.executeScript(tab.id, {
+          frameId: info.frameId,
+          file: "getElBRect.js",
+        });
+        elBrect = elBrect[0];
+        // then we capture visible area of the video
+        const dataURI = await browser.tabs.captureVisibleTab(tab.windowId, {
+          rect: elBrect,
+        });
+        tempData.set(tab.id, dataURI);
+      }
       // if we have the clipboardWrite permission, just copy into the clipboard
       if (
         await browser.permissions.contains({
           permissions: ["clipboardWrite"],
         })
       ) {
-        const blob = await (await fetch(dataURI)).blob();
+        const blob = await (await fetch(tempData.get(tab.id))).blob();
         await navigator.clipboard.write([
           new ClipboardItem({
             "image/png": blob,
@@ -57,11 +75,13 @@ browser.menus.create({
         notify("Copy Video Frame", "Image in clipboard\n(Insert with CTRL+V)");
       } else {
         // if we dont have the clipbordWrite permission, open the image in a new tab
-        tempData.set(tab.id, dataURI);
-        browser.tabs.create({
-          active: true,
-          url: "show.html?tabId=" + tab.id,
-        });
+        //tempData.set(tab.id, dataURI);
+        setTimeout(() => {
+          browser.tabs.create({
+            active: true,
+            url: "show.html?tabId=" + tab.id,
+          });
+        }, 750);
       }
     } catch (e) {
       console.error(e);
@@ -71,6 +91,11 @@ browser.menus.create({
 });
 
 browser.runtime.onMessage.addListener((data, sender) => {
+  //console.debug('onMessage', data, sender);
+  if (data.dataURI) {
+    tempData.set(sender.tab.id, data.dataURI);
+    return;
+  }
   if (data.tabId) {
     return Promise.resolve(tempData.get(data.tabId));
   }

copy-video-frame/manifest.json

@@ -12,5 +12,5 @@
   "name": "Copy Video Frame",
   "permissions": ["menus", "activeTab"],
   "optional_permissions": ["clipboardWrite", "notifications"],
-  "version": "1.1.10"
+  "version": "1.1.11"
 }