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,58 +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. Скачайте последнюю версию расширения из [релизов на GitHub](https://github.com/ShiftyX1/reels-master/releases)
+1. Download the latest `reels-master-chrome.zip` from [GitHub Releases](https://github.com/ShiftyX1/reels-master/releases)
-2. Распакуйте архив в удобное место на вашем компьютере
+2. Unzip the archive
-3. Откройте Chrome и перейдите на страницу расширений: `chrome://extensions/`
+3. Open Chrome and go to `chrome://extensions/`
-4. Включите "Режим разработчика" (Developer mode) в правом верхнем углу
+4. Enable **Developer mode** in the top-right corner
-5. Нажмите "Загрузить распакованное расширение" (Load unpacked)
+5. Click **Load unpacked** and select the unzipped folder
-6. Выберите папку `Reels Master` из распакованного архива
 
-### Разработка
+### 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.1.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.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 {
+  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 {
@@ -199,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[] = [];
     
@@ -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",
+    "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);