Bump version to 1.2.1 and enhance build scripts for better Firefox compatibility

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
-          sed -i 's/"version": "[^"]*"/"version": "${{ steps.version.outputs.VERSION }}"/' src/manifest.json
-          echo "Updated manifest.json:"
-          cat src/manifest.json
+          VERSION=${{ steps.version.outputs.VERSION }}
+          sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$VERSION\"/" src/manifest.chrome.json
+          sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$VERSION\"/" src/manifest.firefox.json
+          echo "Updated manifest.chrome.json:"
+          cat src/manifest.chrome.json
+          echo "Updated manifest.firefox.json:"
+          cat src/manifest.firefox.json
 
-      - name: Build extension
-        run: pnpm build
+      - name: Build Chrome extension
+        run: pnpm build:chrome
 
-      - name: Create release zip
-        run: |
-          # 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: Build Firefox extension
+        run: pnpm build:firefox
 
       - 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

@@ -6,9 +6,19 @@ Chrome расширение для улучшенного просмотра Ins
 
 - **Управление громкостью** - Вертикальный слайдер для точной настройки громкости видео
 - **Загрузка роликов** - Скачивайте рилсы одним кликом
+- **Перемотка видео** - Используйте слайдер для перемотки рилса, если пропустили интересный момент, больше не придется пересматривать всё видео!
 
 ## Установка
 
+### Использование готового расширения
+
+1. Скачайте последнюю версию расширения из [релизов на GitHub](https://github.com/ShiftyX1/reels-master/releases)
+2. Распакуйте архив в удобное место на вашем компьютере
+3. Откройте Chrome и перейдите на страницу расширений: `chrome://extensions/`
+4. Включите "Режим разработчика" (Developer mode) в правом верхнем углу
+5. Нажмите "Загрузить распакованное расширение" (Load unpacked)
+6. Выберите папку `Reels Master` из распакованного архива
+
 ### Разработка
 
 > [!NOTE]

package.json

@@ -1,11 +1,14 @@
 {
   "name": "reels-master",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "description": "Chrome extension for Instagram Reels with volume control and download functionality",
   "main": "index.js",
   "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build",
+    "dev": "BROWSER=chrome BUILD_ENTRY=background vite build && BROWSER=chrome BUILD_ENTRY=content vite build --watch",
+    "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"
   },

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) => {
-  if (message.type === 'DOWNLOAD_REEL') {
-    handleDownload(message.url)
-      .then(result => sendResponse(result))
-      .catch(error => sendResponse({ success: false, error: error.message }));
-    return true;
+browser.runtime.onMessage.addListener((message: unknown) => {
+  const msg = message as { type: string; url: string };
+  if (msg.type === 'DOWNLOAD_REEL') {
+    return handleDownload(msg.url);
   }
 });
 
@@ -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 {
-    if (typeof chrome !== 'undefined' && chrome.storage?.local) {
-      chrome.storage.local.get(['volume', 'muted'], (result) => {
-        if (result.volume !== undefined) {
-          this.storedVolume = result.volume;
-        }
-        if (result.muted !== undefined) {
-          this.storedMuted = result.muted;
-        }
-        this.applyVolumeToAllVideos();
-        this.updateAllSliders();
-      });
+  private async loadSettings(): Promise<void> {
+    const result = await browser.storage.local.get(['volume', 'muted']);
+    if (result.volume !== undefined) {
+      this.storedVolume = result.volume as number;
     }
+    if (result.muted !== undefined) {
+      this.storedMuted = result.muted as boolean;
+    }
+    this.applyVolumeToAllVideos();
+    this.updateAllSliders();
   }
 
   private saveSettings(): void {
-    if (typeof chrome !== 'undefined' && chrome.storage?.local) {
-      chrome.storage.local.set({
-        volume: this.storedVolume,
-        muted: this.storedMuted
-      });
-    }
+    browser.storage.local.set({
+      volume: this.storedVolume,
+      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();
         });
       }
     });
@@ -194,6 +194,37 @@ class ReelsMaster {
     'svg[aria-label="Speichern"]',
     '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",
-    "description": "Instagram Reels volume control and download",
+    "version": "1.1.2",
+    "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,27 @@
+{
+    "manifest_version": 3,
+    "name": "Reels Master",
+    "version": "1.1.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": "121.0"
+      }
+    }
+}

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: {
-        background: resolve(__dirname, 'src/background/service-worker.ts'),
-        content: resolve(__dirname, 'src/content/content.ts'),
-      },
+      input: inputs,
       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'));
-              console.log('Created reels-master.zip');
+              zip.writeZip(resolve(__dirname, `reels-master-${browser}.zip`));
+              console.log(`Created reels-master-${browser}.zip`);
             }
           } catch (err) {
             console.error('Error creating zip:', err);