popup.js

/**
 * Browser Diagnose Tool - Optimierte Version 2.0
 *
 * Features:
 * - Paralleles Auslesen von LocalStorage, SessionStorage und Cookies
 * - Optimiertes Löschen mit Promise.allSettled()
 * - Chunked Display für große Datenmengen
 * - Performance-Tracking
 */

document.addEventListener('DOMContentLoaded', function() {
  // DOM Elements
  const scanBtn = document.getElementById('scan-btn');
  const clearBtn = document.getElementById('clear-btn');
  const exportBtn = document.getElementById('export-btn');
  const statusMessage = document.getElementById('status-message');
  const loadingElement = document.getElementById('loading');
  const errorElement = document.getElementById('error-message');
  const resultsElement = document.getElementById('results');
  const currentDomainElement = document.getElementById('current-domain');
  const performanceInfo = document.getElementById('performance-info');

  // State
  let scanData = null;
  let currentUrl = null;
  let currentTabId = null;

  // === Injected Functions (werden in die Webseite injiziert) ===

  function getStorageData() {
    try {
      const localStorageData = {};
      const sessionStorageData = {};

      // LocalStorage auslesen
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        try {
          localStorageData[key] = localStorage.getItem(key);
        } catch (e) {
          localStorageData[key] = '[Fehler beim Lesen]';
        }
      }

      // SessionStorage auslesen
      for (let i = 0; i < sessionStorage.length; i++) {
        const key = sessionStorage.key(i);
        try {
          sessionStorageData[key] = sessionStorage.getItem(key);
        } catch (e) {
          sessionStorageData[key] = '[Fehler beim Lesen]';
        }
      }

      return {
        localStorage: localStorageData,
        sessionStorage: sessionStorageData
      };
    } catch (error) {
      return {
        localStorage: {},
        sessionStorage: {},
        error: error.message
      };
    }
  }

  function clearStorageData() {
    try {
      const localCount = localStorage.length;
      const sessionCount = sessionStorage.length;
      localStorage.clear();
      sessionStorage.clear();
      return {
        success: true,
        cleared: { localStorage: localCount, sessionStorage: sessionCount }
      };
    } catch (error) {
      return { success: false, error: error.message };
    }
  }

  // === UI Helper Functions ===

  function showLoading(message = 'Scanne Seite...') {
    loadingElement.querySelector('p').textContent = message;
    loadingElement.style.display = 'block';
    resultsElement.style.display = 'none';
    errorElement.style.display = 'none';
  }

  function hideLoading() {
    loadingElement.style.display = 'none';
  }

  function showError() {
    errorElement.style.display = 'block';
    resultsElement.style.display = 'none';
    hideLoading();
  }

  function showResults() {
    resultsElement.style.display = 'block';
    errorElement.style.display = 'none';
    hideLoading();
  }

  function showStatus(text, type = 'success') {
    statusMessage.textContent = text;
    statusMessage.className = 'status ' + type;
    statusMessage.style.display = 'block';
    setTimeout(() => {
      statusMessage.style.display = 'none';
    }, 4000);
  }

  function clearDisplay() {
    document.getElementById('localstorage-data').innerHTML = '<div class="empty-state">Keine Daten</div>';
    document.getElementById('sessionstorage-data').innerHTML = '<div class="empty-state">Keine Daten</div>';
    document.getElementById('cookies-data').innerHTML = '<div class="empty-state">Keine Daten</div>';
    document.getElementById('localStorage-count').textContent = '0';
    document.getElementById('sessionStorage-count').textContent = '0';
    document.getElementById('cookies-count').textContent = '0';
    document.getElementById('ls-count').textContent = '0';
    document.getElementById('ss-count').textContent = '0';
    document.getElementById('ck-count').textContent = '0';
    scanData = null;
    exportBtn.disabled = true;
  }

  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = String(text);
    return div.innerHTML;
  }

  function truncateValue(value, maxLength = 100) {
    const str = String(value);
    if (str.length <= maxLength) return escapeHtml(str);
    return escapeHtml(str.substring(0, maxLength)) + '...';
  }

  // === Initialization ===

  async function initialize() {
    try {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

      if (tab && tab.url) {
        if (tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('about:')) {
          currentDomainElement.textContent = 'Nicht verfügbar (geschützte Seite)';
          scanBtn.disabled = true;
          clearBtn.disabled = true;
          return;
        }

        currentUrl = new URL(tab.url);
        currentTabId = tab.id;
        currentDomainElement.textContent = currentUrl.hostname;
      } else {
        currentDomainElement.textContent = 'Keine aktive Seite';
        scanBtn.disabled = true;
        clearBtn.disabled = true;
      }
    } catch (error) {
      console.error('Initialization error:', error);
      currentDomainElement.textContent = 'Fehler beim Laden';
    }
  }

  // === Main Functions ===

  async function scanPage() {
    const startTime = performance.now();
    scanData = null;
    exportBtn.disabled = true;
    showLoading('Scanne Seite...');

    try {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

      if (!tab || !tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://')) {
        showError();
        return;
      }

      const tabId = tab.id;

      // PARALLEL: Storage und Cookies gleichzeitig abrufen
      const [storageResults, cookies] = await Promise.all([
        // 1. Storage auslesen via Script Injection
        chrome.scripting.executeScript({
          target: { tabId: tabId },
          func: getStorageData
        }).then(results => {
          if (results && results[0] && results[0].result) {
            return results[0].result;
          }
          return { localStorage: {}, sessionStorage: {} };
        }).catch(err => {
          console.warn('Storage read error:', err);
          return { localStorage: {}, sessionStorage: {} };
        }),

        // 2. Cookies abrufen
        chrome.cookies.getAll({ url: tab.url }).catch(err => {
          console.warn('Cookie read error:', err);
          return [];
        })
      ]);

      const endTime = performance.now();
      const duration = (endTime - startTime).toFixed(0);

      // Daten zusammenführen
      const allData = {
        url: tab.url,
        domain: currentUrl ? currentUrl.hostname : '',
        timestamp: new Date().toISOString(),
        scanDuration: duration + 'ms',
        localStorage: storageResults.localStorage || {},
        sessionStorage: storageResults.sessionStorage || {},
        cookies: cookies.map(cookie => ({
          name: cookie.name,
          value: cookie.value,
          domain: cookie.domain,
          path: cookie.path,
          secure: cookie.secure,
          httpOnly: cookie.httpOnly,
          expirationDate: cookie.expirationDate,
          sameSite: cookie.sameSite
        }))
      };

      scanData = allData;
      displayData(allData);
      exportBtn.disabled = false;
      performanceInfo.textContent = `Scan abgeschlossen in ${duration}ms`;
      showStatus(`Scan erfolgreich in ${duration}ms`, 'success');
      showResults();

    } catch (error) {
      console.error('Scan error:', error);
      showError();
      showStatus('Fehler beim Scannen: ' + error.message, 'error');
    }
  }

  async function clearAllData() {
    if (!confirm('Möchten Sie wirklich ALLE LocalStorage, SessionStorage und Cookies für diese Seite löschen?')) {
      return;
    }

    const startTime = performance.now();
    showLoading('Lösche Daten...');

    try {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

      if (!tab || !tab.url) {
        showStatus('Keine aktive Seite gefunden', 'error');
        hideLoading();
        return;
      }

      const tabId = tab.id;

      // PARALLEL: Storage löschen UND Cookies abrufen
      const [clearResult, cookies] = await Promise.all([
        chrome.scripting.executeScript({
          target: { tabId: tabId },
          func: clearStorageData
        }).then(results => {
          if (results && results[0] && results[0].result) {
            return results[0].result;
          }
          return { success: false };
        }).catch(err => {
          console.warn('Storage clear error:', err);
          return { success: false, error: err.message };
        }),

        chrome.cookies.getAll({ url: tab.url })
      ]);

      // OPTIMIERT: Alle Cookies parallel löschen
      let deletedCookies = 0;
      if (cookies.length > 0) {
        const deletePromises = cookies.map(cookie => {
          const protocol = cookie.secure ? 'https:' : 'http:';
          const domain = cookie.domain.startsWith('.') ? cookie.domain.substring(1) : cookie.domain;
          const cookieUrl = `${protocol}//${domain}${cookie.path}`;

          return chrome.cookies.remove({
            url: cookieUrl,
            name: cookie.name
          }).then(() => {
            deletedCookies++;
            return true;
          }).catch(() => false);
        });

        await Promise.allSettled(deletePromises);
      }

      const endTime = performance.now();
      const duration = (endTime - startTime).toFixed(0);

      const storageCleared = clearResult.success ?
        `${clearResult.cleared?.localStorage || 0} LocalStorage, ${clearResult.cleared?.sessionStorage || 0} SessionStorage` :
        'Storage-Fehler';

      showStatus(`Gelöscht: ${storageCleared}, ${deletedCookies} Cookies (${duration}ms)`, 'success');
      clearDisplay();
      showResults();

    } catch (error) {
      console.error('Clear error:', error);
      showStatus('Fehler beim Löschen: ' + error.message, 'error');
    } finally {
      hideLoading();
    }
  }

  function exportData() {
    if (!scanData) {
      showStatus('Keine Daten zum Exportieren vorhanden', 'error');
      return;
    }

    try {
      const dataStr = JSON.stringify(scanData, null, 2);
      const blob = new Blob([dataStr], { type: 'application/json' });
      const url = URL.createObjectURL(blob);

      const date = new Date().toISOString().split('T')[0];
      const domain = scanData.domain || 'unknown';
      const filename = `browser-diagnose-${domain}-${date}.json`;

      chrome.downloads.download({
        url: url,
        filename: filename,
        saveAs: true
      }, (downloadId) => {
        if (chrome.runtime.lastError) {
          showStatus('Export fehlgeschlagen: ' + chrome.runtime.lastError.message, 'error');
        } else {
          showStatus('Daten erfolgreich exportiert!', 'success');
        }
        setTimeout(() => URL.revokeObjectURL(url), 5000);
      });

    } catch (error) {
      console.error('Export error:', error);
      showStatus('Export fehlgeschlagen: ' + error.message, 'error');
    }
  }

  function displayData(data) {
    requestAnimationFrame(() => {
      // Counts aktualisieren
      const lsCount = Object.keys(data.localStorage).length;
      const ssCount = Object.keys(data.sessionStorage).length;
      const ckCount = data.cookies.length;

      document.getElementById('localStorage-count').textContent = lsCount;
      document.getElementById('sessionStorage-count').textContent = ssCount;
      document.getElementById('cookies-count').textContent = ckCount;
      document.getElementById('ls-count').textContent = lsCount;
      document.getElementById('ss-count').textContent = ssCount;
      document.getElementById('ck-count').textContent = ckCount;

      // LocalStorage anzeigen
      displayStorageSection('localstorage-data', data.localStorage);

      // SessionStorage anzeigen
      displayStorageSection('sessionstorage-data', data.sessionStorage);

      // Cookies anzeigen
      displayCookiesSection('cookies-data', data.cookies);
    });
  }

  function displayStorageSection(containerId, storageData) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    const entries = Object.entries(storageData);

    if (entries.length === 0) {
      container.innerHTML = '<div class="empty-state">Keine Daten</div>';
      return;
    }

    const displayLimit = 50;
    const fragment = document.createDocumentFragment();

    for (let i = 0; i < Math.min(entries.length, displayLimit); i++) {
      const [key, value] = entries[i];
      const div = document.createElement('div');
      div.className = 'data-item';
      div.innerHTML = `<span class="key">${escapeHtml(key)}</span>:<span class="value">${truncateValue(value)}</span>`;
      fragment.appendChild(div);
    }

    if (entries.length > displayLimit) {
      const info = document.createElement('div');
      info.className = 'data-item';
      info.style.textAlign = 'center';
      info.style.color = '#667eea';
      info.textContent = `... und ${entries.length - displayLimit} weitere Einträge (siehe Export)`;
      fragment.appendChild(info);
    }

    container.appendChild(fragment);
  }

  function displayCookiesSection(containerId, cookies) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    if (cookies.length === 0) {
      container.innerHTML = '<div class="empty-state">Keine Cookies</div>';
      return;
    }

    const displayLimit = 30;
    const fragment = document.createDocumentFragment();

    for (let i = 0; i < Math.min(cookies.length, displayLimit); i++) {
      const cookie = cookies[i];
      const div = document.createElement('div');
      div.className = 'data-item';

      const flags = [];
      if (cookie.secure) flags.push('🔒');
      if (cookie.httpOnly) flags.push('🚫JS');

      div.innerHTML = `
        <span class="key">${escapeHtml(cookie.name)}</span>
        <span class="value">${truncateValue(cookie.value, 50)}</span>
        ${flags.length > 0 ? `<span style="float:right;font-size:10px">${flags.join(' ')}</span>` : ''}
      `;
      fragment.appendChild(div);
    }

    if (cookies.length > displayLimit) {
      const info = document.createElement('div');
      info.className = 'data-item';
      info.style.textAlign = 'center';
      info.style.color = '#667eea';
      info.textContent = `... und ${cookies.length - displayLimit} weitere Cookies (siehe Export)`;
      fragment.appendChild(info);
    }

    container.appendChild(fragment);
  }

  // === Event Listeners ===

  scanBtn.addEventListener('click', scanPage);
  clearBtn.addEventListener('click', clearAllData);
  exportBtn.addEventListener('click', exportData);

  // === Toggle Section (global function for onclick) ===
  window.toggleSection = function(sectionId) {
    const content = document.getElementById(sectionId + '-data');
    if (content) {
      content.style.display = content.style.display === 'none' ? 'block' : 'none';
    }
  };

  // === Initialize ===
  initialize();
});