popup.js

document.addEventListener('DOMContentLoaded', async () => {
  const powerButton = document.getElementById('powerToggle');
  const directionToggle = document.getElementById('directionToggle');

  // Load current state
  const { extensionEnabled = true, scrollDirection = 'normal' } = await chrome.storage.sync.get(['extensionEnabled', 'scrollDirection']);
  updateButtonState(extensionEnabled);
  updateDirectionState(scrollDirection);

  // Handle power toggle - click on power button area
  powerButton.addEventListener('click', async (e) => {
    e.stopPropagation();
    const { extensionEnabled = true } = await chrome.storage.sync.get('extensionEnabled');
    const newState = !extensionEnabled;

    await chrome.storage.sync.set({ extensionEnabled: newState });
    updateButtonState(newState);

    // Notify all tabs about the state change
    const tabs = await chrome.tabs.query({});
    tabs.forEach(tab => {
      chrome.tabs.sendMessage(tab.id, {
        action: 'toggleExtension',
        enabled: newState
      }).catch(() => {
        // Ignore errors for tabs where content script isn't loaded
      });
    });
  });

  // Handle direction toggle
  directionToggle.addEventListener('click', async (e) => {
    e.stopPropagation();
    const { scrollDirection = 'normal' } = await chrome.storage.sync.get('scrollDirection');
    const newDirection = scrollDirection === 'normal' ? 'inverted' : 'normal';

    await chrome.storage.sync.set({ scrollDirection: newDirection });
    updateDirectionState(newDirection);

    // Notify all tabs about the direction change
    const tabs = await chrome.tabs.query({});
    tabs.forEach(tab => {
      chrome.tabs.sendMessage(tab.id, {
        action: 'updateScrollDirection',
        direction: newDirection
      }).catch(() => {
        // Ignore errors for tabs where content script isn't loaded
      });
    });
  });

  function updateButtonState(enabled) {
    const statusText = document.getElementById('statusText');

    if (enabled) {
      powerButton.classList.add('enabled');
      powerButton.classList.remove('disabled');
      statusText.classList.add('enabled');
      statusText.classList.remove('disabled');
      statusText.textContent = 'Turn off';
    } else {
      powerButton.classList.add('disabled');
      powerButton.classList.remove('enabled');
      statusText.classList.add('disabled');
      statusText.classList.remove('enabled');
      statusText.textContent = 'Turn on';
    }
  }

  function updateDirectionState(direction) {
    const directionText = document.getElementById('directionText');
    if (direction === 'normal') {
      directionText.innerHTML = '↓ Zoom In';
    } else {
      directionText.innerHTML = '↓ Zoom Out';
    }
  }
});