Put in some documentation and changed references to zero-length to zero-width. Resolves #4 where the warning was obscuring the text.

Author: roymckenzie

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Detect Zero-Width Characters",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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",

src/background/background.js

@@ -1,29 +1,41 @@
 (function() {
   let contextMenuOptionId, selectionText;
 
+  /**
+   * Sanitizes and copies some text.
+   *
+   * @since 0.0.2
+   */
   const sanitizeAndCopy = function() {
-    copyTextToClipboard(sanitize(selectionText));
+    copyTextToClipboard( sanitize( selectionText ) );
   };
 
-  const handleContextMenu = function(request) {
-    if (request.shouldSanitizeSelection) {
+  /**
+   * Builds a context menu in Chrome.
+   *
+   * @param {object} request  The chrome.runtime.onMessage object.
+   *
+   * @since 0.0.2
+   */
+  const handleContextMenu = function( request ) {
+    if ( request.shouldSanitizeSelection ) {
       selectionText = request.selection;
 
-      if (!contextMenuOptionId) {
+      if ( !contextMenuOptionId ) {
         contextMenuOptionId = chrome.contextMenus.create({
           "title" : "Sanitize and copy",
           "type" : "normal",
-          "contexts" : ["selection"],
+          "contexts" : [ "selection" ],
           "onclick" : sanitizeAndCopy
         });
       }
     } else {
-      if (contextMenuOptionId) {
-        chrome.contextMenus.remove(contextMenuOptionId);
+      if ( contextMenuOptionId ) {
+        chrome.contextMenus.remove( contextMenuOptionId );
         contextMenuOptionId = null;
       }
     }
   };
 
-  chrome.runtime.onMessage.addListener(handleContextMenu);
-})();
+  chrome.runtime.onMessage.addListener( handleContextMenu );
+})();

src/constants.js

@@ -1 +1,6 @@
-const zeroLengthCharacterCodes = [ 8203, 8204, 8205, 8288 ];
+/**
+ * The different zero-width character codes.
+ *
+ * @since 0.0.1
+ */
+const zeroWidthCharacterCodes = [ 8203, 8204, 8205, 8288 ];

src/inject/inject.css

@@ -1,11 +1,11 @@
-.zero-length-characters {
+.zero-width-characters {
   background-color: rgba(255, 0, 0, 0.2) !important;
   position: relative;
 }
 
-.zero-length-characters:after {
+.zero-width-characters:after {
   background: #ffb2b2;
-  bottom: 0;
+  bottom: -14px;
   color: #000;
   content: 'Warning: Contains zero-width characters.';
   float: right;

src/inject/inject.js

@@ -1,11 +1,13 @@
 (function() {
-  let elementsWithZLCC = [];
-
-  const checkPage = function() {
-    const allElements = document.getElementsByTagName('*');
-    [...allElements].forEach( checkElement );
-  }
-
+  let elementsWithZWCC = [];
+
+  /**
+  * Checks DOM element for zero-width character.
+  *
+  * @param {dom node} element   A DOM node.
+  *
+  * @since 0.0.1
+  */
   // From: https://jsfiddle.net/tim333/np874wae/13/
   const checkElement = function( element ) {
     const text = textWithoutChildren( element );
@@ -14,18 +16,27 @@
       unicodeCode = character.codePointAt(0);
 
       if (
-        zeroLengthCharacterCodes.includes( unicodeCode )
-        && !elementsWithZLCC.includes(element)
+        zeroWidthCharacterCodes.includes( unicodeCode )
+        && !elementsWithZWCC.includes(element)
       ) {
-        elementsWithZLCC.push(element)
+        elementsWithZWCC.push(element)
       }
     });
 
-    elementsWithZLCC.forEach(function( element ) {
-      element.classList.add('zero-length-characters');
+    elementsWithZWCC.forEach(function( element ) {
+      element.classList.add('zero-width-characters');
     })
   }
 
+  /**
+  * Pulls text from DOM node not including child DOM nodes.
+  *
+  * @param {node} element   A DOM node.
+  *
+  * @since 0.0.1
+  *
+  * @return {string}  The text inside the DOM node.
+  */
   // From: https://stackoverflow.com/a/9340862/535363
   const textWithoutChildren = function( element ) {
     let child = element.firstChild,
@@ -41,6 +52,16 @@
     return texts.join("");
   }
 
+  /**
+  * Checks current document for zero-width characters.
+  *
+  * @since 0.0.1
+  */
+  const checkPage = function() {
+    const allElements = document.getElementsByTagName('*');
+    [...allElements].forEach( checkElement );
+  }
+
   chrome.extension.sendMessage({}, function(response) {
     var readyStateCheckInterval = setInterval(function() {
       if (document.readyState === "complete") {
@@ -59,10 +80,10 @@
     }, 10);
   });
 
-  document.body.addEventListener('mouseup', function (e) {
+  document.body.addEventListener('mouseup', function ( event ) {
     const selection = window.getSelection();
 
-    const shouldSanitizeSelection  = elementsWithZLCC
+    const shouldSanitizeSelection = elementsWithZWCC
       .map(function(element) {
         return selection.containsNode(element, true);
       })
@@ -73,16 +94,16 @@
         "shouldSanitizeSelection": shouldSanitizeSelection,
         "selection": selection.toString()
       });
-    } catch(e) {
+    } catch(event) {
       if (
-        e.message.match(/Invocation of form runtime\.connect/) &&
-        e.message.match(/doesn't match definition runtime\.connect/)
+        event.message.match(/Invocation of form runtime\.connect/) &&
+        event.message.match(/doesn't match definition runtime\.connect/)
       ) {
         console.error('Chrome extension has been reloaded. Please refresh the page');
       } else {
-        throw(e);
+        throw(event);
       }
     }
   });
 
-})();
+})();

src/utils.js

@@ -1,18 +1,17 @@
-const sanitize = function(text) {
-    return [...text].filter(function(char) {
-      const unicodeCode = char.codePointAt(0);
-
-      return !zeroLengthCharacterCodes.includes(unicodeCode);
-    }).join("");
+const sanitize = function( text ) {
+  return [...text].filter( function( char ) {
+    const unicodeCode = char.codePointAt(0);
+    return !zeroWidthCharacterCodes.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);
+  body.appendChild( copyFrom );
   copyFrom.select();
   document.execCommand('copy');
-  body.removeChild(copyFrom);
-}
+  body.removeChild( copyFrom );
+}