Status bar update

apps/acf-extension/src/background/index.ts

@@ -15,7 +15,6 @@ import { registerNotifications } from '@dhruv-techapps/shared-notifications';
 import { OpenAIBackground, RUNTIME_MESSAGE_OPENAI } from '@dhruv-techapps/shared-openai';
 import { RUNTIME_MESSAGE_VISION, VisionBackground } from '@dhruv-techapps/shared-vision';
 import XMLHttpRequest from 'xhr-shim';
-import { ACTION_POPUP } from '../common/constant';
 import { DISCORD_CLIENT_ID, EDGE_OAUTH_CLIENT_ID, FIREBASE_FUNCTIONS_URL, OPTIONS_PAGE_URL, VARIANT } from '../common/environments';
 import { scope } from '../common/instrument';
 import AcfBackup from './acf-backup';
@@ -33,11 +32,9 @@ try {
   /**
    * Browser Action set to open option page / configuration page
    */
-  chrome.action.onClicked.addListener((tab) => {
-    googleAnalytics?.fireEvent({ name: 'Wizard', params: { location: 'action:onClicked' } });
-    if (tab.id !== undefined) {
-      chrome.tabs.sendMessage(tab.id, { action: ACTION_POPUP });
-    }
+  chrome.action.onClicked.addListener(() => {
+    googleAnalytics?.fireEvent({ name: 'Web', params: { location: 'action:onClicked' } });
+    chrome.tabs.create({ url: OPTIONS_PAGE_URL });
   });
 
   /**
@@ -109,7 +106,9 @@ try {
     [RUNTIME_MESSAGE_OPENAI]: new OpenAIBackground(auth, FIREBASE_FUNCTIONS_URL, EDGE_OAUTH_CLIENT_ID)
   };
   Runtime.onMessageExternal(onMessageListener);
+
   Runtime.onMessage(onMessageListener);
+  Runtime.onConnect(onMessageListener);
 
   auth.authStateReady().then(() => {
     const clientId = auth.currentUser?.uid;

apps/acf-extension/src/content_scripts/actions.ts

@@ -45,7 +45,7 @@ const Actions = (() => {
         i += 1;
         continue;
       }
-      statusBar.actionUpdate(i + 1, action.name);
+      statusBar.actionUpdate(i + 1);
       window.ext.__currentAction = i + 1;
       try {
         await checkStatement(actions, action);

apps/acf-extension/src/content_scripts/addon.ts

@@ -116,7 +116,6 @@ const AddonProcessor = (() => {
   };
 
   const start = async ({ elementFinder, value, condition, valueExtractor, valueExtractorFlags, ...props }: IAddon, settings?: IActionSettings): Promise<void> => {
-    statusBar.addonUpdate();
     let nodeValue;
     if (/^Func::/gi.test(elementFinder)) {
       nodeValue = await Sandbox.sandboxEval(elementFinder.replace(/^Func::/gi, ''));

apps/acf-extension/src/content_scripts/batch.ts

@@ -29,7 +29,7 @@ const BatchProcessor = (() => {
           statusBar.batchUpdate(i + 2);
           console.groupCollapsed(`${BATCH_I18N.TITLE} #${i + 2} [${I18N_COMMON.REPEAT}]`);
           if (batch?.repeatInterval) {
-            await statusBar.wait(batch?.repeatInterval, STATUS_BAR_TYPE.BATCH_REPEAT, i + 2);
+            await statusBar.wait(batch?.repeatInterval, STATUS_BAR_TYPE.BATCH_REPEAT);
           }
           await Actions.start(actions, i + 2);
           const { notifications } = await new SettingsStorage().getSettings();
@@ -50,7 +50,7 @@ const BatchProcessor = (() => {
         while (true) {
           if (batch?.repeatInterval) {
             statusBar.batchUpdate('∞');
-            await statusBar.wait(batch?.repeatInterval, STATUS_BAR_TYPE.BATCH_REPEAT, '∞');
+            await statusBar.wait(batch?.repeatInterval, STATUS_BAR_TYPE.BATCH_REPEAT);
           }
           await Actions.start(actions, i);
           i += 1;
@@ -61,7 +61,6 @@ const BatchProcessor = (() => {
 
   const start = async (actions: Array<IAction | IUserScript>, batch?: IBatch) => {
     try {
-      statusBar.batchUpdate(1);
       console.groupCollapsed(`${BATCH_I18N.TITLE} #1 (${I18N_COMMON.DEFAULT})`);
       await Actions.start(actions, 1);
       console.groupEnd();

apps/acf-extension/src/content_scripts/config.ts

@@ -142,17 +142,12 @@ const ConfigProcessor = (() => {
     }
   };
 
-  const setupStatusBar = async () => {
-    const { statusBar: statusBarLocation } = await new SettingsStorage().getSettings();
-    statusBar.setLocation(statusBarLocation);
-  };
-
   const checkStartType = async (configs: Array<IConfiguration>, config?: IConfiguration) => {
-    setupStatusBar();
     configs.forEach((c) => {
       Hotkey.setup(start.bind(this, c), c.hotkey);
     });
     if (config) {
+      statusBar.enable(config.actions.length, config.batch?.repeat);
       await checkStartTime(config);
       await start(config);
     }

apps/acf-extension/src/manifest.json

@@ -16,7 +16,15 @@
     "128": "assets/icons/icon128.png"
   },
   "action": {
-    "default_icon": "assets/icons/icon64.png"
+    "default_icon": {
+      "16": "assets/icons/icon16.png",
+      "32": "assets/icons/icon32.png",
+      "48": "assets/icons/icon48.png",
+      "64": "assets/icons/icon64.png",
+      "96": "assets/icons/icon96.png",
+      "128": "assets/icons/icon128.png"
+    },
+    "default_title": "↗ Options Page"
   },
   "background": {
     "service_worker": "background.js",

packages/core/common/src/lib/model/core-model.ts

@@ -2,7 +2,7 @@
   [index: string]: {
     startRange: string;
     endRange: string;
     values: Array<any>;
   };
 }
 
@@ -11,6 +11,7 @@
   __currentActionName: string;
   __actionError: string;
   __actionRepeat: number;
+  __addonRecheck: number;
   __batchRepeat: number;
   __sessionCount: number;
   __sheets?: ISheets;

packages/core/extension/src/lib/background/chrome/messenger/action.messenger.ts

@@ -1,23 +1,35 @@
 export interface ActionRequest {
   messenger: 'action';
-  methodName: 'setIcon' | 'setBadgeBackgroundColor' | 'setBadgeText' | 'setTitle';
+  methodName: 'setIcon' | 'setBadgeBackgroundColor' | 'setBadgeText' | 'setTitle' | 'setBadgeTextColor' | 'enable' | 'disable';
   message: chrome.action.TabIconDetails | chrome.action.BadgeColorDetails | chrome.action.BadgeTextDetails | chrome.action.TitleDetails;
 }
 
 export class ActionMessenger {
-  setIcon(details: chrome.action.TabIconDetails) {
-    return chrome.action.setIcon(details);
+  disable(_: void, sender: chrome.runtime.MessageSender) {
+    return chrome.action.disable(sender.tab?.id);
   }
 
-  setBadgeBackgroundColor(details: chrome.action.BadgeColorDetails) {
-    return chrome.action.setBadgeBackgroundColor(details);
+  enable(_: void, sender: chrome.runtime.MessageSender) {
+    return chrome.action.enable(sender.tab?.id);
   }
 
-  setBadgeText(details: chrome.action.BadgeTextDetails) {
-    return chrome.action.setBadgeText(details);
+  setIcon(details: chrome.action.TabIconDetails, sender: chrome.runtime.MessageSender) {
+    return chrome.action.setIcon({ ...details, tabId: sender.tab?.id });
   }
 
-  setTitle(details: chrome.action.TitleDetails) {
-    return chrome.action.setTitle(details);
+  setBadgeBackgroundColor(details: chrome.action.BadgeColorDetails, sender: chrome.runtime.MessageSender) {
+    return chrome.action.setBadgeBackgroundColor({ ...details, tabId: sender.tab?.id });
+  }
+
+  setBadgeText(details: chrome.action.BadgeTextDetails, sender: chrome.runtime.MessageSender) {
+    return chrome.action.setBadgeText({ ...details, tabId: sender.tab?.id });
+  }
+
+  setBadgeTextColor(details: chrome.action.BadgeColorDetails, sender: chrome.runtime.MessageSender) {
+    return chrome.action.setBadgeTextColor({ ...details, tabId: sender.tab?.id });
+  }
+
+  setTitle(details: chrome.action.TitleDetails, sender: chrome.runtime.MessageSender) {
+    return chrome.action.setTitle({ ...details, tabId: sender.tab?.id });
   }
 }

packages/core/extension/src/lib/background/chrome/runtime.ts

@@ -18,7 +18,7 @@ export const messageListener = async (request: any, sender: chrome.runtime.Messa
       case 'manifest':
         return new ManifestMessenger()[(methodName as keyof ManifestMessenger) || 'values'](message);
       case 'action':
-        return new ActionMessenger()[(methodName as keyof ActionMessenger) || 'setIcon'](message);
+        return new ActionMessenger()[(methodName as keyof ActionMessenger) || 'setIcon'](message, sender);
       case 'alarms':
         return new AlarmsMessenger()[(methodName as keyof AlarmsMessenger) || 'create'](message);
       case 'userScripts':
@@ -49,6 +49,22 @@ export class Runtime {
     chrome.runtime.sendMessage(message, callback);
   }
 
+  static onConnect(configs: MessengerConfigObject) {
+    chrome.runtime.onConnect.addListener((port) => {
+      const { sender = {}, name } = port;
+      const tabId = sender.tab?.id;
+      if (!tabId) {
+        port.postMessage({ error: 'no tab id' });
+        port.disconnect();
+        return;
+      }
+      console.log('port connected', name);
+      port.onMessage.addListener((msg) => {
+        messageListener(msg, sender, configs);
+      });
+    });
+  }
+
   static onMessage(configs: MessengerConfigObject) {
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       messageListener(request, sender, configs)

packages/core/service/src/lib/action.service.ts

@@ -1,20 +1,32 @@
 import { ActionRequest } from '@dhruv-techapps/core-extension';
-import { CoreService } from './service';
+import { PortService } from './service';
 
-export class ActionService extends CoreService {
-  static async setBadgeBackgroundColor(details: chrome.action.BadgeColorDetails) {
-    return await this.message<ActionRequest>({ messenger: 'action', methodName: 'setBadgeBackgroundColor', message: details });
+export class ActionService {
+  static setBadgeBackgroundColor(details: chrome.action.BadgeColorDetails) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'setBadgeBackgroundColor', message: details });
   }
 
-  static async setBadgeText(details: chrome.action.BadgeTextDetails) {
-    return await this.message<ActionRequest>({ messenger: 'action', methodName: 'setBadgeText', message: details });
+  static setBadgeText(details: chrome.action.BadgeTextDetails) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'setBadgeText', message: details });
   }
 
-  static async setIcon(details: chrome.action.TabIconDetails) {
-    return await this.message<ActionRequest>({ messenger: 'action', methodName: 'setIcon', message: details });
+  static setIcon(details: chrome.action.TabIconDetails) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'setIcon', message: details });
   }
 
-  static async setTitle(details: chrome.action.TitleDetails) {
-    return await this.message<ActionRequest>({ messenger: 'action', methodName: 'setTitle', message: details });
+  static setTitle(details: chrome.action.TitleDetails) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'setTitle', message: details });
+  }
+
+  static setBadgeTextColor(details: chrome.action.BadgeColorDetails) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'setBadgeTextColor', message: details });
+  }
+
+  static enable(tabId?: number) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'enable', message: { tabId } });
+  }
+
+  static disable(tabId?: number) {
+    PortService.getInstance().message<ActionRequest>({ messenger: 'action', methodName: 'disable', message: { tabId } });
   }
 }

packages/core/service/src/lib/service.ts

@@ -44,3 +44,59 @@ export class CoreService {
     return await this.messageChrome<K, T>(message);
   }
 }
+
+export class PortService {
+  private static instance?: PortService;
+  private readonly port: chrome.runtime.Port;
+  private readonly portName: string;
+
+  private constructor(name = 'Auto Clicker & Auto Fill') {
+    if (!chrome.runtime?.connect) {
+      throw new Error('Extension context invalidated');
+    }
+
+    const id = chrome.runtime.id || window.EXTENSION_ID;
+    if (!id || typeof id !== 'string') {
+      throw new Error('extensionId is not undefined neither string');
+    }
+
+    this.portName = name;
+    this.port = chrome.runtime.connect(id, { name: this.portName });
+  }
+
+  static getInstance(name?: string): PortService {
+    if (!PortService.instance) {
+      PortService.instance = new PortService(name);
+      return PortService.instance;
+    }
+
+    if (name && PortService.instance.portName !== name) {
+      console.warn(`PortService already initialized with name "${PortService.instance.portName}". Ignoring request for "${name}".`);
+    }
+
+    return PortService.instance;
+  }
+
+  private postMessage(message: unknown): void {
+    this.port.postMessage(message);
+  }
+
+  public onMessage(listener: (message: unknown) => void): void {
+    if (this.port.onMessage.hasListener(listener)) {
+      return;
+    }
+    this.port.onMessage.addListener(listener);
+  }
+
+  public disconnect(): void {
+    this.port.disconnect();
+  }
+
+  public onDisconnect(listener: () => void): void {
+    this.port.onDisconnect.addListener(listener);
+  }
+
+  public message<K extends CoreServiceRequest>(message: K): void {
+    this.postMessage(message);
+  }
+}

packages/shared/status-bar/package.json

@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "@swc/helpers": "~0.5.11",
-    "@dhruv-techapps/shared-util": "0.0.1"
+    "@dhruv-techapps/shared-util": "0.0.1",
+    "@dhruv-techapps/core-service": "0.0.1"
   }
 }

packages/shared/status-bar/src/index.ts

@@ -1,2 +1,4 @@
+/// <reference types="chrome"/>
+
 export * from './lib/status-bar';
 export * from './lib/status-bar.types';