popup.js

// Toggle highlighting on/off
document.getElementById('highlightToggle').addEventListener('click', async function() {
  const toggle = this;
  const isActive = toggle.classList.contains('active');
  
  // Toggle the UI
  toggle.classList.toggle('active');
  
  // Send message to content script to toggle highlighting
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  if (tab?.id) {
    chrome.tabs.sendMessage(tab.id, {
      action: 'toggleHighlighting',
      enabled: !isActive
    });
  }
});

// Get initial state when popup opens
(async function() {
  // First try to get state from storage
  chrome.storage.local.get('highlightingEnabled', (result) => {
    const toggle = document.getElementById('highlightToggle');
    const enabled = result.highlightingEnabled !== false; // Default to true
    
    if (enabled) {
      toggle.classList.add('active');
    } else {
      toggle.classList.remove('active');
    }
  });
  
  // Also try to sync with current tab's content script
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  if (tab?.id) {
    chrome.tabs.sendMessage(tab.id, {
      action: 'getHighlightingState'
    }, (response) => {
      if (chrome.runtime.lastError) {
        // Ignore errors (e.g., when on restricted pages)
        return;
      }
      
      if (response && typeof response.enabled === 'boolean') {
        const toggle = document.getElementById('highlightToggle');
        if (response.enabled) {
          toggle.classList.add('active');
        } else {
          toggle.classList.remove('active');
        }
      }
    });
  }
})();