feat: post-build manifest validation

packages/app/package.json

@@ -8,6 +8,7 @@
     "build:web": "./scripts/build.sh --app=vite",
     "build:crx": "./scripts/build.sh --app=crx",
     "build:storybook": "./scripts/build.sh --app=storybook",
+    "validate:manifest": "node ./vite-utils/validate-manifest.js",
     "dev": "vite",
     "dev:crx": "vite --config vite.crx.config.ts",
     "dev:storybook": "storybook dev -p 6006",

packages/app/scripts/build.sh

@@ -3,9 +3,11 @@ export STORYBOOK_DIST=${STORYBOOK_DIST:=./dist/storybook}
 
 if [ "$1" = "--app=vite" ]; then
 	pnpm vite build --mode $NODE_ENV
+	pnpm validate:manifest
 fi
 if [ "$1" = "--app=crx" ]; then
 	pnpm vite build --config vite.crx.config.ts --mode $NODE_ENV
+	pnpm validate:manifest
 fi
 if [ "$1" = "--app=storybook" ]; then
 	pnpm storybook build -o $STORYBOOK_DIST

packages/app/vite-utils/patch-manifest.plugin.ts

@@ -0,0 +1,39 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+
+type FixCRXPlugin = {
+  outDir?: string;
+};
+
+/**
+ * Vite plugin automatically sets use_dynamic_url to true in manifest.json
+ * for CRX build. Which causes CSP issues with Chromium v130+.
+ * This plugin patches the manifest.json file to set use_dynamic_url back to false.
+ */
+export const patchManifestPlugin = ({ outDir }: FixCRXPlugin): Plugin => {
+  return {
+    name: 'patch-manifest-plugin',
+    apply: 'build',
+    closeBundle() {
+      const manifestPath = path.resolve(outDir, 'manifest.json');
+      if (!fs.existsSync(manifestPath)) {
+        this.error(`Manifest file not found at ${manifestPath}`);
+        return;
+      }
+
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+
+      if (manifest.web_accessible_resources) {
+        manifest.web_accessible_resources =
+          manifest.web_accessible_resources.map((resource) => ({
+            ...resource,
+            use_dynamic_url: false,
+          }));
+      }
+
+      fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
+      console.log('🔧 Manifest patched successfully.');
+    },
+  };
+};

packages/app/vite-utils/validate-manifest.js

@@ -0,0 +1,27 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+const manifestPath = path.resolve(__dirname, '../dist-crx/manifest.json');
+
+if (!fs.existsSync(manifestPath)) {
+  console.error(`Manifest file not found at ${manifestPath}`);
+  process.exit(1);
+}
+
+const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+
+const invalidResources = manifest.web_accessible_resources.filter(
+  (resource) => resource.use_dynamic_url !== false
+);
+
+if (invalidResources.length > 0) {
+  console.error(
+    '❌ Validation Failed: Some web_accessible_resources have use_dynamic_url set to true.'
+  );
+  console.error(JSON.stringify(invalidResources, null, 2));
+  process.exit(1);
+} else {
+  console.log(
+    ' ✅ Validation Passed: All web_accessible_resources have use_dynamic_url set to false.'
+  );
+}

packages/app/vite-utils/vite.base.config.ts

@@ -6,7 +6,6 @@ import { Mode, plugin as viteMdPlugin } from 'vite-plugin-markdown';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 import '../load.envs.js';
-import { fixCRXBuildPlugin } from './fix-build-crx.plugin.js';
 
 const linkDeps = process.env.LINK_DEPS?.trim().split(' ').filter(Boolean) || [];
 

packages/app/vite.crx.config.ts

@@ -1,12 +1,12 @@
-import { crx } from '@crxjs/vite-plugin';
+import { type ManifestV3Export, crx } from '@crxjs/vite-plugin';
 import { defineConfig } from 'vite';
 
 import manifest from './manifest.config';
-import { fixCRXBuildPlugin } from './vite-utils/fix-build-crx.plugin';
+import { patchManifestPlugin } from './vite-utils/patch-manifest.plugin';
 import baseConfig from './vite-utils/vite.base.config';
 import { zipBuildPlugin } from './vite-utils/zip-build.plugin';
 
-const OUT_DIT = process.env.CRX_OUT || 'dist-crx';
+const OUT_DIR = process.env.CRX_OUT || 'dist-crx';
 const APP_VERSION = process.env.VITE_APP_VERSION;
 const APP_VERSION_POSTFIX = process.env.APP_VERSION_POSTFIX || '';
 
@@ -16,17 +16,15 @@ export default defineConfig({
   base: '/',
   build: {
     ...baseConfig.build,
-    outDir: OUT_DIT,
+    outDir: OUT_DIR,
   },
   plugins: baseConfig.plugins?.concat([
     crx({
       manifest,
     }),
-    fixCRXBuildPlugin({
-      outDir: OUT_DIT,
-    }),
+    patchManifestPlugin({ outDir: OUT_DIR }),
     zipBuildPlugin({
-      inDir: OUT_DIT,
+      inDir: OUT_DIR,
       outDir: baseConfig.build?.outDir,
       outFileName: `fuel-wallet-${APP_VERSION}${APP_VERSION_POSTFIX}.zip`,
       excludeFiles: /.map$/,