Works for HAR and HTML.

Author: nedtwigg

browser-extension/tests/corpus-view.ts

@@ -199,7 +199,7 @@ app.get('/corpus/:key/:mode(clean|gitcasso)', async (req, res) => {
         html = html.replace(regex, `/asset/${key}`)
       })
       if (mode === 'gitcasso') {
-        html = await injectGitcassoScript(key, html)
+        html = injectGitcassoScriptForHAR(key, html)
       }
       return res.send(html)
     } else if (entry.type === 'html') {
@@ -211,7 +211,7 @@ app.get('/corpus/:key/:mode(clean|gitcasso)', async (req, res) => {
       html = stripCSPFromHTML(html)
 
       if (mode === 'gitcasso') {
-        html = await injectGitcassoScript(key, html)
+        html = await injectGitcassoScriptForHTML(key, html)
       }
 
       // Set permissive headers for HTML corpus
@@ -365,7 +365,206 @@ function stripCSPFromHTML(html: string): string {
   return html
 }
 
-async function injectGitcassoScript(key: string, html: string): Promise<string> {
+// HAR version - uses fetch() to load content script (original approach)
+function injectGitcassoScriptForHAR(key: string, html: string): string {
+  const urlParts = getUrlParts(key)
+
+  // Inject patched content script with location patching
+  const contentScriptTag =
+    `
+        <script>
+          console.log('Loading Gitcasso with mocked location:', '${urlParts.href}');
+
+          // Fetch and patch the content script to remove webextension-polyfill issues
+          fetch('/chrome-mv3-dev/content-scripts/content.js')
+            .then(response => response.text())
+            .then(code => {
+              console.log('Fetched content script, patching webextension-polyfill and detectLocation...');
+
+              // Replace the problematic webextension-polyfill error check
+              let patchedCode = code.replace(
+                'throw new Error("This script should only be loaded in a browser extension.")',
+                'console.warn("Webextension-polyfill check bypassed for corpus testing")'
+              );
+              window.gitcassoMockLocation = {
+                host: '${urlParts.host}',
+                pathname: '${urlParts.pathname}'
+              };
+
+              // Execute the patched script with browser API mocks prepended
+              const browserMocks = 'window.chrome=window.chrome||{runtime:{getURL:path=>"chrome-extension://gitcasso-test/"+path,onMessage:{addListener:()=>{}},sendMessage:()=>Promise.resolve(),id:"gitcasso-test"}};window.browser=window.chrome;';
+              const script = document.createElement('script');
+              script.textContent = browserMocks + patchedCode;
+              document.head.appendChild(script);
+              console.log('Gitcasso content script loaded with location patching for:', '` +
+    urlParts.href +
+    `');
+            })
+            .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);
+
+          // Create CommentSpot display
+          const commentSpotDisplay = document.createElement('div');
+          commentSpotDisplay.id = 'gitcasso-comment-spots';
+          commentSpotDisplay.style.cssText =
+            'position: fixed;' +
+            'top: 80px;' +
+            'right: 20px;' +
+            'width: 400px;' +
+            'max-height: 400px;' +
+            'background: rgba(255, 255, 255, 0.95);' +
+            'border: 1px solid #ddd;' +
+            'border-radius: 8px;' +
+            'padding: 15px;' +
+            'font-family: Monaco, Menlo, Ubuntu Mono, monospace;' +
+            'font-size: 11px;' +
+            'line-height: 1.4;' +
+            'overflow-y: auto;' +
+            'z-index: 999998;' +
+            'box-shadow: 0 4px 12px rgba(0,0,0,0.2);' +
+            'backdrop-filter: blur(10px);';
+
+          // Simplified display formatting
+          const styles = {
+            header: 'font-weight: bold; margin-bottom: 8px; color: #333;',
+            spotContainer: 'margin-bottom: 12px; padding: 8px; border: 1px solid #eee; border-radius: 4px;',
+            spotTitle: 'font-weight: bold; color: #555;',
+            jsonPre: 'margin: 4px 0; font-size: 10px;',
+            textareaHeader: 'font-weight: bold; color: #007acc; margin-top: 8px;',
+            textareaPre: 'margin: 4px 0; font-size: 10px; color: #666;',
+            noInfo: 'color: #999; font-style: italic; margin-top: 4px;',
+            empty: 'color: #666; font-style: italic;'
+          };
+
+          function updateCommentSpotDisplay() {
+            const textareas = document.querySelectorAll('textarea');
+            const spotsFound = [];
+
+            for (const textarea of textareas) {
+              const forValue = 'id=' + textarea.id + ' name=' + textarea.name + ' className=' + textarea.className;
+              const enhancedItem = window.gitcassoTextareaRegistry ? window.gitcassoTextareaRegistry.get(textarea) : undefined;
+              if (enhancedItem) {
+                spotsFound.push({
+                  for: forValue,
+                  spot: enhancedItem.spot,
+                  title: enhancedItem.enhancer.tableTitle(enhancedItem.spot),
+                });
+              } else {
+                spotsFound.push({
+                  for: forValue,
+                  spot: 'NO_SPOT',
+                });
+              }
+            }
+
+            console.log('Enhanced textareas:', spotsFound.filter(s => s.spot !== 'NO_SPOT').length);
+            console.log('All textareas on page:', textareas.length);
+            commentSpotDisplay.innerHTML = '<div style="' + styles.header + '"><pre>${urlParts.href}\\n' + JSON.stringify(spotsFound, null, 2) + '</pre></div>';
+          }
+
+          // Initial update
+          setTimeout(updateCommentSpotDisplay, 100);
+
+          // Update display periodically
+          setInterval(updateCommentSpotDisplay, 2000);
+
+          document.body.appendChild(commentSpotDisplay);
+        </script>
+      `
+  if (html.includes('</body>')) {
+    return html.replace('</body>', `${contentScriptTag}</body>`)
+  } else {
+    return html + contentScriptTag
+  }
+}
+
+// HTML version - embeds content script directly to avoid CSP issues
+async function injectGitcassoScriptForHTML(key: string, html: string): Promise<string> {
   const urlParts = getUrlParts(key)
 
   // Read and embed the content script directly to avoid CSP issues