popup.js

// Add any necessary functionality for the popup

document.addEventListener('DOMContentLoaded', function () {
  // Access the DOM elements
  var metricsContainer = document.getElementById('metrics');
  var refreshButton = document.getElementById('refreshButton');

  // Function to refresh the metrics
  function refreshMetrics() {
    // Clear the metrics container
    metricsContainer.innerHTML = '';

    // Send a message to the content script to recalculate metrics
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { action: 'recalculateMetrics' }, function (response) {
        // Handle the response from the content script
        if (response && response.metrics) {
          // Display the metrics in the popup
          response.metrics.forEach(function (metric) {
            var metricElement = document.createElement('div');
            metricElement.classList.add('metric');

            var labelElement = document.createElement('p');
            labelElement.classList.add('metric-label');
            labelElement.textContent = metric.label;

            var valueElement = document.createElement('p');
            valueElement.classList.add('metric-value');
            valueElement.textContent = metric.value;

            metricElement.appendChild(labelElement);
            metricElement.appendChild(valueElement);
            metricsContainer.appendChild(metricElement);
          });
        }
      });
    });
  }

  // Add an event listener to the refresh button
  refreshButton.addEventListener('click', refreshMetrics);

  // Initial refresh of the metrics when the popup is opened
  refreshMetrics();
});