Implemented: Option to enable HTML-Filter by default (#33)

core/constants.js

@@ -71,7 +71,8 @@ const Setting = {
     'XHR_TEST_DOMAIN': 'xhrTestDomain',
     'LOGGING': 'enableLogging',
     'DOMAINS_MANIPULATE_DOM': 'domainsManipulateDOM',
-    'STATISTIC_DATA': 'statisticData'
+    'STATISTIC_DATA': 'statisticData',
+    'NEGATE_HTML_FILTER_LIST': 'negateHtmlFilterList'
 };
 
 const WebRequest = {

core/main.js

@@ -35,7 +35,8 @@ main._initializeSettings = function () {
         [Setting.STRIP_METADATA]: true,
         [Setting.WHITELISTED_DOMAINS]: {},
         [Setting.LOGGING]: false,
-        [Setting.DOMAINS_MANIPULATE_DOM]: {}
+        [Setting.DOMAINS_MANIPULATE_DOM]: {},
+        [Setting.NEGATE_HTML_FILTER_LIST]: false
     };
 
     chrome.storage.sync.get(settingDefaults, function (items) {

core/manipulate-dom.js

@@ -28,15 +28,29 @@ var manipulateDOM = {};
 
 manipulateDOM._removeCrossOriginAndIntegrityAttr = function (details) {
 
+    if(BrowserType.CHROMIUM) {
+        // Chromium browsers do not support webRequest.filterResponseData
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=487422
+        console.warn('[ LocalCDN ] browser.webRequest.filterResponseData not supported by your browser.');
+        return;
+    }
+
+    let initiatorDomain, listedToManipulateDOM, negateHtmlFilter, filtering;
 
-    let initiatorDomain, listedToManipulateDOM;
     initiatorDomain = helpers.extractDomainFromUrl(details.url, true) || Address.EXAMPLE;
     listedToManipulateDOM = stateManager._domainIsListed(initiatorDomain, "manipulate-dom");
+    negateHtmlFilter = stateManager.getInvertOption;
+
+    if( ( negateHtmlFilter || listedToManipulateDOM ) && !( negateHtmlFilter && listedToManipulateDOM ) ) {
+        filtering = true;
+    } else {
+        filtering = false;
+    }
 
     // by Jaap (https://gitlab.com/Jaaap)
     let header = details.responseHeaders.find(h => h.name.toLowerCase() === 'content-type');
 
-    if (header && BrowserType.FIREFOX && listedToManipulateDOM) {
+    if (header && filtering) {
 
         let mimeType, isWhitelisted;
 
@@ -92,12 +106,6 @@ manipulateDOM._removeCrossOriginAndIntegrityAttr = function (details) {
         }
         return {responseHeaders: details.responseHeaders};
 
-    } else if(BrowserType.CHROMIUM) {
-
-        // Chromium browsers do not support webRequest.filterResponseData
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=487422
-        console.warn('[ LocalCDN ] browser.webRequest.filterResponseData not supported by your browser.');
-
     }
 };
 

core/state-manager.js

@@ -267,6 +267,9 @@ stateManager._handleStorageChanged = function (changes) {
             requestSanitizer.enable();
         }
     }
+    if (Setting.NEGATE_HTML_FILTER_LIST in changes) {
+        stateManager.getInvertOption = changes.negateHtmlFilterList.newValue;
+    }
 };
 
 stateManager._clearBadgeText = function (tabIdentifier) {
@@ -317,6 +320,7 @@ stateManager._setIconDisabled = function (tabIdentifier) {
 stateManager.requests = {};
 stateManager.tabs = {};
 
+stateManager.getInvertOption;
 stateManager.disabledIconPath = {
     '16': chrome.runtime.getURL('icons/action/icon16-disabled.png'),
     '18': chrome.runtime.getURL('icons/action/icon18-disabled.png'),

pages/options/options.css

@@ -14,7 +14,18 @@ body {
 .option {
     display: flex;
     flex-direction: column;
-    margin-top: 25px;
+    margin-top: 15px;
+    padding: 5px;
+}
+
+.html-filter-section {
+    background-color: lightgrey;
+    margin-top: 15px;
+    border-radius: 3px;
+}
+
+.html-filter-section > .option {
+    margin-top: 0px;
 }
 
 .notice {
@@ -125,7 +136,7 @@ body {
     padding: 5px 22px;
     text-decoration: none;
     user-select: none;
-    white-space: nowrap;
+    text-align: center;
 }
 
 .button:hover {
@@ -194,6 +205,24 @@ body {
     background-color: #ffa500;
 }
 
+.warning-red {
+    color: red;
+    background-color: transparent;
+    margin-left: 0px;
+    display: block;
+    font-size: 10px;
+}
+
+.warning-red > a {
+    color: red;
+    font-weight: bold;
+}
+
+#negate-html-filter-list-warning {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
 .hidden {
     display: none !important;
 }

pages/options/options.html

@@ -162,6 +162,25 @@
             <div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div>
         </section>
 
+        <div class="html-filter-section">
+            <section class="option">
+                <div class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitle">Domains for HTML filter:</div>
+                <input class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text">
+                <div class="description-option without-checkbox" data-i18n-content="htmlFilterDomainsDescription">Enter domains for HTML filter. Separate multiple entries with semi-colons (;).</div>
+            </section>
+            <span id="negate-html-filter-list-warning" class="badge badge-warning warning-red" data-i18n-content="negateHtmlFilterListWarning">This function can break websites. Please note the information on the Wiki page.</span>
+            <section class="option">
+                <div class="title-option">
+                    <label class="label-checkbox">
+                        <input class="input-checkbox" data-option="negateHtmlFilterList" type="checkbox">
+                        <span data-i18n-content="negateHtmlFilterListTitle">Invert HTML-Filter</span>
+                    </label>
+                    <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
+                </div>
+                <div class="description-option" data-i18n-content="negateHtmlFilterListDescription">If activated, the HTML filter for the domains in the list above is disabled instead of enabled.</div>
+            </section>
+        </div>
+
         <section class="option">
             <div class="title-option without-checkbox" data-i18n-content="generateRuleSetTitle"></div>
             <div class="description-option without-checkbox">

pages/options/options.js

@@ -41,11 +41,14 @@ options._renderContents = function () {
 
 options._renderOptionsPanel = function () {
 
-    let whitelistedDomains, domainWhitelist, elements;
+    let whitelistedDomains, domainWhitelist, elements, htmlFilterDomains, domainHtmlFilter;
 
     whitelistedDomains = options._optionValues.whitelistedDomains;
     domainWhitelist = options._serializeWhitelistedDomains(whitelistedDomains);
 
+    htmlFilterDomains = options._optionValues.domainsManipulateDOM;
+    domainHtmlFilter = options._serializeWhitelistedDomains(htmlFilterDomains);
+
     elements = options._optionElements;
 
     elements.showIconBadge.checked = options._optionValues.showIconBadge;
@@ -55,6 +58,8 @@ options._renderOptionsPanel = function () {
     elements.hideReleaseNotes.checked = options._optionValues.hideReleaseNotes;
     elements.enableLogging.checked = options._optionValues.enableLogging;
     elements.whitelistedDomains.value = domainWhitelist;
+    elements.domainsManipulateDOM.value = domainHtmlFilter;
+    elements.negateHtmlFilterList.checked = options._optionValues.negateHtmlFilterList;
 
     options._registerOptionChangedEventListeners(elements);
     options._registerMiscellaneousEventListeners();
@@ -68,6 +73,7 @@ options._renderOptionsPanel = function () {
     }
 
     document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
+    document.getElementById('negate-html-filter-list-warning').addEventListener('click', options._onClickHTMLFilterWarning);
 };
 
 options._renderBlockMissingNotice = function () {
@@ -97,6 +103,8 @@ options._registerOptionChangedEventListeners = function (elements) {
     elements.enableLogging.addEventListener('change', options._onOptionChanged);
     elements.hideReleaseNotes.addEventListener('change', options._onOptionChanged);
     elements.whitelistedDomains.addEventListener('keyup', options._onOptionChanged);
+    elements.domainsManipulateDOM.addEventListener('keyup', options._onOptionChanged);
+    elements.negateHtmlFilterList.addEventListener('change', options._onOptionChanged);
     let type = elements.ruleSets;
     for(let i = 0; i < type.length; i++) {
         type[i].addEventListener('change', options._openRuleSet);
@@ -146,7 +154,9 @@ options._getOptionElements = function () {
         [Setting.HIDE_RELEASE_NOTES]: options._getOptionElement(Setting.HIDE_RELEASE_NOTES),
         [Setting.LOGGING]: options._getOptionElement(Setting.LOGGING),
         ['ruleSets']: document.getElementsByName("rule-sets"),
-        ['copyRuleSet']: document.getElementById("button-copy-rule-set")
+        ['copyRuleSet']: document.getElementById("button-copy-rule-set"),
+        [Setting.NEGATE_HTML_FILTER_LIST]: options._getOptionElement(Setting.NEGATE_HTML_FILTER_LIST),
+        [Setting.DOMAINS_MANIPULATE_DOM]: options._getOptionElement(Setting.DOMAINS_MANIPULATE_DOM)
     };
 
     return optionElements;
@@ -169,6 +179,8 @@ options._configureLinkPrefetching = function (value) {
 
 options._serializeWhitelistedDomains = function (whitelistedDomains) {
 
+    if (whitelistedDomains === undefined) return;
+
     let domainWhitelist, whitelistedDomainKeys;
 
     whitelistedDomainKeys = Object.keys(whitelistedDomains);
@@ -236,7 +248,7 @@ options._onOptionChanged = function ({target}) {
         options._configureLinkPrefetching(optionValue);
     }
 
-    if (optionKey === Setting.WHITELISTED_DOMAINS) {
+    if (optionKey === Setting.WHITELISTED_DOMAINS || optionKey === Setting.DOMAINS_MANIPULATE_DOM) {
         optionValue = options._parseDomainWhitelist(optionValue);
     }
 
@@ -276,6 +288,13 @@ options._copyRuleSet = function() {
     });
 }
 
+options._onClickHTMLFilterWarning = function() {
+    chrome.tabs.create({
+        'url': 'https://codeberg.org/nobody/LocalCDN/wiki/Blank-websites-or-weird-characters',
+        'active': true
+    });
+}
+
 /**
  * Initializations
  */

pages/popup/popup.js

@@ -21,6 +21,7 @@
 let counterFrameworks = 0;
 let counterCDNs = 0;
 let oversized = false;
+let negateHtmlFilterList;
 var popup = {};
 
 /**
@@ -42,6 +43,7 @@ popup._renderContents = function () {
         .then(popup._determineDomainWhitelistStatus)
         .then(popup._determineStatusManipulateDOM)
         .then(popup._determineResourceInjections)
+        .then(popup._determineNegateHtmlFilterOption)
         .then(popup._renderContextualContents);
 
     if(BrowserType.CHROMIUM) {
@@ -114,7 +116,7 @@ popup._renderDomainWhitelistPanel = function () {
         protectionToggleElement.checked = true;
         protectionToggleElement.addEventListener('click', popup._disableProtection);
 
-        if (popup._domainManipulateDOM === true) {
+        if (( negateHtmlFilterList || popup._domainManipulateDOM ) && !( negateHtmlFilterList && popup._domainManipulateDOM )) {
 
             manipulateDOMToggleElement.checked = true;
             manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
@@ -267,6 +269,18 @@ popup._determineAmountInjected = function () {
     });
 };
 
+popup._determineNegateHtmlFilterOption = function () {
+
+    return new Promise((resolve) => {
+
+        chrome.storage.sync.get(Setting.NEGATE_HTML_FILTER_LIST, function (items) {
+
+            negateHtmlFilterList = items.negateHtmlFilterList;
+            resolve();
+        });
+    });
+};
+
 popup._groupResourceInjections = function (injections) {
 
     let groupedInjections = {};

pages/updates/updates.html

@@ -29,6 +29,7 @@
                             <li>Added: simplemde v1.11.2 (<a href="https://codeberg.org/nobody/LocalCDN/issues/36">#36</a>)</li>
                             <li>Added: NVD3 v1.8.6 (<a href="https://codeberg.org/nobody/LocalCDN/issues/36">#36</a>)</li>
                             <li>Added: clipboard.js v1.7.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/36">#36</a>)</li>
+                            <li>Implemented: Option to enable HTML-Filter by default (<a href="https://codeberg.org/nobody/LocalCDN/issues/33">#33</a>)</li>
                         </ul>
                     <div class="topic-label">
                         Generate rule sets for uBlock or uMatrix