From 02164ad4fe37fc654d60cebf8077eb2d1bc11014 Mon Sep 17 00:00:00 2001 From: jacobgonzalez0 Date: Thu, 16 Nov 2023 10:53:12 -0600 Subject: [PATCH 1/4] Switched CSS saving and loading routine to use IndexedDB to remove limit on CSS --- layouts/settings/script.js | 30 +++++++++++++++--- scripts/injection.js | 62 ++++++++++++++++++++++++++++++++------ 2 files changed, 78 insertions(+), 14 deletions(-) diff --git a/layouts/settings/script.js b/layouts/settings/script.js index 21537efd..5f951c2f 100644 --- a/layouts/settings/script.js +++ b/layouts/settings/script.js @@ -170,6 +170,23 @@ 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(); + }; + }); +} + setTimeout(async () => { if(!vars) { await loadVars(); @@ -853,12 +870,15 @@ 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(() => { + // Dispatching custom event and messaging after successful save + 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', () => { diff --git a/scripts/injection.js b/scripts/injection.js index cc62f96f..00657a75 100644 --- a/scripts/injection.js +++ b/scripts/injection.js @@ -226,20 +226,63 @@ function isDark() { return hours < 9 || hours >= 19; } let customCSS, profileCSS = false; -async function updateCustomCSS() { - let data = await new Promise(resolve => { - chrome.storage.sync.get(['customCSS'], data => { - resolve(data); - }); + +// Function to open IndexedDB database +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" }); + }; }); - if(!data.customCSS) data.customCSS = ''; +} + +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 updateCustomCSS() { + let cssData = 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 { + customCSS.innerHTML = cssData; + + if(document.head) { + document.head.appendChild(customCSS); + } else { let int = setInterval(() => { if(document.head) { clearInterval(int); @@ -248,6 +291,7 @@ async function updateCustomCSS() { }, 100); } } + async function updateCustomCSSVariables() { let root = document.querySelector(":root"); let data = await new Promise(resolve => { From 6ffeae53f4e0f3c771784e23365dd9ddbd891259 Mon Sep 17 00:00:00 2001 From: jacobgonzalez0 Date: Thu, 16 Nov 2023 11:51:10 -0600 Subject: [PATCH 2/4] Fixed exporting and loading the CSS to the settings form --- layouts/settings/script.js | 31 +++++++++++++++++++++++++------ scripts/injection.js | 1 - 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/layouts/settings/script.js b/layouts/settings/script.js index 5f951c2f..159b7a98 100644 --- a/layouts/settings/script.js +++ b/layouts/settings/script.js @@ -187,6 +187,27 @@ async function writeCSSToDB(cssData) { }); } +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(); @@ -873,7 +894,6 @@ setTimeout(async () => { let cssValue = customCSS.value; writeCSSToDB(cssValue).then(() => { - // Dispatching custom event and messaging after successful save let event = new CustomEvent('customCSS', { detail: cssValue }); customCSSBus.postMessage({ type: 'css' }); document.dispatchEvent(event); @@ -1015,9 +1035,7 @@ setTimeout(async () => { showUserFollowerCountsInLists.checked = !!vars.showUserFollowerCountsInLists; showQuoteCount.checked = !!vars.showQuoteCount; hideUnfollowersPage.checked = !!vars.hideUnfollowersPage; - if(vars.customCSS) { - customCSS.value = 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; @@ -1143,10 +1161,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 diff --git a/scripts/injection.js b/scripts/injection.js index 00657a75..45128b37 100644 --- a/scripts/injection.js +++ b/scripts/injection.js @@ -227,7 +227,6 @@ function isDark() { } let customCSS, profileCSS = false; -// Function to open IndexedDB database async function openDatabase() { return new Promise((resolve, reject) => { let request = indexedDB.open("CustomCSSDatabase", 1); From ab40eb2c9413b7c0679c617b9442ca752e9d6703 Mon Sep 17 00:00:00 2001 From: jacobgonzalez0 Date: Sat, 18 Nov 2023 23:35:37 -0600 Subject: [PATCH 3/4] Now imports old css storage to IndexedDB upon loading --- layouts/settings/script.js | 3 +++ scripts/injection.js | 31 +++++++++++++++++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/layouts/settings/script.js b/layouts/settings/script.js index 159b7a98..8665e9f0 100644 --- a/layouts/settings/script.js +++ b/layouts/settings/script.js @@ -1035,6 +1035,9 @@ setTimeout(async () => { showUserFollowerCountsInLists.checked = !!vars.showUserFollowerCountsInLists; showQuoteCount.checked = !!vars.showQuoteCount; hideUnfollowersPage.checked = !!vars.hideUnfollowersPage; + if(vars.customCSS) { + writeCSSToDB(vars.customCSS) + } customCSS.value = await readCSSFromDB(); document.getElementById('stt-div').hidden = vars.timelineType !== 'algo' && vars.timelineType !== 'algov2'; savePreferredQuality.checked = !!vars.savePreferredQuality; diff --git a/scripts/injection.js b/scripts/injection.js index 45128b37..db88e795 100644 --- a/scripts/injection.js +++ b/scripts/injection.js @@ -268,8 +268,35 @@ async function readCSSFromDB() { }); } +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 cssData = await readCSSFromDB(); + let data = await new Promise(resolve => { + chrome.storage.sync.get(['customCSS'], data => { + resolve(data); + }); + }); + + if(data.customCSS) { + writeCSSToDB(data.customCSS) + chrome.storage.sync.remove('customCSS'); + } + data.customCSS = await readCSSFromDB(); if(profileCSS) return; @@ -277,7 +304,7 @@ async function updateCustomCSS() { customCSS = document.createElement('style'); customCSS.id = 'oldtwitter-custom-css'; - customCSS.innerHTML = cssData; + customCSS.innerHTML = data.customCSS; if(document.head) { document.head.appendChild(customCSS); From 1adda9eb85fc910fef3f5424f08ff89e1a394107 Mon Sep 17 00:00:00 2001 From: dimden Date: Tue, 21 Nov 2023 20:32:13 +0200 Subject: [PATCH 4/4] add swedish --- README.md | 1 + layouts/settings/index.html | 1 + manifest.json | 2 +- scripts/injection.js | 5 +++-- 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 21e7b2fe..d105bf5a 100644 --- a/README.md +++ b/README.md @@ -159,3 +159,4 @@ Simplified Chinese - [am1006](https://github.com/am1006), [CarimoWuling](https:/ Czech - Menal German - [basti564](https://twitter.com/basti564) Catalan - [elmees21](https://twitter.com/elmees21) +Swedish - [actuallyaridan](https://twitter.com/actuallyaridan) diff --git a/layouts/settings/index.html b/layouts/settings/index.html index 6332d566..72b219cc 100644 --- a/layouts/settings/index.html +++ b/layouts/settings/index.html @@ -94,6 +94,7 @@

__MSG_oldtwitter_settings__


+ diff --git a/manifest.json b/manifest.json index baafaab2..0e477af7 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Old Twitter Layout (2023)", "description": "__MSG_ext_description__", - "version": "1.8.1.4", + "version": "1.8.1.5", "manifest_version": 3, "homepage_url": "https://github.com/dimdenGD/OldTwitter", "background": { diff --git a/scripts/injection.js b/scripts/injection.js index db88e795..28c00d95 100644 --- a/scripts/injection.js +++ b/scripts/injection.js @@ -139,7 +139,7 @@ if ( url.searchParams.set('newtwitter', 'true'); location.replace(url); } -const LANGUAGES = ["en", "ru", "uk", "fr", "pt_BR", "es", "el", "ro", "tl", "lv", "he", "ne", "nl", "ja", "tr", "it", "ar", "th", "ko", "pl", "vi", "zh_CN", "zh_TW", "cs", "de", "ca"]; +const LANGUAGES = ["en", "ru", "uk", "fr", "pt_BR", "es", "el", "ro", "tl", "lv", "he", "ne", "nl", "ja", "tr", "it", "ar", "th", "ko", "pl", "vi", "zh_CN", "zh_TW", "cs", "de", "ca", "sv"]; const TRANSLATORS = { "ru": ["dimden", "https://dimden.dev/"], "uk": ["dimden", "https://dimden.dev/"], @@ -205,7 +205,8 @@ const TRANSLATORS = { ], "cs": ["Menal"], "de": ["basti564", "https://twitter.com/basti564"], - "ca": ["elmees21", "https://twitter.com/elmees21"] + "ca": ["elmees21", "https://twitter.com/elmees21"], + "sv": ["actuallyaridan", "https://twitter.com/actuallyaridan"] }; let LOC = {}; let LOC_EN = {};