Customizable badge as HTML filter indicator (#613)

2021-08-11 06:29:09 +02:00 · 2021-08-11 06:29:09 +02:00 · ea567e76d8
parent 881ef97a8e
commit ea567e76d8
12 changed files with 279 additions and 171 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -28,6 +28,8 @@
        "EncodingTypes": true,
        "ExtraInfoSpec": true,
        "MathJaxFiles": true,
+        "BadgeSetting": true,
+        "BadgeSettingHTMLFilter": true,

        "fileGuard": true,
        "files": true,
--- a/core/constants.js
+++ b/core/constants.js
@ -81,8 +81,10 @@ const Setting = {
    'DEFAULT_RANGE_STATISTIC': 'defaultRangeStatistic',
    'ALLOWED_DOMAINS_GOOGLE_FONTS': 'allowedDomainsGoogleFonts',
    'STORAGE_TYPE': 'storageType',
-    'BADGE_COLOR': 'badgeColor',
-    'BADGE_TEXT_COLOR': 'badgeTextColor',
+    'BADGE_DEFAULT_BACKGROUND_COLOR': 'badgeDefaultBackgroundColor',
+    'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor',
+    'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor',
+    'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor',
    'HIDE_DONATION_BUTTON': 'hideDonationButton',
    'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources',
 };
@ -108,8 +110,10 @@ const SettingDefaults = {
    [Setting.STRIP_METADATA]: true,
    [Setting.ALLOWLISTED_DOMAINS]: {},
    [Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN,
-    [Setting.BADGE_COLOR]: '#4A826C',
-    [Setting.BADGE_TEXT_COLOR]: '#FFFFFF',
+    [Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: '#4A826C',
+    [Setting.BADGE_DEFAULT_TEXT_COLOR]: '#FFFFFF',
+    [Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: '#4A826C',
+    [Setting.BADGE_HTML_FILTER_TEXT_COLOR]: '#FFFFFF',
    [Setting.HIDE_DONATION_BUTTON]: false,
    [Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false,
 };
@ -201,6 +205,28 @@ const IconType = {
    }
 };

+const BadgeSetting = {
+    'TYPE': 'default',
+    'COUNTER_PREVIEW_BADGE': 'counter-preview-badge',
+    'PRE_BADGED_BACKGROUND_COLOR': 'pre-badged-background-color',
+    'BADGED_BACKGROUND_COLOR': 'badged-background-color',
+    'PRE_BADGED_TEXT_COLOR': 'pre-badged-text-color',
+    'BADGED_TEXT_COLOR': 'badged-text-color',
+    'RESTORE_BACKGROUND_COLOR': 'restore-background-color',
+    'RESTORE_TEXT_COLOR': 'restore-text-color',
+};
+
+const BadgeSettingHTMLFilter = {
+    'TYPE': 'html-filter',
+    'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge',
+    'PRE_BADGED_BACKGROUND_COLOR': 'html-pre-badged-background-color',
+    'BADGED_BACKGROUND_COLOR': 'html-badged-background-color',
+    'PRE_BADGED_TEXT_COLOR': 'html-pre-badged-text-color',
+    'BADGED_TEXT_COLOR': 'html-badged-text-color',
+    'RESTORE_BACKGROUND_COLOR': 'html-restore-background-color',
+    'RESTORE_TEXT_COLOR': 'html-restore-text-color',
+};
+
 const Regex = {
    'GOOGLE_FONTS': /fonts\.(googleapis|gstatic)\.com\/(?!.*(Material\+Icons|materialicons).*).*/,
    'GOOGLE_MATERIAL_ICONS': /fonts\.(googleapis|gstatic)\.com\/.*\?family=.*Material\+Icons/,
--- a/core/interceptor.js
+++ b/core/interceptor.js
@ -94,10 +94,10 @@ interceptor._handleMissingCandidate = function (requestUrl, tabIdentifier) {
        if (stateManager.changeBadgeColorMissingResources === true) {
            missingCount = stateManager.tabs[tabIdentifier].missing || 0;
            if (missingCount > 0 && injectionCount === 0) {
-                wrappers.setBadgeMissing(tabIdentifier, injectionCount);
+                wrappers.setBadgeText(tabIdentifier, injectionCount);
            }
        } else {
-            wrappers.defaultBadge(tabIdentifier, injectionCount);
+            wrappers.setBadgeText(tabIdentifier, injectionCount);
        }
    }

--- a/core/main.js
+++ b/core/main.js
@ -72,12 +72,20 @@ main._initializeSettings = function () {
            'path': stateManager.selectedIcon
        }, 'Enabled');

-        storageManager.amountInjected = items.amountInjected || 0;
-        interceptor.xhrTestDomain = items.xhrTestDomain || Address.LOCALCDN;
-        interceptor.allowedDomainsGoogleFonts = items.allowedDomainsGoogleFonts || {};
-        interceptor.blockMissing = items.blockMissing === undefined ? false : items.blockMissing;
-        interceptor.blockGoogleFonts = items.blockGoogleFonts === undefined ? true : items.blockGoogleFonts;
-        requestAnalyzer.allowlistedDomains = items.allowlistedDomains || {};
+        storageManager.amountInjected = items.amountInjected;
+        interceptor.xhrTestDomain = items.xhrTestDomain;
+        interceptor.allowedDomainsGoogleFonts = items.allowedDomainsGoogleFonts;
+        interceptor.blockMissing = items.blockMissing;
+        interceptor.blockGoogleFonts = items.blockGoogleFonts;
+        requestAnalyzer.allowlistedDomains = items.allowlistedDomains;
+
+        wrappers.badgeDefaultTextColor = items.badgeDefaultTextColor;
+        wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor;
+        wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor;
+        wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor;
+
+        wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'});
+        wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'});

        storageManager.type.set(items);
    });
@ -101,9 +109,21 @@ main._showReleaseNotes = function (details) {
        storageManager.type.get(null, function (items) {
            let mappingUpdate = items.lastMappingUpdate !== mappings.lastMappingUpdate;

+            // Migrate old keys to new keys https://codeberg.org/nobody/LocalCDN/issues/613
+            if (items.badgeDefaultBackgroundColor === undefined) {
+                items.badgeDefaultBackgroundColor = items.badgeColor;
+                delete items.badgeColor;
+            }
+
+            // Migrate old keys to new keys https://codeberg.org/nobody/LocalCDN/issues/613
+            if (items.badgeDefaultTextColor === undefined) {
+                items.badgeDefaultTextColor = items.badgeTextColor;
+                delete items.badgeTextColor;
+            }
+
            // Remove old keys
            for (const key of Object.keys(items)) {
-                if (!(key in SettingDefaults)) {
+                if (!(key in SettingDefaults) && key !== undefined) {
                    delete items[key];
                }
            }
@ -113,7 +133,6 @@ main._showReleaseNotes = function (details) {
            // Updated mappings.js
            if (mappingUpdate) {
                items.lastMappingUpdate = mappings.lastMappingUpdate;
-                storageManager.type.set(items);
            }

            if ((mappingUpdate && items.updateNotification === 1) || items.updateNotification === 2) {
@ -123,8 +142,8 @@ main._showReleaseNotes = function (details) {
                });
            } else {
                // No mappings.js update
-
            }
+            storageManager.type.set(items);
        });
    }
 };
--- a/core/state-manager.js
+++ b/core/state-manager.js
@ -30,13 +30,16 @@ var stateManager = {};
 * Public Methods
 */

-stateManager.registerInjection = function (tabIdentifier, injection) {
-    let injectionIdentifier, registeredTab, injectionCount, missingCount;
+stateManager.registerInjection = function (tabIdentifier, injection, url) {
+    let injectionIdentifier, registeredTab, injectionCount, missingCount, initiatorDomain, listedToManipulateDOM;

    injectionIdentifier = injection.source + injection.path + injection.version;
    registeredTab = stateManager.tabs[tabIdentifier];
    registeredTab.injections[injectionIdentifier] = injection;

+    initiatorDomain = helpers.extractDomainFromUrl(url, true) || Address.EXAMPLE;
+    listedToManipulateDOM = stateManager._domainIsListed(initiatorDomain, 'manipulate-dom');
+
    injectionCount = Object.keys(registeredTab.injections).length || 0;
    missingCount = registeredTab.missing || 0;

@ -48,10 +51,13 @@ stateManager.registerInjection = function (tabIdentifier, injection) {
    }
    if (stateManager.showIconBadge === true) {
        if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) {
-            wrappers.setBadgeMissing(tabIdentifier, injectionCount);
+            wrappers.setBadgeColoring(tabIdentifier, 'missing');
+        } else if (listedToManipulateDOM) {
+            wrappers.setBadgeColoring(tabIdentifier, 'htmlFilterOn');
        } else {
-            wrappers.defaultBadge(tabIdentifier, injectionCount);
+            wrappers.setBadgeColoring(tabIdentifier, 'default');
        }
+        wrappers.setBadgeText(tabIdentifier, injectionCount);
    }
    if (isNaN(storageManager.amountInjected)) {
        storageManager.type.get(Setting.AMOUNT_INJECTED, function (items) {
@ -208,14 +214,19 @@ stateManager._handleStorageChanged = function (changes) {
        stateManager.changeBadgeColorMissingResources = changes.changeBadgeColorMissingResources.newValue;
    } else if (Setting.LOGGING in changes) {
        stateManager.logging = changes.enableLogging.newValue;
+    } else if (Setting.BADGE_DEFAULT_TEXT_COLOR in changes) {
+        wrappers.badgeDefaultTextColor = changes.badgeDefaultTextColor.newValue;
+    } else if (Setting.BADGE_DEFAULT_BACKGROUND_COLOR in changes) {
+        wrappers.badgeDefaultBackgroundColor = changes.badgeDefaultBackgroundColor.newValue;
+    } else if (Setting.BADGE_HTML_FILTER_TEXT_COLOR in changes) {
+        wrappers.badgeHTMLfilterTextColor = changes.badgeHTMLfilterTextColor.newValue;
+    } else if (Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR in changes) {
+        wrappers.badgeHTMLFilterBackgroundColor = changes.badgeHTMLFilterBackgroundColor.newValue;
    }
 };

 stateManager._clearBadgeText = function (tabIdentifier) {
-    wrappers.setBadgeText({
-        'tabId': tabIdentifier,
-        'text': ''
-    });
+    wrappers.setBadgeText(tabIdentifier, '');
 };

 stateManager._removeIconBadgeFromTab = function (tab) {
@ -328,7 +339,11 @@ chrome.webRequest.onErrorOccurred.addListener(function (requestDetails) {
 chrome.webRequest.onBeforeRedirect.addListener(function (requestDetails) {
    let knownRequest = stateManager.requests[requestDetails.requestId];
    if (knownRequest) {
-        stateManager.registerInjection(knownRequest.tabIdentifier, knownRequest.targetDetails);
+        stateManager.registerInjection(
+            knownRequest.tabIdentifier,
+            knownRequest.targetDetails,
+            requestDetails.originUrl
+        );
        delete stateManager.requests[requestDetails.requestId];
    }
 }, {'urls': [Address.ANY]});
--- a/core/storage-manager.js
+++ b/core/storage-manager.js
@ -79,8 +79,10 @@ storageManager.migrateData = function (target) {
            [Setting.STRIP_METADATA]: data.stripMetadata,
            [Setting.ALLOWLISTED_DOMAINS]: data.allowlistedDomains,
            [Setting.XHR_TEST_DOMAIN]: data.xhrTestDomain,
-            [Setting.BADGE_COLOR]: data.badgeColor,
-            [Setting.BADGE_TEXT_COLOR]: data.badgeTextColor
+            [Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: data.badgeDefaultBackgroundColor,
+            [Setting.BADGE_DEFAULT_TEXT_COLOR]: data.badgeDefaultTextColor,
+            [Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: data.badgeHTMLFilterBackgroundColor,
+            [Setting.BADGE_HTML_FILTER_TEXT_COLOR]: data.badgeHTMLfilterTextColor
        });
    });
 };
@ -169,6 +171,14 @@ storageManager._validation = function (content) {
        content.updateNotification = parseInt(content.updateNotification);
    }

+    // Migrate badge colors
+    if (content.badgeDefaultBackgroundColor === undefined) {
+        content.badgeDefaultBackgroundColor = content.badgeColor;
+    }
+    if (content.badgeDefaultTextColor === undefined) {
+        content.badgeDefaultTextColor = content.badgeTextColor;
+    }
+
    for (const [key, value] of Object.entries(SettingDefaults)) {
        // If type the same as default settings
        if (typeof value === typeof content[key]) {
--- a/modules/internal/wrappers.js
+++ b/modules/internal/wrappers.js
@ -30,27 +30,36 @@ var wrappers = {};
 */

 wrappers.setBadgeBackgroundColor = function (details) {
-    if (chrome.browserAction.setBadgeBackgroundColor !== undefined) {
-        chrome.browserAction.setBadgeBackgroundColor(details);
-
-        storageManager.type.set({
-            [Setting.BADGE_COLOR]: details.color
-        });
+    if (chrome.browserAction.setBadgeBackgroundColor === undefined) {
+        return;
    }
-};
-
-wrappers.setBadgeText = function (details) {
-    if (chrome.browserAction.setBadgeText !== undefined) {
-        chrome.browserAction.setBadgeText(details);
+    if (details.type === 'default') {
+        storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color});
+        wrappers.badgeDefaultBackgroundColor = details.color;
+    } else if (details.type === 'html-filter') {
+        storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color});
+        wrappers.badgeColorHTMLfilter = details.color;
    }
 };

 wrappers.setBadgeTextColor = function (details) {
-    if (chrome.browserAction.setBadgeTextColor !== undefined) {
-        chrome.browserAction.setBadgeTextColor(details);
+    if (chrome.browserAction.setBadgeTextColor === undefined) {
+        return;
+    }
+    if (details.type === 'default') {
+        storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color});
+        wrappers.badgeDefaultTextColor = details.color;
+    } else if (details.type === 'html-filter') {
+        storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color});
+        wrappers.badgeDefaultTextColorHTMLfilter = details.color;
+    }
+};

-        storageManager.type.set({
-            [Setting.BADGE_TEXT_COLOR]: details.color
+wrappers.setBadgeText = function (tabId, text) {
+    if (chrome.browserAction.setBadgeText !== undefined) {
+        chrome.browserAction.setBadgeText({
+            'tabId': tabId,
+            'text': `${text}`
        });
    }
 };
@ -62,49 +71,33 @@ wrappers.setIcon = function (details, type) {
    }
 };

-wrappers.setBadgeMissing = function (tabIdentifier, counter) {
-    chrome.browserAction.setBadgeText({
-        'tabId': tabIdentifier,
-        'text': `${counter}`,
-    });
-    if (BrowserType.FIREFOX) {
-        chrome.browserAction.setBadgeTextColor({
-            'tabId': tabIdentifier,
-            'color': 'black',
-        });
-        chrome.browserAction.setBadgeBackgroundColor({
-            'tabId': tabIdentifier,
-            'color': 'yellow',
-        });
+wrappers.setBadgeColoring = function (tabId, value) {
+    let textColor, backgroundColor;
+
+    if (chrome.browserAction.setBadgeBackgroundColor === undefined ||
+        chrome.browserAction.setBadgeTextColor === undefined) {
+        return;
+    }
+
+    if (value === 'htmlFilterOn') {
+        textColor = wrappers.badgeHTMLfilterTextColor;
+        backgroundColor = wrappers.badgeHTMLFilterBackgroundColor;
+    } else if (value === 'default') {
+        textColor = wrappers.badgeDefaultTextColor;
+        backgroundColor = wrappers.badgeDefaultBackgroundColor;
+    } else if (value === 'missing') {
+        textColor = 'white';
+        backgroundColor = 'blue';
    } else {
-        chrome.browserAction.setBadgeBackgroundColor({
-            'tabId': tabIdentifier,
-            'color': 'red',
-        });
+        return;
    }
-};

-wrappers.defaultBadge = function (tabIdentifier, counter) {
-    chrome.browserAction.setBadgeText({
-        'tabId': tabIdentifier,
-        'text': `${counter}`,
-    });
-    if (BrowserType.FIREFOX) {
    chrome.browserAction.setBadgeTextColor({
-            'tabId': tabIdentifier,
-            'color': wrappers.textColor
+        'tabId': tabId,
+        'color': textColor
    });
-    }
    chrome.browserAction.setBadgeBackgroundColor({
-        'tabId': tabIdentifier,
-        'color': wrappers.backgroundColor
+        'tabId': tabId,
+        'color': backgroundColor
    });
 };
-
-storageManager.type.get([Setting.BADGE_COLOR, Setting.BADGE_TEXT_COLOR], function (items) {
-    wrappers.textColor = items.badgeTextColor || '#FFFFFF';
-    wrappers.backgroundColor = items.badgeColor || '#4A826C';
-
-    wrappers.setBadgeTextColor({'color': wrappers.textColor});
-    wrappers.setBadgeBackgroundColor({'color': wrappers.backgroundColor});
-});
--- a/pages/options/options-other.js
+++ b/pages/options/options-other.js
@ -27,12 +27,14 @@ var optionsOther = {};
 */

 optionsOther._renderIconSection = function (opt) {
-    let url, bgColor, txtColor;
+    let url, bgColor, txtColor, selectedIcon;

    if (!chrome.browserAction.setIcon) {
        document.getElementById('icon-style-div').style.display = 'none';
-    } else {
-        let selectedIcon = opt.selectedIcon;
+        return;
+    }
+
+    selectedIcon = opt.selectedIcon;

    if (selectedIcon === 'Default') {
        document.getElementById('icon-default').checked = true;
@ -43,25 +45,32 @@ optionsOther._renderIconSection = function (opt) {
    }
    url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
    document.getElementById('icon-badge-preview').src = url;
+    document.getElementById('html-icon-badge-preview').src = url;

-        bgColor = opt.badgeColor || '#4A826C';
-        txtColor = opt.badgeTextColor || '#FFFFFF';
+    bgColor = opt.badgeDefaultBackgroundColor;
+    txtColor = opt.badgeDefaultTextColor;
+    optionsOther._createBadge(BadgeSetting, bgColor, txtColor);

-        document.getElementById('counter-preview-badge').style.backgroundColor = bgColor;
-        document.getElementById('pre-badged-background-color').style.backgroundColor = bgColor;
-        document.getElementById('badged-background-color').value = bgColor;
+    bgColor = opt.badgeHTMLFilterBackgroundColor;
+    txtColor = opt.badgeHTMLfilterTextColor;
+    optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor);
+};

-        document.getElementById('counter-preview-badge').style.color = txtColor;
-        document.getElementById('pre-badged-text-color').style.backgroundColor = txtColor;
-        document.getElementById('badged-text-color').value = txtColor;
+optionsOther._createBadge = function (element, bgColor, txtColor) {
+    document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
+    document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
+    document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;

-        document.getElementById('badged-background-color').addEventListener('keyup', optionsOther._onChangedHexColor);
-        document.getElementById('badged-text-color').addEventListener('keyup', optionsOther._onChangedHexColor);
-        document.getElementById('restore-background-color').addEventListener('click', optionsOther._setDefaultColor);
-        document.getElementById('restore-text-color').addEventListener('click', optionsOther._setDefaultColor);
+    document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
+    document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
+    document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;

-        optionsOther._colorPicker();
-    }
+    document.getElementById(element.BADGED_BACKGROUND_COLOR).addEventListener('keyup', optionsOther._onChangedHexColor);
+    document.getElementById(element.BADGED_TEXT_COLOR).addEventListener('keyup', optionsOther._onChangedHexColor);
+    document.getElementById(element.RESTORE_BACKGROUND_COLOR).addEventListener('click', optionsOther._setDefaultColor);
+    document.getElementById(element.RESTORE_TEXT_COLOR).addEventListener('click', optionsOther._setDefaultColor);
+
+    optionsOther._colorPicker(element);
 };

 optionsOther._renderStorageSection = function (opt) {
@ -79,6 +88,7 @@ optionsOther._setIcon = function (optionValue) {
    wrappers.setIcon({'path': optionValue}, 'Enabled');
    let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
    document.getElementById('icon-badge-preview').src = url;
+    document.getElementById('html-icon-badge-preview').src = url;
 };

 optionsOther._preSelectStorage = function (type) {
@ -100,63 +110,71 @@ optionsOther._onStorageOptionChanged = function ({target}) {
    }
 };

-optionsOther._colorPicker = function () {
+optionsOther._colorPicker = function (element) {
    /* eslint-disable no-undef, no-invalid-this */
-    const badgeBackgroundColor = new CP(document.getElementById('badged-background-color'));
+    const badgeBackgroundColor = new CP(document.getElementById(element.BADGED_BACKGROUND_COLOR));
    badgeBackgroundColor.on('change', function (r, g, b) {
        this.source.value = this.color(r, g, b);
    });
    badgeBackgroundColor.on('drag', function (r, g, b) {
-        options._backgroundColor = this.color(r, g, b);
-        this.source.value = options._backgroundColor;
-        wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
-        document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
-        document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
+        let bgColor = this.color(r, g, b);
+        wrappers.setBadgeBackgroundColor({'color': bgColor, 'type': element.TYPE});
+        this.source.value = bgColor;
+        document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
+        document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
    });

-    const badgeTextColor = new CP(document.getElementById('badged-text-color'));
-    badgeTextColor.on('change', function (r, g, b) {
+    const badgeDefaultTextColor = new CP(document.getElementById(element.BADGED_TEXT_COLOR));
+    badgeDefaultTextColor.on('change', function (r, g, b) {
        this.source.value = this.color(r, g, b);
    });
-    badgeTextColor.on('drag', function (r, g, b) {
-        options._textColor = this.color(r, g, b);
-        this.source.value = options._textColor;
-        wrappers.setBadgeTextColor({'color': options._textColor});
-        document.getElementById('counter-preview-badge').style.color = options._textColor;
-        document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
+    badgeDefaultTextColor.on('drag', function (r, g, b) {
+        let txtColor = this.color(r, g, b);
+        wrappers.setBadgeTextColor({'color': txtColor, 'type': element.TYPE});
+        this.source.value = txtColor;
+        document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
+        document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
    });
    /* eslint-enable no-undef, no-invalid-this */
 };

 optionsOther._setDefaultColor = function ({target}) {
-    if (target.id === 'restore-text-color') {
-        options._textColor = '#FFFFFF';
-        wrappers.setBadgeTextColor({'color': options._textColor});
-        document.getElementById('counter-preview-badge').style.color = options._textColor;
-        document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
-        document.getElementById('badged-text-color').value = options._textColor;
+    let element;
+    if (target.id === 'restore-text-color' || target.id === 'restore-background-color') {
+        element = BadgeSetting;
+    } else {
+        element = BadgeSettingHTMLFilter;
+    }
+    if (target.id === element.RESTORE_TEXT_COLOR) {
+        let txtColor = '#FFFFFF';
+        document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
+        document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
+        document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;
    } else if (target.id === 'restore-background-color') {
-        options._backgroundColor = '#4A826C';
-        wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
-        document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
-        document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
-        document.getElementById('badged-background-color').value = options._backgroundColor;
+        let bgColor = '#4A826C';
+        document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
+        document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
+        document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;
    }
 };

 optionsOther._onChangedHexColor = function ({target}) {
+    let element;
+    if (target.id === 'badged-text-color' || target.id === 'badged-background-color') {
+        element = BadgeSetting;
+    } else {
+        element = BadgeSettingHTMLFilter;
+    }
    if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
        target.classList.remove('color-error');
-        if (target.id === 'badged-text-color') {
-            options._textColor = target.value;
-            wrappers.setBadgeTextColor({'color': options._textColor});
-            document.getElementById('counter-preview-badge').style.color = options._textColor;
-            document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
+        if (target.id === element.BADGED_TEXT_COLOR) {
+            let txtColor = target.value;
+            document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
+            document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
        } else {
-            options._backgroundColor = target.value;
-            wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
-            document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
-            document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
+            let bgColor = target.value;
+            document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
+            document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
        }
    } else {
        target.classList.add('color-error');
@ -174,6 +192,12 @@ optionsOther.init = function (opt) {

    optionsOther._renderIconSection(opt);
    optionsOther._renderStorageSection(opt);
+
+    document.getElementById('badged-background-color').addEventListener('change', options.onOptionChanged);
+    document.getElementById('badged-text-color').addEventListener('change', options.onOptionChanged);
+
+    document.getElementById('html-badged-background-color').addEventListener('change', options.onOptionChanged);
+    document.getElementById('html-badged-text-color').addEventListener('change', options.onOptionChanged);
 };

 optionsOther._platformSupportIcons = true;
--- a/pages/options/options.css
+++ b/pages/options/options.css
@ -69,7 +69,7 @@ body {

 .div-selected-icon {
    margin-top: 10px;
-    min-width: 113px;
+    width: 100%;
    padding-right: 25px;
 }

@ -183,21 +183,20 @@ body {

 .div-icons-badge-colors {
    display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
 }

 .div-badge {
-    border-left: 1px solid #bbb;
    margin-top: 10px;
-    padding-left: 30px;
+    padding: 0 30px 0 0;
 }

-#badge-preview-top {
+#badge-preview-top, #html-badge-preview-top {
    position: relative;
    width: 38px;
 }

-#counter-preview-badge {
+#counter-preview-badge, #html-counter-preview-badge {
    background: black;
    border-radius: 5px;
    color: white;
@ -208,13 +207,14 @@ body {
    top: 0;
 }

-#pre-badged-background-color, #pre-badged-text-color {
+#pre-badged-background-color, #pre-badged-text-color,
+#html-pre-badged-background-color, #html-pre-badged-text-color {
    height: 30px;
    margin-right: 5px;
    width: 30px;
 }

-#icon-badge-preview {
+#icon-badge-preview, #html-icon-badge-preview {
    margin-top: 5px;
 }

@ -237,7 +237,8 @@ div[class="color-picker:a"] {
    color: red;
 }

-#badged-background-color, #badged-text-color {
+#badged-background-color, #badged-text-color,
+#html-badged-background-color, #html-badged-text-color {
    max-width: 150px;
 }

@ -393,21 +394,16 @@ body[dir="rtl"] .input-text {
    padding-bottom: 0.5rem;
 }

-@media only screen and (max-width: 500px) {
-    .option-group {
-        padding: 0.7rem;
-    }
-}
-
-@media only screen and (max-width: 435px) {
-    .div-icons-badge-colors {
-        flex-wrap: wrap;
-    }
-
+@media only screen and (max-width: 760px) {
    .div-badge {
        border: none;
        padding-left: 0;
-        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .option-group {
+        padding: 0.7rem;
    }
 }

--- a/pages/options/options.html
+++ b/pages/options/options.html
@ -271,6 +271,7 @@
                            </label>
                        </div>
                        <div class="div-badge">
+                            <p>Default</p>
                            <div id="badge-preview-top">
                                <div>
                                    <img id="icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
@ -280,11 +281,30 @@
                            <div id="badge-preview-bottom">
                                <div class="colorpicker">
                                    <div id="pre-badged-background-color"></div>
-                                    <input id="badged-background-color" data-option="badgeColor" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
+                                    <input id="badged-background-color" data-option="badgeDefaultBackgroundColor" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
                                </div>
                                <div id="div-badged-text-color" class="colorpicker">
                                    <div id="pre-badged-text-color"></div>
-                                    <input id="badged-text-color"  data-option="badgeTextColor" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
+                                    <input id="badged-text-color"  data-option="badgeDefaultTextColor" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="div-badge">
+                            <p>HTML filter enabled</p>
+                            <div id="html-badge-preview-top">
+                                <div>
+                                    <img id="html-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
+                                    <div id="html-counter-preview-badge"><span>17</span></div>
+                                </div>
+                            </div>
+                            <div id="html-badge-preview-bottom">
+                                <div class="colorpicker">
+                                    <div id="html-pre-badged-background-color"></div>
+                                    <input id="html-badged-background-color" data-option="badgeHTMLFilterBackgroundColor" class="input-text" maxlength="7"><img id="html-restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
+                                </div>
+                                <div id="html-div-badged-text-color" class="colorpicker">
+                                    <div id="html-pre-badged-text-color"></div>
+                                    <input id="html-badged-text-color"  data-option="badgeHTMLfilterTextColor" class="input-text" maxlength="7"><img id="html-restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
                                </div>
                            </div>
                        </div>
--- a/pages/options/options.js
+++ b/pages/options/options.js
@ -84,8 +84,10 @@ options._renderOptionsPanel = function () {

    other = {
        'selectedIcon': options._optionValues.selectedIcon,
-        'badgeColor': options._optionValues.badgeColor,
-        'badgeTextColor': options._optionValues.badgeTextColor,
+        'badgeDefaultBackgroundColor': options._optionValues.badgeDefaultBackgroundColor,
+        'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor,
+        'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor,
+        'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor,
        'storageType': options._optionValues.storageType
    };

--- a/pages/updates/updates.html
+++ b/pages/updates/updates.html
@ -71,6 +71,7 @@
                            <li>Examples for the allow list Google Fonts(<a href="https://codeberg.org/nobody/LocalCDN/issue/585">#585</a>)</li>
                            <li>Unused permission removed (<a href="https://codeberg.org/nobody/LocalCDN/issue/612">#612</a>)</li>
                            <li>Wildcard support for Google Fonts and HTML filter list (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
+                            <li>Customizable badge as HTML filter indicator (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
                        </ul>
                    </div>
                    <div id="generator-section">