reworking rule matching code to use host patterns, instead of regular expressions

background_scripts/background.js

@@ -31,14 +31,12 @@
             },
             function (allHosts) {
 
-                if (rootObject.runtime.lastError) {
-                    rootObject.browserAction.disable(tabId);
+                if (rootObject.runtime.lastError && !allHosts) {
+                    rootObject.browserAction.disable();
                     rootObject.browserAction.setBadgeText({text: "-"});
                     return;
                 }
 
-                rootObject.browserAction.enable(tabId);
-
                 const numFrames = allHosts
                     ? Array.from(new Set(allHosts)).length.toString()
                     : "-";
@@ -47,6 +45,8 @@
                     text: numFrames,
                     tabId: tabId
                 });
+                rootObject.browserAction.enable();
+                
             }
         );
     };
@@ -54,7 +54,6 @@
     rootObject.windows.onFocusChanged.addListener(updateBrowserActionBadge);
     rootObject.tabs.onUpdated.addListener(updateBrowserActionBadge);
     rootObject.tabs.onActivated.addListener(updateBrowserActionBadge);
-    rootObject.windows.onFocusChanged.addListener(updateBrowserActionBadge);
 
     window.setInterval(function () {
         rootObject.tabs.getCurrent(function (currentTab) {

config/index.html

@@ -14,9 +14,10 @@
             <div class="row">
                 <div class="col-xs-12 col-md-12">
                     <p>
-                        Enter regular expressions on the right, to create a new
-                        blocking rule.  On the right, select which functionality
-                        should be blocked for hosts matching each regular expression.
+                        Enter <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">domain matching rules</a>
+                        on the right, to create a new blocking rule.  On the
+                        right, select which functionality should be blocked for
+                        hosts matching each rule.
                     </p>
                 </div>
             </div>

config/js/state.js

@@ -46,6 +46,7 @@
                 this.domainRules[newDomainRule] = [];
                 this.domainNames = Object.keys(this.domainRules);
                 this.selectedDomain = newDomainRule;
+                this.selectedStandards = this.domainRules[newDomainRule];
             }
         };
 

lib/domainmatcher.js

@@ -4,18 +4,59 @@
     "use strict";
     const defaultKey = "(default)";
 
+    // From https://www.npmjs.com/package/escape-string-regexp
+    const matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
+
+    const escapeStringRegexp = function (aString) {
+        if (typeof aString !== 'string') {
+            throw new TypeError('Expected a string');
+        }
+    
+        return aString.replace(matchOperatorsRe, '\\$&');
+    };
+
+    // From https://www.npmjs.com/package/matcher
+    const reCache = new Map();
+    
+    const makeRe = function (pattern, shouldNegate) {
+
+        const cacheKey = pattern + shouldNegate;
+    
+        if (reCache.has(cacheKey)) {
+            return reCache.get(cacheKey);
+        }
+    
+        const negated = pattern[0] === '!';
+    
+        if (negated) {
+            pattern = pattern.slice(1);
+        }
+    
+        pattern = escapeStringRegexp(pattern).replace(/\\\*/g, '.*');
+    
+        if (negated && shouldNegate) {
+            pattern = `(?!${pattern})`;
+        }
+    
+        const re = new RegExp(`^${pattern}$`, 'i');
+        re.negated = negated;
+        reCache.set(cacheKey, re);
+    
+        return re;
+    };
+
     const extractHostNameFromUrl = function (url) {
         const uri = window.URI(url);
         return uri.hostname();
     };
 
     const matchingUrlReduceFunction = function (hostName, prev, next) {
+
         if (prev) {
             return prev;
         }
 
-        const domainRegex = new RegExp(next);
-        if (domainRegex.test(hostName)) {
+        if (makeRe(next, true).test(hostName)) {
             return next;
         }
 

popup/css/popup.css

@@ -4,4 +4,12 @@ body, html {
 
 section .row {
     margin-bottom: 1em;
+}
+
+.not-loaded .loaded-section {
+    display: none;
+}
+
+.loaded .loading-section {
+    display: none;
 }

popup/js/popup.js

@@ -5,7 +5,32 @@
 
     const rootObject = window.browser || window.chrome;
     const doc = window.document;
+
     const configureButton = doc.getElementById("config-page-link");
+    const listGroupElm = doc.querySelector("ul.list-group");
+
+    const addDomainRuleToListElm = function (hostToRuleMapping, listElm, aHostName) {
+
+        const domainRule = hostToRuleMapping[aHostName];
+
+        const liElm = doc.createElement("li");
+        liElm.className = "list-group-item";
+
+        if (domainRule !== "(default)") {
+            liElm.className += " list-group-item-success";
+        }
+
+        const spanElm = doc.createElement("span");
+        spanElm.className = "badge";
+
+        const badgeText = doc.createTextNode(domainRule);
+        spanElm.appendChild(badgeText);
+        liElm.appendChild(spanElm);
+
+        const textElm = doc.createTextNode(aHostName);
+        liElm.appendChild(textElm);
+        listElm.appendChild(liElm);
+    };
 
     configureButton.addEventListener("click", function (event) {
         rootObject.runtime.openOptionsPage();
@@ -22,31 +47,15 @@
 
             const uniqueDomains = Array.from(new Set(response)).sort();
             const message = ["rulesForDomains", uniqueDomains];
+
             rootObject.runtime.sendMessage(message, function (response) {
 
-                const listGroupElm = doc.querySelector("ul.list-group");
+                doc.body.className = "loaded";
+
                 const domainNames = Object.keys(response);
+                const addDomainRuleToListElmBound = addDomainRuleToListElm.bind(undefined, response, listGroupElm);
 
-                domainNames.forEach(function (aDomain) {
-                    const domainRule = response[aDomain];
-
-                    const liElm = doc.createElement("li");
-                    liElm.className = "list-group-item";
-                    if (domainRule !== "(default)") {
-                        liElm.className += " list-group-item-success";
-                    }
-
-                    const spanElm = doc.createElement("span");
-                    spanElm.className = "badge";
-
-                    const badgeText = doc.createTextNode(domainRule);
-                    spanElm.appendChild(badgeText);
-                    liElm.appendChild(spanElm);
-
-                    const textElm = doc.createTextNode(aDomain);
-                    liElm.appendChild(textElm);
-                    listGroupElm.appendChild(liElm);
-                });
+                domainNames.forEach(addDomainRuleToListElmBound);
             });
         }
     );

popup/popup.html

@@ -9,7 +9,7 @@
         <link href="../config/css/bootstrap-theme.min.css" rel="stylesheet">
         <link href="css/popup.css" rel="stylesheet">
     </head>
-    <body>
+    <body class="not-loaded">
         <header class="container">
             <div class="row">
                 <div class="col-xs-12">
@@ -21,8 +21,15 @@
             <div class="row">
                 <div class="col-xs-12">
                     <p>The following origins are execiting code on this page.</p>
-                    <ul class="list-group">
-                    </ul>
+
+                    <div class="loading-section">
+                        <p>Querying domain information…</p>
+                    </div>
+
+                    <div class="loaded-section">
+                        <ul class="list-group">
+                        </ul>
+                    </div>
 
                     <button type="button" id="config-page-link" class="btn btn-default btn-block">
                         Configure blocking rules