4 files changed, 79 insertions, 11 deletions

diff --git a/pages/options/options.html b/pages/options/options.html
index 321babe8..35ef7a43 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -138,6 +138,24 @@
     </section>
 
     <section class="options settings_block">
+      <div class="onoffswitch switch" aria-label="Invidious dark mode aways on">
+        <h1>Invidious dark mode always on</h1>
+        <input aria-hidden="true" id="invidious-dark-mode" type="checkbox" checked>&nbsp;
+        <label for="invidious-dark-mode" class="checkbox-label">
+        </label>
+      </div>
+    </section>
+
+    <section class="options settings_block">
+      <div class="onoffswitch switch" aria-label="Persist Invidious preferences">
+        <h1>Persist Invidious preferences (as cookie)</h1>
+        <input aria-hidden="true" id="persist-invidious-prefs" type="checkbox" checked>&nbsp;
+        <label for="persist-invidious-prefs" class="checkbox-label">
+        </label>
+      </div>
+    </section>
+
+    <section class="options settings_block">
       <div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
         <h1>Proactively remove Twitter service worker</h1>
         <input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
diff --git a/pages/options/options.js b/pages/options/options.js
index 821d6ed4..5e25a495 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -12,6 +12,8 @@ let alwaysProxy = document.getElementById('always-proxy');
 let onlyEmbeddedVideo = document.getElementById('only-embed');
 let videoQuality = document.getElementById('video-quality');
 let removeTwitterSW = document.getElementById('remove-twitter-sw');
+let invidiousDarkMode = document.getElementById('invidious-dark-mode');
+let persistInvidiousPrefs = document.getElementById('persist-invidious-prefs');
 let whitelist;
 
 window.browser = window.browser || window.chrome;
@@ -46,7 +48,9 @@ browser.storage.sync.get(
     'onlyEmbeddedVideo',
     'videoQuality',
     'removeTwitterSW',
-    'whitelist'
+    'whitelist',
+    'invidiousDarkMode',
+    'persistInvidiousPrefs'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
@@ -61,6 +65,8 @@ browser.storage.sync.get(
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
     videoQuality.value = result.videoQuality || '';
     removeTwitterSW.checked = !result.removeTwitterSW;
+    invidiousDarkMode.checked = result.invidiousDarkMode;
+    persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
     whitelist = result.whitelist || [];
     whitelist.forEach(prependWhitelistItem);
   }
@@ -130,10 +136,28 @@ function debounce(func, wait, immediate) {
   };
 };
 
+function parseURL(urlString) {
+  if (urlString) {
+    try {
+      const url = new URL(urlString);
+      if (url.username && url.password) {
+        return `${url.protocol}//${url.username}:${url.password}@${url.host}`
+      } else {
+        return url.origin;
+      }
+    } catch (error) {
+      console.log(error);
+      return '';
+    }
+  } else {
+    return '';
+  }
+}
+
 let nitterInstanceChange = debounce(() => {
   if (nitterInstance.checkValidity()) {
     browser.storage.sync.set({
-      nitterInstance: nitterInstance.value ? new URL(nitterInstance.value).origin : ''
+      nitterInstance: parseURL(nitterInstance.value)
     });
   }
 }, 500);
@@ -142,7 +166,7 @@ nitterInstance.addEventListener('input', nitterInstanceChange);
 let invidiousInstanceChange = debounce(() => {
   if (invidiousInstance.checkValidity()) {
     browser.storage.sync.set({
-      invidiousInstance: invidiousInstance.value ? new URL(invidiousInstance.value).origin : ''
+      invidiousInstance: parseURL(invidiousInstance.value)
     });
   }
 }, 500);
@@ -151,7 +175,7 @@ invidiousInstance.addEventListener('input', invidiousInstanceChange);
 let bibliogramInstanceChange = debounce(() => {
   if (bibliogramInstance.checkValidity()) {
     browser.storage.sync.set({
-      bibliogramInstance: bibliogramInstance.value ? new URL(bibliogramInstance.value).origin : ''
+      bibliogramInstance: parseURL(bibliogramInstance.value)
     });
   }
 }, 500);
@@ -160,7 +184,7 @@ bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
 let osmInstanceChange = debounce(() => {
   if (osmInstance.checkValidity()) {
     browser.storage.sync.set({
-      osmInstance: osmInstance.value ? new URL(osmInstance.value).origin : ''
+      osmInstance: parseURL(osmInstance.value)
     });
   }
 }, 500);
@@ -199,3 +223,11 @@ videoQuality.addEventListener('change', event => {
 removeTwitterSW.addEventListener('change', event => {
   browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
 });
+
+invidiousDarkMode.addEventListener('change', event => {
+  browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
+});
+
+persistInvidiousPrefs.addEventListener('change', event => {
+  browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
+});
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 172a66e7..66842c75 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -52,10 +52,28 @@ function debounce(func, wait, immediate) {
   };
 };
 
+function parseURL(urlString) {
+  if (urlString) {
+    try {
+      const url = new URL(urlString);
+      if (url.username && url.password) {
+        return `${url.protocol}//${url.username}:${url.password}@${url.host}`
+      } else {
+        return url.origin;
+      }
+    } catch (error) {
+      console.log(error);
+      return '';
+    }
+  } else {
+    return '';
+  }
+}
+
 let nitterInstanceChange = debounce(() => {
   if (nitterInstance.checkValidity()) {
     browser.storage.sync.set({
-      nitterInstance: nitterInstance.value ? new URL(nitterInstance.value).origin : ''
+      nitterInstance: parseURL(nitterInstance.value)
     });
   }
 }, 500);
@@ -64,7 +82,7 @@ nitterInstance.addEventListener('input', nitterInstanceChange);
 let invidiousInstanceChange = debounce(() => {
   if (invidiousInstance.checkValidity()) {
     browser.storage.sync.set({
-      invidiousInstance: invidiousInstance.value ? new URL(invidiousInstance.value).origin : ''
+      invidiousInstance: parseURL(invidiousInstance.value)
     });
   }
 }, 500);
@@ -73,7 +91,7 @@ invidiousInstance.addEventListener('input', invidiousInstanceChange);
 let bibliogramInstanceChange = debounce(() => {
   if (bibliogramInstance.checkValidity()) {
     browser.storage.sync.set({
-      bibliogramInstance: bibliogramInstance.value ? new URL(bibliogramInstance.value).origin : ''
+      bibliogramInstance: parseURL(bibliogramInstance.value)
     });
   }
 }, 500);
@@ -82,7 +100,7 @@ bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
 let osmInstanceChange = debounce(() => {
   if (osmInstance.checkValidity()) {
     browser.storage.sync.set({
-      osmInstance: osmInstance.value ? new URL(osmInstance.value).origin : ''
+      osmInstance: parseURL(osmInstance.value)
     });
   }
 }, 500);
diff --git a/pages/styles.css b/pages/styles.css
index bd0455ac..256128a4 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -21,7 +21,7 @@ body {
 
 .popup {
   width: 300px;
-  height: auto;
+  min-height: auto;
   overflow: hidden;
   background-color: var(--dark-grey);
 }
@@ -145,7 +145,7 @@ input:checked+label:after {
 
 .settings_block {
   display: block;
-  padding: 5px 1em 20px 1em;
+  padding: 10px 1em 1em 1em;
   border-bottom: var(--dark-grey) solid 1px;
 }