Move observers to dedicated file

- Move all observers to dedicated observer.ts file
- Improve code organization by centralizing observer logic
- Make the codebase more maintainable and easier to navigate

This separates concerns by having all DOM observation logic in one place, following the single responsibility principle.

src/content/audioTranslation/audioIndex.ts

@@ -26,26 +26,4 @@ async function handleAudioTranslation() {
     const script = document.createElement('script');
     script.src = browser.runtime.getURL('dist/content/audioTranslation/audioScript.js');
     document.documentElement.appendChild(script);
-}
-
-let audioObserver: MutationObserver | null = null;
-
-function setupAudioObserver() {
-    waitForElement('ytd-watch-flexy').then((watchFlexy) => {
-        audioObserver = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'video-id') {
-                    // Wait for movie_player before injecting script
-                    waitForElement('#movie_player').then(() => {
-                        handleAudioTranslation();
-                    });
-                }
-            }
-        });
-
-        audioObserver.observe(watchFlexy, {
-            attributes: true,
-            attributeFilter: ['video-id']
-        });
-    });
-}
+}

src/content/descriptionTranslation/descriptionIndex.ts

@@ -143,61 +143,3 @@ async function refreshDescription(): Promise<void> {
     }
 }
 
-function setupDescriptionObserver() {
-    // Observer for video changes via URL
-    waitForElement('ytd-watch-flexy').then((watchFlexy) => {
-        descriptionLog('Setting up video-id observer');
-        const observer = new MutationObserver(async (mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'video-id') {
-                    descriptionLog('Video ID changed!');
-                    descriptionCache.clearCurrentDescription();  // Clear cache on video change
-                    waitForElement('#description-inline-expander').then(() => {
-                        refreshDescription();
-                    });
-                }
-            }
-        });
-
-        observer.observe(watchFlexy, {
-            attributes: true,
-            attributeFilter: ['video-id']
-        });
-    });
-
-    // Observer for description expansion/collapse
-    waitForElement('#description-inline-expander').then((descriptionElement) => {
-        descriptionLog('Setting up expand/collapse observer');
-        const observer = new MutationObserver(async (mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'is-expanded') {
-                    descriptionLog('Description expanded/collapsed');
-                    const cachedDescription = descriptionCache.getCurrentDescription();
-                    if (cachedDescription) {
-                        descriptionLog('Using cached description');
-                        updateDescriptionElement(descriptionElement as HTMLElement, cachedDescription);
-                    } else {
-                        const description = await new Promise<string | null>((resolve) => {
-                            const handleDescription = (event: CustomEvent) => {
-                                window.removeEventListener('ynt-description-data', handleDescription as EventListener);
-                                resolve(event.detail?.description || null);
-                            };
-                            window.addEventListener('ynt-description-data', handleDescription as EventListener);
-                            const script = document.createElement('script');
-                            script.src = browser.runtime.getURL('dist/content/descriptionTranslation/descriptionScript.js');
-                            document.documentElement.appendChild(script);
-                        });
-                        if (description) {
-                            updateDescriptionElement(descriptionElement as HTMLElement, description);
-                        }
-                    }
-                }
-            }
-        });
-
-        observer.observe(descriptionElement, {
-            attributes: true,
-            attributeFilter: ['is-expanded']
-        });
-    });
-}

src/content/index.ts

@@ -11,45 +11,51 @@
 
 coreLog('Content script starting to load...');
 
-// Initialize features
-browser.storage.local.get('settings').then((data: Record<string, any>) => {
-    const settings = data.settings as ExtensionSettings;
+let currentSettings: ExtensionSettings | null = null;
+
+// Fetch settings once and store them in currentSettings
+async function fetchSettings() {
+    const data = await browser.storage.local.get('settings');
+    currentSettings = data.settings as ExtensionSettings;
+};
+
+
+// Initialize features based on settings
+async function initializeFeatures() {
+    await fetchSettings();
 
-    if (settings?.titleTranslation) {
+    if (currentSettings?.titleTranslation) {
         initializeTitleTranslation();
         setupMainTitleObserver();
         setupOtherTitlesObserver();
         setupUrlObserver();
     }
-    if (settings?.audioTranslation) {
+    if (currentSettings?.audioTranslation) {
         initializeAudioTranslation();
         setupAudioObserver();
     }
-    if (settings?.descriptionTranslation) {
+    if (currentSettings?.descriptionTranslation) {
         initializeDescriptionTranslation();
         setupDescriptionObserver();
     }
-});
+}
 
-// Initialization
+// Initialize functions
 function initializeTitleTranslation() {
-    browser.storage.local.get('settings').then((data: Record<string, any>) => {
-        const settings = data.settings as ExtensionSettings;
-        if (settings?.titleTranslation) {
-            refreshMainTitle();
-            refreshOtherTitles();
-        }
-    });
+    titlesLog('Initializing title translation prevention');
+    if (currentSettings?.titleTranslation) {
+        refreshMainTitle();
+        refreshOtherTitles();
+    }
 }
 
 function initializeAudioTranslation() {
     audioLog('Initializing audio translation prevention');
 
     // Initial setup
-    browser.storage.local.get('settings').then((data: Record<string, any>) => {
-        const settings = data.settings as ExtensionSettings;
-        handleAudioTranslation();
-    });
+    if (currentSettings?.audioTranslation) {
+        handleAudioTranslation
+    }
 
     // Message handler
     browser.runtime.onMessage.addListener((message: unknown) => {
@@ -63,12 +69,9 @@ function initializeAudioTranslation() {
 function initializeDescriptionTranslation() {
     descriptionLog('Initializing description translation prevention');
 
-    browser.storage.local.get('settings').then((data: Record<string, any>) => {
-        const settings = data.settings as ExtensionSettings;
-        if (settings?.descriptionTranslation) {
-            refreshDescription();
-        }
-    });
+    if (currentSettings?.descriptionTranslation) {
+        refreshDescription();
+    }
 
     browser.runtime.onMessage.addListener((message: unknown) => {
         if (isToggleMessage(message) && message.feature === 'description') {
@@ -87,3 +90,7 @@ browser.runtime.onMessage.addListener((message: unknown) => {
     }
     return true;
 });
+
+
+// Start initialization
+initializeFeatures();