Merge pull request #575 from enkryptcom/fix/ff-build

fix: firefox addon limitations

Author: kvhnuke

.github/workflows/release.yml

@@ -45,6 +45,8 @@ jobs:
           docker run --rm --user "$(id -u):$(id -g)" -v `pwd`:/home:rw enkrypt-build-container /bin/bash -c "yarn build:all"
           docker run --rm --user "$(id -u):$(id -g)" -v `pwd`:/home:rw enkrypt-build-container /bin/bash -c "cd packages/extension && yarn build:chrome && yarn zip"
           mv packages/extension/dist/release.zip release/enkrypt-chrome-edge-opera-${{ steps.get_release_tag.outputs.VERSION }}.zip
+          docker run --rm --user "$(id -u):$(id -g)" -v `pwd`:/home:rw enkrypt-build-container /bin/bash -c "cd packages/extension && yarn build:opera && yarn zip"
+          mv packages/extension/dist/release.zip release/enkrypt-opera-${{ steps.get_release_tag.outputs.VERSION }}.zip
           docker run --rm --user "$(id -u):$(id -g)" -v `pwd`:/home:rw enkrypt-build-container /bin/bash -c "cd packages/extension && yarn build:firefox && yarn zip"
           mv packages/extension/dist/release.zip release/enkrypt-firefox-${{ steps.get_release_tag.outputs.VERSION }}.xpi
 

packages/extension/.gitignore

@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+stats.html

packages/extension/configs/vite/assets-rewrite.ts

@@ -1,14 +1,14 @@
-import { Plugin } from 'vite'
-import { dirname, relative } from 'node:path'
+import { Plugin } from 'vite';
+import { dirname, relative } from 'node:path';
 
 const assetsRewritePlugin: Plugin = {
   name: 'assets-rewrite',
   enforce: 'post',
   apply: 'build',
   transformIndexHtml(html, { path }) {
-    const assetsPath = relative(dirname(path), '/assets').replace(/\\/g, '/')
-    return html.replace(/"\/assets\//g, `"${assetsPath}/`)
+    const assetsPath = relative(dirname(path), '/assets').replace(/\\/g, '/');
+    return html.replace(/"\/assets\//g, `"${assetsPath}/`);
   },
-}
+};
 
-export default assetsRewritePlugin
+export default assetsRewritePlugin;

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/extension",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -126,6 +126,7 @@
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "rollup": "^4.25.0",
+    "rollup-plugin-visualizer": "^5.12.0",
     "semver": "^7.6.3",
     "systeminformation": "^5.23.5",
     "tsup": "^8.3.5",

packages/extension/src/manifest/manifest.firefox.ts

@@ -21,7 +21,8 @@ const firefoxManifest = {
   web_accessible_resources: [],
   browser_specific_settings: {
     gecko: {
-      strict_min_version: '100.0',
+      id: '{21a9e8ea-7aa4-4aae-923c-ec8211f2779c}',
+      strict_min_version: '112.0',
     },
   },
   content_security_policy: {

packages/extension/src/ui/provider-pages/main.ts

@@ -8,7 +8,7 @@ import Vue3Lottie from 'vue3-lottie';
 global.WeakMap = WeakMap;
 
 if (import.meta.env.DEV) {
-  globalThis.__ENKRYPT_DEBUG_LOG_CONF__ = import.meta.env.VITE_DEBUG_LOG
+  globalThis.__ENKRYPT_DEBUG_LOG_CONF__ = import.meta.env.VITE_DEBUG_LOG;
 }
 
 const router = createRouter({

packages/extension/vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import { defineConfig } from 'vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig, type PluginOption } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { crx } from '@crxjs/vite-plugin';
 import chromeManifest from './src/manifest/manifest.chrome';
@@ -12,7 +13,13 @@ import transformCSInject from './configs/vite/transform-cs-inject';
 import { version } from './package.json';
 
 const BROWSER = process.env.BROWSER;
-
+const firefoxChunking = (id: string) => {
+  if (id.includes('node_modules')) {
+    const chunkName = id.match(/node_modules\/(.+?)\//);
+    if (chunkName && chunkName.length > 1) return chunkName[1].replace('@', '');
+    return 'vendor';
+  }
+};
 const getManifest = () => {
   switch (BROWSER) {
     case 'firefox':
@@ -49,6 +56,7 @@ export default defineConfig({
         : new Date().toLocaleString().replace(/\D/g, ''),
   },
   plugins: [
+    visualizer() as PluginOption,
     nodePolyfills({
       include: [
         'crypto',
@@ -95,6 +103,9 @@ export default defineConfig({
         onboard: 'onboard.html',
         index: 'index.html',
       },
+      output: {
+        manualChunks: BROWSER === 'firefox' ? firefoxChunking : undefined,
+      },
     },
   },
   optimizeDeps: {

yarn.lock

@@ -1696,6 +1696,7 @@ __metadata:
     qrcode.vue: "npm:^3.6.0"
     rimraf: "npm:^6.0.1"
     rollup: "npm:^4.25.0"
+    rollup-plugin-visualizer: "npm:^5.12.0"
     semver: "npm:^7.6.3"
     switch-ts: "npm:^1.1.1"
     systeminformation: "npm:^5.23.5"
@@ -22677,7 +22678,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^8.0.2, open@npm:^8.0.9":
+"open@npm:^8.0.2, open@npm:^8.0.9, open@npm:^8.4.0":
   version: 8.4.2
   resolution: "open@npm:8.4.2"
   dependencies:
@@ -25212,6 +25213,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-plugin-visualizer@npm:^5.12.0":
+  version: 5.12.0
+  resolution: "rollup-plugin-visualizer@npm:5.12.0"
+  dependencies:
+    open: "npm:^8.4.0"
+    picomatch: "npm:^2.3.1"
+    source-map: "npm:^0.7.4"
+    yargs: "npm:^17.5.1"
+  peerDependencies:
+    rollup: 2.x || 3.x || 4.x
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  bin:
+    rollup-plugin-visualizer: dist/bin/cli.js
+  checksum: 10/47358feb672291d6edcfd94197577c192a84c24cb644119425dae8241fb6f5a52556efd0c501f38b276c07534642a80c0885ef681babb474e83c7b5a3b475b84
+  languageName: node
+  linkType: hard
+
 "rollup@npm:2.79.2":
   version: 2.79.2
   resolution: "rollup@npm:2.79.2"
@@ -31015,7 +31035,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.0.0, yargs@npm:^17.7.2":
+"yargs@npm:^17.0.0, yargs@npm:^17.5.1, yargs@npm:^17.7.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies: