// Load saved state chrome.storage.sync.get(['enabled', 'openaiApiKey'], function(result) { const enabled = result.enabled || false; document.getElementById('toggleSwitch').checked = enabled; document.getElementById('toggleLabel').textContent = enabled ? 'On' : 'Off'; // Load API key if saved if (result.openaiApiKey) { document.getElementById('apiKey').value = result.openaiApiKey; showApiStatus('API key loaded', 'success'); } }); // Handle toggle change document.getElementById('toggleSwitch').addEventListener('change', function(e) { const enabled = e.target.checked; // Save state chrome.storage.sync.set({ enabled: enabled }); // Update label document.getElementById('toggleLabel').textContent = enabled ? 'On' : 'Off'; // Update status document.getElementById('status').textContent = enabled ? 'Extension is now active' : 'Extension is now disabled'; // Send message to content script (with error handling) chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if (tabs[0]) { // Check if we can send messages to this tab const url = tabs[0].url; // Can't inject content scripts into chrome:// pages or other special URLs if (url.startsWith('chrome://') || url.startsWith('chrome-extension://') || url.startsWith('edge://')) { document.getElementById('status').textContent = 'Extension cannot run on this page'; document.getElementById('status').style.color = '#d13438'; setTimeout(() => { document.getElementById('status').textContent = ''; document.getElementById('status').style.color = ''; }, 3000); return; } // Try to send message chrome.tabs.sendMessage(tabs[0].id, { action: 'toggleExtension', enabled: enabled }).catch(error => { console.log('Could not send message to content script:', error); // This is okay - the content script will pick up the state from storage when it loads }); } }); // Clear status after 2 seconds setTimeout(() => { document.getElementById('status').textContent = ''; document.getElementById('status').style.color = ''; }, 2000); }); // Handle Retry button click document.getElementById('retryBtn').addEventListener('click', function() { const btn = document.getElementById('retryBtn'); btn.disabled = true; btn.textContent = 'Scanning...'; chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if (tabs[0]) { const url = tabs[0].url; if (url.startsWith('chrome://') || url.startsWith('chrome-extension://') || url.startsWith('edge://')) { document.getElementById('status').textContent = 'Extension cannot run on this page'; document.getElementById('status').style.color = '#d13438'; btn.disabled = false; btn.textContent = 'Retry Scan'; setTimeout(() => { document.getElementById('status').textContent = ''; document.getElementById('status').style.color = ''; }, 3000); return; } chrome.tabs.sendMessage(tabs[0].id, { action: 'retryScan' }).then(() => { window.close(); }).catch(error => { console.log('Could not send retry message:', error); document.getElementById('status').textContent = 'Could not initiate scan - refresh the page'; document.getElementById('status').style.color = '#d13438'; btn.disabled = false; btn.textContent = 'Retry Scan'; setTimeout(() => { document.getElementById('status').textContent = ''; document.getElementById('status').style.color = ''; }, 3000); }); } }); }); // Handle API key save document.getElementById('saveApiKey').addEventListener('click', function() { const apiKey = document.getElementById('apiKey').value.trim(); if (!apiKey) { showApiStatus('Please enter an API key', 'error'); return; } if (!apiKey.startsWith('sk-')) { showApiStatus('Invalid API key format', 'error'); return; } // Save API key chrome.storage.sync.set({ openaiApiKey: apiKey }, function() { showApiStatus('API key saved successfully!', 'success'); // Notify content script to reload chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if (tabs[0]) { chrome.tabs.sendMessage(tabs[0].id, { action: 'apiKeyUpdated', apiKey: apiKey }).catch(() => {}); } }); }); }); function showApiStatus(message, type) { const statusEl = document.getElementById('apiStatus'); statusEl.textContent = message; statusEl.className = `api-status ${type}`; statusEl.style.display = 'block'; setTimeout(() => { statusEl.style.display = 'none'; }, 3000); }