Improving code structure. Added libreddit settings #192

6 files changed, 399 insertions, 220 deletions

diff --git a/src/assets/javascripts/helpers/reddit.js b/src/assets/javascripts/helpers/reddit.js
index 9d427c2e..9cd7600b 100644
--- a/src/assets/javascripts/helpers/reddit.js
+++ b/src/assets/javascripts/helpers/reddit.js
@@ -9,27 +9,8 @@ const targets = [
 let redirects = {
   // modern UI
   "libreddit": {
-    "normal": [
-      "https://libredd.it",
-      "https://libreddit.spike.codes",
-      "https://libreddit.dothq.co",
-      "https://libreddit.kavin.rocks",
-      "https://libreddit.bcow.xyz",
-      "https://libreddit.40two.app",
-      "https://reddit.invak.id",
-      "https://reddit.phii.me",
-      "https://lr.riverside.rocks",
-      "https://libreddit.silkky.cloud",
-      "https://libreddit.database.red",
-      "https://libreddit.exonip.de",
-      "https://libreddit.domain.glass",
-    ],
-    "tor": [
-      "http://spjmllawtheisznfs7uryhxumin26ssv2draj7oope3ok3wuhy43eoyd.onion",
-      "http://fwhhsbrbltmrct5hshrnqlqygqvcgmnek3cnka55zj4y7nuus5muwyyd.onion",
-      "http://dflv6yjt7il3n3tggf4qhcmkzbti2ppytqx3o7pjrzwgntutpewscyid.onion",
-      "http://kphht2jcflojtqte4b4kyx7p2ahagv4debjj32nre67dxz7y57seqwyd.onion",
-    ]
+    "normal": [],
+    "tor": []
   },
   // old UI
   "teddit": {
@@ -165,61 +146,56 @@ function setDisableReddit(val) {
 }
 
 let frontend;
-const getFrontend = () => frontend;
-function setFrontend(val) {
-  frontend = val;
-  browser.storage.local.set({ redditFrontend: frontend })
-};
-
 let protocol;
-const getProtocol = () => protocol;
-function setProtocol(val) {
-  protocol = val;
-  browser.storage.local.set({ redditProtocol: val })
-  console.log("redditProtocol: ", val)
-}
-
 let bypassWatchOnReddit;
-const getBypassWatchOnReddit = () => bypassWatchOnReddit;
-function setBypassWatchOnReddit(val) {
-  bypassWatchOnReddit = val;
-  browser.storage.local.set({ bypassWatchOnReddit })
-  console.log("bypassWatchOnReddit: ", bypassWatchOnReddit)
-}
+
+let enableCustom;
 
 let theme;
-let applyThemeToSites;
+let front_page;
+let layout;
+let wide;
+let post_sort;
+let comment_sort;
+let show_nsfw;
+let autoplay_videos;
+let use_hls;
+let hide_hls_notification;
+
 function initLibredditCookies() {
-  if (applyThemeToSites && theme != 'DEFAULT') {
-    let allInstances = [...redirects.libreddit.normal, ...redirects.libreddit.tor, ...libredditNormalCustomRedirects, ...libredditTorCustomRedirects]
-    let checkedInstances = [...libredditNormalRedirectsChecks, ...libredditNormalCustomRedirects, ...libredditTorRedirectsChecks, ...libredditTorCustomRedirects]
-    for (const instanceUrl of allInstances)
-      if (!checkedInstances.includes(instanceUrl))
-        browser.cookies.remove({
-          url: instanceUrl,
-          name: "theme",
-        })
-    for (const instanceUrl of checkedInstances)
-      browser.cookies.set({
-        url: instanceUrl,
-        name: "theme",
-        value: theme
-      })
+  if (enableCustom) {
+    let checkedInstances = [
+      ...libredditNormalRedirectsChecks,
+      ...libredditNormalCustomRedirects,
+      ...libredditTorRedirectsChecks,
+      ...libredditTorCustomRedirects
+    ]
+
+    for (const instance of checkedInstances) {
+      browser.cookies.set({ url: instance, name: "theme", value: theme })
+      browser.cookies.set({ url: instance, name: "front_page", value: front_page })
+      browser.cookies.set({ url: instance, name: "layout", value: layout })
+      browser.cookies.set({ url: instance, name: "wide", value: wide ? 'on' : 'off' })
+      browser.cookies.set({ url: instance, name: "post_sort", value: post_sort })
+      browser.cookies.set({ url: instance, name: "comment_sort", value: comment_sort })
+      browser.cookies.set({ url: instance, name: "show_nsfw", value: show_nsfw ? 'on' : 'off' })
+      browser.cookies.set({ url: instance, name: "autoplay_videos", value: autoplay_videos ? 'on' : 'off' })
+      browser.cookies.set({ url: instance, name: "use_hls", value: use_hls ? 'on' : 'off' })
+      browser.cookies.set({ url: instance, name: "hide_hls_notification", value: hide_hls_notification ? 'on' : 'off' })
+    }
   }
 }
 function initTedditCookies() {
   let themeValue;
   if (theme == 'light') themeValue = 'white';
   if (theme == 'dark') themeValue = 'dark';
-  if (applyThemeToSites && themeValue) {
-    let allInstances = [...redirects.teddit.normal, ...redirects.teddit.tor, ...tedditNormalCustomRedirects, ...tedditTorCustomRedirects]
-    let checkedInstances = [...tedditNormalRedirectsChecks, ...tedditNormalCustomRedirects, ...tedditTorRedirectsChecks, ...tedditTorCustomRedirects]
-    for (const instanceUrl of allInstances)
-      if (!checkedInstances.includes(instanceUrl))
-        browser.cookies.remove({
-          url: instanceUrl,
-          name: "theme",
-        })
+  if (enableCustom && themeValue) {
+    let checkedInstances = [
+      ...tedditNormalRedirectsChecks,
+      ...tedditNormalCustomRedirects,
+      ...tedditTorRedirectsChecks,
+      ...tedditTorCustomRedirects
+    ]
     for (const instanceUrl of checkedInstances)
       browser.cookies.set({
         url: instanceUrl,
@@ -374,8 +350,8 @@ function reverse(url) {
     ...nitterNormalCustomRedirects,
     ...nitterTorCustomRedirects].includes(protocolHost)
   ) return;
-  if(url.pathname.includes('/pics/w:null_'))
-  return `https://reddit.com${url.pathname}${url.search}`;
+  if (url.pathname.includes('/pics/w:null_'))
+    return `https://reddit.com${url.pathname}${url.search}`;
 }
 
 function switchInstance(url) {
@@ -428,70 +404,128 @@ function switchInstance(url) {
   return `${randomInstance}${url.pathname}${url.search}`;
 }
 
+async function initDefaults() {
+  return new Promise(async resolve => {
+    fetch('/instances/data.json').then(response => response.text()).then(async data => {
+      let dataJson = JSON.parse(data);
+      redirects.teddit = dataJson.teddit;
+      redirects.libreddit = dataJson.libreddit;
+      await browser.storage.local.set({
+        disableReddit: false,
+        redditProtocol: 'normal',
+        redditFrontend: 'libreddit',
+
+        bypassWatchOnReddit: true,
+        alwaysUsePreferred: false,
+
+        redditRedirects: {
+          'libreddit': redirects.libreddit,
+          'teddit': redirects.teddit,
+        },
+
+        libredditNormalRedirectsChecks: [...redirects.libreddit.normal],
+        libredditNormalCustomRedirects: [],
+
+        libredditTorRedirectsChecks: [...redirects.libreddit.tor],
+        libredditTorCustomRedirects: [],
+
+        tedditNormalRedirectsChecks: [...redirects.teddit.normal],
+        tedditNormalCustomRedirects: [],
+
+        tedditTorRedirectsChecks: [...redirects.teddit.tor],
+        tedditTorCustomRedirects: [],
+
+        enableLibredditCustomSettings: false,
+
+        redditTheme: 'system',
+        redditFrontPage: 'default',
+        redditLayout: 'card',
+        redditWide: false,
+        redditPostSort: 'hot',
+        redditCommentSort: 'confidence',
+        redditShowNsfw: false,
+        redditUseHls: false,
+        redditHideHlsNotification: false,
+      });
+      resolve();
+    });
+  })
+}
+
 async function init() {
   return new Promise(resolve => {
-    fetch('/instances/data.json').then(response => response.text()).then(data => {
-      let dataJson = JSON.parse(data);
-      browser.storage.local.get(
-        [
-          "disableReddit",
-          "redditFrontend",
-          "redditRedirects",
+    browser.storage.local.get(
+      [
+        "disableReddit",
+        "redditFrontend",
+        "redditRedirects",
 
-          "libredditNormalRedirectsChecks",
-          "libredditNormalCustomRedirects",
-          "libredditTorRedirectsChecks",
-          "libredditTorCustomRedirects",
+        "libredditNormalRedirectsChecks",
+        "libredditNormalCustomRedirects",
+        "libredditTorRedirectsChecks",
+        "libredditTorCustomRedirects",
 
-          "tedditNormalRedirectsChecks",
-          "tedditNormalCustomRedirects",
-          "tedditTorRedirectsChecks",
-          "tedditTorCustomRedirects",
+        "tedditNormalRedirectsChecks",
+        "tedditNormalCustomRedirects",
+        "tedditTorRedirectsChecks",
+        "tedditTorCustomRedirects",
 
-          "theme",
-          "applyThemeToSites",
 
-          "redditProtocol",
-          "bypassWatchOnReddit",
+        "redditProtocol",
+        "bypassWatchOnReddit",
 
-          "alwaysUsePreferred",
-        ], r => {
-          disableReddit = r.disableReddit ?? false;
-          protocol = r.redditProtocol ?? 'normal';
-          frontend = r.redditFrontend ?? 'libreddit';
+        "alwaysUsePreferred",
 
-          bypassWatchOnReddit = r.bypassWatchOnReddit ?? true;
+        "enableLibredditCustomSettings",
 
-          alwaysUsePreferred = r.alwaysUsePreferred ?? false;
+        "redditTheme",
+        "redditFrontPage",
+        "redditLayout",
+        "redditWide",
+        "redditPostSort",
+        "redditCommentSort",
+        "redditShowNsfw",
+        "redditAutoplayVideos",
+        "redditUseHls",
+        "redditHideHlsNotification",
+      ], r => {
+        disableReddit = r.disableReddit;
+        protocol = r.redditProtocol;
+        frontend = r.redditFrontend;
 
-          redirects.teddit = dataJson.teddit;
-          redirects.libreddit = dataJson.libreddit;
-          if (r.redditRedirects) redirects = r.redditRedirects;
+        bypassWatchOnReddit = r.bypassWatchOnReddit;
+        alwaysUsePreferred = r.alwaysUsePreferred;
 
-          if (r.redditRedirects) redirects = r.redditRedirects;
+        redirects = r.redditRedirects;
 
-          theme = r.theme ?? 'DEFAULT';
-          applyThemeToSites = r.applyThemeToSites ?? false;
+        libredditNormalRedirectsChecks = r.libredditNormalRedirectsChecks;
+        libredditNormalCustomRedirects = r.libredditNormalCustomRedirects;
 
-          libredditNormalRedirectsChecks = r.libredditNormalRedirectsChecks ?? [...redirects.libreddit.normal];
-          libredditNormalCustomRedirects = r.libredditNormalCustomRedirects ?? [];
+        libredditTorRedirectsChecks = r.libredditTorRedirectsChecks;
+        libredditTorCustomRedirects = r.libredditTorCustomRedirects;
 
-          libredditTorRedirectsChecks = r.libredditTorRedirectsChecks ?? [...redirects.libreddit.tor];
-          libredditTorCustomRedirects = r.libredditTorCustomRedirects ?? [];
+        tedditNormalRedirectsChecks = r.tedditNormalRedirectsChecks;
+        tedditNormalCustomRedirects = r.tedditNormalCustomRedirects;
 
-          tedditNormalRedirectsChecks = r.tedditNormalRedirectsChecks ?? [...redirects.teddit.normal];
-          tedditNormalCustomRedirects = r.tedditNormalCustomRedirects ?? [];
+        tedditTorRedirectsChecks = r.tedditTorRedirectsChecks;
+        tedditTorCustomRedirects = r.tedditTorCustomRedirects;
 
-          tedditTorRedirectsChecks = r.tedditTorRedirectsChecks ?? [...redirects.teddit.tor];
-          tedditTorCustomRedirects = r.tedditTorCustomRedirects ?? [];
+        enableCustom = r.enableLibredditCustomSettings;
 
-          initLibredditCookies();
-          initTedditCookies();
+        theme = r.redditTheme;
+        front_page = r.redditFrontPage;
+        layout = r.redditLayout;
+        wide = r.redditWide;
+        post_sort = r.redditPostSort;
+        comment_sort = r.redditCommentSort;
+        show_nsfw = r.redditShowNsfw;
+        autoplay_videos = r.redditAutoplayVideos;
+        use_hls = r.redditUseHls;
+        hide_hls_notification = r.redditHideHlsNotification;
 
-          resolve();
-        }
-      );
-    });
+        resolve();
+      }
+    );
   });
 }
 
@@ -505,14 +539,8 @@ export default {
   getDisableReddit,
   setDisableReddit,
 
-  getFrontend,
-  setFrontend,
-
-  getProtocol,
-  setProtocol,
-
-  getBypassWatchOnReddit,
-  setBypassWatchOnReddit,
+  initLibredditCookies,
+  initTedditCookies,
 
   getLibredditNormalRedirectsChecks,
   setLibredditNormalRedirectsChecks,
@@ -538,5 +566,6 @@ export default {
 
   redirect,
   init,
+  initDefaults,
   switchInstance,
 };
diff --git a/src/assets/javascripts/helpers/twitter.js b/src/assets/javascripts/helpers/twitter.js
index da33f09f..3713069c 100644
--- a/src/assets/javascripts/helpers/twitter.js
+++ b/src/assets/javascripts/helpers/twitter.js
@@ -290,6 +290,7 @@ function isNitter(url, type) {
 
 function initNitterCookies() {
   if (enableCustomSettings) {
+    console.log('initNitterCookies')
     let allInstances = [...redirects.nitter.normal, ...redirects.nitter.tor, ...nitterNormalCustomRedirects, ...nitterTorCustomRedirects]
     let checkedInstances = [...nitterNormalRedirectsChecks, ...nitterNormalCustomRedirects, ...nitterTorRedirectsChecks, ...nitterTorCustomRedirects]
     for (const instanceUrl of allInstances) if (!checkedInstances.includes(instanceUrl))
@@ -445,8 +446,6 @@ async function init() {
           muteVideos = r.nitterMuteVideos ?? false;
           autoplayGifs = r.nitterAutoplayGifs ?? true;
 
-          initNitterCookies();
-
           resolve();
         }
       );
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index fc9503ff..1aecd816 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -22,6 +22,13 @@ import youtubeMusicHelper from "../../assets/javascripts/helpers/youtubeMusic.js
 
 window.browser = window.browser || window.chrome;
 
+browser.runtime.onInstalled.addListener(async details => {
+  if (details.reason == 'install') {
+    await redditHelper.initDefaults();
+    await wholeInit();
+  }
+});
+
 async function wholeInit() {
   await youtubeHelper.init();
   await youtubeMusicHelper.init();
@@ -49,6 +56,8 @@ browser.storage.onChanged.addListener(wholeInit);
 
 let BYPASSTABs = [];
 
+
+
 browser.webRequest.onBeforeRequest.addListener(
   details => {
     const url = new URL(details.url);
diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index 80aa77c5..47c0b3b2 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -81,9 +81,93 @@
       <h4 data-localise="__MSG_bypassReddit__">Bypass "Open in Reddit"</h4>
       <input id="bypass-watch-on-reddit" type="checkbox">
     </div>
-    <hr>
     <div id="libreddit">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_enableCustomSettings__">Enable Custom Settings (will use cookies)</h4>
+        <input id="enable-libreddit-custom-settings" type="checkbox">
+      </div>
       <hr>
+      <div class="custom-settings"> 
+        <div class="some-block option-block">
+          <h2>Appearance</h2>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_theme__">Theme</h4>
+          <select class="theme">
+            <option value="system">System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+            <option value="black">Black</option>
+            <option value="dracula">Dracula</option>
+            <option value="nord">Nord</option>
+            <option value="laserwave">Laserwave</option>
+            <option value="violet">Violet</option>
+            <option value="gold">Gold</option>
+          </select>
+        </div>
+        <div class="some-block option-block">
+          <h2>Interface</h2>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_frontPage__">Front page</h4>
+          <select class="front_page">
+            <option value="default">Default</option>
+            <option value="popular">Popular</option>
+            <option value="all">All</option>
+          </select>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_frontLayout__">Front Layout</h4>
+          <select class="layout">
+            <option value="card">Card</option>
+            <option value="clean">Clean</option>
+            <option value="compact">Compact</option>
+          </select>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_wideUI__">Wide UI</h4>
+          <input class="wide" type="checkbox">
+        </div>
+        <div class="some-block option-block">
+          <h2>Content</h2>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultSubredditPostSort__">Default subreddit post sort</h4>
+          <select class="post_sort">
+            <option value="hot">Hot</option>
+            <option value="new">New</option>
+            <option value="top">Top</option>
+            <option value="rising">Rising</option>
+            <option value="controversial">Controversial</option>
+          </select>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultCommentSort__">Default comment sort</h4>
+          <select class="comment_sort">
+            <option value="confidence">Confidence</option>
+            <option value="top">Top</option>
+            <option value="new">New</option>
+            <option value="controversial">Controversial</option>
+            <option value="old">Old</option>
+          </select>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_showNsfwPosts__">Show NSFW posts</h4>
+          <input class="show_nsfw" type="checkbox">
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayVideos__">Autoplay videos</h4>
+          <input class="autoplay_videos" type="checkbox">
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_useHlsForVideos__">Use HLS for videos</h4>
+          <input class="use_hls" type="checkbox">
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideNotificationAboutPossibleHlsUsage__">Hide notification about possible HLS usage</h4>
+          <input class="hide_hls_notification" type="checkbox">
+        </div>
+      </div>
       <div class="normal">
                 <div class="some-block option-block">
                   <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 36bb8a5f..9fb5589a 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -1,48 +1,56 @@
 import redditHelper from "../../../assets/javascripts/helpers/reddit.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let disableRedditElement = document.getElementById("disable-reddit");
-disableRedditElement.addEventListener("change",
-    (event) => redditHelper.setDisableReddit(!event.target.checked)
-);
 let libredditDivElement = document.getElementById("libreddit")
 let tedditDivElement = document.getElementById("teddit")
+let enableLibredditSettingsElement = document.getElementById("enable-libreddit-custom-settings");
+let customSettingsDivElement = document.getElementsByClassName("custom-settings");
 
-function changeFrontendsSettings(frontend) {
-    let frontendElement = document.getElementById("frontend");
-    if (frontend == 'libreddit') {
-        frontendElement.innerHTML = 'Frontend';
-        libredditDivElement.style.display = 'block';
-        tedditDivElement.style.display = 'none';
-    }
-    else if (frontend == 'teddit') {
-        frontendElement.innerHTML = 'Frontend';
-        libredditDivElement.style.display = 'none';
-        tedditDivElement.style.display = 'block';
-    }
-    else if (frontend == 'old') {
-        frontendElement.innerHTML = `Frontend: <span style="color:red;">This isn't a fully private frontend</span>`;
-        libredditDivElement.style.display = 'none';
-        tedditDivElement.style.display = 'none';
-    }
-}
+let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
-redditFrontendElement.addEventListener("change",
-    (event) => {
-        let frontend = event.target.options[redditFrontendElement.selectedIndex].value
-        redditHelper.setFrontend(frontend)
-        changeFrontendsSettings(frontend);
-    }
-);
-
 let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    (event) => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        redditHelper.setProtocol(protocol);
-        changeProtocolSettings(protocol);
-    }
-);
+let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
+
+let theme = document.getElementById('libreddit').getElementsByClassName('theme')[0];
+let front_page = document.getElementById('libreddit').getElementsByClassName('front_page')[0];
+let layout = document.getElementById('libreddit').getElementsByClassName('layout')[0];
+let wide = document.getElementById('libreddit').getElementsByClassName('wide')[0];
+let post_sort = document.getElementById('libreddit').getElementsByClassName('post_sort')[0];
+let comment_sort = document.getElementById('libreddit').getElementsByClassName('comment_sort')[0];
+let show_nsfw = document.getElementById('libreddit').getElementsByClassName('show_nsfw')[0];
+let autoplay_videos = document.getElementById('libreddit').getElementsByClassName('autoplay_videos')[0];
+let use_hls = document.getElementById('libreddit').getElementsByClassName('use_hls')[0];
+let hide_hls_notification = document.getElementById('libreddit').getElementsByClassName('hide_hls_notification')[0];
+
+document.addEventListener("change", async () => {
+    await browser.storage.local.set({
+        disableReddit: !disableRedditElement.checked,
+        bypassWatchOnReddit: bypassWatchOnRedditElement.checked,
+        redditProtocol: protocolElement.value,
+        redditFrontend: redditFrontendElement.value,
+
+        enableLibredditCustomSettings: enableLibredditSettingsElement.checked,
+
+        redditTheme: theme.value,
+        redditFrontPage: front_page.value,
+        redditLayout: layout.value,
+        redditWide: wide.checked,
+        redditPostSort: post_sort.value,
+        redditCommentSort: comment_sort.value,
+        redditShowNsfw: show_nsfw.checked,
+        redditAutoplayVideos: autoplay_videos.checked,
+        redditUseHls: use_hls.checked,
+        redditHideHlsNotification: hide_hls_notification.checked,
+    });
+    init();
+})
+
+
+window.onblur = () => {
+    console.log('initting cookies')
+    redditHelper.initLibredditCookies();
+    redditHelper.initTedditCookies();
+}
 
 function changeProtocolSettings(protocol) {
     let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
@@ -62,77 +70,126 @@ function changeProtocolSettings(protocol) {
         torTedditDiv.style.display = 'block';
         torLibredditDiv.style.display = 'block';
     }
+    if (enableLibredditSettingsElement.checked)
+        for (const item of customSettingsDivElement) item.style.display = 'block';
+    else
+        for (const item of customSettingsDivElement) item.style.display = 'none';
+}
+function changeFrontendsSettings(frontend) {
+    let frontendElement = document.getElementById("frontend");
+    if (frontend == 'libreddit') {
+        frontendElement.innerHTML = 'Frontend';
+        libredditDivElement.style.display = 'block';
+        tedditDivElement.style.display = 'none';
+    }
+    else if (frontend == 'teddit') {
+        frontendElement.innerHTML = 'Frontend';
+        libredditDivElement.style.display = 'none';
+        tedditDivElement.style.display = 'block';
+    }
+    else if (frontend == 'old') {
+        frontendElement.innerHTML = `Frontend: <span style="color:red;">This isn't a fully private frontend</span>`;
+        libredditDivElement.style.display = 'none';
+        tedditDivElement.style.display = 'none';
+    }
 }
+function init() {
+    redditHelper.init().then(() => {
+        browser.storage.local.get(
+            [
+                "disableReddit",
+                "bypassWatchOnReddit",
+                "redditProtocol",
+                "redditFrontend",
 
-let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
-bypassWatchOnRedditElement.addEventListener("change",
-    event => redditHelper.setBypassWatchOnReddit(event.target.checked)
-);
+                "enableLibredditCustomSettings",
 
-redditHelper.init().then(() => {
-    disableRedditElement.checked = !redditHelper.getDisableReddit();
-    bypassWatchOnRedditElement.checked = redditHelper.getBypassWatchOnReddit();
+                "redditTheme",
+                "redditFrontPage",
+                "redditLayout",
+                "redditWide",
+                "redditPostSort",
+                "redditCommentSort",
+                "redditShowNsfw",
+                "redditAutoplayVideos",
+                "redditUseHls",
+                "redditHideHlsNotification",
+            ],
+            r => {
+                disableRedditElement.checked = !r.disableReddit
+                bypassWatchOnRedditElement.checked = r.bypassWatchOnReddit
+                protocolElement.value = r.redditProtocol
+                redditFrontendElement.value = r.redditFrontend
+                enableLibredditSettingsElement.checked = r.enableLibredditCustomSettings
+                changeFrontendsSettings(r.redditFrontend);
+                changeProtocolSettings(r.redditProtocol);
 
-    let frontend = redditHelper.getFrontend();
-    redditFrontendElement.value = frontend;
-    changeFrontendsSettings(frontend);
+                theme.value = r.redditTheme;
+                front_page.value = r.redditFrontPage;
+                layout.value = r.redditLayout;
+                wide.checked = r.redditWide;
+                post_sort.value = r.redditPostSort;
+                comment_sort.value = r.redditCommentSort;
+                show_nsfw.checked = r.redditShowNsfw;
+                autoplay_videos.checked = r.redditAutoplayVideos;
+                use_hls.checked = r.redditUseHls;
+                hide_hls_notification.checked = r.redditHideHlsNotification;
+            }
+        )
 
-    let protocol = redditHelper.getProtocol();
-    protocolElement.value = protocol;
-    changeProtocolSettings(protocol);
+        browser.storage.local.get("libredditLatency").then(r => {
+            commonHelper.processDefaultCustomInstances(
+                'libreddit',
+                'normal',
+                redditHelper,
+                document,
+                redditHelper.getLibredditNormalRedirectsChecks,
+                redditHelper.setLibredditNormalRedirectsChecks,
+                redditHelper.getLibredditNormalCustomRedirects,
+                redditHelper.setLibredditNormalCustomRedirects,
+                r.libredditLatency,
+            )
+        })
 
-    browser.storage.local.get("libredditLatency").then(r => {
         commonHelper.processDefaultCustomInstances(
             'libreddit',
-            'normal',
+            'tor',
             redditHelper,
             document,
-            redditHelper.getLibredditNormalRedirectsChecks,
-            redditHelper.setLibredditNormalRedirectsChecks,
-            redditHelper.getLibredditNormalCustomRedirects,
-            redditHelper.setLibredditNormalCustomRedirects,
-            r.libredditLatency,
+            redditHelper.getLibredditTorRedirectsChecks,
+            redditHelper.setLibredditTorRedirectsChecks,
+            redditHelper.getLibredditTorCustomRedirects,
+            redditHelper.setLibredditTorCustomRedirects
         )
-    })
 
-    commonHelper.processDefaultCustomInstances(
-        'libreddit',
-        'tor',
-        redditHelper,
-        document,
-        redditHelper.getLibredditTorRedirectsChecks,
-        redditHelper.setLibredditTorRedirectsChecks,
-        redditHelper.getLibredditTorCustomRedirects,
-        redditHelper.setLibredditTorCustomRedirects
-    )
+        browser.storage.local.get("tedditLatency").then(r => {
+            commonHelper.processDefaultCustomInstances(
+                'teddit',
+                'normal',
+                redditHelper,
+                document,
+                redditHelper.getTedditNormalRedirectsChecks,
+                redditHelper.setTedditNormalRedirectsChecks,
+                redditHelper.getTedditNormalCustomRedirects,
+                redditHelper.setTedditNormalCustomRedirects,
+                r.tedditLatency,
+            );
+        })
 
-    browser.storage.local.get("tedditLatency").then(r => {
         commonHelper.processDefaultCustomInstances(
             'teddit',
-            'normal',
+            'tor',
             redditHelper,
             document,
-            redditHelper.getTedditNormalRedirectsChecks,
-            redditHelper.setTedditNormalRedirectsChecks,
-            redditHelper.getTedditNormalCustomRedirects,
-            redditHelper.setTedditNormalCustomRedirects,
-            r.tedditLatency,
+            redditHelper.getTedditTorRedirectsChecks,
+            redditHelper.setTedditTorRedirectsChecks,
+            redditHelper.getTedditTorCustomRedirects,
+            redditHelper.setTedditTorCustomRedirects
         );
-    })
-
-    commonHelper.processDefaultCustomInstances(
-        'teddit',
-        'tor',
-        redditHelper,
-        document,
-        redditHelper.getTedditTorRedirectsChecks,
-        redditHelper.setTedditTorRedirectsChecks,
-        redditHelper.getTedditTorCustomRedirects,
-        redditHelper.setTedditTorCustomRedirects
-    );
-
-})
 
+    })
+}
+init();
 
 let latencyLibredditElement = document.getElementById("latency-libreddit");
 let latencyLibredditLabel = document.getElementById("latency-libreddit-label");
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 4cb31643..bd611497 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -23,14 +23,13 @@ let muteVideos = document.getElementById('nitter').getElementsByClassName('muteV
 let autoplayGifs = document.getElementById('nitter').getElementsByClassName('autoplayGifs')[0];
 
 let nitterElement = document.getElementById("nitter");
-document.addEventListener("change", async _ => {
-    twitterHelper.setDisable(!disableTwitterElement.checked)
-    twitterHelper.setProtocol(protocolElement.value);
-    twitterHelper.setEnableCustomSettings(enableYoutubeCustomSettingsElement.checked);
-    twitterHelper.setBypassWatchOnTwitter(bypassWatchOnTwitterElement.checked);
-    changeProtocolSettings(protocolElement.value);
+document.addEventListener("change", async () => {
+    await browser.storage.local.set({
+        disableTwitter: !disableTwitterElement.checked,
+        twitterProtocol: protocolElement.value,
+        enableTwitterCustomSettings: enableYoutubeCustomSettingsElement.checked,
+        bypassWatchOnTwitter: bypassWatchOnTwitterElement.checked,
 
-    await twitterHelper.setSettings({
         // Display
         nitterTheme: theme.value,
         nitterInfiniteScroll: infiniteScroll.checked,
@@ -121,6 +120,8 @@ function init() {
 }
 init();
 
+window.onblur = twitterHelper.initNitterCookies;
+
 let latencyElement = document.getElementById("latency");
 let latencyLabel = document.getElementById("latency-label");
 latencyElement.addEventListener("click",