Simplify DOM watcher with configuration-level settings and automatic action restart

apps/acf-extension/src/background/dom-watcher-devtools.ts

@@ -0,0 +1,108 @@
+import { RUNTIME_MESSAGE_ACF } from '@dhruv-techapps/acf-common';
+
+// DevTools communication handler for DOM Watcher
+export class DomWatcherDevToolsBackground {
+  private devToolsPorts: Map<number, chrome.runtime.Port> = new Map();
+
+  constructor() {
+    // Listen for DevTools connections
+    chrome.runtime.onConnect.addListener((port) => {
+      if (port.name === 'dom-watcher-devtools') {
+        this.handleDevToolsConnection(port);
+      }
+    });
+  }
+
+  private handleDevToolsConnection(port: chrome.runtime.Port) {
+    const tabId = port.sender?.tab?.id;
+    if (!tabId) {
+      console.error('DomWatcherDevTools: No tab ID in port connection');
+      return;
+    }
+
+    console.log(`DomWatcherDevTools: Connected to tab ${tabId}`);
+    this.devToolsPorts.set(tabId, port);
+
+    // Handle messages from DevTools
+    port.onMessage.addListener((message) => {
+      this.handleDevToolsMessage(message, tabId);
+    });
+
+    // Clean up on disconnect
+    port.onDisconnect.addListener(() => {
+      console.log(`DomWatcherDevTools: Disconnected from tab ${tabId}`);
+      this.devToolsPorts.delete(tabId);
+    });
+  }
+
+  private async handleDevToolsMessage(message: any, tabId: number) {
+    try {
+      switch (message.type) {
+        case 'GET_WATCHER_STATUS':
+          await this.getWatcherStatus(tabId);
+          break;
+        case 'WATCHER_COMMAND':
+          await this.sendWatcherCommand(tabId, message.command);
+          break;
+        default:
+          console.warn('DomWatcherDevTools: Unknown message type:', message.type);
+      }
+    } catch (error) {
+      console.error('DomWatcherDevTools: Error handling message:', error);
+    }
+  }
+
+  private async getWatcherStatus(tabId: number) {
+    try {
+      // Send message to content script to get watcher status
+      const response = await chrome.tabs.sendMessage(tabId, {
+        action: RUNTIME_MESSAGE_ACF.DOM_WATCHER_GET_STATUS
+      });
+
+      // Forward response to DevTools
+      const port = this.devToolsPorts.get(tabId);
+      if (port) {
+        port.postMessage({
+          type: 'WATCHER_STATUS',
+          data: response || { isActive: false, watchedActionsCount: 0, watchedActions: [] }
+        });
+      }
+    } catch (error) {
+      console.error('DomWatcherDevTools: Error getting watcher status:', error);
+
+      // Send default status on error
+      const port = this.devToolsPorts.get(tabId);
+      if (port) {
+        port.postMessage({
+          type: 'WATCHER_STATUS',
+          data: { isActive: false, watchedActionsCount: 0, watchedActions: [] }
+        });
+      }
+    }
+  }
+
+  private async sendWatcherCommand(tabId: number, command: string) {
+    try {
+      await chrome.tabs.sendMessage(tabId, {
+        action: RUNTIME_MESSAGE_ACF.DOM_WATCHER_COMMAND,
+        command
+      });
+
+      // Get updated status after command
+      setTimeout(() => this.getWatcherStatus(tabId), 100);
+    } catch (error) {
+      console.error('DomWatcherDevTools: Error sending watcher command:', error);
+    }
+  }
+
+  // Send log messages to DevTools
+  public sendLogToDevTools(tabId: number, message: string, level: 'debug' | 'info' | 'warning' | 'error' = 'debug') {
+    const port = this.devToolsPorts.get(tabId);
+    if (port) {
+      port.postMessage({
+        type: 'WATCHER_LOG',
+        data: { message, level }
+      });
+    }
+  }
+}

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

@@ -21,6 +21,7 @@ import { scope } from '../common/instrument';
 import AcfBackup from './acf-backup';
 import { AcfSchedule } from './acf-schedule';
 import registerContextMenus from './context-menu';
+import { DomWatcherDevToolsBackground } from './dom-watcher-devtools';
 import { auth } from './firebase';
 import { googleAnalytics } from './google-analytics';
 import { TabsMessenger } from './tab';
@@ -104,6 +105,11 @@ try {
    */
   registerNotifications(OPTIONS_PAGE_URL);
 
+  /**
+   * Initialize DOM Watcher DevTools communication
+   */
+  new DomWatcherDevToolsBackground();
+
   /**
    * Setup on Message Listener
    */

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

@@ -10,6 +10,7 @@ import { I18N_COMMON, I18N_ERROR } from './i18n';
 import Statement from './statement';
 import { statusBar } from './status-bar';
 import UserScriptProcessor from './userscript';
+import DomWatchManager from './util/dom-watch-manager';
 
 const ACTION_I18N = {
   TITLE: chrome.i18n.getMessage('@ACTION__TITLE'),
@@ -36,6 +37,10 @@ const Actions = (() => {
 
   const start = async (actions: Array<IAction | IUserScript>, batchRepeat: number) => {
     window.ext.__batchRepeat = batchRepeat;
+
+    // Clear any existing DOM watchers before starting new actions
+    DomWatchManager.clear();
+
     let i = 0;
     while (i < actions.length) {
       const action = actions[i];
@@ -55,6 +60,13 @@ const Actions = (() => {
           action.status = await UserScriptProcessor.start(action as IUserScript);
         } else {
           action.status = await ActionProcessor.start(action as IAction);
+
+          // Register action for DOM watching if enabled (only for regular actions, not userscripts)
+          const typedAction = action as IAction;
+          if (typedAction.settings?.watch?.watchEnabled) {
+            console.debug(`${ACTION_I18N.TITLE} #${i + 1}`, `[${window.ext.__currentActionName}]`, '👁️ Registering for DOM watching');
+            DomWatchManager.registerAction(typedAction);
+          }
         }
         notify(action);
       } catch (error) {
@@ -76,7 +88,7 @@ const Actions = (() => {
       i += 1;
     }
   };
-  return { start };
+  return { start, getDomWatchManager: () => DomWatchManager };
 })();
 
 export default Actions;

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

@@ -2,6 +2,7 @@ import { ELoadTypes, RUNTIME_MESSAGE_ACF } from '@dhruv-techapps/acf-common';
 import { ConfigStorage, GetConfigResult, SettingsStorage } from '@dhruv-techapps/acf-store';
 import { IExtension, Logger, LoggerColor } from '@dhruv-techapps/core-common';
 import { scope } from '../common/instrument';
+import Actions from './actions';
 import ConfigProcessor from './config';
 import { statusBar } from './status-bar';
 
@@ -64,8 +65,9 @@ self.onerror = (...rest) => {
   scope.captureException({ ...rest }, { captureContext: { tags: { errorType: 'onerror' } } });
 };
 
-chrome.runtime.onMessage.addListener(async (message) => {
-  const { action, configId } = message;
+chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+  const { action, configId, command } = message;
+
   if (action === RUNTIME_MESSAGE_ACF.RUN_CONFIG) {
     try {
       new ConfigStorage().getConfigById(configId).then(async (config) => {
@@ -88,5 +90,47 @@ chrome.runtime.onMessage.addListener(async (message) => {
       }
       scope.captureException(e);
     }
+  } else if (action === RUNTIME_MESSAGE_ACF.DOM_WATCHER_GET_STATUS) {
+    // Handle DOM watcher status request
+    try {
+      const domWatchManager = Actions.getDomWatchManager();
+      const status = domWatchManager.getStatus();
+      sendResponse(status);
+    } catch (e) {
+      console.error('Error getting DOM watcher status:', e);
+      sendResponse({ isActive: false, watchedActionsCount: 0, watchedActions: [] });
+    }
+    return true; // Keep message channel open for async response
+  } else if (action === RUNTIME_MESSAGE_ACF.DOM_WATCHER_COMMAND) {
+    // Handle DOM watcher commands
+    try {
+      const domWatchManager = Actions.getDomWatchManager();
+
+      switch (command) {
+        case 'START':
+          domWatchManager.start();
+          break;
+        case 'STOP':
+          domWatchManager.stop();
+          break;
+        case 'PAUSE':
+          domWatchManager.pause();
+          break;
+        case 'RESUME':
+          domWatchManager.resume();
+          break;
+        case 'CLEAR':
+          domWatchManager.clear();
+          break;
+        default:
+          console.warn('Unknown DOM watcher command:', command);
+      }
+
+      sendResponse({ success: true });
+    } catch (e) {
+      console.error('Error handling DOM watcher command:', e);
+      sendResponse({ success: false, error: e.message });
+    }
+    return true; // Keep message channel open for async response
   }
 });