playlist-extension/popup/popup.js

// Function to display status messages
function showStatus(message) {
  document.getElementById('status').textContent = message;
  setTimeout(() => {
    document.getElementById('status').textContent = '';
  }, 3000);
}

// Function to inject script into the current tab
function injectScript() {
  browser.tabs.query({active: true, currentWindow: true})
    .then(tabs => {
      browser.tabs.sendMessage(tabs[0].id, { command: 'injectCode' })
        .then(response => {
          showStatus('Script injected successfully!');
        })
        .catch(error => {
          showStatus('Error: Content script may not be loaded. Try refreshing the page.');
          // Fallback: Directly inject the content script
          browser.tabs.executeScript(tabs[0].id, {
            file: "/content_scripts/content.js"
          });
        });
    });
}

// Function to navigate to another page
function navigateTab() {
  const url = document.getElementById('navigation-url').value;
  if (!url) {
    showStatus('Please enter a URL');
    return;
  }
  
  // Add http:// prefix if missing
  const formattedUrl = url.includes('://') ? url : `http://${url}`;
  
  browser.tabs.query({active: true, currentWindow: true})
    .then(tabs => {
      browser.runtime.sendMessage({
        command: 'navigate',
        tabId: tabs[0].id,
        url: formattedUrl
      })
      .then(response => {
        if (response && response.status === 'success') {
          showStatus('Tab navigated successfully!');
        } else {
          showStatus('Error navigating tab: ' + (response ? response.message : 'Unknown error'));
        }
      })
      .catch(error => {
        showStatus('Error navigating tab: ' + error.message);
      });
    });
}

// Function to save data to storage
function saveData() {
  const key = document.getElementById('storage-key').value;
  const value = document.getElementById('storage-value').value;
  
  if (!key) {
    showStatus('Please enter a key');
    return;
  }
  
  browser.storage.local.set({ [key]: value })
    .then(() => {
      document.getElementById('storage-result').textContent = `Data saved: ${key} = ${value}`;
    })
    .catch(error => {
      document.getElementById('storage-result').textContent = 'Error saving data: ' + error.message;
    });
}

// Function to load data from storage
function loadData() {
  const key = document.getElementById('storage-key').value;
  
  if (!key) {
    showStatus('Please enter a key');
    return;
  }
  
  browser.storage.local.get(key)
    .then(result => {
      if (result[key] !== undefined) {
        document.getElementById('storage-value').value = result[key];
        document.getElementById('storage-result').textContent = `Data loaded: ${key} = ${result[key]}`;
      } else {
        document.getElementById('storage-result').textContent = `No data found for key: ${key}`;
      }
    })
    .catch(error => {
      document.getElementById('storage-result').textContent = 'Error loading data: ' + error.message;
    });
}

// Add event listeners when the document is loaded
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('inject-button').addEventListener('click', injectScript);
  document.getElementById('navigate-button').addEventListener('click', navigateTab);
  document.getElementById('save-data').addEventListener('click', saveData);
  document.getElementById('load-data').addEventListener('click', loadData);
  
  // Example of using storage to track last usage
  browser.storage.local.get('lastUsed')
    .then(result => {
      if (result.lastUsed) {
        showStatus('Last used: ' + new Date(result.lastUsed).toLocaleString());
      }
      browser.storage.local.set({ 'lastUsed': Date.now() });
    });
});