- Updated to manifest v3

- Using service worker pattern
- Fixed issue with message port closing

Author: roymckenzie

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules

README.md

@@ -11,4 +11,4 @@ Install [the extension](https://chrome.google.com/webstore/detail/detect-zero-wi
 
 ## License
 
-Detect Zero-Width Characters Chrome Extension is an Open Source project covered by the [GNU General Public License version 2](LICENSE).
+Detect Zero-Width Characters Chrome Extension is an Open Source project covered by the [GNU General Public License version 3](LICENSE).

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2020",
+    "checkJs": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+  }
+}

manifest.json

@@ -1,19 +1,12 @@
 {
   "name": "Detect Zero-Width Characters",
-  "version": "0.0.3",
-  "manifest_version": 2,
+  "version": "0.0.4",
+  "manifest_version": 3,
   "description": "Detects zero-width characters, highlights the characters and containing DOM element, and allows sanitization and copying of text.",
   "homepage_url": "https://github.com/roymckenzie/detect-zero-width-characters-chrome-extension",
-  "permissions": [
-    "contextMenus",
-    "clipboardWrite"
-  ],
+  "permissions": ["contextMenus", "clipboardWrite"],
   "background": {
-    "scripts": [
-      "src/constants.js",
-      "src/utils.js",
-      "src/background/background.js"
-    ]
+    "service_worker": "src/background/service-worker.js"
   },
   "icons": {
     "16": "src/icon/16x16.png",
@@ -22,23 +15,12 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "http://*/*",
-        "https://*/*"
-      ],
-      "css": [
-        "src/inject/inject.css"
-      ]
+      "matches": ["http://*/*", "https://*/*"],
+      "css": ["src/inject/inject.css"]
     },
     {
-      "matches": [
-        "http://*/*",
-        "https://*/*"
-      ],
-      "js": [
-        "src/constants.js",
-        "src/inject/inject.js"
-      ]
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["src/helpers/constants.js", "src/helpers/utils.js", "src/inject/inject.js"]
     }
   ]
-}
+}

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@types/chrome": "^0.0.248"
+  }
+}

package.json

@@ -0,0 +1,36 @@
+/**
+ * Builds a context menu in Chrome.
+ *
+ * @param {SanitizeAndCopyContextMenuMessage} message
+ *
+ * @since 0.0.2
+ */
+const handleContextMenu = (message) => {
+  if (message.type !== "sanitizeAndCopyContextMenu") return;
+
+  chrome.contextMenus.removeAll();
+
+  if (!message.shouldSanitizeSelection) {
+    return;
+  }
+
+  chrome.contextMenus.create({
+    id: "sanitizeAndCopyContextMenuItem",
+    title: "Sanitize and copy",
+    type: "normal",
+    contexts: ["selection"],
+  });
+
+  chrome.contextMenus.onClicked.addListener((info, tab) => {
+    if (!tab) return;
+    if (!tab.id) return;
+    if (info.menuItemId !== "sanitizeAndCopyContextMenuItem") return;
+
+    chrome.tabs.sendMessage(tab.id, {
+      type: "sanitizeAndCopyContextMenuItemAction",
+      text: message.textSelection,
+    });
+  });
+};
+
+chrome.runtime.onMessage.addListener(handleContextMenu);

src/background/background.js

@@ -3,4 +3,4 @@
  *
  * @since 0.0.1
  */
-const zeroWidthCharacterCodes = [ 8203, 8204, 8205, 8288 ];
+const zeroWidthCharacterCodes = [8203, 8204, 8205, 8288];

src/background/service-worker.js

@@ -0,0 +1,34 @@
+/**
+ * Removes zero-width characters from `text`.
+ * 
+ * @param {string} text - String to sanitize.
+ * @returns Sanitized string.
+ */
+const sanitize = (text) => {
+  return [...text]
+    .filter((char) => {
+      const unicodeCode = char.codePointAt(0);
+      return !zeroWidthCharacterCodes.includes(unicodeCode);
+    })
+    .join("");
+};
+
+// https://stackoverflow.com/a/18455088/6591929
+/**
+ * Copies `text` to clipboard.
+ * 
+ * @param {string} text - String to copy to clipboard.
+ */
+const copyTextToClipboard = (text) => {
+  const textArea = document.createElement("textarea");
+  textArea.setAttribute("name", "copyTextArea");
+  textArea.textContent = text;
+
+  const body = document.body;
+  body.appendChild(textArea);
+
+  textArea.select();
+  document.execCommand("copy");
+
+  body.removeChild(textArea);
+};