[WIP] Mv3 optimizations

.gitignore

@@ -0,0 +1,8 @@
+
+.vscode/*
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix

src/background.js

@@ -12,27 +12,34 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-if (!document.pictureInPictureEnabled) {
-  chrome.browserAction.setTitle({ title: 'Picture-in-Picture NOT supported' });
-} else {
-  chrome.browserAction.onClicked.addListener(tab => {
-    chrome.tabs.executeScript({ file: 'script.js', allFrames: true });
+
+
+/// DOES NOT WORK IN MV3 
+/// `document` is not defined
+// if (!document.pictureInPictureEnabled) {
+//   chrome.action.setTitle({ title: 'Picture-in-Picture NOT supported' });
+// } else {
+  chrome.action.onClicked.addListener(tab => {
+    chrome.scripting.executeScript({ files: ['script.js'], target: {
+      allFrames: true,
+      tabId: tab.id
+    }});
   });
-}
+// }
 
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-134864766-1']);
+// var _gaq = _gaq || [];
+// _gaq.push(['_setAccount', 'UA-134864766-1']);
 
 chrome.runtime.onMessage.addListener(data => {
   if (data.message === 'enter')
     _gaq.push(['_trackPageview']);
 });
 
-chrome.storage.sync.get({ optOutAnalytics: false }, results => {
-  if (results.optOutAnalytics) {
-    return;
-  }
-  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-  ga.src = 'https://ssl.google-analytics.com/ga.js';
-  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-});
+// chrome.storage.sync.get({ optOutAnalytics: false }, results => {
+//   if (results.optOutAnalytics) {
+//     return;
+//   }
+//   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+//   ga.src = 'https://ssl.google-analytics.com/ga.js';
+//   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+// });

src/manifest.json

@@ -1,39 +1,45 @@
 {
-  "name": "Picture-in-Picture Extension (by Google)",
-  "description": "Watch video using Picture-in-Picture",
-  "version": "1.10",
-  "icons": {
-    "128": "assets/icon128.png"
-  },
-  "background": {
-    "persistent": false,
-    "scripts": ["background.js"]
-  },
-  "browser_action": {
-    "default_icon": {
-      "19": "assets/icon19.png",
-      "38": "assets/icon38.png"
-    }
-  },
-  "commands": {
-    "_execute_browser_action": {
-      "suggested_key": {
-        "windows": "Alt+P",
-        "mac": "Alt+P",
-        "chromeos": "Alt+P",
-        "linux": "Alt+P"
-      }
-    }
-  },
-  "options_ui": {
-    "page": "options.html",
-    "open_in_tab": false
-  },
-  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
-  "permissions": [
-    "<all_urls>",
-    "storage"
-  ],
-  "minimum_chrome_version": "69.0.3483.0",
-  "manifest_version": 2
-}
+    "name": "Picture-in-Picture Extension (by Google)",
+    "description": "Watch video using Picture-in-Picture",
+    "version": "1.10",
+    "icons": {
+        "128": "assets/icon128.png"
+    },
+    "background": {
+        "service_worker": "background.js"
+    },
+    "commands": {
+        "_execute_action": {
+            "suggested_key": {
+                "windows": "Alt+P",
+                "mac": "Alt+P",
+                "chromeos": "Alt+P",
+                "linux": "Alt+P"
+            }
+        }
+    },
+    "action": {
+        "default_icon": {
+            "19": "assets/icon19.png",
+            "38": "assets/icon38.png"
+        }
+    },
+    "options_ui": {
+        "page": "options.html",
+        "open_in_tab": false
+    },
+    "content_security_policy": {
+        "script-src": "self",
+        "object-src": "self"
+    },
+    "permissions": [
+        "storage",
+        "tabs",
+        "scripting"
+    ],
+    "host_permissions": [
+        "*://*/*"
+    ],
+    "minimum_chrome_version": "69.0.3483.0",
+    "manifest_version": 3
+}

src/script.js

@@ -12,46 +12,71 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-function findLargestPlayingVideo() {
-  const videos = Array.from(document.querySelectorAll('video'))
+
+(async () => {
+
+  const vidArea = Symbol("video area")
+
+  /**
+   * Returns the area of a video dom element
+   */
+  function videoArea(video) {
+    return (video.getClientRects()[0].width || 0) * (video.getClientRects()[0].height || 0);
+  }
+
+  function findLargestPlayingVideo() {
+    console.log(Array.from(document.querySelectorAll('video'))
     .filter(video => video.readyState != 0)
     .filter(video => video.disablePictureInPicture == false)
-    .sort((v1, v2) => {
-      const v1Rect = v1.getClientRects()[0]||{width:0,height:0};
-      const v2Rect = v2.getClientRects()[0]||{width:0,height:0};
-      return ((v2Rect.width * v2Rect.height) - (v1Rect.width * v1Rect.height));
-    });
-
-  if (videos.length === 0) {
-    return;
+    .map(v => {
+      v[vidArea] = videoArea(v);
+      return v;
+    }))
+
+    const largestVideo = Array.from(document.querySelectorAll('video'))
+      .filter(video => video.readyState != 0)
+      .filter(video => video.disablePictureInPicture == false)
+      .map(v => {
+        v[vidArea] = videoArea(v);
+        return v;
+      })
+      .reduce((a, b) => a[vidArea] - b[vidArea] > 0 ? a : b, { [vidArea]: 0 });
+
+    if (largestVideo[vidArea] === 0) {
+      console.log('no videos')
+      return null;
+    }
+
+    return largestVideo;
   }
-
-  return videos[0];
-}
-
-async function requestPictureInPicture(video) {
-  await video.requestPictureInPicture();
-  video.setAttribute('__pip__', true);
-  video.addEventListener('leavepictureinpicture', event => {
-    video.removeAttribute('__pip__');
-  }, { once: true });
-  new ResizeObserver(maybeUpdatePictureInPictureVideo).observe(video);
-}
-
-function maybeUpdatePictureInPictureVideo(entries, observer) {
-  const observedVideo = entries[0].target;
-  if (!document.querySelector('[__pip__]')) {
-    observer.unobserve(observedVideo);
-    return;
+
+  async function requestPictureInPicture(video) {
+    await video.requestPictureInPicture();
+    video.setAttribute('__pip__', true);
+    video.addEventListener('leavepictureinpicture', event => {
+      video.removeAttribute('__pip__');
+    }, { once: true });
+    new ResizeObserver(maybeUpdatePictureInPictureVideo).observe(video);
   }
-  const video = findLargestPlayingVideo();
-  if (video && !video.hasAttribute('__pip__')) {
-    observer.unobserve(observedVideo);
-    requestPictureInPicture(video);
+
+  function maybeUpdatePictureInPictureVideo(entries, observer) {
+    let activePips = [];
+
+    for (const video of entries) {
+      if (!video.getAttribute('__pip__')) {
+        observer.unobserve(video);
+        continue;
+      } else {
+        activePips.push(video);
+      }
+    }
+    const newVideo = findLargestPlayingVideo();
+    if (newVideo && !newVideo.hasAttribute('__pip__')) {
+      activePips.forEach(p => observer.unobserve(p));
+      requestPictureInPicture(newVideo);
+    }
   }
-}
-
-(async () => {
+
   const video = findLargestPlayingVideo();
   if (!video) {
     return;