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,6 +6,7 @@ Chrome расширение для улучшенного просмотра Ins
 
 - **Управление громкостью** - Вертикальный слайдер для точной настройки громкости видео
 - **Загрузка роликов** - Скачивайте рилсы одним кликом
+- **Перемотка видео** - Используйте слайдер для перемотки рилса, если пропустили интересный момент, больше не придется пересматривать всё видео!
 
 ## Установка
 

package.json

@@ -1,11 +1,14 @@
 {
   "name": "reels-master",
-  "version": "1.1.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.ts

@@ -1,4 +1,5 @@
 import './content.css';
+import browser from 'webextension-polyfill';
 
 console.log('Reels Master: Content script loaded');
 
@@ -27,28 +28,23 @@ 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 {
@@ -198,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[] = [];
@@ -428,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);
 
@@ -481,13 +508,14 @@ class ReelsMaster {
     const followButtons = document.querySelectorAll('[role="button"]');
     
     for (const button of followButtons) {
-      if (button.textContent?.trim() === 'Follow') {
+      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('img[alt*="profile picture"]');
+          const hasAvatar = parent.querySelector(this.AVATAR_SELECTORS);
           const hasFollow = parent.querySelector('[role="button"]');
           
           if (hasAvatar && hasFollow && parent.children.length >= 2) {

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);