fix: beta extension bundle (#209)

* fix: beta extension bundle

* fix: syncpack lint

* fix: remove `.env` files in favor of constant strings in specific configs

.github/workflows/extension-upload.yml

@@ -41,7 +41,7 @@ jobs:
 
       # Outputs beta.zip and prod.zip
       - name: Zip extension versions
-        run: pnpm tsx apps/extension/src/utils/zip-extension.ts
+        run: pnpm zip
 
       - name: Upload beta version
         uses: penumbra-zone/chrome-extension-upload@v1

.gitignore

@@ -13,6 +13,7 @@ out/
 build
 dist/
 dist
+beta-dist
 dist-ssr
 *.local
 

apps/extension/package.json

@@ -6,10 +6,11 @@
   "description": "chrome-extension",
   "type": "module",
   "scripts": {
-    "build": "pnpm bundle",
-    "bundle": "NODE_OPTIONS=\"--import=./src/utils/webpack-register.js\" webpack",
-    "clean": "rm -rfv dist bin",
-    "dev": "NODE_ENV=testnet pnpm bundle --watch --mode=development -d inline-source-map",
+    "build": "pnpm bundle:beta && pnpm bundle:prod",
+    "bundle:beta": "NODE_OPTIONS=\"--import=./src/utils/webpack-register.js\" webpack --config webpack.beta-config.ts",
+    "bundle:prod": "NODE_OPTIONS=\"--import=./src/utils/webpack-register.js\" webpack --config webpack.prod-config.ts",
+    "clean": "rm -rfv dist beta-dist bin",
+    "dev": "NODE_ENV=testnet pnpm bundle:prod --watch --mode=development -d inline-source-map",
     "lint": "eslint src",
     "test": "vitest run"
   },

apps/extension/public/beta-manifest.json

@@ -0,0 +1,51 @@
+{
+  "manifest_version": 3,
+  "name": "Prax wallet BETA",
+  "version": "14.0.0",
+  "description": "THIS EXTENSION IS FOR BETA TESTING",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhxDXNrlRB72kw+MeeofiBvJuuSkcMI+ZshYS9jve+Zhm0YlYUF/3mriz1D7jdK/U11EjKYMYCTQQEDLmSdQ8Q52ur3ei4u4gjyEpl/+QnjciR7msoziKH48Bia1U+wd53eW3TWNP/vpSJiBsAfOisEPox6w4lC5a03aCXV3xtkzfW0rebZrOLf1xhZD8mc4N9LU289E3cYRlBmfI4qxkBM1r7t9N4KsXle3VWXSn18joKzgzAWK+VhZtZu3xrwMQGpUqn+KyYFvawSGmYdDsnT6y0KS96V3CPp6rQHNfjItB/F4d1JQv1tskc959jiK9CuGbU57D9JHJ+1C9aOb0BwIDAQAB",
+  "minimum_chrome_version": "119",
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "icons": {
+    "16": "favicon/beta/icon16.png",
+    "32": "favicon/beta/icon32.png",
+    "48": "favicon/beta/icon48.png",
+    "128": "favicon/beta/icon128.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://*/*", "http://localhost/*"],
+      "js": ["injected-connection-port.js", "injected-request-listener.js"],
+      "run_at": "document_start"
+    },
+    {
+      "matches": ["https://*/*", "http://localhost/*"],
+      "js": ["injected-penumbra-global.js"],
+      "run_at": "document_start",
+      "world": "MAIN"
+    }
+  ],
+  "options_ui": {
+    "page": "page.html",
+    "open_in_tab": true
+  },
+  "background": {
+    "service_worker": "service-worker.js"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["manifest.json", "favicon/*"],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  "permissions": ["storage", "unlimitedStorage", "offscreen"],
+  "host_permissions": ["<all_urls>"],
+  "externally_connectable": {
+    "matches": ["<all_urls>"]
+  },
+  "content_security_policy": {
+    "extension_pages": "object-src 'self'; script-src 'self' 'wasm-unsafe-eval'"
+  }
+}

apps/extension/src/utils/zip-extension.ts

@@ -1,38 +1,19 @@
-import * as fs from 'fs';
 import * as path from 'path';
 import child_process from 'child_process';
-import type Manifest from '../../public/manifest.json';
 
 const WORKING_DIR = process.cwd(); // Should be run at root dir of repo
-const MANIFEST_PATH = path.join(WORKING_DIR, 'apps/extension/dist/manifest.json');
-const DIST_PATH = path.join(WORKING_DIR, 'apps/extension/dist');
+const DIST_PROD_PATH = path.join(WORKING_DIR, 'apps/extension/dist');
+const DIST_BETA_PATH = path.join(WORKING_DIR, 'apps/extension/beta-dist');
 const PROD_ZIP_PATH = path.join(WORKING_DIR, 'prod.zip');
 const BETA_ZIP_PATH = path.join(WORKING_DIR, 'beta.zip');
 
-const updateManifestToBeta = (): void => {
-  const manifestData = fs.readFileSync(MANIFEST_PATH, 'utf-8');
-  const manifest = JSON.parse(manifestData) as typeof Manifest;
-
-  manifest.name = 'Prax wallet BETA';
-  manifest.description = 'THIS EXTENSION IS FOR BETA TESTING';
-  manifest.key =
-    'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhxDXNrlRB72kw+MeeofiBvJuuSkcMI+ZshYS9jve+Zhm0YlYUF/3mriz1D7jdK/U11EjKYMYCTQQEDLmSdQ8Q52ur3ei4u4gjyEpl/+QnjciR7msoziKH48Bia1U+wd53eW3TWNP/vpSJiBsAfOisEPox6w4lC5a03aCXV3xtkzfW0rebZrOLf1xhZD8mc4N9LU289E3cYRlBmfI4qxkBM1r7t9N4KsXle3VWXSn18joKzgzAWK+VhZtZu3xrwMQGpUqn+KyYFvawSGmYdDsnT6y0KS96V3CPp6rQHNfjItB/F4d1JQv1tskc959jiK9CuGbU57D9JHJ+1C9aOb0BwIDAQAB';
-  manifest.icons['16'] = 'favicon/beta/icon16.png';
-  manifest.icons['32'] = 'favicon/beta/icon32.png';
-  manifest.icons['48'] = 'favicon/beta/icon48.png';
-  manifest.icons['128'] = 'favicon/beta/icon128.png';
-
-  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
-};
-
-const zipDirectory = (path: string) => {
-  child_process.execSync(`zip -r ${path} .`, { cwd: DIST_PATH, stdio: 'inherit' });
+const zipDirectory = (path: string, dist: string) => {
+  child_process.execSync(`zip -r ${path} .`, { cwd: dist, stdio: 'inherit' });
 };
 
 const main = () => {
-  zipDirectory(PROD_ZIP_PATH);
-  updateManifestToBeta();
-  zipDirectory(BETA_ZIP_PATH);
+  zipDirectory(PROD_ZIP_PATH, DIST_PROD_PATH);
+  zipDirectory(BETA_ZIP_PATH, DIST_BETA_PATH);
 };
 
 main();

apps/extension/webpack.beta-config.ts

@@ -0,0 +1,32 @@
+import path from 'node:path';
+import CopyPlugin from 'copy-webpack-plugin';
+
+import config from './webpack.config.js';
+
+const __dirname = new URL('.', import.meta.url).pathname;
+
+// Copies the beta manifest file after the build to replace the default manifest
+const BetaManifestReplacerPlugin = new CopyPlugin({
+  patterns: [
+    {
+      from: path.resolve(__dirname, 'public/beta-manifest.json'),
+      to: path.resolve(__dirname, 'beta-dist/manifest.json'),
+      force: true,
+    },
+  ],
+});
+
+const PRAX_ID = 'ejpfkiblcablembkdhcofhokccbbppnc';
+
+/**
+ * This config defines the Prax Chrome ID, changes the output directory,
+ * and modifies the `manifest.json` file to use the correct extension information
+ */
+export default ({ WEBPACK_WATCH = false }: { ['WEBPACK_WATCH']?: boolean }) => {
+  const appliedConfig = config({ PRAX_ID, WEBPACK_WATCH });
+
+  appliedConfig.output!.path = path.join(__dirname, 'beta-dist');
+  appliedConfig.plugins!.push(BetaManifestReplacerPlugin);
+
+  return appliedConfig;
+};