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

This commit is contained in:
Peter Snyder 2017-10-14 17:26:02 -05:00
parent 63b4b13387
commit a7ed30ec9e
7 changed files with 100 additions and 34 deletions

View file

@ -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) {

View file

@ -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>

View file

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

View file

@ -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;
}

View file

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

View file

@ -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);
});
}
);

View file

@ -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