feat: properly handle feature toggles in main observer

- Only create observer if at least one feature is enabled
- Cleanup observer when all features are disabled
- Check feature state before calling refresh functions

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "No More Translations",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A firefox extension that prevents auto-translation on YouTube (titles, dubbing)",
 
   "icons": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nmt",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A firefox extension that prevents auto-translation on YouTube (titles, dubbing)",
   "scripts": {
     "clean": "rimraf dist/*",

src/content/index.ts

@@ -3,30 +3,74 @@ console.log(
     'color: #f9a8d4; font-weight: bold;'
 );
 
-// Wait for ytd-watch-flexy to load then observe video-id changes
-waitForElement('ytd-watch-flexy').then((watchFlexy) => {
-    // Observe attribute changes on ytd-watch-flexy
-    const videoObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'video-id') {
-                console.log(
-                    '%c[NTM-Debug][Core] Video ID changed, reinitializing features...',
-                    'color: #f9a8d4; font-weight: bold;'
-                );
-
-                // Refresh features with current state
-                refreshTitleTranslation();
-                refreshAudioTranslation();
+let mainVideoObserver: MutationObserver | null = null;
+
+// Initialize features
+browser.storage.local.get('settings').then((data: Record<string, any>) => {
+    const settings = data.settings as ExtensionSettings;
+
+    if (settings?.titleTranslation) {
+        initializeTitleTranslation();
+    }
+    if (settings?.audioTranslation) {
+        initializeAudioTranslation();
+    }
+
+    // Only setup video-id observer if at least one feature is enabled
+    if (settings?.titleTranslation || settings?.audioTranslation) {
+        setupVideoIdObserver();
+    }
+});
+
+// Listen for toggle changes
+browser.runtime.onMessage.addListener((message: unknown) => {
+    if (isToggleMessage(message)) {
+        // Check if both features are now disabled
+        browser.storage.local.get('settings').then((data: Record<string, any>) => {
+            const settings = data.settings as ExtensionSettings;
+
+            if (!settings?.titleTranslation && !settings?.audioTranslation) {
+                // Cleanup main observer when all features are disabled
+                if (mainVideoObserver) {
+                    mainVideoObserver.disconnect();
+                    mainVideoObserver = null;
+                }
+            } else if (!mainVideoObserver) {
+                // Setup observer if it doesn't exist and at least one feature is enabled
+                setupVideoIdObserver();
             }
-        }
-    });
+        });
+    }
+    return true;
+});
 
-    // Only observe video-id attribute changes
-    videoObserver.observe(watchFlexy, {
-        attributes: true,
-        attributeFilter: ['video-id']
+function setupVideoIdObserver() {
+    waitForElement('ytd-watch-flexy').then((watchFlexy) => {
+        mainVideoObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'video-id') {
+                    // Check current state before refreshing features
+                    browser.storage.local.get('settings').then((data: Record<string, any>) => {
+                        const settings = data.settings as ExtensionSettings;
+
+                        if (settings?.titleTranslation) {
+                            refreshTitleTranslation();
+                        }
+                        if (settings?.audioTranslation) {
+                            initializeAudioTranslation();
+                        }
+                    });
+                }
+            }
+        });
+
+        // Only observe video-id attribute changes
+        mainVideoObserver.observe(watchFlexy, {
+            attributes: true,
+            attributeFilter: ['video-id']
+        });
     });
-});
+}
 
 // Function to wait for an element to be present in the DOM
 function waitForElement(selector: string, timeout = 5000): Promise<Element> {
@@ -53,7 +97,3 @@ function waitForElement(selector: string, timeout = 5000): Promise<Element> {
         }, timeout);
     });
 }
-
-// Initialize features
-initializeTitleTranslation();
-initializeAudioTranslation();

src/popup/popup.html

@@ -49,7 +49,7 @@ <h2 class="text-sm font-medium text-gray-900">Original Audio</h2>
             </div>
         </main>
         <footer class="pt-4 border-t border-gray-200 flex items-center justify-between">
-            <p class="text-xs text-gray-400">v1.1.2</p>
+            <p class="text-xs text-gray-400">v1.1.3</p>
             <div class="flex items-center gap-1 text-xs text-gray-400">
                 Created by YouGo
                 <a href="https://github.com/YouG-o" target="_blank" rel="noopener noreferrer">