infoLink

Author: HoangTran0410

empty_script.js

@@ -8,6 +8,8 @@ export default {
     en: "",
     vi: "",
   },
+  infoLink: "",
+
   blackList: [],
   whiteList: [],
 

popup/index.js

@@ -229,6 +229,22 @@ function createScriptButton(script, isFavorite = false) {
   title.innerHTML = t(script.name);
   button.appendChild(title);
 
+  // what this? button
+  if (typeof script.infoLink === "string") {
+    const infoBtn = document.createElement("i");
+    infoBtn.className = "fa-regular fa-circle-question";
+    infoBtn.title = t({
+      en: "View info/demo",
+      vi: "Xem giới thiệu/demo",
+    });
+    infoBtn.onclick = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(script.infoLink);
+    };
+    button.appendChild(infoBtn);
+  }
+
   // add to favorite button
   const addFavoriteBtn = document.createElement("i");
   addFavoriteBtn.className = isFavorite

popup/styles/style.css

@@ -198,7 +198,8 @@ a:hover {
 }
 
 .content button i.star,
-.content button i.view-source {
+.content button i.view-source,
+.content button i.fa-circle-question {
     opacity: 0;
     width: 0;
     transition: all .2s;
@@ -209,13 +210,15 @@ a:hover {
 }
 
 .content button i.star:hover,
-.content button i.view-source:hover {
+.content button i.view-source:hover,
+.content button i.fa-circle-question:hover {
     transform: scale(1.8);
 }
 
 .content button:hover i.star,
 .content button i.star.active,
-.content button:hover i.view-source {
+.content button:hover i.view-source,
+.content button:hover i.fa-circle-question {
     width: auto;
     margin-left: 5px;
     opacity: 1;
@@ -413,6 +416,8 @@ a:hover {
     justify-content: center;
     align-items: center;
     z-index: 5;
+    -webkit-backdrop-filter: blur(.1rem);
+    backdrop-filter: blur(.1rem);
 }
 
 .loading-container .text {

scripts/detect_zeroWidthCharacters.js

@@ -8,14 +8,11 @@ export default {
     en: "Detects zero-width characters, highlights the characters and containing DOM element.\n\nClick for more detail.",
     vi: "Phát hiện ký tự ẩn (zero-width) trong văn bản cho trình duyệt, e-mail client, trình soạn thảo văn bản,...\n\nBấm để xem thêm chi tiết.",
   },
+  infoLink:
+    "https://viblo.asia/p/ky-tu-zero-width-sat-thu-vo-hinh-nam-giua-doan-van-ban-thuan-vo-hai-L4x5xM7qKBM",
 
   onDocumentIdle: detectZeroWidthCharacters,
   onClick: detectZeroWidthCharacters,
-
-  // onClickExtension: () =>
-  //   window.open(
-  //     "https://viblo.asia/p/ky-tu-zero-width-sat-thu-vo-hinh-nam-giua-doan-van-ban-thuan-vo-hai-L4x5xM7qKBM"
-  //   ),
 };
 
 // Code extracted from https://chrome.google.com/webstore/detail/detect-zero-width-charact/icibkhaehdofmcbfjfpppogioidkilib

scripts/fb_invisible_message.js

@@ -8,6 +8,8 @@ export default {
     en: "Add the > character before writing a message to send hidden messages.\n\nYour friends needs to install this extension and enable it to view hidden messages.",
     vi: "Thêm ký tự > trước tin nhắn để tạo tin nhắn tàng hình.\n\nChỉ xem được tin nhắn tàng hình khi cài extension và bật chức năng này.",
   },
+  infoLink: "https://www.facebook.com/groups/j2team.community/posts/1607769529555161/",
+
   whiteList: ["https://*.facebook.com/*", "https://*.messenger.com/*"],
 
   onDocumentIdle: () => {
@@ -179,9 +181,4 @@ export default {
       );
     })();
   },
-
-  onClickExtension: () =>
-    window.open(
-      "https://www.facebook.com/groups/j2team.community/posts/1607769529555161/"
-    ),
 };

scripts/fb_moreReactionStory.css

@@ -7,8 +7,9 @@
 }
 
 .btn-react {
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
+  padding: 4px;
   background-color: #fff;
   display: flex;
   justify-content: center;
@@ -54,7 +55,6 @@
   cursor: pointer;
   display: inline-block;
   transition: all 0.1s;
-  padding: 5px;
 }
 
 .emoji-tab:hover {
@@ -89,7 +89,6 @@
   align-items: center;
   cursor: pointer;
   transition: all 0.15s;
-  padding: 3px;
 }
 
 .emoji.loading {

scripts/fb_moreReactionStory.js

@@ -8,6 +8,9 @@ export default {
     en: "React story Facebook with more emojis",
     vi: "React story Facebook với nhiều loại emoji khác nhau",
   },
+  infoLink:
+    "https://www.facebook.com/groups/j2team.community/posts/1769666783365434",
+
   whiteList: ["https://www.facebook.com/*"],
 
   // FB POST: https://www.facebook.com/groups/j2team.community/posts/1769666783365434
@@ -84,16 +87,20 @@ export default {
               emojiLi.className = "emoji always-enable-animations";
               emojiLi.textContent = emoji;
               emojiLi.setAttribute("value", emoji);
+
+              let loading = 0;
               emojiLi.onclick = async function () {
                 const storyId = getStoryId();
                 try {
-                  emojiLi.classList.add("loading");
+                  if (!loading) emojiLi.classList.add("loading");
+                  loading++;
                   await reactStory(user_id, fb_dtsg, storyId, emoji);
+                  loading--;
                   addFloatingEmoji(emoji, emojiLi);
                 } catch (e) {
                   console.error(e);
                 } finally {
-                  emojiLi.classList.remove("loading");
+                  if (!loading) emojiLi.classList.remove("loading");
                 }
               };
 
@@ -215,9 +222,4 @@ export default {
     );
     UsefulScriptGlobalPageContext.DOM.injectCssFile(cssFile);
   },
-
-  onClickExtension: () =>
-    window.open(
-      "https://www.facebook.com/groups/j2team.community/posts/1769666783365434"
-    ),
 };

scripts/studyphim_unlimited.js

@@ -8,6 +8,9 @@ export default {
     en: "Watch movies on Studyphim for free without login",
     vi: "Xem phim miễn phí trên Studyphim không cần đăng nhập",
   },
+  infoLink:
+    "https://www.facebook.com/groups/j2team.community/posts/565933393738785/",
+
   whiteList: ["https://www.studyphim.vn/*"],
 
   onDocumentStart: () => {
@@ -17,9 +20,4 @@ export default {
       true
     );
   },
-
-  onClickExtension: () =>
-    window.open(
-      "https://www.facebook.com/groups/j2team.community/posts/565933393738785/"
-    ),
 };