feat: add firefox support

.gitignore

@@ -1 +1,4 @@
 node_modules/
+.env
+dist/
+.DS_Store

README.md

@@ -91,6 +91,25 @@ Follow these steps to set up the project on your local machine.
 
 > **Note:** Changes to the source code will only reflect after you reload the extension on the `chrome://extensions/` page.
 
+### Building browser bundles
+
+There is a script `(scripts/build.js)` that generates the Chrome and Firefox bundles into the `dist/` folder.
+
+Run the build commands:
+
+```bash
+# build Chrome bundle
+npm run build:chrome
+
+# build Firefox bundle
+npm run build:firefox
+
+# build both Chrome and Firefox
+npm run build
+```
+
+The script will copy `icons/` and `src/` into `dist/<browser>/` and include the appropriate manifest (`manifest.chrome.json` or `manifest.firefox.json`) for each browser.
+
 ### Project Structure
 
 ```
@@ -101,10 +120,12 @@ track-my-course/
 │   ├── content/       # Injects scripts directly into web pages.
 │   ├── popup/         # Code for the extension's popup window.
 │   └── styles/        # Contains CSS files for UI elements injected onto pages.
+├── manifests/         # Browser-specific manifests
+│   ├── manifest.chrome.json
+│   └── manifest.firefox.json
 ├── .prettierrc        # Prettier configuration for consistent formatting
 ├── package.json       # Project dependencies and scripts
-├── package-lock.json  # Locked dependency versions
-└── manifest.json      # Chrome extension configuration file.
+└── package-lock.json  # Locked dependency versions
 ```
 
 ---

manifests/manifest.firefox.json

@@ -0,0 +1,51 @@
+{
+    "manifest_version": 3,
+    "name": "TrackMyCourse: YouTube Playlist Tracker",
+    "version": "1.2.0",
+    "description": "Turn YouTube playlists into courses. Track with checkmarks, progress bar, total and watched duration, and completion percentage.",
+    "icons": {
+        "16": "icons/logo_16.png",
+        "24": "icons/logo_24.png",
+        "32": "icons/logo_32.png",
+        "48": "icons/logo_48.png",
+        "128": "icons/logo_128.png"
+    },
+    "permissions": ["storage", "webNavigation"],
+    "host_permissions": ["https://www.youtube.com/*", "https://i.ytimg.com/*"],
+    "background": {
+        "scripts": ["src/background/background.js"]
+    },
+    "action": {
+        "default_popup": "src/popup/popup.html",
+        "default_icon": {
+            "16": "icons/logo_16.png",
+            "24": "icons/logo_24.png",
+            "32": "icons/logo_32.png",
+            "48": "icons/logo_48.png",
+            "128": "icons/logo_128.png"
+        }
+    },
+    "content_scripts": [
+        {
+            "js": ["src/content/toast.js", "src/content/content_script.js"],
+            "css": [
+                "src/styles/toast.css",
+                "src/styles/checkbox.css",
+                "src/styles/playlistPage.css",
+                "src/styles/playlistWatchPage.css",
+                "src/styles/focusMode.css"
+            ],
+            "matches": ["https://www.youtube.com/*"]
+        }
+    ],
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "trackmycourse@alok",
+            "strict_min_version": "110.0",
+            "data_collection_permissions": {
+                "required": ["websiteContent"],
+                "optional": []
+            }
+        }
+    }
+}

package.json

@@ -3,9 +3,14 @@
     "version": "1.0.0",
     "description": "Turn YouTube playlists into courses. Track your playlist with checkmarks, progress bar, total and watched duration, and completion percentage.",
     "scripts": {
-        "format": "prettier --write ."
+        "format": "prettier --write .",
+        "build:chrome": "cross-env TARGET_BROWSER=chrome node scripts/build.js",
+        "build:firefox": "cross-env TARGET_BROWSER=firefox node scripts/build.js",
+        "build": "node scripts/build.js"
     },
     "devDependencies": {
+        "cross-env": "^10.1.0",
+        "fs-extra": "^11.3.2",
         "prettier": "^3.6.2"
     }
 }

scripts/build.js

@@ -0,0 +1,24 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+// Get target browser from env variable, or build both if not set
+const target = process.env.TARGET_BROWSER; // "chrome" or "firefox"
+const browsers = target ? [target] : ["chrome", "firefox"];
+
+browsers.forEach((browser) => {
+    const distPath = path.join("dist", browser);
+
+    // 1. Clean destination folder
+    fs.emptyDirSync(distPath);
+
+    // 2. Copy required directories
+    fs.copySync("src", path.join(distPath, "src"));
+    fs.copySync("icons", path.join(distPath, "icons"));
+
+    // 3. Copy the correct manifest
+    const manifestSrc = path.join("manifests", `manifest.${browser}.json`);
+    const manifestDest = path.join(distPath, "manifest.json");
+    fs.copyFileSync(manifestSrc, manifestDest);
+
+    console.log(`✅ ${browser} build created at ${distPath}`);
+});