popup.js

// Wait for the DOM to load before attaching event listeners
document.addEventListener('DOMContentLoaded', () => {
    const fontSizeInput = document.getElementById('font-size');
    const bgColorInput = document.getElementById('bg-color');
    const summarizeButton = document.getElementById('summarize-btn');
  
    // Load settings from storage and apply them to the inputs
    chrome.storage.sync.get(['fontSize', 'bgColor'], (settings) => {
      if (settings.fontSize) fontSizeInput.value = settings.fontSize;
      if (settings.bgColor) bgColorInput.value = settings.bgColor;
    });
  
    // Save font size to storage and send a message to content.js to apply it
    fontSizeInput.addEventListener('input', () => {
      const fontSize = fontSizeInput.value;
      chrome.storage.sync.set({ fontSize });
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          func: (size) => {
            document.body.style.fontSize = `${size}px`;
          },
          args: [fontSize],
        });
      });
    });
  
    // Save background color to storage and send a message to content.js to apply it
    bgColorInput.addEventListener('input', () => {
      const bgColor = bgColorInput.value;
      chrome.storage.sync.set({ bgColor });
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          func: (color) => {
            document.body.style.backgroundColor = color;
          },
          args: [bgColor],
        });
      });
    });
  
    // Summarize button click event
    summarizeButton.addEventListener('click', () => {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          func: () => {
            // Basic summarization function (will be expanded later)
            const text = document.body.innerText;
            const summary = text.split('.').slice(0, 3).join('. ') + '.';
            alert(`Summary: ${summary}`);
          },
        });
      });
    });
  });