Merge pull request #5 from kip-13/sanitize-and-copy

Added the option to sanitize and copy text, and more

Author: roymckenzie

manifest.json

@@ -4,6 +4,22 @@
   "manifest_version": 2,
   "description": "Detects zero-width characters on a page, highlights the containing DOM element, and displays a warning at bottom-right of element.",
   "homepage_url": "https://github.com/roymckenzie/detect-zero-width-characters-chrome-extension",
+  "permissions": [
+    "contextMenus",
+    "clipboardWrite"
+  ],
+  "background": {
+    "scripts": [
+      "src/constants.js",
+      "src/utils.js",
+      "src/background/background.js"
+    ]
+  },
+  "icons": {
+    "16": "src/icon/16x16.png",
+    "48": "src/icon/48x48.png",
+    "128": "src/icon/128x128.png"
+  },
   "content_scripts": [
     {
       "matches": [
@@ -20,6 +36,7 @@
         "https://*/*"
       ],
       "js": [
+        "src/constants.js",
         "src/inject/inject.js"
       ]
     }

src/background/background.js

@@ -0,0 +1,29 @@
+(function() {
+  let contextMenuOptionId, selectionText;
+
+  const sanitizeAndCopy = function() {
+    copyTextToClipboard(sanitize(selectionText));
+  };
+
+  const handleContextMenu = function(request) {
+    if (request.shouldSanitizeSelection) {
+      selectionText = request.selection;
+
+      if (!contextMenuOptionId) {
+        contextMenuOptionId = chrome.contextMenus.create({
+          "title" : "Sanitize and copy",
+          "type" : "normal",
+          "contexts" : ["selection"],
+          "onclick" : sanitizeAndCopy
+        });
+      }
+    } else {
+      if (contextMenuOptionId) {
+        chrome.contextMenus.remove(contextMenuOptionId);
+        contextMenuOptionId = null;
+      }
+    }
+  };
+
+  chrome.runtime.onMessage.addListener(handleContextMenu);
+})();

src/constants.js

@@ -0,0 +1 @@
+const zeroLengthCharacterCodes = [ 8203, 8204, 8205, 8288 ];

src/icon/128x128.png

@@ -16,4 +16,4 @@
   padding: 2px 4px;
   position: absolute;
   right: 0;
-}
+}

src/icon/16x16.png

@@ -1,51 +1,88 @@
-chrome.extension.sendMessage({}, function(response) {
-  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 );
-      });
+(function() {
+  let elementsWithZLCC = [];
 
-    }
-  }, 10);
+  const checkPage = function() {
+    const allElements = document.getElementsByTagName('*');
+    [...allElements].forEach( checkElement );
+  }
 
-});
+  // From: https://jsfiddle.net/tim333/np874wae/13/
+  const checkElement = function( element ) {
+    const text = textWithoutChildren( element );
 
-const checkPage = function() {
-  const allElements = document.getElementsByTagName('*');
-  [...allElements].forEach( checkElement );
-}
+    [...text].forEach( function( character ) {
+      unicodeCode = character.codePointAt(0);
 
-// From: https://jsfiddle.net/tim333/np874wae/13/
-const checkElement = function( element ) {
-  const text = textWithoutChildren( element );
-  const zeroLengthCharacterCodes = [ 8203, 8204, 8205, 8288 ];
+      if (
+        zeroLengthCharacterCodes.includes( unicodeCode )
+        && !elementsWithZLCC.includes(element)
+      ) {
+        elementsWithZLCC.push(element)
+      }
+    });
 
-  [...text].forEach( function( character ) {
-    unicodeCode = character.codePointAt(0);
-    if ( zeroLengthCharacterCodes.includes( unicodeCode ) ) {
+    elementsWithZLCC.forEach(function( element ) {
       element.classList.add('zero-length-characters');
+    })
+  }
+
+  // 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("");
+  }
+
+  chrome.extension.sendMessage({}, function(response) {
+    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);
   });
-}
 
-// From: https://stackoverflow.com/a/9340862/535363
-const textWithoutChildren = function( element ) {
-  child = element.firstChild,
-  texts = [];
+  document.body.addEventListener('mouseup', function (e) {
+    const selection = window.getSelection();
+
+    const shouldSanitizeSelection  = elementsWithZLCC
+      .map(function(element) {
+        return selection.containsNode(element, true);
+      })
+      .includes(true);
 
-  while (child) {
-      if (child.nodeType == 3) {
-          texts.push(child.data);
+    try {
+      chrome.runtime.sendMessage({
+        "shouldSanitizeSelection": shouldSanitizeSelection,
+        "selection": selection.toString()
+      });
+    } catch(e) {
+      if (
+        e.message.match(/Invocation of form runtime\.connect/) &&
+        e.message.match(/doesn't match definition runtime\.connect/)
+      ) {
+        console.error('Chrome extension has been reloaded. Please refresh the page');
+      } else {
+        throw(e);
       }
-      child = child.nextSibling;
-  }
+    }
+  });
 
-  return texts.join("");
-}
+})();

src/icon/32x32.png

@@ -0,0 +1,18 @@
+const sanitize = function(text) {
+    return [...text].filter(function(char) {
+      const unicodeCode = char.codePointAt(0);
+
+      return !zeroLengthCharacterCodes.includes(unicodeCode);
+    }).join("");
+}
+
+//https://stackoverflow.com/a/18455088/6591929
+const copyTextToClipboard = function (text) {
+  const copyFrom = document.createElement("textarea");
+  const body = document.body;
+  copyFrom.textContent = text;
+  body.appendChild(copyFrom);
+  copyFrom.select();
+  document.execCommand('copy');
+  body.removeChild(copyFrom);
+}