feat: implement browser extension UI with WebAssembly integration

extension/vite.config.js

@@ -0,0 +1,120 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+import { resolve } from 'path';
+import fs from 'fs';
+import { Plugin } from 'vite';
+
+// Custom plugin to copy extension files directly to the dist directory
+const copyExtensionFiles = () => {
+  return {
+    name: 'copy-extension-files',
+    closeBundle() {
+      // Create the wasm directory in dist if it doesn't exist
+      const wasmDistDir = resolve(__dirname, 'dist/wasm');
+      if (!fs.existsSync(wasmDistDir)) {
+        fs.mkdirSync(wasmDistDir, { recursive: true });
+      }
+      
+      // Copy the wasm.js file
+      const wasmJsSource = resolve(__dirname, 'wasm/wasm_app.js');
+      const wasmJsDest = resolve(wasmDistDir, 'wasm_app.js');
+      fs.copyFileSync(wasmJsSource, wasmJsDest);
+      
+      // Copy the wasm binary file
+      const wasmBinSource = resolve(__dirname, 'wasm/wasm_app_bg.wasm');
+      const wasmBinDest = resolve(wasmDistDir, 'wasm_app_bg.wasm');
+      fs.copyFileSync(wasmBinSource, wasmBinDest);
+
+      // Create background directory and copy the background script
+      const bgDistDir = resolve(__dirname, 'dist/background');
+      if (!fs.existsSync(bgDistDir)) {
+        fs.mkdirSync(bgDistDir, { recursive: true });
+      }
+      
+      const bgSource = resolve(__dirname, 'background/index.js');
+      const bgDest = resolve(bgDistDir, 'index.js');
+      fs.copyFileSync(bgSource, bgDest);
+      
+      // Create popup directory and copy the popup files
+      const popupDistDir = resolve(__dirname, 'dist/popup');
+      if (!fs.existsSync(popupDistDir)) {
+        fs.mkdirSync(popupDistDir, { recursive: true });
+      }
+      
+      // Copy HTML file
+      const htmlSource = resolve(__dirname, 'popup/index.html');
+      const htmlDest = resolve(popupDistDir, 'index.html');
+      fs.copyFileSync(htmlSource, htmlDest);
+      
+      // Copy JS file
+      const jsSource = resolve(__dirname, 'popup/popup.js');
+      const jsDest = resolve(popupDistDir, 'popup.js');
+      fs.copyFileSync(jsSource, jsDest);
+      
+      // Copy CSS file
+      const cssSource = resolve(__dirname, 'popup/popup.css');
+      const cssDest = resolve(popupDistDir, 'popup.css');
+      fs.copyFileSync(cssSource, cssDest);
+      
+      // Also copy the manifest.json file
+      const manifestSource = resolve(__dirname, 'manifest.json');
+      const manifestDest = resolve(__dirname, 'dist/manifest.json');
+      fs.copyFileSync(manifestSource, manifestDest);
+      
+      // Copy assets directory
+      const assetsDistDir = resolve(__dirname, 'dist/assets');
+      if (!fs.existsSync(assetsDistDir)) {
+        fs.mkdirSync(assetsDistDir, { recursive: true });
+      }
+      
+      // Copy icon files
+      const iconSizes = [16, 32, 48, 128];
+      iconSizes.forEach(size => {
+        const iconSource = resolve(__dirname, `assets/icon-${size}.png`);
+        const iconDest = resolve(assetsDistDir, `icon-${size}.png`);
+        if (fs.existsSync(iconSource)) {
+          fs.copyFileSync(iconSource, iconDest);
+        }
+      });
+
+      console.log('Extension files copied to dist directory');
+    }
+  };
+};
+
+export default defineConfig({
+  plugins: [
+    react(),
+    wasm(),
+    topLevelAwait(),
+    copyExtensionFiles()
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    // Simplify the build output for browser extension
+    rollupOptions: {
+      input: {
+        popup: resolve(__dirname, 'popup/index.html')
+      },
+      output: {
+        // Use a simpler output format without hash values
+        entryFileNames: 'assets/[name].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name].[ext]',
+        // Make sure output is compatible with browser extensions
+        format: 'iife',
+        // Don't generate separate code-split chunks
+        manualChunks: undefined
+      }
+    }
+  },
+  // Provide a simple dev server config
+  server: {
+    fs: {
+      allow: ['../']
+    }
+  }
+});