完成扩展

extension/ui/popup/popup.js

@@ -0,0 +1,188 @@
+/**
+ * Popup UI Logic
+ */
+
+// Debug mode flag (set to true to enable verbose logging)
+const DEBUG = true;
+
+function debugLog(...args) {
+  if (DEBUG) {
+    console.log('[Popup DEBUG]', new Date().toISOString(), ...args);
+  }
+}
+
+// DOM elements
+const masterSwitch = document.getElementById('masterSwitch');
+const moduleToggles = document.querySelectorAll('.module-toggle');
+const openOptionsBtn = document.getElementById('openOptions');
+
+// Stats elements
+const statCaptchas = document.getElementById('stat-captchas');
+const statForms = document.getElementById('stat-forms');
+const statCards = document.getElementById('stat-cards');
+
+// Initialize popup
+document.addEventListener('DOMContentLoaded', async () => {
+  debugLog('=== Popup DOMContentLoaded ===');
+  debugLog('DOM elements found:', {
+    masterSwitch: !!masterSwitch,
+    moduleToggles: moduleToggles.length,
+    openOptionsBtn: !!openOptionsBtn
+  });
+
+  await loadConfig();
+  await loadStats();
+
+  // Set up event listeners
+  masterSwitch.addEventListener('change', handleMasterToggle);
+
+  moduleToggles.forEach(toggle => {
+    toggle.addEventListener('change', handleModuleToggle);
+  });
+
+  openOptionsBtn.addEventListener('click', () => {
+    debugLog('Options button clicked');
+    chrome.runtime.openOptionsPage();
+  });
+
+  // Refresh stats every 2 seconds
+  setInterval(loadStats, 2000);
+
+  debugLog('=== Popup initialization complete ===');
+});
+
+/**
+ * Load configuration from storage
+ */
+async function loadConfig() {
+  debugLog('loadConfig: Starting to load configuration');
+  try {
+    const config = await chrome.storage.sync.get(['modules', 'globalSettings']);
+    debugLog('loadConfig: Received config from storage:', config);
+
+    // Set master switch
+    if (config.globalSettings) {
+      masterSwitch.checked = config.globalSettings.masterEnabled || false;
+      debugLog('loadConfig: Master switch set to', masterSwitch.checked);
+    }
+
+    // Set module toggles
+    if (config.modules) {
+      moduleToggles.forEach(toggle => {
+        const moduleName = toggle.dataset.module;
+        const moduleConfig = config.modules[moduleName];
+
+        if (moduleConfig) {
+          toggle.checked = moduleConfig.enabled || false;
+          updateModuleStatus(moduleName, moduleConfig.enabled);
+          debugLog(`loadConfig: Module ${moduleName} set to`, toggle.checked);
+        }
+      });
+    }
+
+    debugLog('loadConfig: Configuration loaded successfully');
+  } catch (error) {
+    console.error('[Popup] Failed to load config:', error);
+    debugLog('loadConfig: ERROR -', error);
+  }
+}
+
+/**
+ * Load statistics from storage
+ */
+async function loadStats() {
+  try {
+    const response = await chrome.runtime.sendMessage({ type: 'GET_STATS' });
+
+    if (response && response.success) {
+      const stats = response.stats;
+      statCaptchas.textContent = stats.captchasSolved || 0;
+      statForms.textContent = stats.formsFilled || 0;
+      statCards.textContent = stats.cardsGenerated || 0;
+    }
+  } catch (error) {
+    console.error('[Popup] Failed to load stats:', error);
+  }
+}
+
+/**
+ * Handle master switch toggle
+ */
+async function handleMasterToggle(event) {
+  const enabled = event.target.checked;
+  debugLog('handleMasterToggle: User toggled master switch to', enabled);
+
+  try {
+    debugLog('handleMasterToggle: Sending TOGGLE_MASTER message');
+    const response = await chrome.runtime.sendMessage({
+      type: 'TOGGLE_MASTER',
+      enabled
+    });
+
+    debugLog('handleMasterToggle: Received response:', response);
+
+    if (response && response.success) {
+      // Update all module toggles
+      moduleToggles.forEach(toggle => {
+        toggle.checked = enabled;
+        const moduleName = toggle.dataset.module;
+        updateModuleStatus(moduleName, enabled);
+      });
+
+      console.log('[Popup] Master switch:', enabled ? 'ON' : 'OFF');
+      debugLog('handleMasterToggle: All modules updated in UI');
+    } else {
+      debugLog('handleMasterToggle: Response indicated failure:', response);
+      event.target.checked = !enabled; // Revert on error
+    }
+  } catch (error) {
+    console.error('[Popup] Failed to toggle master:', error);
+    debugLog('handleMasterToggle: ERROR -', error);
+    event.target.checked = !enabled; // Revert on error
+  }
+}
+
+/**
+ * Handle individual module toggle
+ */
+async function handleModuleToggle(event) {
+  const moduleName = event.target.dataset.module;
+  const enabled = event.target.checked;
+  debugLog(`handleModuleToggle: User toggled ${moduleName} to`, enabled);
+
+  try {
+    debugLog('handleModuleToggle: Sending TOGGLE_MODULE message');
+    const response = await chrome.runtime.sendMessage({
+      type: 'TOGGLE_MODULE',
+      moduleName,
+      enabled
+    });
+
+    debugLog('handleModuleToggle: Received response:', response);
+
+    if (response && response.success) {
+      updateModuleStatus(moduleName, enabled);
+      console.log(`[Popup] Module ${moduleName}:`, enabled ? 'ON' : 'OFF');
+      debugLog('handleModuleToggle: Module status updated in UI');
+    } else {
+      debugLog('handleModuleToggle: Response indicated failure:', response);
+      event.target.checked = !enabled; // Revert on error
+    }
+  } catch (error) {
+    console.error(`[Popup] Failed to toggle ${moduleName}:`, error);
+    debugLog('handleModuleToggle: ERROR -', error);
+    event.target.checked = !enabled; // Revert on error
+  }
+}
+
+/**
+ * Update module status indicator
+ */
+function updateModuleStatus(moduleName, enabled) {
+  debugLog(`updateModuleStatus: ${moduleName} = ${enabled}`);
+  const statusElement = document.getElementById(`status-${moduleName}`);
+  if (statusElement) {
+    statusElement.textContent = enabled ? '●' : '○';
+    statusElement.className = enabled ? 'module-status active' : 'module-status inactive';
+  }
+}