Improving code structure. Added libreddit settings #192

pug/options/reddit/reddit.pug

@@ -28,11 +28,84 @@ body.option(dir="auto")
         .some-block.option-block
             h4(data-localise="__MSG_bypassReddit__") Bypass "Open in Reddit"
             input#bypass-watch-on-reddit(type="checkbox")
-        
-        hr
 
         #libreddit
+            .some-block.option-block
+                h4(data-localise="__MSG_enableCustomSettings__") Enable Custom Settings (will use cookies)
+                input#enable-libreddit-custom-settings(type="checkbox")
             hr
+            .custom-settings 
+                .some-block.option-block
+                    h2 Appearance
+                .some-block.option-block
+                    h4(data-localise="__MSG_theme__") Theme
+                    select.theme
+                        option(value="system" ) System
+                        option(value="light" ) Light
+                        option(value="dark" ) Dark
+                        option(value="black" ) Black
+                        option(value="dracula" ) Dracula
+                        option(value="nord" ) Nord
+                        option(value="laserwave" ) Laserwave
+                        option(value="violet" ) Violet
+                        option(value="gold" ) Gold
+
+                .some-block.option-block
+                    h2 Interface
+                .some-block.option-block
+                    h4(data-localise="__MSG_frontPage__") Front page
+                    select.front_page
+                        option(value="default") Default
+                        option(value="popular") Popular
+                        option(value="all") All
+
+                .some-block.option-block
+                    h4(data-localise="__MSG_frontLayout__") Front Layout
+                    select.layout
+                        option(value="card") Card
+                        option(value="clean") Clean
+                        option(value="compact") Compact
+
+                .some-block.option-block
+                    h4(data-localise="__MSG_wideUI__") Wide UI
+                    input.wide(type="checkbox")
+
+                .some-block.option-block
+                    h2 Content
+                .some-block.option-block
+                    h4(data-localise="__MSG_defaultSubredditPostSort__") Default subreddit post sort
+                    select.post_sort
+                        option(value="hot") Hot
+                        option(value="new") New
+                        option(value="top") Top
+                        option(value="rising") Rising
+                        option(value="controversial") Controversial
+                
+                .some-block.option-block
+                    h4(data-localise="__MSG_defaultCommentSort__") Default comment sort
+                    select.comment_sort
+                        option(value="confidence") Confidence
+                        option(value="top") Top
+                        option(value="new") New
+                        option(value="controversial") Controversial
+                        option(value="old") Old
+
+                .some-block.option-block
+                    h4(data-localise="__MSG_showNsfwPosts__") Show NSFW posts
+                    input.show_nsfw(type="checkbox")
+
+                .some-block.option-block
+                    h4(data-localise="__MSG_autoplayVideos__") Autoplay videos
+                    input.autoplay_videos(type="checkbox")
+
+                .some-block.option-block
+                    h4(data-localise="__MSG_useHlsForVideos__") Use HLS for videos
+                    input.use_hls(type="checkbox")
+
+                .some-block.option-block
+                    h4(data-localise="__MSG_hideNotificationAboutPossibleHlsUsage__") Hide notification about possible HLS usage
+                    input.hide_hls_notification(type="checkbox")
+
             .normal
                 include ../../widgets/instances.pug
                 +instances('https://libreddit.com')

src/assets/javascripts/helpers/reddit.js

@@ -9,27 +9,8 @@ const targets = [
 let redirects = {
   // modern UI
   "libreddit": {
-    "normal": [
+    "normal": [],
-      "https://libredd.it",
+    "tor": []
-      "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",
-    ]
   },
   // 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) {
+let enableCustom;
-  bypassWatchOnReddit = val;
-  browser.storage.local.set({ bypassWatchOnReddit })
-  console.log("bypassWatchOnReddit: ", bypassWatchOnReddit)
-}
 
 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') {
+  if (enableCustom) {
-    let allInstances = [...redirects.libreddit.normal, ...redirects.libreddit.tor, ...libredditNormalCustomRedirects, ...libredditTorCustomRedirects]
+    let checkedInstances = [
-    let checkedInstances = [...libredditNormalRedirectsChecks, ...libredditNormalCustomRedirects, ...libredditTorRedirectsChecks, ...libredditTorCustomRedirects]
+      ...libredditNormalRedirectsChecks,
-    for (const instanceUrl of allInstances)
+      ...libredditNormalCustomRedirects,
-      if (!checkedInstances.includes(instanceUrl))
+      ...libredditTorRedirectsChecks,
-        browser.cookies.remove({
+      ...libredditTorCustomRedirects
-          url: instanceUrl,
+    ]
-          name: "theme",
+
-        })
+    for (const instance of checkedInstances) {
-    for (const instanceUrl of checkedInstances)
+      browser.cookies.set({ url: instance, name: "theme", value: theme })
-      browser.cookies.set({
+      browser.cookies.set({ url: instance, name: "front_page", value: front_page })
-        url: instanceUrl,
+      browser.cookies.set({ url: instance, name: "layout", value: layout })
-        name: "theme",
+      browser.cookies.set({ url: instance, name: "wide", value: wide ? 'on' : 'off' })
-        value: theme
+      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) {
+  if (enableCustom && themeValue) {
-    let allInstances = [...redirects.teddit.normal, ...redirects.teddit.tor, ...tedditNormalCustomRedirects, ...tedditTorCustomRedirects]
+    let checkedInstances = [
-    let checkedInstances = [...tedditNormalRedirectsChecks, ...tedditNormalCustomRedirects, ...tedditTorRedirectsChecks, ...tedditTorCustomRedirects]
+      ...tedditNormalRedirectsChecks,
-    for (const instanceUrl of allInstances)
+      ...tedditNormalCustomRedirects,
-      if (!checkedInstances.includes(instanceUrl))
+      ...tedditTorRedirectsChecks,
-        browser.cookies.remove({
+      ...tedditTorCustomRedirects
-          url: instanceUrl,
+    ]
-          name: "theme",
-        })
     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_'))
+  if (url.pathname.includes('/pics/w:null_'))
-  return `https://reddit.com${url.pathname}${url.search}`;
+    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 => {
+    browser.storage.local.get(
-      let dataJson = JSON.parse(data);
+      [
-      browser.storage.local.get(
+        "disableReddit",
-        [
+        "redditFrontend",
-          "disableReddit",
+        "redditRedirects",
-          "redditFrontend",
-          "redditRedirects",
 
-          "libredditNormalRedirectsChecks",
+        "libredditNormalRedirectsChecks",
-          "libredditNormalCustomRedirects",
+        "libredditNormalCustomRedirects",
-          "libredditTorRedirectsChecks",
+        "libredditTorRedirectsChecks",
-          "libredditTorCustomRedirects",
+        "libredditTorCustomRedirects",
 
-          "tedditNormalRedirectsChecks",
+        "tedditNormalRedirectsChecks",
-          "tedditNormalCustomRedirects",
+        "tedditNormalCustomRedirects",
-          "tedditTorRedirectsChecks",
+        "tedditTorRedirectsChecks",
-          "tedditTorCustomRedirects",
+        "tedditTorCustomRedirects",
 
-          "theme",
-          "applyThemeToSites",
 
-          "redditProtocol",
+        "redditProtocol",
-          "bypassWatchOnReddit",
+        "bypassWatchOnReddit",
 
-          "alwaysUsePreferred",
+        "alwaysUsePreferred",
-        ], r => {
-          disableReddit = r.disableReddit ?? false;
-          protocol = r.redditProtocol ?? 'normal';
-          frontend = r.redditFrontend ?? 'libreddit';
 
-          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;
+        bypassWatchOnReddit = r.bypassWatchOnReddit;
-          redirects.libreddit = dataJson.libreddit;
+        alwaysUsePreferred = r.alwaysUsePreferred;
-          if (r.redditRedirects) redirects = r.redditRedirects;
 
-          if (r.redditRedirects) redirects = r.redditRedirects;
+        redirects = r.redditRedirects;
 
-          theme = r.theme ?? 'DEFAULT';
+        libredditNormalRedirectsChecks = r.libredditNormalRedirectsChecks;
-          applyThemeToSites = r.applyThemeToSites ?? false;
+        libredditNormalCustomRedirects = r.libredditNormalCustomRedirects;
 
-          libredditNormalRedirectsChecks = r.libredditNormalRedirectsChecks ?? [...redirects.libreddit.normal];
+        libredditTorRedirectsChecks = r.libredditTorRedirectsChecks;
-          libredditNormalCustomRedirects = r.libredditNormalCustomRedirects ?? [];
+        libredditTorCustomRedirects = r.libredditTorCustomRedirects;
 
-          libredditTorRedirectsChecks = r.libredditTorRedirectsChecks ?? [...redirects.libreddit.tor];
+        tedditNormalRedirectsChecks = r.tedditNormalRedirectsChecks;
-          libredditTorCustomRedirects = r.libredditTorCustomRedirects ?? [];
+        tedditNormalCustomRedirects = r.tedditNormalCustomRedirects;
 
-          tedditNormalRedirectsChecks = r.tedditNormalRedirectsChecks ?? [...redirects.teddit.normal];
+        tedditTorRedirectsChecks = r.tedditTorRedirectsChecks;
-          tedditNormalCustomRedirects = r.tedditNormalCustomRedirects ?? [];
+        tedditTorCustomRedirects = r.tedditTorCustomRedirects;
 
-          tedditTorRedirectsChecks = r.tedditTorRedirectsChecks ?? [...redirects.teddit.tor];
+        enableCustom = r.enableLibredditCustomSettings;
-          tedditTorCustomRedirects = r.tedditTorCustomRedirects ?? [];
 
-          initLibredditCookies();
+        theme = r.redditTheme;
-          initTedditCookies();
+        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,
+  initLibredditCookies,
-  setFrontend,
+  initTedditCookies,
-
-  getProtocol,
-  setProtocol,
-
-  getBypassWatchOnReddit,
-  setBypassWatchOnReddit,
 
   getLibredditNormalRedirectsChecks,
   setLibredditNormalRedirectsChecks,
@@ -538,5 +566,6 @@ export default {
 
   redirect,
   init,
+  initDefaults,
   switchInstance,
 };

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();
         }
       );

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);

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>

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 disableRedditElement = document.getElementById("disable-reddit");
-    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 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",
+let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
-    (event) => {
+
-        let protocol = event.target.options[protocolElement.selectedIndex].value
+let theme = document.getElementById('libreddit').getElementsByClassName('theme')[0];
-        redditHelper.setProtocol(protocol);
+let front_page = document.getElementById('libreddit').getElementsByClassName('front_page')[0];
-        changeProtocolSettings(protocol);
+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")
+                "enableLibredditCustomSettings",
-bypassWatchOnRedditElement.addEventListener("change",
-    event => redditHelper.setBypassWatchOnReddit(event.target.checked)
-);
 
-redditHelper.init().then(() => {
+                "redditTheme",
-    disableRedditElement.checked = !redditHelper.getDisableReddit();
+                "redditFrontPage",
-    bypassWatchOnRedditElement.checked = redditHelper.getBypassWatchOnReddit();
+                "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();
+                theme.value = r.redditTheme;
-    redditFrontendElement.value = frontend;
+                front_page.value = r.redditFrontPage;
-    changeFrontendsSettings(frontend);
+                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();
+        browser.storage.local.get("libredditLatency").then(r => {
-    protocolElement.value = protocol;
+            commonHelper.processDefaultCustomInstances(
-    changeProtocolSettings(protocol);
+                '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.getLibredditTorRedirectsChecks,
-            redditHelper.setLibredditNormalRedirectsChecks,
+            redditHelper.setLibredditTorRedirectsChecks,
-            redditHelper.getLibredditNormalCustomRedirects,
+            redditHelper.getLibredditTorCustomRedirects,
-            redditHelper.setLibredditNormalCustomRedirects,
+            redditHelper.setLibredditTorCustomRedirects
-            r.libredditLatency,
         )
-    })
 
-    commonHelper.processDefaultCustomInstances(
+        browser.storage.local.get("tedditLatency").then(r => {
-        'libreddit',
+            commonHelper.processDefaultCustomInstances(
-        'tor',
+                'teddit',
-        redditHelper,
+                'normal',
-        document,
+                redditHelper,
-        redditHelper.getLibredditTorRedirectsChecks,
+                document,
-        redditHelper.setLibredditTorRedirectsChecks,
+                redditHelper.getTedditNormalRedirectsChecks,
-        redditHelper.getLibredditTorCustomRedirects,
+                redditHelper.setTedditNormalRedirectsChecks,
-        redditHelper.setLibredditTorCustomRedirects
+                redditHelper.getTedditNormalCustomRedirects,
-    )
+                redditHelper.setTedditNormalCustomRedirects,
+                r.tedditLatency,
+            );
+        })
 
-    browser.storage.local.get("tedditLatency").then(r => {
         commonHelper.processDefaultCustomInstances(
             'teddit',
-            'normal',
+            'tor',
             redditHelper,
             document,
-            redditHelper.getTedditNormalRedirectsChecks,
+            redditHelper.getTedditTorRedirectsChecks,
-            redditHelper.setTedditNormalRedirectsChecks,
+            redditHelper.setTedditTorRedirectsChecks,
-            redditHelper.getTedditNormalCustomRedirects,
+            redditHelper.getTedditTorCustomRedirects,
-            redditHelper.setTedditNormalCustomRedirects,
+            redditHelper.setTedditTorCustomRedirects
-            r.tedditLatency,
         );
+
     })
-
+}
-    commonHelper.processDefaultCustomInstances(
+init();
-        'teddit',
-        'tor',
-        redditHelper,
-        document,
-        redditHelper.getTedditTorRedirectsChecks,
-        redditHelper.setTedditTorRedirectsChecks,
-        redditHelper.getTedditTorCustomRedirects,
-        redditHelper.setTedditTorCustomRedirects
-    );
-
-})
-
 
 let latencyLibredditElement = document.getElementById("latency-libreddit");
 let latencyLibredditLabel = document.getElementById("latency-libreddit-label");

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 _ => {
+document.addEventListener("change", async () => {
-    twitterHelper.setDisable(!disableTwitterElement.checked)
+    await browser.storage.local.set({
-    twitterHelper.setProtocol(protocolElement.value);
+        disableTwitter: !disableTwitterElement.checked,
-    twitterHelper.setEnableCustomSettings(enableYoutubeCustomSettingsElement.checked);
+        twitterProtocol: protocolElement.value,
-    twitterHelper.setBypassWatchOnTwitter(bypassWatchOnTwitterElement.checked);
+        enableTwitterCustomSettings: enableYoutubeCustomSettingsElement.checked,
-    changeProtocolSettings(protocolElement.value);
+        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",