pip full website

Author: hoang.tran12

manifest.json

@@ -14,6 +14,7 @@
     "default_icon": "./assets/icon32.png"
   },
   "permissions": [
+    "tts",
     "power",
     "tabs",
     "storage",
@@ -25,13 +26,13 @@
     "scripting",
     "tabCapture",
     "contextMenus",
+    "desktopCapture",
     "webNavigation",
     "notifications",
     "unlimitedStorage",
     "declarativeNetRequest",
     "declarativeNetRequestFeedback",
-    "declarativeNetRequestWithHostAccess",
-    "*://*/*"
+    "declarativeNetRequestWithHostAccess"
   ],
   "host_permissions": ["<all_urls>"],
   "options_page": "./pages/options/options.html",

popup/tabs.js

@@ -269,6 +269,7 @@ const tabs = [
       // s.youtube_localDownloader,
       s.youtube_downloadVideo,
       s.pictureInPicture,
+      s.pip_fullWebsite,
       s.youtube_toggleLight,
       s.youtube_viewDislikes,
       s.youtube_nonstop,

scripts/background-scripts/background-script.js

@@ -127,23 +127,10 @@ function main() {
     try {
       if (request.action === "ufs-runInBackground") {
         const { params = [], fnPath = "" } = request.data || {};
-        let fn = fnPath?.startsWith("chrome") ? chrome : GLOBAL;
-        fnPath.split(".").forEach((part) => {
-          fn = fn?.[part] || fn;
-        });
         console.log("runInBackground", fnPath, params);
-        let res = fn?.(...params);
-
-        if (typeof res?.then === "function") {
-          res.then?.((_res) => {
-            console.log(_res);
-            sendResponse(_res);
-          });
-        } else {
-          console.log(res);
+        utils.runFunc(fnPath, params, GLOBAL).then((res) => {
           sendResponse(res);
-        }
-
+        });
         return true;
       }
     } catch (e) {

scripts/content-scripts/content_script.js

@@ -1,4 +1,5 @@
-import("./ufs_global.js");
+import("./ufs_global.js"); // to use UfsGlobal inside content-script
+let utils;
 
 // communication between page-script and content-script
 function sendToPageScript(event, uuid, data) {
@@ -26,6 +27,13 @@ async function runScript(scriptId, event) {
 }
 
 (async () => {
+  async function getUtils() {
+    if (!utils) utils = await import("../helpers/utils.js");
+    return utils;
+  }
+
+  getUtils(); // import and save utils
+
   chrome.runtime.onMessage.addListener(function (
     message,
     sender,
@@ -51,12 +59,9 @@ async function runScript(scriptId, event) {
       switch (event) {
         case "ufs-runInContentScript":
           const { params = [], fnPath = "" } = data || {};
-          let fn = fnPath?.startsWith?.("chrome") ? chrome : window;
-          fnPath.split(".").forEach((part) => {
-            fn = fn?.[part] || fn;
-          });
           console.log("runInContentScript", fnPath, params);
-          sendToPageScript(event, uuid, await fn?.(...params));
+          const res = await (await getUtils()).runFunc(fnPath, params);
+          sendToPageScript(event, uuid, res);
           break;
         case "ufs-runInBackground":
           chrome.runtime.sendMessage(

scripts/helpers/utils.js

@@ -1,11 +1,44 @@
-//  Utils used by popup and background-script
+//  Utils used by popup and background-script (and content-script?)
 
-const { version } = chrome.runtime.getManifest();
+const { version } = chrome.runtime?.getManifest() || {};
+
+export function runFunc(fnPath = "", params = [], global = {}) {
+  return new Promise((resolve) => {
+    let fn = fnPath?.startsWith("chrome") ? chrome : global;
+    fnPath.split(".").forEach((part) => {
+      fn = fn?.[part] || fn;
+    });
+
+    let hasCallback = false;
+    let _params = params.map((p) => {
+      if (p === "callback") {
+        hasCallback = true;
+        return resolve;
+      }
+      return p;
+    });
+    let res = fn?.(..._params);
+
+    if (!hasCallback) {
+      if (typeof res?.then === "function") {
+        res.then?.((_res) => {
+          console.log(_res);
+          resolve(_res);
+        });
+      } else {
+        console.log(res);
+        resolve(res);
+      }
+    }
+  });
+}
 
 export async function trackEvent(scriptId) {
-  console.log("trackEvent", scriptId);
+  console.log("trackEvent", scriptId, version);
+  return;
   try {
     let res = await fetch(
+      // "http://localhost:3000/count",
       "https://useful-script-statistic.glitch.me/count",
       // "https://useful-script-statistic.onrender.com/count",
       {

scripts/index.js

@@ -162,6 +162,7 @@ import textToQrCode from "./textToQrCode.js";
 import insta_anonymousStoryViewer from "./insta_anonymousStoryViewer.js";
 import removeWebLimit from "./removeWebLimit.js";
 import _ufs_statistic from "./_ufs_statistic.js";
+import pip_fullWebsite from "./pip_fullWebsite.js";
 
 // inject badges
 const allScripts = {
@@ -340,6 +341,7 @@ const allScripts = {
   insta_anonymousStoryViewer: addBadge(insta_anonymousStoryViewer, BADGES.new),
   removeWebLimit: addBadge(removeWebLimit, BADGES.hot),
   _ufs_statistic: _ufs_statistic,
+  pip_fullWebsite: addBadge(pip_fullWebsite, BADGES.new),
 };
 
 // alert(Object.keys(allScripts).length);

scripts/pip_fullWebsite.js

@@ -0,0 +1,114 @@
+export default {
+  icon: "https://lh3.googleusercontent.com/cvfpnTKw3B67DtM1ZpJG2PNAIjP6hVMOyYy403X4FMkOuStgG1y4cjCn21vmTnnsip1dTZSVsWBA9IxutGuA3dVDWhg=w128-h128-e365-rj-sc0x00ffffff",
+  name: {
+    en: "PIP full website",
+    vi: "PIP toàn website",
+  },
+  description: {
+    en: "Picture in picture mode for full website",
+    vi: "Picture in picture: Xem toàn bộ website (thay vì chỉ video) trong của sổ nhỏ",
+    img: "",
+  },
+
+  changeLogs: [
+    {
+      version: "1.66",
+      date: "25/04/2024",
+      description: {
+        en: "init",
+        vi: "init",
+      },
+    },
+  ],
+
+  onClickContentScript: async () => {
+    if (!window.ufs_pip_fullWebsite) {
+      window.ufs_pip_fullWebsite = {
+        isPIP: false,
+        video: null,
+        stream: null,
+      };
+    }
+
+    function enterPIP(stream, video) {
+      window.ufs_pip_fullWebsite.isPIP = true;
+      window.ufs_pip_fullWebsite.video = video;
+      window.ufs_pip_fullWebsite.stream = stream;
+      video.requestPictureInPicture();
+    }
+
+    function leavePIP() {
+      document.exitPictureInPicture();
+      window.ufs_pip_fullWebsite.isPIP = false;
+      window.ufs_pip_fullWebsite.video?.remove?.();
+      window.ufs_pip_fullWebsite.stream?.getVideoTracks?.().forEach((track) => {
+        track.stop();
+      });
+      window.ufs_pip_fullWebsite.stream = null;
+    }
+
+    try {
+      if (window.ufs_pip_fullWebsite.isPIP) {
+        leavePIP();
+        return;
+      }
+
+      const tab = await UfsGlobal.Extension.runInBackground(
+        "utils.getCurrentTab"
+      );
+
+      const streamId = await UfsGlobal.Extension.runInBackground(
+        "chrome.tabCapture.getMediaStreamId",
+        [
+          {
+            targetTabId: tab.id,
+            consumerTabId: tab.id,
+          },
+        ]
+      );
+
+      navigator.webkitGetUserMedia(
+        {
+          audio: false,
+          video: {
+            mandatory: {
+              chromeMediaSource: "tab", // The media source must be 'tab' here.
+              chromeMediaSourceId: streamId,
+              minWidth: 50,
+              minHeight: 50,
+              // maxWidth: 1920,
+              // maxHeight: 1080,
+              minFrameRate: 10,
+              maxFrameRate: 60,
+            },
+          },
+        },
+        function (stream) {
+          const video = document.createElement("video");
+          video.srcObject = stream;
+          video.autoplay = true;
+          video.style.display = "none";
+          video.addEventListener("enterpictureinpicture", () => {});
+          video.addEventListener("leavepictureinpicture", () => {
+            leavePIP();
+          });
+          video.addEventListener(
+            "canplay",
+            function () {
+              this.play();
+              enterPIP(stream, video);
+            },
+            { once: true }
+          );
+          document.body.appendChild(video);
+        },
+        function (error) {
+          alert("ERROR: " + error);
+          console.log(error);
+        }
+      );
+    } catch (e) {
+      alert(e);
+    }
+  },
+};