detect zero-width characters

Author: HoangTran0410

popup/tabs.js

@@ -229,6 +229,7 @@ const tabs = [
       s.studyphim_unlimited,
       s.studocu_bypassPreview,
       createTitle("--- Unlock function ---", "--- Mở khoá chức năng ---"),
+      s.detect_zeroWidthCharacters,
       s.simpleAllowCopy,
       s.reEnableContextMenu,
       s.showHiddenFields,

scripts/content-scripts/scripts/ufs_global_webpage_context.js

@@ -64,6 +64,13 @@ const UsefulScriptGlobalWebpageContext = {
       // return disconnect function
       return () => observer.disconnect();
     },
+
+    injectCssCode(code) {
+      var css = document.createElement("style");
+      if ("textContent" in css) css.textContent = code;
+      else css.innerText = code;
+      document.head.appendChild(css);
+    },
   },
   Facebook: {
     decodeArrId(arrId) {

scripts/detect_zeroWidthCharacters.js

@@ -0,0 +1,108 @@
+export default {
+  icon: "https://lh3.googleusercontent.com/6i_qAB7dGRV44NxLp_JzemPr0ZoHp1e2JT0QxHbAteVJwsLQ-1HLaxmcUJ19F-wKITawVukn8ZbLri2FZamcxgBB=w128-h128-e365-rj-sc0x00ffffff",
+  name: {
+    en: "Detect Zero-Width Characters",
+    vi: "Phát hiện ký tự ẩn (Zero-Width)",
+  },
+  description: {
+    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.",
+  },
+
+  // Code extracted from https://chrome.google.com/webstore/detail/detect-zero-width-charact/icibkhaehdofmcbfjfpppogioidkilib
+  onDocumentIdle: () => {
+    (function () {
+      var unicodeCode;
+      const zeroWidthCharacterCodes = [8203, 8204, 8205, 8288];
+
+      let elementsWithZWCC = [];
+      const highlightCharacters = function (element) {
+        const zeroWidthCharacters = String.fromCodePoint(
+          ...zeroWidthCharacterCodes
+        );
+        const regExp = new RegExp(`([${zeroWidthCharacters}])`, "g");
+        element.innerHTML = element.innerHTML.replace(
+          regExp,
+          '$1<span class="zero-width-character"></span>'
+        );
+      };
+      // From: https://jsfiddle.net/tim333/np874wae/13/
+      const checkElement = function (element) {
+        const text = textWithoutChildren(element);
+        [...text].forEach(function (character) {
+          unicodeCode = character.codePointAt(0);
+          if (
+            zeroWidthCharacterCodes.includes(unicodeCode) &&
+            !elementsWithZWCC.includes(element)
+          ) {
+            elementsWithZWCC.push(element);
+          }
+        });
+      };
+      // From: https://stackoverflow.com/a/9340862/535363
+      const textWithoutChildren = function (element) {
+        let child = element.firstChild,
+          texts = [];
+        while (child) {
+          if (child.nodeType == 3) {
+            texts.push(child.data);
+          }
+          child = child.nextSibling;
+        }
+        return texts.join("");
+      };
+      const checkPage = function () {
+        const allElements = document.getElementsByTagName("*");
+        [...allElements].forEach(checkElement);
+        elementsWithZWCC.forEach(function (element) {
+          element.classList.add("zero-width-characters");
+          highlightCharacters(element);
+        });
+      };
+
+      var readyStateCheckInterval = setInterval(function () {
+        if (document.readyState === "complete") {
+          clearInterval(readyStateCheckInterval);
+          // Check Page
+          checkPage();
+          // Check page again when any input field is changed
+          const inputs = document.querySelectorAll("input");
+          [...inputs].forEach(function (input) {
+            input.addEventListener("change", checkPage);
+          });
+        }
+      }, 10);
+    })();
+
+    UsefulScriptGlobalWebpageContext.DOM.injectCssCode(`
+        .zero-width-characters {
+            background-color: rgba(255, 0, 0, 0.2) !important;
+            position: relative;
+        }
+        .zero-width-characters:after {
+            background: #ffb2b2;
+            bottom: -14px;
+            color: #000;
+            content: 'Warning: Contains zero-width characters.';
+            float: right;
+            font-family: monospace;
+            font-size: 10px;
+            font-weight: bold;
+            line-height: 1;
+            padding: 2px 4px;
+            position: absolute;
+            right: 0;
+        }
+        .zero-width-character:after {
+            color: red;
+            content: '\u25CF';
+        }`);
+  },
+
+  onClick: () => {
+    prompt(
+      "Đọc bài viết bên dưới để hiểu rõ hơn chức năng này",
+      "https://viblo.asia/p/ky-tu-zero-width-sat-thu-vo-hinh-nam-giua-doan-van-ban-thuan-vo-hai-L4x5xM7qKBM"
+    );
+  },
+};

scripts/index.js

@@ -159,6 +159,7 @@ import insta_injectDownloadBtn from "./insta_injectDownloadBtn.js";
 import studocu_bypassPreview from "./studocu_bypassPreview.js";
 import fb_revealDeletedMessages from "./fb_revealDeletedMessages.js";
 import fb_whoIsTyping from "./fb_whoIsTyping.js";
+import detect_zeroWidthCharacters from "./detect_zeroWidthCharacters.js";
 
 // inject badges
 const allScripts = {
@@ -339,6 +340,7 @@ const allScripts = {
   studocu_bypassPreview: addBadge(studocu_bypassPreview, BADGES.new),
   fb_revealDeletedMessages: addBadge(fb_revealDeletedMessages, BADGES.hot),
   fb_whoIsTyping: addBadge(fb_whoIsTyping, BADGES.new),
+  detect_zeroWidthCharacters: addBadge(detect_zeroWidthCharacters, BADGES.new),
 };
 
 // alert(Object.keys(allScripts).length);