Add in-page reload.

Author: nedtwigg

browser-extension/tests/har-view.ts

@@ -16,6 +16,7 @@
  * - Extension assets served from `./output/chrome-mv3-dev` via `/chrome-mv3-dev` route
  */
 import { error } from 'node:console'
+import { spawn } from 'node:child_process'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -27,6 +28,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const app = express()
 const PORT = 3001
 
+// Middleware to parse JSON bodies
+app.use(express.json())
+
 // Store HAR json
 const harCache = new Map<keyof typeof PAGES, Har>()
 
@@ -239,6 +243,63 @@ app.get('/asset/:key/*', async (req, res) => {
 // Serve extension assets from filesystem
 app.use('/chrome-mv3-dev', express.static(path.join(__dirname, '..', '.output', 'chrome-mv3-dev')))
 
+// Rebuild endpoint
+app.post('/rebuild', async (req, res) => {
+  try {
+    console.log('Rebuild triggered via API')
+    
+    // Run npx wxt build --mode development
+    const buildProcess = spawn('npx', ['wxt', 'build', '--mode', 'development'], {
+      cwd: path.join(__dirname, '..'),
+      stdio: ['pipe', 'pipe', 'pipe']
+    })
+    
+    let stdout = ''
+    let stderr = ''
+    
+    buildProcess.stdout.on('data', (data) => {
+      stdout += data.toString()
+      console.log('[BUILD]', data.toString().trim())
+    })
+    
+    buildProcess.stderr.on('data', (data) => {
+      stderr += data.toString()
+      console.error('[BUILD ERROR]', data.toString().trim())
+    })
+    
+    buildProcess.on('close', (code) => {
+      if (code === 0) {
+        console.log('Build completed successfully')
+        res.json({ success: true, message: 'Build completed successfully' })
+      } else {
+        console.error('Build failed with code:', code)
+        res.status(500).json({ 
+          success: false, 
+          message: 'Build failed', 
+          error: stderr || stdout 
+        })
+      }
+    })
+    
+    buildProcess.on('error', (error) => {
+      console.error('Failed to start build process:', error)
+      res.status(500).json({ 
+        success: false, 
+        message: 'Failed to start build process', 
+        error: error.message 
+      })
+    })
+    
+  } catch (error) {
+    console.error('Rebuild endpoint error:', error)
+    res.status(500).json({ 
+      success: false, 
+      message: 'Internal server error', 
+      error: error instanceof Error ? error.message : 'Unknown error' 
+    })
+  }
+})
+
 app.listen(PORT, () => {
   console.log(`HAR Page Viewer running at http://localhost:${PORT}`)
   console.log('Click the links to view recorded pages')
@@ -296,6 +357,90 @@ function injectGitcassoScript(key: keyof typeof PAGES, html: string) {
             .catch(error => {
               console.error('Failed to load and patch content script:', error);
             });
+          
+          // Create floating rebuild button
+          const rebuildButton = document.createElement('div');
+          rebuildButton.id = 'gitcasso-rebuild-btn';
+          rebuildButton.innerHTML = '🔄';
+          rebuildButton.title = 'Rebuild Extension';
+          rebuildButton.style.cssText = \`
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            background: #007acc;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            z-index: 999999;
+            user-select: none;
+            transition: all 0.2s ease;
+            font-family: system-ui, -apple-system, sans-serif;
+          \`;
+          
+          rebuildButton.addEventListener('mouseenter', () => {
+            rebuildButton.style.transform = 'scale(1.1)';
+            rebuildButton.style.backgroundColor = '#005a9e';
+          });
+          
+          rebuildButton.addEventListener('mouseleave', () => {
+            rebuildButton.style.transform = 'scale(1)';
+            rebuildButton.style.backgroundColor = '#007acc';
+          });
+          
+          rebuildButton.addEventListener('click', async () => {
+            try {
+              rebuildButton.innerHTML = '⏳';
+              rebuildButton.style.backgroundColor = '#ffa500';
+              rebuildButton.title = 'Rebuilding...';
+              
+              const response = await fetch('/rebuild', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+              });
+              
+              const result = await response.json();
+              
+              if (result.success) {
+                rebuildButton.innerHTML = '✅';
+                rebuildButton.style.backgroundColor = '#28a745';
+                rebuildButton.title = 'Build successful! Reloading...';
+                
+                setTimeout(() => {
+                  location.reload(true);
+                }, 1000);
+              } else {
+                rebuildButton.innerHTML = '❌';
+                rebuildButton.style.backgroundColor = '#dc3545';
+                rebuildButton.title = 'Build failed: ' + (result.error || result.message);
+                
+                setTimeout(() => {
+                  rebuildButton.innerHTML = '🔄';
+                  rebuildButton.style.backgroundColor = '#007acc';
+                  rebuildButton.title = 'Rebuild Extension';
+                }, 3000);
+              }
+            } catch (error) {
+              console.error('Rebuild failed:', error);
+              rebuildButton.innerHTML = '❌';
+              rebuildButton.style.backgroundColor = '#dc3545';
+              rebuildButton.title = 'Network error: ' + error.message;
+              
+              setTimeout(() => {
+                rebuildButton.innerHTML = '🔄';
+                rebuildButton.style.backgroundColor = '#007acc';
+                rebuildButton.title = 'Rebuild Extension';
+              }, 3000);
+            }
+          });
+          
+          document.body.appendChild(rebuildButton);
         </script>
       `
   if (!html.includes('</body>')) {