Update README and package.json for improved clarity and licensing

Reviewed-on: https://git.pyserve.org/Shifty/reels-master/pulls/1

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 10
 
       - name: Install dependencies
         run: pnpm install
@@ -39,28 +39,19 @@ jobs:
 
       - name: Update manifest version
         run: |
-          # Update version in manifest.json
+          VERSION=${{ steps.version.outputs.VERSION }}
-          sed -i 's/"version": "[^"]*"/"version": "${{ steps.version.outputs.VERSION }}"/' src/manifest.json
+          sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$VERSION\"/" src/manifest.chrome.json
-          echo "Updated manifest.json:"
+          sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$VERSION\"/" src/manifest.firefox.json
-          cat src/manifest.json
+          echo "Updated manifest.chrome.json:"
+          cat src/manifest.chrome.json
+          echo "Updated manifest.firefox.json:"
+          cat src/manifest.firefox.json
 
-      - name: Build extension
+      - name: Build Chrome extension
-        run: pnpm build
+        run: pnpm build:chrome
 
-      - name: Create release zip
+      - name: Build Firefox extension
-        run: |
+        run: pnpm build:firefox
-          # Create "Reels Master" directory with dist contents
-          mkdir -p "release/Reels Master"
-          cp -r dist/* "release/Reels Master/"
-          
-          # Create zip file
-          cd release
-          zip -r ../ReelsMaster.zip "Reels Master"
-          cd ..
-          
-          # Show zip contents
-          echo "Zip contents:"
-          unzip -l ReelsMaster.zip
 
       - name: Create Release Draft
         uses: softprops/action-gh-release@v1
@@ -68,7 +59,9 @@ jobs:
           draft: true
           name: Reels Master v${{ steps.version.outputs.VERSION }}
           tag_name: ${{ github.ref_name }}
-          files: ReelsMaster.zip
+          files: |
+            reels-master-chrome.zip
+            reels-master-firefox.zip
           generate_release_notes: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,49 +1,75 @@
 # Reels Master
 
-Chrome расширение для улучшенного просмотра Instagram Reels с управлением громкостью и загрузкой видео.
+A browser extension for enhanced Instagram Reels experience with volume control, video downloading, and seeking.
 
-## Возможности
+## Features
 
-- **Управление громкостью** - Вертикальный слайдер для точной настройки громкости видео
+- **Volume control** — Vertical slider for precise video volume adjustment
-- **Загрузка роликов** - Скачивайте рилсы одним кликом
+- **Download reels** — Save reels to your device with a single click
+- **Video seeking** — Scrub through a reel with a progress bar — no need to rewatch from the beginning if you missed something
 
-## Установка
+## Installation
 
-### Разработка
+### Chrome
+
+1. Download the latest `reels-master-chrome.zip` from [GitHub Releases](https://github.com/ShiftyX1/reels-master/releases)
+2. Unzip the archive
+3. Open Chrome and go to `chrome://extensions/`
+4. Enable **Developer mode** in the top-right corner
+5. Click **Load unpacked** and select the unzipped folder
+
+### Firefox
+
+1. Download the latest `reels-master-firefox.zip` from [GitHub Releases](https://github.com/ShiftyX1/reels-master/releases)
+2. Open Firefox and go to `about:addons`
+3. Click the gear icon → **Install Add-on From File...**
+4. Select the downloaded `.zip` file
 
 > [!NOTE]
-> В будущем будет выложено в Chrome Web Store. Пока что установка только вручную.
+> The extension will be published to the Chrome Web Store and Firefox Add-ons (AMO) in the future. Manual installation only for now.
 
-1. Установите зависимости:
+## Development
+
+1. Install dependencies:
 ```bash
 pnpm install
 ```
 
-2. Соберите расширение:
+2. Build the extension:
 ```bash
-pnpm run build
+# Both browsers
+pnpm build
+
+# Chrome only
+pnpm build:chrome
+
+# Firefox only
+pnpm build:firefox
 ```
 
-3. Загрузите расширение в Chrome:
+3. Load in browser:
-   - Откройте `chrome://extensions/`
+   - **Chrome:** open `chrome://extensions/`, enable Developer mode, click **Load unpacked**, select the `dist/` folder
-   - Включите "Режим разработчика" (Developer mode)
+   - **Firefox:** open `about:debugging#/runtime/this-firefox`, click **Load Temporary Add-on**, select any file inside `dist/`
-   - Нажмите "Загрузить распакованное расширение" (Load unpacked)
-   - Выберите папку `dist`
 
-### Режим разработки с hot-reload
+### Watch mode
 
 ```bash
-pnpm run dev
+# Chrome
+pnpm dev
+
+# Firefox
+pnpm dev:firefox
 ```
 
-## Использование
+## Usage
 
-1. Откройте Instagram и перейдите к любому рилсу
+1. Open Instagram and navigate to any reel
-2. Справа от видео, рядом с кнопками лайка и комментариев, появятся новые элементы управления:
+2. New controls will appear next to the like and comment buttons:
-   - **Кнопка громкости** - Нажмите для включения/выключения звука
+   - **Mute button** — toggle audio on/off
-   - **Слайдер громкости** - Перетащите для регулировки уровня громкости (0-100%)
+   - **Volume slider** — drag to adjust volume (0–100%)
-   - **Кнопка загрузки** - Нажмите для скачивания текущего рилса
+   - **Download button** — click to save the current reel
+3. A **progress bar** with current time and duration is shown in the video overlay for seeking
 
-## Лицензия
+## License
 
-ISC
+MIT

package.json

@@ -1,17 +1,20 @@
 {
   "name": "reels-master",
-  "version": "1.0.0",
+  "version": "1.2.2",
   "description": "Chrome extension for Instagram Reels with volume control and download functionality",
   "main": "index.js",
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "BROWSER=chrome BUILD_ENTRY=background vite build && BROWSER=chrome BUILD_ENTRY=content vite build --watch",
-    "build": "vite build",
+    "dev:firefox": "BROWSER=firefox BUILD_ENTRY=background vite build && BROWSER=firefox BUILD_ENTRY=content vite build --watch",
+    "build": "pnpm build:chrome && pnpm build:firefox",
+    "build:chrome": "BROWSER=chrome BUILD_ENTRY=background vite build && BROWSER=chrome BUILD_ENTRY=content vite build",
+    "build:firefox": "BROWSER=firefox BUILD_ENTRY=background vite build && BROWSER=firefox BUILD_ENTRY=content vite build",
     "bundle": "vite build && node scripts/bundle.js",
     "type-check": "tsc --noEmit"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "packageManager": "pnpm@10.15.0",
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",

src/background/service-worker.ts

@@ -1,4 +1,6 @@
 // Background Service Worker for Reels Master
+import browser from 'webextension-polyfill';
+
 console.log('Reels Master: Background service worker loaded');
 
 const ENCODING_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
@@ -19,16 +21,14 @@ function extractShortcode(url: string): string | null {
   return match ? match[1] : null;
 }
 
-chrome.runtime.onInstalled.addListener(() => {
+browser.runtime.onInstalled.addListener(() => {
   console.log('Reels Master: Extension installed');
 });
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((message: unknown) => {
-  if (message.type === 'DOWNLOAD_REEL') {
+  const msg = message as { type: string; url: string };
-    handleDownload(message.url)
+  if (msg.type === 'DOWNLOAD_REEL') {
-      .then(result => sendResponse(result))
+    return handleDownload(msg.url);
-      .catch(error => sendResponse({ success: false, error: error.message }));
-    return true;
   }
 });
 
@@ -79,7 +79,7 @@ async function handleDownload(reelUrl: string): Promise<{ success: boolean; down
 
     console.log('Reels Master: Found video URL, starting download');
 
-    await chrome.downloads.download({
+    await browser.downloads.download({
       url: videoUrl,
       filename: `reel_${shortcode}_${Date.now()}.mp4`,
     });
@@ -132,7 +132,7 @@ async function tryGraphQLFallback(shortcode: string, headers: Record<string, str
       return { success: false, error: 'No video URL found in response' };
     }
 
-    await chrome.downloads.download({
+    await browser.downloads.download({
       url: videoUrl,
       filename: `reel_${shortcode}_${Date.now()}.mp4`,
     });

src/content/content.css

@@ -207,3 +207,77 @@
 .reels-master-spinner {
   animation: spin 1s linear infinite;
 }
+
+/* Seeking Control - для overlay контейнера */
+.reels-master-seeking {
+  width: 100%;
+  padding: 8px 16px 12px 16px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: auto;
+  cursor: default;
+}
+
+.reels-master-seeking-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  outline: none;
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.reels-master-seeking-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: white;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  transition: all 0.2s;
+}
+
+.reels-master-seeking-slider::-webkit-slider-thumb:hover {
+  background: #f0f0f0;
+  transform: scale(1.3);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+}
+
+.reels-master-seeking-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: white;
+  cursor: pointer;
+  border-radius: 50%;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  transition: all 0.2s;
+}
+
+.reels-master-seeking-slider::-moz-range-thumb:hover {
+  background: #f0f0f0;
+  transform: scale(1.3);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+}
+
+.reels-master-time-display {
+  display: flex;
+  justify-content: space-between;
+  color: white;
+  font-size: 11px;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  user-select: none;
+  opacity: 0.9;
+  pointer-events: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}

src/content/content.ts

@@ -1,4 +1,5 @@
 import './content.css';
+import browser from 'webextension-polyfill';
 
 console.log('Reels Master: Content script loaded');
 
@@ -8,6 +9,8 @@ class ReelsMaster {
   private processedContainers: WeakSet<HTMLElement> = new WeakSet();
   private videoVolumeListeners: WeakMap<HTMLVideoElement, boolean> = new WeakMap();
   private domObserver: MutationObserver | null = null;
+  private processedOverlays: WeakSet<HTMLElement> = new WeakSet();
+  private videoSeekingListeners: WeakMap<HTMLVideoElement, Set<HTMLInputElement>> = new WeakMap();
 
   constructor() {
     this.init();
@@ -25,33 +28,29 @@ class ReelsMaster {
     }
   }
 
-  private loadSettings(): void {
+  private async loadSettings(): Promise<void> {
-    if (typeof chrome !== 'undefined' && chrome.storage?.local) {
+    const result = await browser.storage.local.get(['volume', 'muted']);
-      chrome.storage.local.get(['volume', 'muted'], (result) => {
+    if (result.volume !== undefined) {
-        if (result.volume !== undefined) {
+      this.storedVolume = result.volume as number;
-          this.storedVolume = result.volume;
-        }
-        if (result.muted !== undefined) {
-          this.storedMuted = result.muted;
-        }
-        this.applyVolumeToAllVideos();
-        this.updateAllSliders();
-      });
     }
+    if (result.muted !== undefined) {
+      this.storedMuted = result.muted as boolean;
+    }
+    this.applyVolumeToAllVideos();
+    this.updateAllSliders();
   }
 
   private saveSettings(): void {
-    if (typeof chrome !== 'undefined' && chrome.storage?.local) {
+    browser.storage.local.set({
-      chrome.storage.local.set({
+      volume: this.storedVolume,
-        volume: this.storedVolume,
+      muted: this.storedMuted
-        muted: this.storedMuted
+    });
-      });
-    }
   }
 
   private start(): void {
     console.log('Reels Master: Starting...');
     this.injectControlsToAllContainers();
+    this.injectSeekingToAllOverlays();
     this.setupDOMObserver();
   }
 
@@ -133,6 +132,7 @@ class ReelsMaster {
       if (shouldCheck) {
         requestAnimationFrame(() => {
           this.injectControlsToAllContainers();
+          this.injectSeekingToAllOverlays();
         });
       }
     });
@@ -195,6 +195,37 @@ class ReelsMaster {
     'svg[aria-label="保存"]',
   ].join(',');
 
+  private readonly FOLLOW_TEXTS = [
+    'Follow',
+    'Подписаться',
+    'Seguir',
+    'Suivre',
+    'Folgen',
+    'Following',
+    'Подписки',
+    'Siguiendo',
+    'Abonné(e)',
+    'Gefolgt',
+    'Requested',
+    'Запрос отправлен',
+    'Solicitado',
+    'Demandé',
+    'Anfrage gesendet',
+    'フォローする',
+    '关注',
+  ];
+
+  private readonly AVATAR_SELECTORS = [
+    'img[alt*="profile picture"]',
+    'img[alt*="Фото профиля"]',
+    'img[alt*="фото профиля"]',
+    'img[alt*="Foto de perfil"]',
+    'img[alt*="Photo de profil"]',
+    'img[alt*="Profilbild"]',
+    'img[alt*="プロフィール写真"]',
+    'img[alt*="头像"]',
+  ].join(',');
+    
   private findAllActionContainers(): HTMLElement[] {
     const containers: HTMLElement[] = [];
     
@@ -424,10 +455,10 @@ class ReelsMaster {
 
       console.log('Reels Master: Sending download request to background for', reelUrl);
 
-      const response = await chrome.runtime.sendMessage({
+      const response = await browser.runtime.sendMessage({
         type: 'DOWNLOAD_REEL',
         url: reelUrl
-      });
+      }) as { success: boolean; error?: string };
 
       console.log('Reels Master: Background response', response);
 
@@ -460,6 +491,182 @@ class ReelsMaster {
       `;
     }
   }
-}
+  private injectSeekingToAllOverlays(): void {
+    if (!window.location.pathname.includes('/reels/')) return;
+
+    const overlayContainers = this.findAllOverlayContainers();
+    console.log(`Reels Master: Found ${overlayContainers.length} overlay containers`);
+
+    for (const container of overlayContainers) {
+      this.injectSeekingToOverlay(container);
+    }
+  }
+
+  private findAllOverlayContainers(): HTMLElement[] {
+    const containers: HTMLElement[] = [];
+    
+    const followButtons = document.querySelectorAll('[role="button"]');
+    
+    for (const button of followButtons) {
+      const text = button.textContent?.trim();
+      if (text && this.FOLLOW_TEXTS.includes(text)) {
+        let parent = button.parentElement;
+        let depth = 0;
+        const maxDepth = 15;
+        
+        while (parent && depth < maxDepth) {
+          const hasAvatar = parent.querySelector(this.AVATAR_SELECTORS);
+          const hasFollow = parent.querySelector('[role="button"]');
+          
+          if (hasAvatar && hasFollow && parent.children.length >= 2) {
+            if (!containers.includes(parent as HTMLElement)) {
+              containers.push(parent as HTMLElement);
+            }
+            break;
+          }
+          
+          parent = parent.parentElement;
+          depth++;
+        }
+      }
+    }
+    
+    return containers;
+  }
+
+  private injectSeekingToOverlay(overlayContainer: HTMLElement): void {
+    if (this.processedOverlays.has(overlayContainer)) {
+      return;
+    }
+
+    if (overlayContainer.querySelector('.reels-master-seeking')) {
+      this.processedOverlays.add(overlayContainer);
+      return;
+    }
+
+    const video = this.findVideoForOverlay(overlayContainer);
+    if (!video) {
+      console.log('Reels Master: Video not found for overlay');
+      return;
+    }
+
+    const seekingControl = this.createSeekingControl(video);
+    overlayContainer.appendChild(seekingControl);
+    
+    this.processedOverlays.add(overlayContainer);
+    console.log('Reels Master: Seeking control injected to overlay');
+  }
+
+  private findVideoForOverlay(overlayContainer: HTMLElement): HTMLVideoElement | null {
+    let parent = overlayContainer.parentElement;
+    
+    while (parent) {
+      const video = parent.querySelector('video');
+      if (video) {
+        return video;
+      }
+      parent = parent.parentElement;
+      
+      if (parent === document.body) break;
+    }
+    
+    return this.getClosestVideoToElement(overlayContainer);
+  }
+
+  private createSeekingControl(video: HTMLVideoElement): HTMLDivElement {
+    const seekingContainer = document.createElement('div');
+    seekingContainer.className = 'reels-master-seeking';
+
+    seekingContainer.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+    seekingContainer.addEventListener('mousedown', (e) => {
+      e.stopPropagation();
+    });
+    seekingContainer.addEventListener('touchstart', (e) => {
+      e.stopPropagation();
+    });
+
+    const timeDisplay = document.createElement('div');
+    timeDisplay.className = 'reels-master-time-display';
+    
+    const currentTimeSpan = document.createElement('span');
+    currentTimeSpan.textContent = '0:00';
+    
+    const durationSpan = document.createElement('span');
+    durationSpan.textContent = '0:00';
+    
+    timeDisplay.appendChild(currentTimeSpan);
+    timeDisplay.appendChild(durationSpan);
+
+    const slider = document.createElement('input');
+    slider.type = 'range';
+    slider.min = '0';
+    slider.max = '100';
+    slider.value = '0';
+    slider.className = 'reels-master-seeking-slider';
+
+    slider.addEventListener('click', (e) => e.stopPropagation());
+    slider.addEventListener('mousedown', (e) => e.stopPropagation());
+    slider.addEventListener('mouseup', (e) => e.stopPropagation());
+    slider.addEventListener('touchstart', (e) => e.stopPropagation());
+    slider.addEventListener('touchend', (e) => e.stopPropagation());
+    slider.addEventListener('touchmove', (e) => e.stopPropagation());
+
+    const updateDuration = () => {
+      if (video.duration && !isNaN(video.duration) && video.duration !== Infinity) {
+        slider.max = String(video.duration);
+        durationSpan.textContent = this.formatTime(video.duration);
+      }
+    };
+
+    const updateTime = () => {
+      if (!isNaN(video.duration) && video.duration !== Infinity) {
+        slider.value = String(video.currentTime);
+        currentTimeSpan.textContent = this.formatTime(video.currentTime);
+      }
+    };
+
+    video.addEventListener('loadedmetadata', updateDuration);
+    video.addEventListener('durationchange', updateDuration);
+    video.addEventListener('timeupdate', updateTime);
+
+    updateDuration();
+    updateTime();
+
+    let isSeeking = false;
+    
+    slider.addEventListener('input', (e) => {
+      const time = parseFloat((e.target as HTMLInputElement).value);
+      currentTimeSpan.textContent = this.formatTime(time);
+      isSeeking = true;
+    });
+
+    slider.addEventListener('change', (e) => {
+      const time = parseFloat((e.target as HTMLInputElement).value);
+      video.currentTime = time;
+      isSeeking = false;
+    });
+
+    if (!this.videoSeekingListeners.has(video)) {
+      this.videoSeekingListeners.set(video, new Set());
+    }
+    this.videoSeekingListeners.get(video)!.add(slider);
+
+    seekingContainer.appendChild(timeDisplay);
+    seekingContainer.appendChild(slider);
+
+    return seekingContainer;
+  }
+
+  private formatTime(seconds: number): string {
+    if (isNaN(seconds) || seconds === Infinity) {
+      return '0:00';
+    }
+    
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }}
 
 new ReelsMaster();

src/manifest.chrome.json

@@ -1,8 +1,8 @@
 {
     "manifest_version": 3,
     "name": "Reels Master",
-    "version": "1.0.0",
+    "version": "1.2.2",
-    "description": "Instagram Reels volume control and download",
+    "description": "Enhance your Instagram experience with Reels Master - download reels, seek through videos, and more!",
     "background": {
       "service_worker": "background/background.js"
     },

src/manifest.firefox.json

@@ -0,0 +1,30 @@
+{
+    "manifest_version": 3,
+    "name": "Reels Master",
+    "version": "1.2.2",
+    "description": "Enhance your Instagram experience with Reels Master - download reels, seek through videos, and more!",
+    "background": {
+      "scripts": ["background/background.js"]
+    },
+    "homepage_url": "https://shiftyspace.ru",
+    "author": "ShiftyX1",
+    "content_scripts": [
+      {
+        "matches": ["*://*.instagram.com/*"],
+        "js": ["content/content.js"],
+        "css": ["assets/content.css"],
+        "run_at": "document_end"
+      }
+    ],
+    "permissions": ["storage", "downloads"],
+    "host_permissions": ["*://*.instagram.com/*", "*://*.cdninstagram.com/*", "https://i.instagram.com/*", "*://*.fbcdn.net/*"],
+    "browser_specific_settings": {
+      "gecko": {
+        "id": "reels-master@shiftyspace.ru",
+        "strict_min_version": "140.0",
+        "data_collection_permissions": {
+          "required": ["none"]
+        }
+      }
+    }
+}

tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"target": "ES2020",
 		"module": "ESNext",
-		"lib": ["ES2020", "DOM"],
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
 		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"esModuleInterop": true,
@@ -12,7 +12,7 @@
 		"strict": true,
 		"noEmit": true,
 		"isolatedModules": true,
-		"types": ["chrome", "node"]
+		"types": ["webextension-polyfill", "node"]
 	},
 	"include": ["src/**/*", "vite.config.ts"],
 	"exclude": ["node_modules", "dist"]

vite.config.ts

@@ -3,15 +3,29 @@ import { resolve } from 'path';
 import { copyFileSync, existsSync } from 'fs';
 import AdmZip from 'adm-zip';
 
+const browser = process.env.BROWSER || 'chrome';
+
+const buildEntry = process.env.BUILD_ENTRY; // 'background' | 'content' | undefined (both)
+
+const inputs =
+  buildEntry === 'background'
+    ? { background: resolve(__dirname, 'src/background/service-worker.ts') }
+    : buildEntry === 'content'
+    ? { content: resolve(__dirname, 'src/content/content.ts') }
+    : {
+        background: resolve(__dirname, 'src/background/service-worker.ts'),
+        content: resolve(__dirname, 'src/content/content.ts'),
+      };
+
+const shouldEmptyOutDir = buildEntry !== 'content';
+const isFinalPass = buildEntry !== 'background';
+
 export default defineConfig({
   build: {
     outDir: 'dist',
-    emptyOutDir: true,
+    emptyOutDir: shouldEmptyOutDir,
     rollupOptions: {
-      input: {
+      input: inputs,
-        background: resolve(__dirname, 'src/background/service-worker.ts'),
-        content: resolve(__dirname, 'src/content/content.ts'),
-      },
       output: {
         entryFileNames: '[name]/[name].js',
         chunkFileNames: '[name].js',
@@ -23,12 +37,13 @@ export default defineConfig({
     {
       name: 'copy-manifest',
       closeBundle() {
+        if (!isFinalPass) return;
         try {
           copyFileSync(
-            resolve(__dirname, 'src/manifest.json'),
+            resolve(__dirname, `src/manifest.${browser}.json`),
             resolve(__dirname, 'dist/manifest.json')
           );
-          console.log('✓ Copied manifest.json');
+          console.log(`✓ Copied manifest.${browser}.json`);
         } catch (err) {
           console.error('Error copying manifest.json:', err);
         }
@@ -37,6 +52,7 @@ export default defineConfig({
     {
       name: 'create-zip',
       closeBundle() {
+        if (!isFinalPass) return;
         if (process.env.NODE_ENV === 'production' || !process.argv.includes('--watch')) {
           try {
             const zip = new AdmZip();
@@ -44,8 +60,8 @@ export default defineConfig({
             
             if (existsSync(distPath)) {
               zip.addLocalFolder(distPath);
-              zip.writeZip(resolve(__dirname, 'reels-master.zip'));
+              zip.writeZip(resolve(__dirname, `reels-master-${browser}.zip`));
-              console.log('Created reels-master.zip');
+              console.log(`Created reels-master-${browser}.zip`);
             }
           } catch (err) {
             console.error('Error creating zip:', err);