Implemented: Indicate missing resources on the icon (#301)

core/constants.js

@@ -82,7 +82,8 @@ const Setting = {
     'STORAGE_TYPE': 'storageType',
     'BADGE_COLOR': 'badgeColor',
     'BADGE_TEXT_COLOR': 'badgeTextColor',
-    'HIDE_DONATION_BUTTON': 'hideDonationButton'
+    'HIDE_DONATION_BUTTON': 'hideDonationButton',
+    'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources',
 };
 
 const SettingDefaults = {
@@ -108,7 +109,8 @@ const SettingDefaults = {
     [Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN,
     [Setting.BADGE_COLOR]: '#4A826C',
     [Setting.BADGE_TEXT_COLOR]: '#FFFFFF',
-    [Setting.HIDE_DONATION_BUTTON]: false
+    [Setting.HIDE_DONATION_BUTTON]: false,
+    [Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false,
 };
 
 const WebRequest = {

core/interceptor.js

@@ -44,6 +44,10 @@ interceptor.handleRequest = function (requestDetails, tabIdentifier, tab) {
     targetDetails = requestAnalyzer.getLocalTarget(requestDetails, tab.url);
     targetPath = targetDetails.path;
 
+    if (targetDetails === false) {
+        ++stateManager.tabs[tabIdentifier].missing;
+    }
+
     if (Regex.GOOGLE_FONTS.test(requestDetails.url)) {
         let initiatorDomain = helpers.extractDomainFromUrl(tab.url, true);
         // Check if the website is allowed to load Google Fonts

core/state-manager.js

@@ -31,12 +31,15 @@ var stateManager = {};
  */
 
 stateManager.registerInjection = function (tabIdentifier, injection) {
-    let injectionIdentifier, registeredTab, injectionCount;
+    let injectionIdentifier, registeredTab, injectionCount, missingCount, badgeText;
 
     injectionIdentifier = injection.source + injection.path + injection.version;
     registeredTab = stateManager.tabs[tabIdentifier];
     registeredTab.injections[injectionIdentifier] = injection;
+
     injectionCount = Object.keys(registeredTab.injections).length || 0;
+    missingCount = registeredTab.missing || 0;
+    badgeText = `${injectionCount}`;
 
     if (injectionCount > 0) {
         chrome.browserAction.setTitle({
@@ -47,11 +50,31 @@ stateManager.registerInjection = function (tabIdentifier, injection) {
         if (stateManager.showIconBadge === true) {
             wrappers.setBadgeText({
                 'tabId': tabIdentifier,
-                'text': injectionCount.toString()
+                'text': badgeText
             });
         }
     }
 
+    if (missingCount > 0) {
+        chrome.browserAction.setBadgeTextColor({
+            'tabId': tabIdentifier,
+            'color': 'black'
+        });
+        chrome.browserAction.setBadgeBackgroundColor({
+            'tabId': tabIdentifier,
+            'color': 'yellow'
+        });
+    } else {
+        chrome.browserAction.setBadgeTextColor({
+            'tabId': tabIdentifier,
+            'color': wrappers.textColor
+        });
+        chrome.browserAction.setBadgeBackgroundColor({
+            'tabId': tabIdentifier,
+            'color': wrappers.backgroundColor
+        });
+    }
+
     if (isNaN(storageManager.amountInjected)) {
         storageManager.type.get(Setting.AMOUNT_INJECTED, function (items) {
             storageManager.amountInjected = items.amountInjected;
@@ -127,7 +150,8 @@ stateManager._createTab = function (tab) {
     tabIdentifier = tab.id;
 
     stateManager.tabs[tabIdentifier] = {
-        'injections': {}
+        'injections': {},
+        'missing': 0
     };
 
     requestFilters = {
@@ -176,6 +200,7 @@ stateManager._updateTab = function (details) {
 
     if (stateManager.tabs[tabIdentifier]) {
         stateManager.tabs[tabIdentifier].injections = {};
+        stateManager.tabs[tabIdentifier].missing = 0;
     }
 };
 

pages/options/options-advanced.js

@@ -54,7 +54,8 @@ optionsAdvanced.preSelectBlockGoogleFonts = function (value) {
 };
 
 optionsAdvanced.init = function (opt) {
-    let blockMissing, blockGoogleFonts, allowedDomainsGoogleFonts, logging, domainsManipulateDOM, negateHtmlFilterList;
+    let blockMissing, blockGoogleFonts, allowedDomainsGoogleFonts, logging, domainsManipulateDOM,
+        negateHtmlFilterList, changeBadgeColorMissingResources;
 
     if (BrowserType.CHROMIUM) {
         document.getElementById('html-filter-div').style.display = 'none';
@@ -87,6 +88,10 @@ optionsAdvanced.init = function (opt) {
     negateHtmlFilterList.addEventListener('change', options.onOptionChanged);
     negateHtmlFilterList.checked = opt[Setting.NEGATE_HTML_FILTER_LIST];
 
+    changeBadgeColorMissingResources = options.getOptionElement(Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES);
+    changeBadgeColorMissingResources.addEventListener('change', options.onOptionChanged);
+    changeBadgeColorMissingResources.checked = opt[Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES];
+
     document.getElementById('generate-ublock-rules').addEventListener('change', ruleGenerator.openRuleSet);
     document.getElementById('generate-umatrix-rules').addEventListener('change', ruleGenerator.openRuleSet);
     document.getElementById('generate-adguard-rules').addEventListener('change', ruleGenerator.openRuleSet);

pages/options/options.html

@@ -154,11 +154,22 @@
                     <div class="title-option">
                         <label class="b-contain">
                             <input id="enableLogging" data-option="enableLogging" type="checkbox">
-                            <span data-i18n-content="loggingTitle">Enable logging in browser console</span>
+                            <span data-i18n-content="loggingTitle">Enable logging</span>
                             <div class="b-input"></div>
                         </label>
                     </div>
-                    <div class="description-option" data-i18n-content="loggingDescription">Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources</div>
+                    <div class="description-option" data-i18n-content="loggingDescription">You can open the log with the icon in the menu. The log will be deleted when you close the browser or disable logging.</div>
+                </section>
+                <section class="option">
+                    <div class="title-option">
+                        <label class="b-contain">
+                            <input id="changeBadgeColorMissingResources" data-option="changeBadgeColorMissingResources" type="checkbox">
+                            <span data-i18n-content="changeBadgeColorMissingResourcesTitle">Indicate missing resources on the icon</span>
+                            <div class="b-input"></div>
+                        </label>
+                        <span class="badge badge-warning" data-i18n-content="betaLabel">Beta</span>
+                    </div>
+                    <div class="description-option" data-i18n-content="changeBadgeColorMissingResourcesDescription">Change the badge color if resources are missing.</div>
                 </section>
             </div>
             <div id="html-filter-div" class="option-group">

pages/updates/updates.html

@@ -54,6 +54,7 @@
                         <li>Added: socket.io v4.0.0 (<a href="https://codeberg.org/nobody/LocalCDN/issues/305">#305</a>)</li>
                         <li>Updated: clipboard.js v2.0.6 -> v2.0.8 (<a href="https://codeberg.org/nobody/LocalCDN/issues/306">#306</a>)</li>
                         <li>Updated: d3 v6.5.0 -> v6.6.0 (<a href="https://codeberg.org/nobody/LocalCDN/issues/307">#307</a>)</li>
+                        <li>Implemented: Indicate missing resources on the icon (<a href="https://codeberg.org/nobody/LocalCDN/issues/301">#301</a>)</li>
                     </ul>
                     <div id="generator-section">
                         <div class="topic-label">