✨ Store tab's status and use for badge color

src/script/background.ts

@@ -10,6 +10,7 @@ const COLOR_FOREST_GREEN = [34, 139, 34, 255] as chrome.action.ColorArray;
 const COLOR_GREY = [85, 85, 85, 255] as chrome.action.ColorArray;
 const COLOR_ORANGE = [236, 147, 41, 255] as chrome.action.ColorArray;
 const COLOR_RED = [211, 45, 39, 255] as chrome.action.ColorArray;
+const BADGE_COLORS = [COLOR_GREY, COLOR_BLUE, COLOR_RED, COLOR_RED, COLOR_BLUE_VIOLET, COLOR_FOREST_GREEN] as chrome.action.ColorArray[];
 
 ////
 // Functions
@@ -132,18 +133,28 @@ function getWindowVariable(variableName: string) {
   }
 }
 
-async function handleBackgroundDataRequest(tabId: number, sendResponse) {
+async function handleBackgroundDataRequest(tabId: number, sendResponse, iframe: boolean) {
   const storage = await loadBackgroundStorage();
   const response: BackgroundData = { disabledTab: false };
   const tabOptions = getTabOptions(storage, tabId);
   if (tabOptions.disabled || tabOptions.disabledOnce) {
     response.disabledTab = true;
   }
   sendResponse(response);
+
+  let updated = false;
   if (tabOptions.disabledOnce) {
     tabOptions.disabledOnce = false;
-    await saveBackgroundStorage(storage);
+    updated = true;
+  }
+
+  // Reset filter status for main page
+  if (!iframe) {
+    tabOptions.status = 0;
+    updated = true;
   }
+
+  if (updated) await saveBackgroundStorage(storage);
 }
 
 async function handleRequest(url: string, method: string = 'GET', sendResponse) {
@@ -203,7 +214,7 @@ function onMessage(request: Message, sender, sendResponse) {
   if (request.disabled === true) {
     chromeAction.setIcon({ path: 'img/icon19-disabled.png', tabId: sender.tab.id });
   } else if (request.backgroundData === true) {
-    handleBackgroundDataRequest(sender.tab.id, sendResponse);
+    handleBackgroundDataRequest(sender.tab.id, sendResponse, request.iframe);
     return true; // return true when waiting on an async call
   } else if (request.fetch) {
     handleRequest(request.fetch, request.fetchMethod, sendResponse);
@@ -214,17 +225,9 @@ function onMessage(request: Message, sender, sendResponse) {
   } else if (request.updateContextMenus != null) {
     contextMenuSetup(request.updateContextMenus);
   } else {
-    // Set badge color
-    if (request.setBadgeColor) {
-      if (request.captions) {
-        chromeAction.setBadgeBackgroundColor({ color: COLOR_FOREST_GREEN, tabId: sender.tab.id }); // Audio captions
-      } else if (request.mutePage) {
-        chromeAction.setBadgeBackgroundColor({ color: COLOR_BLUE_VIOLET, tabId: sender.tab.id }); // Audio
-      } else if (request.advanced) {
-        chromeAction.setBadgeBackgroundColor({ color: COLOR_RED, tabId: sender.tab.id }); // Advanced
-      } else {
-        chromeAction.setBadgeBackgroundColor({ color: COLOR_BLUE, tabId: sender.tab.id }); // Normal
-      }
+    // Update tab's status and set badge color
+    if (request.status) {
+      updateStatus(chromeAction, sender.tab.id, request.status);
     }
 
     // Show count of words filtered on badge
@@ -281,7 +284,7 @@ async function runUpdateMigrations(previousVersion) {
 }
 
 function newTabOptions(storage: BackgroundStorage, tabId: number, options: TabStorageOptions = {}): TabStorageOptions {
-  const _defaults: TabStorageOptions = { disabled: false, disabledOnce: false };
+  const _defaults: TabStorageOptions = { status: 0, disabled: false, disabledOnce: false };
   const tabOptions = Object.assign({}, _defaults, options) as TabStorageOptions;
   tabOptions.id = tabId;
   tabOptions.registeredAt = new Date().getTime();
@@ -328,6 +331,18 @@ async function toggleTabDisable(tabId: number) {
   chrome.tabs.reload(tabId);
 }
 
+async function updateStatus(chromeAction, tabId: number, status: number) {
+  const storage = await loadBackgroundStorage();
+  const tabOptions = await getTabOptions(storage, tabId);
+
+  // Only let status increase
+  if (status > tabOptions.status) {
+    tabOptions.status = status;
+    chromeAction.setBadgeBackgroundColor({ color: BADGE_COLORS[tabOptions.status], tabId: tabId });
+    await saveBackgroundStorage(storage);
+  }
+}
+
 ////
 // Listeners
 //

src/script/lib/constants.ts

@@ -18,6 +18,7 @@ export default class Constants {
   static readonly SHOW_SUBTITLES = { ALL: 0, FILTERED: 1, UNFILTERED: 2, NONE: 3 };
   static readonly STATS_TYPE_AUDIO = 'audio';
   static readonly STATS_TYPE_TEXT = 'text';
+  static readonly STATUS = { DISABLED: 0, NORMAL: 1, ADVANCED: 2, DEEP: 3, MUTE_PAGE: 4, CAPTIONS: 5 };
   static readonly TRUE = 1;
 
   // Helper Functions

src/script/lib/globals.d.ts

@@ -107,10 +107,11 @@ interface Message {
   fetch?: string;
   fetchMethod?: string;
   globalVariable?: string;
+  iframe?: boolean;
   mute?: boolean;
   mutePage?: boolean;
   popup?: boolean;
-  setBadgeColor?: boolean;
+  status?: number;
   summary?: Summary;
   updateContextMenus?: boolean;
 }
@@ -151,6 +152,7 @@ interface TabStorageOptions {
   disabled?: boolean;
   disabledOnce?: boolean;
   registeredAt?: number;
+  status?: number;
 }
 
 interface Version {

src/script/webAudio.ts

@@ -1041,7 +1041,7 @@ export default class WebAudio {
 
     this.supportedCaptions = found;
     if (found) {
-      const message: Message = { captions: true, setBadgeColor: true };
+      const message: Message = { status: Constants.STATUS.CAPTIONS };
       chrome.runtime.sendMessage(message);
       logger.info('Supported captions found');
     } else {

src/script/webFilter.ts

@@ -327,7 +327,7 @@ export default class WebFilter extends Filter {
 
   getBackgroundData() {
     return new Promise((resolve, reject) => {
-      chrome.runtime.sendMessage({ backgroundData: true }, (response) => {
+      chrome.runtime.sendMessage({ backgroundData: true, iframe: !!this.iframe }, (response) => {
         if (!response) { response = { disabledTab: false }; }
         resolve(response);
       });
@@ -430,10 +430,14 @@ export default class WebFilter extends Filter {
     // Reset muted state on page load if we muted the tab audio
     if (this.cfg.muteAudio && this.cfg.muteMethod == Constants.MUTE_METHODS.TAB) { message.clearMute = true; }
 
-    // Send page state to color icon badge
-    if (!this.iframe || this.mutePage) { message.setBadgeColor = true; }
+    // Get status
+    message.iframe = !!(this.iframe);
     message.advanced = this.domain.advanced;
     message.mutePage = this.mutePage;
+    message.status = Constants.STATUS.NORMAL;
+    if (message.advanced) message.status = Constants.STATUS.ADVANCED;
+    if (message.mutePage) message.status = Constants.STATUS.MUTE_PAGE;
+
     if (this.mutePage && this.cfg.showCounter) { message.counter = this.counter; } // Always show counter when muting audio
     chrome.runtime.sendMessage(message);
   }