Fix content script build and chrome.storage errors

- Build content script as IIFE format (not ES modules) using separate vite config
- Add chrome.storage availability check in logger to prevent errors in content scripts
- Update package.json build script to run both vite builds

Author: JOHN

graphiti-extension.zip

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite build --watch --mode development",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && vite build --config vite.content.config.ts",
     "build:analyze": "tsc && vite build && npm run analyze",
     "analyze": "npx vite-bundle-visualizer --open",
     "preview": "vite preview",

package.json

@@ -48,9 +48,16 @@ class Logger {
   private static instance: Logger;
   private logBuffer: LogEntry[] = [];
   private maxBufferSize = 1000;
+  private isStorageAvailable = false;
 
   private constructor() {
-    this.loadLogs();
+    // Check if chrome.storage is available (not in content scripts)
+    this.isStorageAvailable = typeof chrome !== 'undefined' && 
+                               typeof chrome.storage !== 'undefined' && 
+                               typeof chrome.storage.local !== 'undefined';
+    if (this.isStorageAvailable) {
+      this.loadLogs();
+    }
   }
 
   static getInstance(): Logger {
@@ -61,6 +68,7 @@ class Logger {
   }
 
   private async loadLogs() {
+    if (!this.isStorageAvailable) return;
     try {
       const result = await chrome.storage.local.get('debugLogs');
       if (result.debugLogs) {
@@ -72,6 +80,7 @@ class Logger {
   }
 
   private async saveLogs() {
+    if (!this.isStorageAvailable) return;
     try {
       await chrome.storage.local.set({ debugLogs: this.logBuffer });
     } catch (error) {
@@ -148,7 +157,9 @@ class Logger {
 
   async clearLogs() {
     this.logBuffer = [];
-    await chrome.storage.local.remove('debugLogs');
+    if (this.isStorageAvailable) {
+      await chrome.storage.local.remove('debugLogs');
+    }
     this.info('Logger', 'Logs cleared');
   }
 

src/utils/logger.ts

@@ -40,35 +40,30 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     sourcemap: true,
-    minify: 'esbuild', // Use esbuild for faster minification
-    target: 'es2020', // Target modern browsers
+    minify: 'esbuild',
+    target: 'es2020',
     rollupOptions: {
       input: {
         popup: resolve(__dirname, 'popup.html'),
         sidepanel: resolve(__dirname, 'sidepanel.html'),
         'profile-renderer': resolve(__dirname, 'src/profile/profile-renderer.html'),
         offscreen: resolve(__dirname, 'src/offscreen/offscreen.html'),
         background: resolve(__dirname, 'src/background/background.ts'),
-        content: resolve(__dirname, 'src/content/content.ts'),
       },
       output: {
         entryFileNames: (chunkInfo) => {
           if (chunkInfo.name === 'background') {
             return 'background.js';
           }
-          if (chunkInfo.name === 'content') {
-            return 'content.js';
-          }
           if (chunkInfo.name === 'offscreen') {
             return 'src/offscreen/offscreen.js';
           }
           return 'assets/[name]-[hash].js';
         },
         chunkFileNames: 'assets/[name]-[hash].js',
         assetFileNames: 'assets/[name]-[hash].[ext]',
-        format: 'es', // Default format for most files
+        format: 'es',
         manualChunks: (id) => {
-          // Vendor chunks for better caching
           if (id.includes('node_modules')) {
             if (id.includes('react') || id.includes('react-dom')) {
               return 'vendor-react';

vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// Separate config for content script - must be IIFE format for Chrome extension
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    minify: 'esbuild',
+    target: 'es2020',
+    emptyOutDir: false, // Don't clear the dist folder (main build already created it)
+    lib: {
+      entry: resolve(__dirname, 'src/content/content.ts'),
+      name: 'GraphitiContent',
+      formats: ['iife'],
+      fileName: () => 'content.js',
+    },
+    rollupOptions: {
+      output: {
+        // Ensure all code is inlined (no external imports)
+        inlineDynamicImports: true,
+        // Make sure globals don't conflict
+        extend: true,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+});