Add an option to change the font to the XKCD font.

This also will add mouseovers with the original text.
Posnet · May 20, 2016 · fbae362 · fbae362
1 parent b471210
commit fbae362
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 32 deletions.
diff --git a/substitutions/html/config.html b/substitutions/html/config.html
@@ -48,6 +48,19 @@ <h1>XKCD Substitutions</h1>
     </div>
     </div>
     <div id="options">
+        <div>
+            <h3>Use XKCD Font</h3>
+            <p>To help you remember that the page is more awesome, this extension can write its substitutions in Randall's handwriting, just like the font on this page.</p>
+            <form id="use-font-form">
+                <div class="checkbox">
+                    <label>
+                        <input id="use-font" type="checkbox" value="">
+                        Use XKCD Font
+                    </label>
+                </div>
+            </form>
+        </div>
+
         <div>
             <h3>Website Blacklist</h3>
             <p>While this extension tries not to affect things like login forms or emails, due to the complex nature of websites this cannot be guaranteed. So there is a way to stop this extension working on specific sites.</p>

diff --git a/substitutions/js/background.js b/substitutions/js/background.js
@@ -79,6 +79,7 @@ var default_blacklisted_sites = [
   "outlook.com",
   "xkcd.com"
 ];
+var default_use_font = true;
 
 var debug = false;
 
@@ -113,7 +114,9 @@ function addMessage(request, sender, sendResponse) {
   if (debug) { console.log("message fire"); }
   chrome.storage.sync.get(null, function(result) {
     if (request === "config" && result["replacements"]) {
-      sendResponse(result["replacements"]);
+      sendResponse({"replacements": result["replacements"],
+                    "useFont": result["useFont"],
+                    "fontUrl": chrome.extension.getURL("fonts/xkcd.otf")});
     }
   });
   return true;
@@ -137,6 +140,11 @@ function fixDataCorruption() {
         "blacklist": default_blacklisted_sites
       });
     }
+    if (!result["useFont"]) {
+      chrome.storage.sync.set({
+        "useFont": default_use_font
+      });
+    }
   });
 }
 

diff --git a/substitutions/js/options.js b/substitutions/js/options.js
@@ -16,6 +16,7 @@ function makeClean() {
 function saveOptions(e) {
   e.preventDefault;
   console.log("ping");
+  var useFont = $("#use-font").prop("checked");
   var blacklist = $("#website-blacklist").val().replace(/\s+/g, "").toLowerCase().split(",");
   var replacements = [];
   var originals = $('#replacements [name="origin"]');
@@ -30,7 +31,8 @@ function saveOptions(e) {
   };
   chrome.storage.sync.set({
       "blacklist": blacklist,
-      "replacements": replacements
+      "replacements": replacements,
+      "useFont": useFont
     },
     function() {
       makeClean();
@@ -41,7 +43,8 @@ function saveOptions(e) {
 function reset(){
     chrome.storage.sync.set({
       "blacklist": default_blacklisted_sites,
-      "replacements": default_replacements
+      "replacements": default_replacements,
+      "useFont": default_use_font
     },
     function() {
       makeClean();
@@ -53,7 +56,9 @@ function reset(){
 function populateSettings() {
   $("#replacements").empty();
   $("blacklist input").val("");
+  $("#use-font").prop("checked", false);
   chrome.storage.sync.get(null, function(result) {
+    $("#use-font").prop("checked", result["useFont"]);
     $("#blacklist input").val(result["blacklist"].join(", "));
     var replacements = result['replacements'];
     for (var i = 0; i < replacements.length; i++) {
@@ -94,7 +99,9 @@ $(document).ready(function() {
 
   $("#refresh").on('click', populateSettings);
 
-  $("#reset").on('click', reset)
+  $("#reset").on('click', reset);
+
+  $("#use-font").on('click', makeDirty);
 
   $("#blacklist").keypress(function(e) {
     if (e.which == 13) {

diff --git a/substitutions/js/substitutions.js b/substitutions/js/substitutions.js
@@ -2,7 +2,8 @@
 // Icon and idea are from www.xkcd.com/1288
 chrome.runtime.sendMessage("config", function(response) {
   "use strict";
-  // taken from http://stackoverflow.com/questions/17264639/replace-text-but-keep-case
+
+  // Taken from http://stackoverflow.com/questions/17264639/replace-text-but-keep-case
   function matchCase(text, pattern) {
     var result = '';
     for (var i = 0; i < text.length; i++) {
@@ -16,37 +17,88 @@ chrome.runtime.sendMessage("config", function(response) {
     }
     return result;
   }
-  var substitute = (function() {
+
+  // Taken from Google's Closure library, goog.string.regExpEscape
+  function regExpEscape(s) {
+    return String(s)
+        .replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g, '\\$1')
+        .replace(/\x08/g, '\\x08');
+  }
+
+  // Inject the stylesheet.
+  if (response.useFont) {
+    var stylesheet = document.createElement('style');
+    stylesheet.setAttribute('type', 'text/css');
+    stylesheet.textContent =
+      '@font-face {' +
+      '  font-family: xkcdSubstitutionsFont;' +
+      '  src: url("' + response.fontUrl + '") format("opentype");' +
+      '}' +
+      '.xkcdSubstitutionsExtensionSubbed {' +
+      '  font-family: xkcdSubstitutionsFont !important;' +
+      '}';
+    document.head.appendChild(stylesheet);
+  }
+
+  // Compute the objects we'll need for each node.
+  var replacements = response.replacements;
+  var originalsRegexpSegments = replacements.map(function (replacement) {
+    return regExpEscape(replacement[0]);
+  });
+  var originalsRegexp = new RegExp("\\b(" +
+                                   originalsRegexpSegments.join("|") +
+                                   ")\\b", "gi");
+  var replacementsMap = {};
+  for (var i = replacements.length - 1; i >= 0; i--) {
+    replacementsMap[replacements[i][0].toLowerCase()] = replacements[i][1];
+  }
+  var ignore = {
+    "STYLE": 0,
+    "SCRIPT": 0,
+    "NOSCRIPT": 0,
+    "IFRAME": 0,
+    "OBJECT": 0,
+    "INPUT": 0,
+    "FORM": 0,
+    "TEXTAREA": 0
+  };
+
+  function substitute(node) {
     "use strict";
-    var replacements, ignore, i, replacementsObject, original;
-    replacements = response;
-    replacementsObject = [];
-    for (i = replacements.length - 1; i >= 0; i--) {
-      original = new RegExp("\\b" + replacements[i][0] + "\\b", "gi");
-      replacementsObject.push([original, replacements[i][1]]);
-    }
-    return function(node) {
-      var i;
-      var ignore = {
-        "STYLE": 0,
-        "SCRIPT": 0,
-        "NOSCRIPT": 0,
-        "IFRAME": 0,
-        "OBJECT": 0,
-        "INPUT": 0,
-        "FORM": 0,
-        "TEXTAREA": 0
-      };
-      if (node.parentElement.tagName in ignore) {
+    var replacementIdx;
+    var splitIdx;
+    var parent = node.parentElement;
+    if (parent) {
+      if (parent.tagName in ignore) {
+        return;
+      }
+      var cls = parent.getAttribute("class");
+      if (cls && cls.indexOf("xkcdSubstitutionsExtensionSubbed") != -1) {
         return;
       }
-      for (i = replacementsObject.length - 1; i >= 0; i--) {
-        node.nodeValue = node.nodeValue.replace(replacementsObject[i][0], function(match) {
-          return matchCase(replacementsObject[i][1], match);
-        });
+    }
+    if (!node.nodeValue.match(originalsRegexp)) {
+      return;
+    }
+    var splits = node.nodeValue.split(originalsRegexp);
+    var docFrag = document.createDocumentFragment();
+    for (splitIdx = 0; splitIdx < splits.length; splitIdx++) {
+      var splitString = splits[splitIdx];
+      var splitStringLower = splitString.toLowerCase();
+      var newNode;
+      if (splitStringLower in replacementsMap) {
+        newNode = document.createElement("span");
+        newNode.setAttribute("class", "xkcdSubstitutionsExtensionSubbed");
+        newNode.setAttribute("title", splitString);
+        newNode.textContent = matchCase(replacementsMap[splitStringLower],
+                                        splitString);
+      } else {
+        newNode = document.createTextNode(splitString);
       }
-    };
-  })();
+      docFrag.appendChild(newNode);
+    }
+    node.parentNode.replaceChild(docFrag, node);
+  }
 
   var node, iter;
   var iter = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);

diff --git a/substitutions/manifest.json b/substitutions/manifest.json
@@ -16,6 +16,9 @@
     ],
     "persistent": false
   },
+  "web_accessible_resources": [
+    "fonts/xkcd.otf"
+  ],
   "permissions": [
     "tabs",
     "storage",