Merge pull request #602 from JacobGonzalez0/pon/IndexedDB-CSS

Switched CSS saving and loading routine to use IndexedDB to remove li…

layouts/settings/script.js

@@ -170,6 +170,44 @@ function renderUserData() {
     });
 }
 
+async function writeCSSToDB(cssData) {
+    let db = await openDatabase();
+    return new Promise((resolve, reject) => {
+        let transaction = db.transaction(["cssStore"], "readwrite");
+        let store = transaction.objectStore("cssStore");
+        let request = store.put({ id: "customCSS", css: cssData });
+
+        request.onerror = function(event) {
+            reject("Error writing CSS to DB");
+        };
+
+        request.onsuccess = function(event) {
+            resolve();
+        };
+    });
+}
+
+async function readCSSFromDB() {
+    let db = await openDatabase();
+    return new Promise((resolve, reject) => {
+        let transaction = db.transaction(["cssStore"]);
+        let objectStore = transaction.objectStore("cssStore");
+        let request = objectStore.get("customCSS");
+
+        request.onerror = function(event) {
+            reject("Error reading CSS");
+        };
+
+        request.onsuccess = function(event) {
+            if (request.result) {
+                resolve(request.result.css);
+            } else {
+                resolve('');
+            }
+        };
+    });
+}
+
 setTimeout(async () => {
     if(!vars) {
         await loadVars();
@@ -853,12 +891,14 @@ setTimeout(async () => {
         }
     });
     customCSSSave.addEventListener('click', () => {
-        chrome.storage.sync.set({
-            customCSS: customCSS.value
-        }, () => {
-            let event = new CustomEvent('customCSS', { detail: customCSS.value });
-            customCSSBus.postMessage({type: 'css'});
+        let cssValue = customCSS.value;
+
+        writeCSSToDB(cssValue).then(() => {
+            let event = new CustomEvent('customCSS', { detail: cssValue });
+            customCSSBus.postMessage({ type: 'css' });
             document.dispatchEvent(event);
+        }).catch(error => {
+            console.error("Error saving CSS to DB:", error);
         });
     });
     autotranslateLanguageList.addEventListener('change', () => {
@@ -996,8 +1036,9 @@ setTimeout(async () => {
     showQuoteCount.checked = !!vars.showQuoteCount;
     hideUnfollowersPage.checked = !!vars.hideUnfollowersPage;
     if(vars.customCSS) {
-        customCSS.value = vars.customCSS;
+        writeCSSToDB(vars.customCSS)
     }
+    customCSS.value = await readCSSFromDB();
     document.getElementById('stt-div').hidden = vars.timelineType !== 'algo' && vars.timelineType !== 'algov2';
     savePreferredQuality.checked = !!vars.savePreferredQuality;
     showOriginalImages.checked = !!vars.showOriginalImages;
@@ -1123,10 +1164,11 @@ setTimeout(async () => {
         });
         input.click();
     });
-    document.getElementById('export-style').addEventListener('click', () => {
+    document.getElementById('export-style').addEventListener('click', async () => {
+        let customCssfromDb = await readCSSFromDB();
         let json = {
             customCSSVariables: vars.customCSSVariables,
-            customCSS: vars.customCSS,
+            customCSS: customCssfromDb,
             font: vars.font,
             tweetFont: vars.tweetFont,
             linkColor: vars.linkColor

scripts/injection.js

@@ -226,20 +226,89 @@ function isDark() {
     return hours < 9 || hours >= 19;
 }
 let customCSS, profileCSS = false;
+
+async function openDatabase() {
+    return new Promise((resolve, reject) => {
+        let request = indexedDB.open("CustomCSSDatabase", 1);
+
+        request.onerror = function(event) {
+            reject('Database error: ' + event.target.errorCode);
+        };
+
+        request.onsuccess = function(event) {
+            resolve(event.target.result);
+        };
+
+        // Only runs if the database was just created (like on first run)
+        request.onupgradeneeded = function(event) {
+            let db = event.target.result;
+            db.createObjectStore("cssStore", { keyPath: "id" });
+        };
+    });
+}
+
+async function readCSSFromDB() {
+    let db = await openDatabase();
+    return new Promise((resolve, reject) => {
+        let transaction = db.transaction(["cssStore"]);
+        let objectStore = transaction.objectStore("cssStore");
+        let request = objectStore.get("customCSS");
+
+        request.onerror = function(event) {
+            reject("Error reading CSS");
+        };
+
+        request.onsuccess = function(event) {
+            if (request.result) {
+                resolve(request.result.css);
+            } else {
+                resolve('');
+            }
+        };
+    });
+}
+
+async function writeCSSToDB(cssData) {
+    let db = await openDatabase();
+    return new Promise((resolve, reject) => {
+        let transaction = db.transaction(["cssStore"], "readwrite");
+        let store = transaction.objectStore("cssStore");
+        let request = store.put({ id: "customCSS", css: cssData });
+
+        request.onerror = function(event) {
+            reject("Error writing CSS to DB");
+        };
+
+        request.onsuccess = function(event) {
+            resolve();
+        };
+    });
+}
+
 async function updateCustomCSS() {
     let data = await new Promise(resolve => {
         chrome.storage.sync.get(['customCSS'], data => {
             resolve(data);
         });
     });
-    if(!data.customCSS) data.customCSS = '';
+
+    if(data.customCSS) {
+        writeCSSToDB(data.customCSS)
+        chrome.storage.sync.remove('customCSS');
+    }
+    data.customCSS = await readCSSFromDB();
+
     if(profileCSS) return;
+
     if(customCSS) customCSS.remove();
+
     customCSS = document.createElement('style');
     customCSS.id = 'oldtwitter-custom-css';
     customCSS.innerHTML = data.customCSS;
-    if(document.head) document.head.appendChild(customCSS);
-    else {
+
+    if(document.head) {
+        document.head.appendChild(customCSS);
+    } else {
         let int = setInterval(() => {
             if(document.head) {
                 clearInterval(int);
@@ -248,6 +317,7 @@ async function updateCustomCSS() {
         }, 100);
     }
 }
+
 async function updateCustomCSSVariables() {
     let root = document.querySelector(":root");
     let data = await new Promise(resolve => {