view script source + youtube popup

Author: HoangTran0410

popup/helpers/utils.js

@@ -1,3 +1,5 @@
+import { t } from "./lang.js";
+
 export const getTabId = async () => {
   let tabArray = await chrome.tabs.query({ currentWindow: true, active: true });
   return tabArray[0].id;
@@ -44,4 +46,17 @@ export async function getCurrentURL() {
   return new URL(url);
 }
 
+export function viewScriptSource(script) {
+  localStorage.viewScriptSource_sharedData = JSON.stringify({
+    name: t(script.name),
+    description: t(script.description),
+    source: script.func?.toString(),
+  });
 
+  chrome.windows.create({
+    url: chrome.runtime.getURL("viewScriptSource/index.html"),
+    type: "popup",
+    height: 450,
+    width: 700,
+  });
+}

popup/index.js

@@ -1,7 +1,7 @@
 import { allScripts } from "../scripts/index.js";
 import { checkForUpdate } from "./helpers/checkForUpdate.js";
 import { getFlag, t, toggleLang } from "./helpers/lang.js";
-import { runScriptInCurrentTab } from "./helpers/utils.js";
+import { viewScriptSource, runScriptInCurrentTab } from "./helpers/utils.js";
 import { checkBlackWhiteList } from "./helpers/scriptHelpers.js";
 import { openModal } from "./helpers/modal.js";
 import {
@@ -190,13 +190,18 @@ function createScriptButton(script, isFavorite = false) {
   if (isFunc(script)) {
     // add to favorite button
     const addFavoriteBtn = document.createElement("i");
-    addFavoriteBtn.title = t({
-      en: "Add to farovite",
-      vi: "Thêm vào yêu thích",
-    });
     addFavoriteBtn.className = isFavorite
       ? "fa-solid fa-star star active"
       : "fa-regular fa-star star";
+    addFavoriteBtn.title = isFavorite
+      ? t({
+          en: "Remove from favorite",
+          vi: "Xoá khỏi yêu thích",
+        })
+      : t({
+          en: "Add to farovite",
+          vi: "Thêm vào yêu thích",
+        });
     addFavoriteBtn.onclick = (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -214,7 +219,9 @@ function createScriptButton(script, isFavorite = false) {
     viewSourceBtn.onclick = (e) => {
       e.stopPropagation();
       e.preventDefault();
-      openModal(t(script.name), `<pre>${script.func?.toString()}</pre>`);
+
+      viewScriptSource(script);
+      // openModal(t(script.name), `<pre>${script.func?.toString()}</pre>`);
     };
     button.appendChild(viewSourceBtn);
   }

popup/tabs.js

@@ -89,6 +89,7 @@ const tabs = [
     scripts: [
       s.youtube_downloadVideo,
       s.pictureInPicture,
+      s.youtube_popupPlayer,
       s.youtube_toggleLight,
       s.youtube_viewDislikes,
     ],

scripts/index.js

@@ -80,6 +80,7 @@ import insta_enableDownloadImage from "./insta_enableDownloadImage.js";
 import youtube_viewDislikes from "./youtube_viewDislikes.js";
 import downDetector from "./downDetector.js";
 import fb_getTokenFfb from "./fb_getTokenFfb.js";
+import youtube_popupPlayer from "./youtube_popupPlayer.js";
 
 // inject badges
 const allScripts = {
@@ -166,6 +167,7 @@ const allScripts = {
   youtube_viewDislikes: addBadge(youtube_viewDislikes, BADGES.new),
   downDetector: addBadge(downDetector, BADGES.new),
   fb_getTokenFfb: addBadge(fb_getTokenFfb, BADGES.new),
+  youtube_popupPlayer: addBadge(youtube_popupPlayer, BADGES.new),
 };
 
 // inject id to all scripts

scripts/youtube_popupPlayer.js

@@ -0,0 +1,25 @@
+export default {
+  icon: 'https://lh3.googleusercontent.com/6PBcKpsoS15e2SUqMi6_KGBHsnvUdaRrRYXkHM3zkn5Zzj8TAEJp1_RtykaCfn1DCmyH9PJOKHrMbmtAOnQqtAU8aLs=w128-h128-e365-rj-sc0x00ffffff',
+  name: {
+    en: "Youtube popup player",
+    vi: "Xem youtube trong popup",
+  },
+  description: {
+    en: "Open current youtube video in new popup player",
+    vi: "Xem video youtube hiện tại trong cửa sổ popup mới",
+  },
+  blackList: [],
+  whiteList: ["www.youtube.com", "m.youtube.com"],
+  func: function () {
+    const urlObject = new URL(location.href);
+    const key = urlObject.searchParams.get("v");
+    const list = urlObject.searchParams.get("list");
+
+    window.open(
+      `https://www.youtube.com/pop-up-player/${key}` +
+        (list ? `?list=${list}&efyt_playlist=true` : ""),
+      "",
+      "toolbar=no,location=no,directories=no,status=no, menubar=no,height=400,width=600"
+    );
+  },
+};

viewScriptSource/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script> -->
+    <link rel="stylesheet" href="./libs/isbl-editor-dark.min.css">
+    <script src="libs/highlight.min.js"></script>
+    <script src="libs/javascript.min.js"></script>
+
+    <link rel="stylesheet" href="style.css">
+    <script src="main.js"></script>
+</head>
+
+<body>
+    <button type="button" id="copy-btn">Copy source code</button>
+
+    <pre>
+        <code class="language-javascript"></code>
+    </pre>
+</body>
+
+</html>