refactor: centralize settings and add background initialization

- Add background script to initialize settings on install
- Centralize default settings in constants.ts
- Move ExtensionSettings interface to types.ts
- Update TypeScript configurations for better organization
- Ensure extension works without opening popup first

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "No More Translations",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A firefox extension that prevents auto-translation on YouTube (titles, dubbing)",
 
   "icons": {
@@ -29,5 +29,9 @@
       "matches": ["*://*.youtube.com/*"],
       "js": ["dist/browser-polyfill.js", "dist/content/content.js"]
     }
-  ]
+  ],
+
+  "background": {
+    "scripts": ["dist/background/background.js"]
+  }
 }

package.json

@@ -1,13 +1,14 @@
 {
   "name": "nmt",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A firefox extension that prevents auto-translation on YouTube (titles, dubbing)",
   "scripts": {
     "clean": "rimraf dist/*",
-    "create-dirs": "mkdir -p dist/popup dist/content dist/styles",
-    "build": "npm run clean && npm run create-dirs && npm run build:content && npm run build:popup && npm run build:css && npm run build:html && npm run build:polyfill",
+    "create-dirs": "mkdir -p dist/popup dist/content dist/background dist/styles",
+    "build": "npm run clean && npm run create-dirs && npm run build:content && npm run build:popup && npm run build:background && npm run build:css && npm run build:html && npm run build:polyfill",
     "build:content": "tsc -p tsconfig.content.json",
     "build:popup": "tsc -p tsconfig.popup.json",
+    "build:background": "tsc -p tsconfig.background.json",
     "build:css": "tailwindcss -i ./src/styles/main.css -o ./dist/styles/main.css",
     "build:html": "cp src/popup/popup.html dist/popup/",
     "build:polyfill": "cp node_modules/webextension-polyfill/dist/browser-polyfill.js dist/",

src/background/background.ts

@@ -0,0 +1,13 @@
+
+async function initializeSettings() {
+    const data = await browser.storage.local.get('settings');
+    if (!data.settings) {
+        await browser.storage.local.set({
+            settings: DEFAULT_SETTINGS
+        });
+        console.log('[NTM-Debug] Settings initialized with default values');
+    }
+}
+
+// Initialize settings when extension is installed or updated
+browser.runtime.onInstalled.addListener(initializeSettings);

src/config/constants.ts

@@ -0,0 +1,5 @@
+// Default settings as a constant
+const DEFAULT_SETTINGS: ExtensionSettings = {
+    titleTranslation: true,
+    audioTranslation: true
+};

src/content/audioTranslation.ts

@@ -91,8 +91,8 @@ function initializeAudioTranslation() {
 
     // Initial setup
     browser.storage.local.get('settings').then((data: Record<string, any>) => {
-        const isEnabled = data.settings?.audioTranslation ?? false;
-        handleAudioTranslation(isEnabled);
+        const settings = data.settings as ExtensionSettings;
+        handleAudioTranslation(settings?.audioTranslation || false);
     });
 
     // Message handler

src/content/titleTranslation.ts

@@ -114,8 +114,8 @@ function initializeTitleTranslation() {
 
     // Initial setup
     browser.storage.local.get('settings').then((data: Record<string, any>) => {
-        const isEnabled = data.settings?.titleTranslation ?? false;
-        handleTitleTranslation(isEnabled);
+        const settings = data.settings as ExtensionSettings;
+        handleTitleTranslation(settings?.titleTranslation || false);
     });
 
     // Message handler
@@ -166,8 +166,8 @@ function initializeTitleTranslation() {
         }
 
         browser.storage.local.get('settings').then((data: Record<string, any>) => {
-            const isEnabled = data.settings?.titleTranslation ?? false;
-            handleTitleTranslation(isEnabled).finally(() => {
+            const settings = data.settings as ExtensionSettings;
+            handleTitleTranslation(settings?.titleTranslation || false).finally(() => {
                 processingTitleMutation = false;
             });
         });

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.1</p>
+            <p class="text-xs text-gray-400">v1.1.2</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">

src/popup/popup.ts

@@ -1,6 +1,46 @@
 const titleToggle = document.getElementById('titleTranslation') as HTMLInputElement;
 const audioToggle = document.getElementById('audioTranslation') as HTMLInputElement;
 
+// Initialize settings if they don't exist
+async function initializeSettings() {
+    const data = await browser.storage.local.get('settings');
+    if (!data.settings) {
+        await browser.storage.local.set({
+            settings: DEFAULT_SETTINGS
+        });
+        console.log('[NTM-Debug] Settings initialized with default values');
+    }
+}
+
+// Initialize toggle states from storage
+document.addEventListener('DOMContentLoaded', async () => {
+    try {
+        // Ensure settings exist
+        await initializeSettings();
+
+        // Get settings
+        const data = await browser.storage.local.get('settings');
+        const settings = data.settings as ExtensionSettings;
+
+        // Set toggle states
+        titleToggle.checked = settings.titleTranslation;
+        audioToggle.checked = settings.audioTranslation;
+
+        console.log(
+            '[NTM-Debug] Settings loaded - Title translation prevention is: %c%s',
+            settings.titleTranslation ? 'color: green; font-weight: bold' : 'color: red; font-weight: bold',
+            settings.titleTranslation ? 'ON' : 'OFF'
+        );
+        console.log(
+            '[NTM-Debug] Settings loaded - Audio translation prevention is: %c%s',
+            settings.audioTranslation ? 'color: green; font-weight: bold' : 'color: red; font-weight: bold',
+            settings.audioTranslation ? 'ON' : 'OFF'
+        );
+    } catch (error) {
+        console.error('Load error:', error);
+    }
+});
+
 // Handle title toggle changes
 titleToggle.addEventListener('change', async () => {
     const isEnabled = titleToggle.checked;
@@ -65,33 +105,4 @@ audioToggle.addEventListener('change', async () => {
     } catch (error) {
         console.error('Audio update error:', error);
     }
-});
-
-// Initialize toggle states from storage
-document.addEventListener('DOMContentLoaded', async () => {
-    try {
-        const data = await browser.storage.local.get('settings');
-        const settings = data.settings as ExtensionSettings;
-
-        // Set title toggle state
-        const isTitleEnabled = settings?.titleTranslation ?? false;
-        titleToggle.checked = isTitleEnabled;
-
-        // Set audio toggle state
-        const isAudioEnabled = settings?.audioTranslation ?? false;
-        audioToggle.checked = isAudioEnabled;
-
-        console.log(
-            '[NTM-Debug] Settings loaded - Title translation prevention is: %c%s',
-            isTitleEnabled ? 'color: green; font-weight: bold' : 'color: red; font-weight: bold',
-            isTitleEnabled ? 'ON' : 'OFF'
-        );
-        console.log(
-            '[NTM-Debug] Settings loaded - Audio translation prevention is: %c%s',
-            isAudioEnabled ? 'color: green; font-weight: bold' : 'color: red; font-weight: bold',
-            isAudioEnabled ? 'ON' : 'OFF'
-        );
-    } catch (error) {
-        console.error('Load error:', error);
-    }
 });

src/types/global.d.ts

@@ -1,6 +1,2 @@
-declare const browser: typeof import('webextension-polyfill');
 
-interface ExtensionSettings {
-    titleTranslation: boolean;
-    audioTranslation: boolean;
-}
+declare const browser: typeof import('webextension-polyfill');

src/types/types.ts

@@ -22,4 +22,9 @@ interface AudioTrack {
 interface YouTubePlayer extends HTMLElement {
     getInternalApiInterface: () => string[];
     [key: string]: any;
+}
+
+interface ExtensionSettings {
+    titleTranslation: boolean;
+    audioTranslation: boolean;
 }

tsconfig.background.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "none",
+    "moduleResolution": "node",
+    "strict": true,
+    "outFile": "./dist/background/background.js",
+    "rootDir": "./src",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": false,
+    "noEmit": false,
+    "noEmitHelpers": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/types"
+    ],
+    "types": ["webextension-polyfill"]
+  },
+  "files": [
+    "src/types/global.d.ts",
+    "src/types/types.ts",
+    "src/config/constants.ts",
+    "src/background/background.ts"
+  ]
+}

tsconfig.content.json

@@ -20,9 +20,10 @@
   "files": [
     "src/types/types.ts",
     "src/types/global.d.ts",
+    "src/config/constants.ts",
     "src/content/utils.ts",
     "src/content/titleTranslation.ts",
     "src/content/audioTranslation.ts",
     "src/content/index.ts"
   ]
-}
+}

tsconfig.popup.json

@@ -18,7 +18,9 @@
     "types": ["webextension-polyfill"]
   },
   "files": [
-    "src/types/global.d.ts"
+    "src/types/global.d.ts",
+    "src/types/types.ts",
+    "src/config/constants.ts"
   ],
   "include": [
     "src/popup/**/*.ts"