SiReS-Ex/Chrome/Code/popup.js

// popup.js - Popup script for user interactions (Manifest V3 compatible)

let currentSQLQuery = null;

document.addEventListener('DOMContentLoaded', function() {
  const extractBtn = document.getElementById('extractBtn');
  const copyBtn = document.getElementById('copyBtn');
  const downloadBtn = document.getElementById('downloadBtn');
  const filenameInput = document.getElementById('filenameInput');
  const statusDiv = document.getElementById('status');
  const sqlPreview = document.getElementById('sqlPreview');
  const actionButtons = document.getElementById('actionButtons');

  // Extract SQL Query
  extractBtn.addEventListener('click', async function() {
    extractBtn.disabled = true;
    extractBtn.textContent = 'Extracting...';
    
    try {
      // Get active tab
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      
      // Send message to content script
      const response = await chrome.tabs.sendMessage(tab.id, { action: "extractSQL" });
      
      extractBtn.disabled = false;
      extractBtn.textContent = 'Extract SQL Query';
      
      if (response && response.success) {
        // Debug: Log the original SQL
        console.log('Original SQL:', response.sqlQuery);
        
        // Store the formatted version as the main query
        currentSQLQuery = formatSQL(response.sqlQuery);
        
        // Debug: Log the formatted SQL
        console.log('Formatted SQL:', currentSQLQuery);
        console.log('Formatted SQL contains newlines:', currentSQLQuery.includes('\n'));
        
        showStatus('success', 'SQL Query found and extracted!');
        showSQLPreview(currentSQLQuery);
        actionButtons.style.display = 'block';
        
        // Set default filename based on current page
        const url = new URL(response.url);
        const defaultName = `sql_query_${url.hostname}_${new Date().toISOString().slice(0, 10)}.sql`;
        filenameInput.value = defaultName;
      } else {
        showStatus('error', 'No SQL query found in the current page');
        actionButtons.style.display = 'none';
        sqlPreview.style.display = 'none';
        currentSQLQuery = null;
      }
    } catch (error) {
      extractBtn.disabled = false;
      extractBtn.textContent = 'Extract SQL Query';
      showStatus('error', 'Error extracting SQL: ' + error.message);
    }
  });

  // Copy to Clipboard
  copyBtn.addEventListener('click', async function() {
    if (!currentSQLQuery) return;
    
    try {
      // Debug: Log what we're trying to copy
      console.log('Copying SQL:', currentSQLQuery);
      console.log('SQL length:', currentSQLQuery.length);
      console.log('Contains newlines:', currentSQLQuery.includes('\n'));
      
      await navigator.clipboard.writeText(currentSQLQuery);
      
      const originalText = copyBtn.textContent;
      copyBtn.textContent = 'Copied!';
      copyBtn.style.backgroundColor = '#28a745';
      
      setTimeout(function() {
        copyBtn.textContent = originalText;
        copyBtn.style.backgroundColor = '';
      }, 1500);
    } catch (err) {
      showStatus('error', 'Failed to copy to clipboard: ' + err.message);
    }
  });

  // Download as File
  downloadBtn.addEventListener('click', async function() {
    if (!currentSQLQuery) return;
    
    downloadBtn.disabled = true;
    downloadBtn.textContent = 'Downloading...';
    
    try {
      const filename = filenameInput.value.trim() || null;
      
      // Send message to background script
      const response = await chrome.runtime.sendMessage({
        action: "downloadSQL",
        sqlQuery: currentSQLQuery,
        filename: filename
      });
      
      downloadBtn.disabled = false;
      downloadBtn.textContent = 'Save as File';
      
      if (response && response.success) {
        const originalText = downloadBtn.textContent;
        downloadBtn.textContent = 'Downloaded!';
        downloadBtn.style.backgroundColor = '#28a745';
        
        setTimeout(function() {
          downloadBtn.textContent = originalText;
          downloadBtn.style.backgroundColor = '';
        }, 1500);
      } else {
        showStatus('error', 'Failed to download file: ' + (response ? response.error : 'Unknown error'));
      }
    } catch (error) {
      downloadBtn.disabled = false;
      downloadBtn.textContent = 'Save as File';
      showStatus('error', 'Failed to download file: ' + error.message);
    }
  });

  function showStatus(type, message) {
    statusDiv.className = `status ${type}`;
    statusDiv.textContent = message;
    statusDiv.style.display = 'block';
    
    // Auto-hide after 5 seconds
    setTimeout(function() {
      statusDiv.style.display = 'none';
    }, 5000);
  }

  function showSQLPreview(sqlQuery) {
    sqlPreview.textContent = sqlQuery;
    sqlPreview.style.display = 'block';
  }

  function formatSQL(sql) {
    // Simple but reliable SQL formatting
    let formatted = sql.trim();
    
    // Normalize whitespace first
    formatted = formatted.replace(/\s+/g, ' ');
    
    // Add line breaks before major keywords (simple approach)
    formatted = formatted.replace(/\sFROM\s/gi, '\nFROM ');
    formatted = formatted.replace(/\sWHERE\s/gi, '\nWHERE ');
    formatted = formatted.replace(/\sAND\s/gi, '\n  AND ');
    formatted = formatted.replace(/\sOR\s/gi, '\n  OR ');
    formatted = formatted.replace(/\sORDER\sBY\s/gi, '\nORDER BY ');
    formatted = formatted.replace(/\sGROUP\sBY\s/gi, '\nGROUP BY ');
    formatted = formatted.replace(/\sHAVING\s/gi, '\nHAVING ');
    formatted = formatted.replace(/\sJOIN\s/gi, '\nJOIN ');
    formatted = formatted.replace(/\sINNER\sJOIN\s/gi, '\nINNER JOIN ');
    formatted = formatted.replace(/\sLEFT\sJOIN\s/gi, '\nLEFT JOIN ');
    formatted = formatted.replace(/\sRIGHT\sJOIN\s/gi, '\nRIGHT JOIN ');
    
    // Add semicolon if missing
    if (!formatted.trim().endsWith(';')) {
      formatted += ';';
    }
    
    // Clean up any leading/trailing whitespace on lines
    formatted = formatted.split('\n').map(line => line.trim()).join('\n');
    
    return formatted;
  }

  // Auto-extract on popup open if we're on a page that might have SQL
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    const currentTab = tabs[0];
    if (currentTab.url && !currentTab.url.startsWith('chrome://') && !currentTab.url.startsWith('chrome-extension://')) {
      // Auto-extract after a short delay
      setTimeout(function() {
        extractBtn.click();
      }, 500);
    }
  });
});