added missing files

js/cssDeletionManager.js

@@ -0,0 +1,31 @@
+import { getExtensionData } from './storageManager.js';
+import { toggleCSSInjection } from './cssInjectionManager.js';
+
+function deleteCSS(styleId, site, css, tabId) {
+    return new Promise((resolve, reject) => {
+        getExtensionData(({ customCSS, enabledSites }) => {
+            if (customCSS[site]) {
+                customCSS[site] = customCSS[site].filter((itemCss, index) => `style-${site}-${index}` !== styleId);
+                if (enabledSites[site]) {
+                    enabledSites[site] = enabledSites[site].filter(id => id !== styleId);
+                }
+                chrome.storage.local.set({ customCSS, enabledSites }, () => {
+                    if (!chrome.runtime.lastError) {
+                        toggleCSSInjection('remove', css, tabId);
+                        resolve();
+                    } else {
+                        reject(chrome.runtime.lastError);
+                    }
+                });
+            }
+        });
+    });
+}
+
+function deleteStyleCallback(styleId, styleItem, site, css, tabId) {
+    deleteCSS(styleId, site, css, tabId)
+        .then(() => styleItem.remove())
+        .catch(error => console.error(`Failed to delete CSS: ${error.message}`));
+}
+
+export { deleteStyleCallback };

js/cssInjectionManager.js

@@ -0,0 +1,39 @@
+function injectCSS(cssCode, tabId) {
+    return new Promise((resolve, reject) => {
+        chrome.scripting.insertCSS({
+            target: { tabId: tabId },
+            css: cssCode
+        }, () => {
+            if (chrome.runtime.lastError) {
+                console.error('Failed to inject CSS:', chrome.runtime.lastError.message);
+                reject(chrome.runtime.lastError);
+            }
+            resolve();
+        });
+    });
+}
+
+function removeCSS(cssCode, tabId) {
+    return new Promise((resolve, reject) => {
+        chrome.scripting.removeCSS({
+            target: { tabId: tabId },
+            css: cssCode
+        }, () => {
+            if (chrome.runtime.lastError) {
+                console.error('Failed to remove CSS:', chrome.runtime.lastError.message);
+                reject(chrome.runtime.lastError);
+            }
+            resolve();
+        });
+    });
+}
+
+function toggleCSSInjection(action, cssCode, tabId) {
+    if (action === 'inject') {
+        injectCSS(cssCode, tabId);
+    } else if (action === 'remove') {
+        removeCSS(cssCode, tabId);
+    }
+}
+
+export { toggleCSSInjection };

js/editStyleManager.js

@@ -0,0 +1,33 @@
+function getEditDetails() {
+  const params = new URLSearchParams(window.location.search);
+  console.log('Params are: ', params);
+  return {
+    styleId: params.get('styleId'),
+    site: params.get('site'),
+    css: params.get('css'),
+    tabId: params.get('tabId')
+  };
+}
+
+function updateExistingStyle(styleId, css) {
+  const [siteKey, index] = styleId.split('-').slice(1);
+  chrome.storage.local.get({ customCSS: {} }, function(data) {
+    let allCSS = data.customCSS;
+    if (siteKey) {
+      if (!allCSS[siteKey]) {
+        allCSS[siteKey] = [];
+      }
+      allCSS[siteKey][index] = css;
+      chrome.storage.local.set({ customCSS: allCSS }, function() {
+        if (chrome.runtime.lastError) {
+          console.error('Error storing the CSS: ', chrome.runtime.lastError);
+        } else {
+        }
+      });
+    } else {
+      console.log('The site information is missing.');
+    }
+  });
+}
+
+export { getEditDetails, updateExistingStyle };

js/eventListeners.js

@@ -0,0 +1,26 @@
+import { setEnabledSites } from './storageManager.js';
+import { toggleCSSInjection } from './cssInjectionManager.js';
+
+function addToggleEventListener(toggle, cssCode, styleId, site, enabledSites) {
+    toggle.addEventListener('click', function() {
+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+            const tabId = tabs[0].id;
+            const enabled = !toggle.classList.contains('toggle-active');
+            toggle.classList.toggle('toggle-active', enabled);
+            toggle.classList.toggle('toggle-inactive', !enabled);
+
+            if (enabled) {
+                if (!enabledSites[site]) enabledSites[site] = [];
+                enabledSites[site].push(styleId);
+                toggleCSSInjection('inject', cssCode, tabId);
+            } else {
+                enabledSites[site] = enabledSites[site].filter(item => item !== styleId);
+                toggleCSSInjection('remove', cssCode, tabId);
+            }
+
+            setEnabledSites(enabledSites);
+        });
+    });
+}
+
+export { addToggleEventListener };

js/storageManager.js

@@ -0,0 +1,20 @@
+function getExtensionData(callback) {
+    chrome.storage.local.get({ customCSS: {}, enabledSites: {} }, function(data) {
+        if (chrome.runtime.lastError) {
+            console.error('Error retrieving data:', chrome.runtime.lastError);
+            callback(null);
+        } else {
+            callback(data);
+        }
+    });
+}
+
+function setEnabledSites(enabledSites) {
+   chrome.storage.local.set({ enabledSites }, function() {
+       if (chrome.runtime.lastError) {
+           console.error('Error saving enabled sites:', chrome.runtime.lastError);
+       }
+   });
+}
+
+export { getExtensionData, setEnabledSites };

js/styleListEntryUI.js

@@ -0,0 +1,23 @@
+import { openEditStyleWindow } from './uiManager.js';
+
+function createEditButton(styleId, css, site, tabId) {
+    const editButton = document.createElement('button');
+    editButton.textContent = 'Edit';
+    editButton.classList.add('button', 'edit-button');
+
+    editButton.addEventListener('click', function() {
+        openEditStyleWindow(styleId, site, css, tabId);
+    });
+
+    return editButton;
+}
+
+function createDeleteButton(styleId, styleItem, deleteStyleCallback) {
+    const deleteButton = document.createElement('button');
+    deleteButton.textContent = 'Delete';
+    deleteButton.classList.add('button', 'delete-button');
+    deleteButton.onclick = () => deleteStyleCallback(styleId, styleItem);
+    return deleteButton;
+}
+
+export { createEditButton, createDeleteButton };

js/styleListManager.js

@@ -0,0 +1,30 @@
+import { createEditButton, createDeleteButton } from './styleListEntryUI.js';
+import { deleteStyleCallback } from './cssDeletionManager.js';
+import { addToggleEventListener } from './eventListeners.js';
+
+function createStyleListEntry(site, css, index, enabled, enabledSites, tabId) {
+  const styleId = `style-${site}-${index}`;
+  const styleItem = document.createElement('li');
+  styleItem.className = 'style-item';
+
+  const toggle = document.createElement('span');
+  toggle.className = enabled ? 'toggle-button toggle-active' : 'toggle-button toggle-inactive';
+  addToggleEventListener(toggle, css, styleId, site, enabledSites);
+  styleItem.appendChild(toggle);
+
+  const cssPreview = document.createElement('span');
+  cssPreview.className = 'css-preview';
+  cssPreview.textContent = css.substring(0, 30) + '...';
+  styleItem.appendChild(cssPreview);
+
+  const editButton = createEditButton(styleId, css, site, tabId);
+  styleItem.appendChild(editButton);
+
+  const deleteButton = createDeleteButton(styleId, styleItem, (styleId, styleItem) => deleteStyleCallback(styleId, styleItem, site, css, tabId)
+  );
+  styleItem.appendChild(deleteButton);
+
+  return styleItem; // Return statement is now correctly inside the function.
+}
+
+export { createStyleListEntry };

js/uiManager.js

@@ -0,0 +1,60 @@
+import { getExtensionData } from './storageManager.js';
+import { createStyleListEntry } from './styleListManager.js';
+
+function ensureUIComponents() {
+    const styleListElement = document.getElementById('style-list');
+    if (!styleListElement) {
+        const listElement = document.createElement('ul');
+        listElement.id = 'style-list';
+        document.body.appendChild(listElement);
+    }
+}
+
+function initializeUI() {
+    ensureUIComponents();
+    getExtensionData(({ customCSS, enabledSites }) => {
+        if (customCSS && enabledSites) {
+            updateUIWithStyles(customCSS, enabledSites);
+        } else {
+            console.error('Failed to retrieve extension data for UI initialization');
+        }
+    });
+}
+
+export function openEditStyleWindow(styleId, site, css, tabId) {
+    const editStyleWindowUrl = chrome.runtime.getURL('new-style.html') + 
+        `?styleId=${encodeURIComponent(styleId)}&site=${encodeURIComponent(site)}&css=${encodeURIComponent(css)}&tabId=${encodeURIComponent(tabId)}`;
+
+    // Calculate left and top for centering the browser window not the screen
+    const width = 400;
+    const height = 600;
+    const left = (window.innerWidth / 2) - (width / 2);
+    const top = (window.innerHeight / 2) - (height / 2);
+    // Open the window in the center of the screen
+    const newWindow = window.open(editStyleWindowUrl, 'editStyleWindow', `width=${width},height=${height},left=${left},top=${top}`);
+
+}
+
+async function updateUIWithStyles(customCSS, enabledSites) {
+    const styleList = document.getElementById('style-list');
+    styleList.innerHTML = '';
+
+    const tabs = await chrome.tabs.query({active: true, currentWindow: true});
+    const tabId = tabs[0].id;
+    const currentSite = new URL(tabs[0].url).hostname; // get the current site
+
+    // if the current site has styles stored, append them to the UI
+    if (customCSS.hasOwnProperty(currentSite)) {
+        const entries = customCSS[currentSite].map((css, index) => {
+            const styleId = `style-${currentSite}-${index}`;
+            const enabled = enabledSites[currentSite] && enabledSites[currentSite].includes(styleId);
+            return createStyleListEntry(currentSite, css, index, enabled, enabledSites, tabId);
+        });
+        const resolvedEntries = await Promise.all(entries);
+        resolvedEntries.forEach(styleItem => {
+            styleList.appendChild(styleItem);
+        });
+    }
+}
+
+export { updateUIWithStyles, initializeUI };