view script source + modal + folder structure

Author: HoangTran0410

README.md

@@ -2,23 +2,23 @@
 
 Donate? Muốn hỗ trợ mình 1 ly cafe <3 [Donate here](https://github.com/HoangTran0410/HoangTran0410/blob/main/DONATE.md)
 
-### Overview
+## Overview
 
 1 extension chứa 1 đống extensions nhỏ :)
 
 chức năng mới được cập nhật mỗi ngày :\*
 
-### How to install
+## How to install
 
-[Watch on youtube](https://www.youtube.com/watch?v=2wFTbDK80g0)
+[Watch on youtube](https://www.youtube.com/watch?v=2wFTbDK80g0)
 
-[![How to install](https://img.youtube.com/vi/2wFTbDK80g0/0.jpg)](https://www.youtube.com/watch?v=2wFTbDK80g0)
+[![How to install](https://img.youtube.com/vi/2wFTbDK80g0/0.jpg)](https://www.youtube.com/watch?v=2wFTbDK80g0)
 
-### Screenshots
+## Screenshots
 
 ![](./assets/screenshots/Screen%20Shot%202022-11-02%20at%2012.22.18.png)
 
-### Extension Tips
+## Extension Tips
 
 <https://github.com/muaz-khan/Chrome-Extensions>
 <https://developer.chrome.com/docs/extensions/reference/scripting/>

popup/helpers/checkForUpdate.js

@@ -0,0 +1,30 @@
+import config from "../../config.js";
+import { t } from "./lang.js";
+
+const versionSpan = document.querySelector("#version");
+const updateBtn = document.querySelector("#update-btn");
+
+export async function checkForUpdate() {
+  try {
+    const currentVer = (await chrome.runtime.getManifest()).version;
+    versionSpan.innerHTML = "v" + currentVer;
+
+    const { version_check, source_code } = config;
+    const lastestVer = (await (await fetch(version_check)).json()).version;
+    if (lastestVer > currentVer) {
+      updateBtn.style.display = "inline-block";
+      updateBtn.innerHTML = t({
+        vi: "cập nhật v" + lastestVer,
+        en: "update v" + lastestVer,
+      });
+      updateBtn.onclick = () => {
+        window.open(source_code);
+      };
+    } else {
+      updateBtn.style.display = "none";
+      versionSpan.innerHTML += t({ vi: " (mới nhất)", en: " (lastest)" });
+    }
+  } catch (e) {
+    console.warn("Check for update failed", e);
+  }
+}

popup/helpers/modal.js

@@ -0,0 +1,28 @@
+const modal = document.querySelector("#myModal");
+const closeModalBtn = modal.querySelector(".modal-close");
+const modalTitle = modal.querySelector(".modal-title");
+const modalBody = modal.querySelector(".modal-body");
+
+function initModal() {
+  // When the user clicks on <span> (x), close the modal
+  closeModalBtn.onclick = function () {
+    modal.style.display = "none";
+  };
+
+  // When the user clicks anywhere outside of the modal, close it
+  window.addEventListener("click", function (event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  });
+}
+
+export function openModal(title, body) {
+  modalTitle.innerHTML = title;
+  modalBody.innerHTML = body;
+  modal.style.display = "block";
+}
+
+(() => {
+  initModal();
+})();

popup/helpers/scriptHelpers.js

@@ -0,0 +1,32 @@
+import { allScripts } from "../../scripts/index.js";
+import { getCurrentURL } from "./utils.js";
+
+export async function getAvailableScripts() {
+  let hostname = (await getCurrentURL()).hostname;
+  let avai = [];
+  for (let script of Object.values(allScripts)) {
+    if (await checkBlackWhiteList(script, hostname)) {
+      avai.push(script);
+    }
+  }
+
+  return avai;
+}
+
+export async function checkBlackWhiteList(script, hostname = null) {
+  if (!hostname) {
+    hostname = (await getCurrentURL()).hostname;
+  }
+
+  let hasWhiteList = script.whiteList?.length > 0;
+  let hasBlackList = script.blackList?.length > 0;
+  let inWhiteList = script.whiteList?.findIndex((_) => _ === hostname) >= 0;
+  let inBlackList = script.blackList?.findIndex((_) => _ === hostname) >= 0;
+
+  let willRun =
+    (!hasWhiteList && !hasBlackList) ||
+    (hasWhiteList && inWhiteList) ||
+    (hasBlackList && !inBlackList);
+
+  return willRun;
+}

popup/helpers/utils.js

@@ -1,6 +1,3 @@
-import { allScripts } from "../../scripts/index.js";
-import { t } from "./lang.js";
-
 export const getTabId = async () => {
   let tabArray = await chrome.tabs.query({ currentWindow: true, active: true });
   return tabArray[0].id;
@@ -47,52 +44,4 @@ export async function getCurrentURL() {
   return new URL(url);
 }
 
-export async function getAvailableScripts() {
-  let hostname = (await getCurrentURL()).hostname;
-  let avai = [];
-  for (let script of Object.values(allScripts)) {
-    if (await checkBlackWhiteList(script, false, hostname)) {
-      avai.push(script);
-    }
-  }
-
-  return avai;
-}
-
-export async function checkBlackWhiteList(
-  script,
-  willAlert = true,
-  hostname = null
-) {
-  if (!hostname) {
-    hostname = (await getCurrentURL()).hostname;
-  }
 
-  let hasWhiteList = script.whiteList?.length > 0;
-  let hasBlackList = script.blackList?.length > 0;
-  let inWhiteList = script.whiteList?.findIndex((_) => _ === hostname) >= 0;
-  let inBlackList = script.blackList?.findIndex((_) => _ === hostname) >= 0;
-
-  let willRun =
-    (!hasWhiteList && !hasBlackList) ||
-    (hasWhiteList && inWhiteList) ||
-    (hasBlackList && !inBlackList);
-
-  if (!willRun && willAlert) {
-    const { whiteList: w, blackList: b } = script;
-    alert(
-      t({
-        en:
-          `Script not supported in current website: \n\n` +
-          `${w?.length ? `+ Only run at:  ${w?.join(", ")}` : ""}\n` +
-          `${b?.length ? `+ Not run at:  ${b?.join(", ")}` : ""}`,
-        vi:
-          `Script không hỗ trợ website hiện tại: \n\n` +
-          `${w?.length ? `+ Chỉ chạy tại:  ${w?.join(", ")}` : ""}\n` +
-          `${b?.length ? `+ Không chạy tại:  ${b?.join(", ")}` : ""}`,
-      })
-    );
-  }
-
-  return willRun;
-}

popup/index.js

@@ -1,5 +1,14 @@
-import config from "../config.js";
 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 { checkBlackWhiteList } from "./helpers/scriptHelpers.js";
+import { openModal } from "./helpers/modal.js";
+import {
+  activeTabIdSaver,
+  favoriteScriptsSaver,
+  recentScriptsSaver,
+} from "./helpers/storage.js";
 import {
   isFunc,
   isLink,
@@ -8,19 +17,10 @@ import {
   specialTabs,
   tabs,
 } from "./tabs.js";
-import { getFlag, t, toggleLang } from "./helpers/lang.js";
-import { checkBlackWhiteList, runScriptInCurrentTab } from "./helpers/utils.js";
-import {
-  activeTabIdSaver,
-  favoriteScriptsSaver,
-  recentScriptsSaver,
-} from "./helpers/storage.js";
 
 const tabDiv = document.querySelector("div.tab");
 const contentDiv = document.querySelector("div.content");
 const flagImg = document.querySelector("img#flag");
-const versionSpan = document.querySelector("#version");
-const updateBtn = document.querySelector("#update-btn");
 
 async function initLanguage() {
   flagImg.setAttribute("src", getFlag());
@@ -187,19 +187,36 @@ function createScriptButton(script, isFavorite = false) {
   title.innerHTML = t(script.name);
   button.appendChild(title);
 
-  // add to favorite button
   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.onclick = (e) => {
       e.stopPropagation();
       e.preventDefault();
-
       favoriteScriptsSaver.toggle(script).then(createTabs);
     };
     button.appendChild(addFavoriteBtn);
+
+    // view source button
+    const viewSourceBtn = document.createElement("i");
+    viewSourceBtn.title = t({
+      en: "View script source",
+      vi: "Xem mã nguồn",
+    });
+    viewSourceBtn.className = "fa-solid fa-code view-source";
+    viewSourceBtn.onclick = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      openModal(t(script.name), `<pre>${script.func?.toString()}</pre>`);
+    };
+    button.appendChild(viewSourceBtn);
   }
 
   // tooltip
@@ -216,31 +233,22 @@ async function runScript(script) {
   if (willRun) {
     recentScriptsSaver.add(script);
     runScriptInCurrentTab(script.func);
-  }
-}
-
-async function checkForUpdate() {
-  try {
-    const currentVer = (await chrome.runtime.getManifest()).version;
-    versionSpan.innerHTML = "v" + currentVer;
-
-    const { version_check, source_code } = config;
-    const lastestVer = (await (await fetch(version_check)).json()).version;
-    if (lastestVer > currentVer) {
-      updateBtn.style.display = "inline-block";
-      updateBtn.innerHTML = t({
-        vi: "cập nhật v" + lastestVer,
-        en: "update v" + lastestVer,
-      });
-      updateBtn.onclick = () => {
-        window.open(source_code);
-      };
-    } else {
-      updateBtn.style.display = "none";
-      versionSpan.innerHTML += t({ vi: " (mới nhất)", en: " (lastest)" });
-    }
-  } catch (e) {
-    console.warn("Check for update failed", e);
+  } else {
+    const { whiteList: w, blackList: b } = script;
+    openModal(
+      t({
+        en: `Script not supported in current website`,
+        vi: `Script không hỗ trợ website hiện tại`,
+      }),
+      t({
+        en:
+          `${w?.length ? `+ Only run at:  ${w?.join(", ")}` : ""}\n` +
+          `${b?.length ? `+ Not run at:  ${b?.join(", ")}` : ""}`,
+        vi:
+          `${w?.length ? `+ Chỉ chạy tại:  ${w?.join(", ")}` : ""}\n` +
+          `${b?.length ? `+ Không chạy tại:  ${b?.join(", ")}` : ""}`,
+      })
+    );
   }
 }
 

popup/popup.html

@@ -30,8 +30,19 @@ <h3>
     <div class="content">
     </div>
 
+    <!-- language flag -->
     <img id="flag" src="" alt="">
 
+    <!-- modal -->
+    <div id="myModal" class="modal">
+        <!-- Modal content -->
+        <div class="modal-content">
+            <span class="modal-close">&times;</span>
+            <h3 class="modal-title">Modal Title</h3>
+            <div class="modal-body">Some text in the Modal..</div>
+        </div>
+    </div>
+
     <script type="module" src="./index.js"></script>
 </body>