Distribute signed firefox xpi addon

.github/workflows/build.yml

@@ -43,14 +43,17 @@ jobs:
       - name: Run tests
         run: pnpm test
 
+      - name: Package Chrome extension
+        run: pnpx tsx ./apps/extension/scripts/package-chrome.ts
+
       - name: Upload Chrome extension
         uses: actions/upload-artifact@v4
         with:
           name: chrome-extension-file
-          path: ./apps/extension/chrome-build/bypass-links-*.zip
+          path: ./apps/extension/build/chrome-bypass-links-*.zip
 
       - name: Upload Firefox extension
         uses: actions/upload-artifact@v4
         with:
-          name: firefox-extension-file
-          path: ./apps/extension/firefox-build/bypass-links-*.zip
+          name: firefox-extension-folder
+          path: ./apps/extension/firefox-build/

.github/workflows/release.yml

@@ -32,17 +32,13 @@ jobs:
       - name: Building Extension
         run: pnpm build --filter=@bypass/extension
 
-      - name: Uploading Chrome extension
+      - name: Uploading extensions
         uses: actions/upload-artifact@v4
         with:
-          name: chrome-extension-folder
-          path: ./apps/extension/chrome-build
-
-      - name: Uploading Firefox extension
-        uses: actions/upload-artifact@v4
-        with:
-          name: firefox-extension-folder
-          path: ./apps/extension/firefox-build
+          name: extensions-folder
+          path: |
+            ./apps/extension/chrome-build
+            ./apps/extension/fireofx-build
 
       - name: Deploy Preview (Vercel)
         uses: amondnet/vercel-action@v25
@@ -83,11 +79,11 @@ jobs:
           key: cache-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: cache-playwright-
 
-      - name: Download Chrome extension
+      - name: Download extensions
         uses: actions/download-artifact@v4
         with:
-          name: chrome-extension-folder
-          path: ./apps/extension/chrome-build
+          name: extensions-folder
+          path: ./apps/extension
 
       - name: Install dependencies
         run: pnpm install
@@ -115,6 +111,12 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Download extensions
+        uses: actions/download-artifact@v4
+        with:
+          name: extensions-folder
+          path: ./apps/extension
+
       - name: Start deployment
         uses: bobheadxi/[email protected]
         id: deployment
@@ -143,24 +145,32 @@ jobs:
           env_url: ${{ steps.vercel-action.outputs.preview-url }}
           env: ${{ steps.deployment.outputs.env }}
 
+      - name: Package extensions
+        run: |
+          pnpx tsx ./apps/extension/scripts/package-chrome.ts
+          pnpx tsx ./apps/extension/scripts/package-firefox.ts
+        env:
+          FIREFOX_API_KEY: ${{ secrets.FIREFOX_API_KEY }}
+          FIREFOX_API_SECRET: ${{ secrets.FIREFOX_API_SECRET }}
+
+      - name: Uploading packaged extensions
+        uses: actions/upload-artifact@v4
+        with:
+          name: packaged-extensions
+          path: ./apps/extension/build
+
   Create_Release:
     runs-on: ubuntu-latest
     needs: [Deploy]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Download Chrome extension
-        uses: actions/download-artifact@v4
-        with:
-          name: chrome-extension-folder
-          path: ./apps/extension/chrome-build/
-
-      - name: Download Firefox extension
+      - name: Download packaged extensions
         uses: actions/download-artifact@v4
         with:
-          name: firefox-extension-folder
-          path: ./apps/extension/firefox-build/
+          name: packaged-extensions
+          path: ./apps/extension
 
       - name: Generate Release Tag
         id: release_tag
@@ -170,17 +180,6 @@ jobs:
           tag_prefix: 'v'
           tag_template: 'yy.mm.i'
 
-      - name: Get Release Asset Name
-        id: asset_name
-        run: |
-          file=$(find ./apps/extension/chrome-build/bypass-links-*.zip  -printf "%f\n")
-          echo "asset_name=$file" >> $GITHUB_OUTPUT
-
-      - name: Rename assets
-        run: |
-          cp ./apps/extension/chrome-build/${{ steps.asset_name.outputs.asset_name }} ./apps/extension/chrome-build/chrome-${{ steps.asset_name.outputs.asset_name }}
-          cp ./apps/extension/firefox-build/${{ steps.asset_name.outputs.asset_name }} ./apps/extension/firefox-build/firefox-${{ steps.asset_name.outputs.asset_name }}
-
       - name: Create Release
         uses: softprops/action-gh-release@v2
         with:
@@ -189,5 +188,5 @@ jobs:
           token: ${{secrets.GITHUB_TOKEN}}
           generate_release_notes: true
           files: |
-            ./apps/extension/chrome-build/chrome-${{ steps.asset_name.outputs.asset_name }}
-            ./apps/extension/firefox-build/firefox-${{ steps.asset_name.outputs.asset_name }}
+            ./apps/extension/build/chrome-*.zip
+            ./apps/extension/build/firefox-*.xpi

.gitignore

@@ -7,5 +7,6 @@ test-results/
 playwright-report/
 **/tsconfig.tsbuildinfo
 apps/web/.next/
+apps/extension/build/
 apps/extension/chrome-build/
 apps/extension/firefox-build/

apps/extension/package.json

@@ -40,8 +40,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.49.1",
-    "@prefresh/core": "1.5.3",
-    "@prefresh/webpack": "4.0.1",
+    "@types/archiver": "6.0.3",
     "@types/chrome": "0.0.287",
     "@types/firefox-webext-browser": "120.0.4",
     "@types/md5": "2.3.5",
@@ -51,14 +50,14 @@
     "@types/react-avatar-editor": "13.0.3",
     "@types/react-dom": "19.0.2",
     "@types/webpack": "5.28.5",
+    "archiver": "7.0.1",
     "browserslist": "4.24.3",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "12.0.2",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "7.0.0",
     "eslint-webpack-plugin": "4.2.0",
-    "filemanager-webpack-plugin": "8.0.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "html-webpack-plugin": "5.6.3",
     "lightningcss": "1.28.2",
@@ -76,6 +75,7 @@
     "ts-node": "10.9.2",
     "tsconfig-paths-webpack-plugin": "4.2.0",
     "typescript": "5.7.2",
+    "web-ext": "8.3.0",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.0"

apps/extension/scripts/package-chrome.ts

@@ -0,0 +1,29 @@
+import fs from 'node:fs';
+import archiver from 'archiver';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import {
+  getExtVersion,
+  getFileNameFromVersion,
+} from '@bypass/configs/manifest/extensionFile';
+
+const fileName = fileURLToPath(import.meta.url);
+const dirName = path.dirname(fileName);
+const rootDir = path.join(dirName, '..');
+const inputDir = path.join(rootDir, 'chrome-build');
+const outDir = path.join(rootDir, 'build');
+
+fs.mkdirSync(outDir, { recursive: true }); // Ensure output directory exists
+
+const output = fs.createWriteStream(
+  path.join(outDir, `chrome-${getFileNameFromVersion(getExtVersion(), true)}`)
+);
+const archive = archiver('zip', { zlib: { level: 9 } });
+
+output.on('end', () => console.log('Chrome Extension packaged successfully'));
+
+archive.pipe(output);
+
+archive.directory(inputDir, false);
+
+archive.finalize();

apps/extension/scripts/package-firefox.ts

@@ -0,0 +1,35 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+// @ts-expect-error no types provided
+import webExt from 'web-ext';
+import fs from 'node:fs';
+import {
+  getExtVersion,
+  getFileNameFromVersion,
+} from '@bypass/configs/manifest/extensionFile';
+
+const fileName = fileURLToPath(import.meta.url);
+const dirName = path.dirname(fileName);
+const rootDir = path.join(dirName, '..');
+const inputDir = path.join(rootDir, 'firefox-build');
+const outDir = path.join(rootDir, 'build');
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const { downloadedFiles } = await webExt.cmd.sign({
+  amoBaseUrl: 'https://addons.mozilla.org/api/v5/',
+  apiKey: process.env['FIREFOX_API_KEY'],
+  apiSecret: process.env['FIREFOX_API_SECRET'],
+  sourceDir: inputDir,
+  artifactsDir: outDir,
+  channel: 'unlisted',
+});
+
+const xpiFilename = downloadedFiles[0] as string;
+
+fs.renameSync(
+  path.join(outDir, xpiFilename),
+  path.join(outDir, `firefox-${getFileNameFromVersion(getExtVersion(), false)}`)
+);
+
+console.log('Firefox Extension packaged successfully');

apps/extension/tsconfig.json

@@ -12,7 +12,7 @@
       "@store/*": ["./src/store/*"]
     }
   },
-  "include": ["@types", "src", "tests", "webpack.config.ts"],
+  "include": ["@types", "src", "tests", "webpack.config.ts", "scripts"],
   "exclude": ["chrome-build", "firefox-build", "node_modules", ".turbo"],
   //Required for webpack config in typescript
   "ts-node": {

apps/extension/webpack.config.ts

@@ -1,13 +1,7 @@
-import {
-  getExtVersion,
-  getFileNameFromVersion,
-} from '@bypass/configs/manifest/extensionFile.js';
-import PreactRefreshPlugin from '@prefresh/webpack';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
-import FileManagerPlugin from 'filemanager-webpack-plugin';
+// import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MergeJsonWebpackPlugin from 'merge-jsons-webpack-plugin';
@@ -272,40 +266,14 @@ const config: Configuration = {
         root: PATHS.ROOT,
       },
     }),
-    !isProduction && new PreactRefreshPlugin(),
-    new ESLintPlugin({
-      extensions: ['ts', 'tsx'],
-      cache: !isProduction,
-      threads: !isProduction,
-      lintDirtyModulesOnly: !isProduction,
-      configType: 'flat',
-      emitWarning: false,
-    }),
-    isProduction &&
-      new FileManagerPlugin({
-        events: {
-          onEnd: {
-            archive: [
-              {
-                source: PATHS.EXTENSION,
-                destination: `${PATHS.EXTENSION}/${getFileNameFromVersion(
-                  getExtVersion()
-                )}`,
-                format: 'zip',
-                options: {
-                  zlib: {
-                    level: 9,
-                  },
-                  globOptions: {
-                    dot: true,
-                    ignore: ['*.zip'], // ignore the output .zip file
-                  },
-                },
-              },
-            ],
-          },
-        },
-      }),
+    // new ESLintPlugin({
+    //   extensions: ['ts', 'tsx'],
+    //   cache: !isProduction,
+    //   threads: !isProduction,
+    //   lintDirtyModulesOnly: !isProduction,
+    //   configType: 'flat',
+    //   emitWarning: false,
+    // }),
   ],
 };
 

packages/configs/manifest/extensionFile.ts

@@ -2,16 +2,20 @@ import manifest from './manifest.base.json' assert { type: 'json' };
 
 const FILE_NAME = {
   prefix: 'bypass-links-',
-  suffix: '.zip',
+  chromeSuffix: '.zip',
+  firefoxSuffix: '.xpi',
 };
 
+const getSuffix = (isChrome: boolean) =>
+  isChrome ? FILE_NAME.chromeSuffix : FILE_NAME.firefoxSuffix;
+
 export const getExtVersion = () => manifest.version;
 
-export const getFileNameFromVersion = (extVersion: string) =>
-  `${FILE_NAME.prefix}${extVersion}${FILE_NAME.suffix}`;
+export const getFileNameFromVersion = (extVersion: string, isChrome: boolean) =>
+  `${FILE_NAME.prefix}${extVersion}${getSuffix(isChrome)}`;
 
-export const getVersionFromFileName = (fileName: string) =>
+export const getVersionFromFileName = (fileName: string, isChrome: boolean) =>
   fileName.slice(
     fileName.indexOf(FILE_NAME.prefix) + FILE_NAME.prefix.length,
-    fileName.lastIndexOf(FILE_NAME.suffix)
+    fileName.lastIndexOf(getSuffix(isChrome))
   );

packages/configs/manifest/manifest.base.json

@@ -1,5 +1,5 @@
 {
-  "version": "22.0.0",
+  "version": "22.1.0",
   "manifest_version": 3,
   "short_name": "Bypass Links",
   "name": "Bypass Links",

packages/trpc/src/services/extensionService.ts

@@ -6,9 +6,9 @@ import { getAssetsByReleaseId, getLatestRelease } from './githubService';
 type TGitHubResponse = AsyncReturnType<typeof getAssetsByReleaseId>['data'];
 type TGitHubAsset = TGitHubResponse[number];
 
-const mapExtension = (extension: TGitHubAsset) => ({
+const mapExtension = (extension: TGitHubAsset, isChrome: boolean) => ({
   downloadLink: extension.browser_download_url,
-  version: getVersionFromFileName(extension.name),
+  version: getVersionFromFileName(extension.name, isChrome),
   date: extension.updated_at,
 });
 
@@ -24,9 +24,9 @@ export const getLatestExtension = async () => {
 
   for (const extension of extensions) {
     if (extension.name.startsWith('chrome-')) {
-      chrome = mapExtension(extension);
+      chrome = mapExtension(extension, true);
     } else if (extension.name.startsWith('firefox-')) {
-      firefox = mapExtension(extension);
+      firefox = mapExtension(extension, false);
     }
   }