Splitted options.js

src/assets/javascripts/helpers/common.js

@@ -36,9 +36,26 @@ function getInstances() {
   return false;
 }
 
+function debounce(func, wait, immediate) {
+  let timeout;
+  return () => {
+    let context = this,
+      args = arguments;
+    let later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
 export default {
   filterInstances,
   getRandomInstance,
   getInstances,
   addHttps,
+  debounce
 };

src/manifest.json

@@ -32,6 +32,7 @@
   },
   "browser_action": {
     "default_title": "LibRedirect",
+    "browser_style": false,
     "default_popup": "pages/popup/popup.html",
     "default_icon": {
       "16": "assets/images/libredirect.svg",
@@ -88,6 +89,7 @@
   ],
   "options_ui": {
     "page": "pages/options/options.html",
+    "browser_style": false,
     "open_in_tab": true
   },
   "web_accessible_resources": [
@@ -99,4 +101,4 @@
       "strict_min_version": "67.0"
     }
   }
-}
+}

src/pages/options/instagram.js

@@ -0,0 +1,48 @@
+import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+
+const bibliogramInstances = instagramHelper.redirects;
+
+let bibliogramInstance = document.getElementById("bibliogram-instance");
+let disableBibliogram = document.getElementById("disable-bibliogram");
+let bibliogramRandomPool = document.getElementById("bibliogram-random-pool");
+
+browser.storage.sync.get(
+    [
+        "bibliogramInstance",
+        "disableBibliogram",
+        "bibliogramRandomPool",
+    ],
+    (result) => {
+        bibliogramInstance.value = result.bibliogramInstance || "";
+        disableBibliogram.checked = !result.disableBibliogram;
+        bibliogramRandomPool.value = result.bibliogramRandomPool || commonHelper.filterInstances(bibliogramInstances);
+        let id = "bibliogram-instance";
+        let instances = bibliogramRandomPool.value.split(',')
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const bibliogramInstanceChange = commonHelper.debounce(() => {
+    if (bibliogramInstance.checkValidity()) {
+        browser.storage.sync.set({
+            bibliogramInstance: shared.parseURL(bibliogramInstance.value),
+        });
+    }
+}, 500);
+bibliogramInstance.addEventListener("input", bibliogramInstanceChange);
+
+disableBibliogram.addEventListener("change", (event) => {
+    browser.storage.sync.set({ disableBibliogram: !event.target.checked });
+});
+
+const bibliogramRandomPoolChange = commonHelper.debounce(() => {
+    browser.storage.sync.set({
+        bibliogramRandomPool: bibliogramRandomPool.value,
+    });
+}, 500);
+bibliogramRandomPool.addEventListener("input", bibliogramRandomPoolChange);
+

src/pages/options/maps.js

@@ -0,0 +1,39 @@
+import mapsHelper from "../../assets/javascripts/helpers/google-maps.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+
+
+const osmInstances = mapsHelper.redirects;
+let osmInstance = document.getElementById("osm-instance");
+let disableOsm = document.getElementById("disable-osm");
+
+browser.storage.sync.get(
+    [
+        "osmInstance",
+        "disableOsm",
+    ],
+    (result) => {
+        osmInstance.value = result.osmInstance || "";
+        disableOsm.checked = !result.disableOsm;
+        let id = "osm-instance"
+        let instances = osmInstances
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const osmInstanceChange = commonHelper.debounce(() => {
+    if (osmInstance.checkValidity()) {
+        browser.storage.sync.set({
+            osmInstance: shared.parseURL(osmInstance.value),
+        });
+    }
+}, 500);
+osmInstance.addEventListener("input", osmInstanceChange);
+
+
+
+disableOsm.addEventListener("change", (event) => {
+    browser.storage.sync.set({ disableOsm: !event.target.checked });
+});

src/pages/options/medium.js

@@ -0,0 +1,61 @@
+import mediumHelper from "../../assets/javascripts/helpers/medium.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+const scribeInstances = mediumHelper.redirects;
+
+let scribeInstance = document.getElementById("scribe-instance");
+let disableScribe = document.getElementById("disable-scribe");
+let scribeRandomPool = document.getElementById("scribe-random-pool");
+
+
+browser.storage.sync.get(
+    [
+        "disableScribe",
+        "scribeInstance",
+        "scribeRandomPool",
+    ],
+    (result) => {
+        scribeInstance.value = result.scribeInstance || "";
+        disableScribe.checked = !result.disableScribe;
+        scribeRandomPool.value = result.scribeRandomPool || commonHelper.filterInstances(scribeInstances);
+        let id = "scribe-instance";
+        let instances = scribeRandomPool.value.split(',')
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+disableScribe.addEventListener(
+    "change",
+    (event) => {
+        console.info("isScibeEnabled:", event.target.checked)
+        browser.storage.sync.set({
+            disableScribe: !event.target.checked
+        });
+    }
+);
+
+const scribeInstanceChange = commonHelper.debounce(
+    () => {
+        if (scribeInstance.checkValidity()) {
+            console.info("selectedScribeInstance", scribeInstance.value);
+            browser.storage.sync.set({
+                scribeInstance: shared.parseURL(scribeInstance.value)
+            });
+        }
+    },
+    500
+);
+
+scribeInstance.addEventListener("input", scribeInstanceChange);
+
+const scribeRandomPoolChange = commonHelper.debounce(
+    () => {
+        browser.storage.sync.set({
+            scribeRandomPool: scribeRandomPool.value
+        });
+    },
+    500
+);
+scribeRandomPool.addEventListener("input", scribeRandomPoolChange);

src/pages/options/options.html

@@ -12,9 +12,10 @@
 <body class="option">
 
   <div class="option">
+
     <section class="general">
       <div class="some-block option-block">
-        <h4 data-localise="__MSG_theme__">Theme</h4>
+        <h4>Theme</h4>
         <select id="theme">
           <option value="">System</option>
           <option value="light-theme">Light</option>
@@ -23,7 +24,7 @@
       </div>
       <div class="buttons buttons-inline">
         <a class="button button-inline" id="update-instances">
-          <span data-localise="__MSG_updateInstances__">Update Instances</span>
+          <span>Update Instances</span>
         </a>
       </div>
       <hr>
@@ -228,9 +229,18 @@
       </div>
       <section class="settings-block">
         <h4>Random instance pool (comma-separated)</h4>
-        <textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea>
+        <textarea id="reddit-random-pool" name="reddit-random-pool" type="text"></textarea>
       </section>
 
+
+      <div class="some-block option-block">
+        <h4>Frontend</h4>
+        <select id="reddit-frontend">
+          <option value="libreddit">LibReddit</option>
+          <option value="teddit">Teddit</option>
+        </select>
+      </div>
+
     </section>
 
     <section class="search">
@@ -307,11 +317,23 @@
             placeholder="Random instance (none selected)" />
         </div>
       </div>
+      <section class="settings-block">
+        <h4>Random instance pool (comma-separated)</h4>
+        <textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea>
+      </section>
     </section>
 
-
   </div>
   <script type="module" src="./options.js"></script>
+  <script type="module" src="./youtube.js"></script>
+  <script type="module" src="./twitter.js"></script>
+  <script type="module" src="./instagram.js"></script>
+  <script type="module" src="./reddit.js"></script>
+  <script type="module" src="./searchEngine.js"></script>
+  <script type="module" src="./translate.js"></script>
+  <script type="module" src="./maps.js"></script>
+  <script type="module" src="./wikipedia.js"></script>
+  <script type="module" src="./medium.js"></script>
   <script src="../../assets/javascripts/localise.js"></script>
 </body>
 

src/pages/options/options.js

@@ -1,64 +1,12 @@
 "use strict";
 
 import commonHelper from "../../assets/javascripts/helpers/common.js";
-import twitterHelper from "../../assets/javascripts/helpers/twitter.js";
-import youtubeHelper from "../../assets/javascripts/helpers/youtube.js";
-import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
-import mapsHelper from "../../assets/javascripts/helpers/google-maps.js";
-import redditHelper from "../../assets/javascripts/helpers/reddit.js";
-import mediumHelper from "../../assets/javascripts/helpers/medium.js";
-import searchHelper from "../../assets/javascripts/helpers/google-search.js";
-import googleTranslateHelper from "../../assets/javascripts/helpers/google-translate.js";
-import wikipediaHelper from "../../assets/javascripts/helpers/wikipedia.js";
 
-const nitterInstances = twitterHelper.redirects;
+import shared from "./shared.js";
-const invidiousInstances = youtubeHelper.redirects;
+
-const bibliogramInstances = instagramHelper.redirects;
-const osmInstances = mapsHelper.redirects;
-const redditInstances = redditHelper.redirects;
-const scribeInstances = mediumHelper.redirects;
-const searchEngineInstances = searchHelper.redirects;
-const simplyTranslateInstances = googleTranslateHelper.redirects;
-const wikipediaInstances = wikipediaHelper.redirects;
-let autocompletes;
 const domparser = new DOMParser();
 
-let nitterInstance = document.getElementById("nitter-instance");
-let invidiousInstance = document.getElementById("invidious-instance");
-let bibliogramInstance = document.getElementById("bibliogram-instance");
-let osmInstance = document.getElementById("osm-instance");
-let redditInstance = document.getElementById("reddit-instance");
-let scribeInstance = document.getElementById("scribe-instance");
-let searchEngineInstance = document.getElementById("searchEngine-instance");
-let simplyTranslateInstance = document.getElementById("simplyTranslate-instance");
-let wikipediaInstance = document.getElementById("wikipedia-instance");
-let disableNitter = document.getElementById("disable-nitter");
-let disableInvidious = document.getElementById("disable-invidious");
-let disableBibliogram = document.getElementById("disable-bibliogram");
-let disableOsm = document.getElementById("disable-osm");
-let disableReddit = document.getElementById("disable-reddit");
-let disableScribe = document.getElementById("disable-scribe");
-let disableSearchEngine = document.getElementById("disable-searchEngine");
-let disableSimplyTranslate = document.getElementById(
-  "disable-simplyTranslate"
-);
-let disableWikipedia = document.getElementById("disable-wikipedia");
-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 invidiousVolume = document.getElementById("invidious-volume");
-let invidiousPlayerStyle = document.getElementById("invidious-player-style");
-let invidiousSubtitles = document.getElementById("invidious-subtitles");
-let invidiousAutoplay = document.getElementById("invidious-autoplay");
 let theme = document.getElementById("theme");
-let useFreeTube = document.getElementById("use-freetube");
-let nitterRandomPool = document.getElementById("nitter-random-pool");
-let invidiousRandomPool = document.getElementById("invidious-random-pool");
-let bibliogramRandomPool = document.getElementById("bibliogram-random-pool");
-let scribeRandomPool = document.getElementById("scribe-random-pool");
 let exceptions;
 
 window.browser = window.browser || window.chrome;
@@ -75,9 +23,7 @@ function prependExceptionsItem(item, index) {
       <line x1='368' y1='144' x2='144' y2='368'
         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
     </svg>`;
-  button.appendChild(
+  button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
-    domparser.parseFromString(svg, "image/svg+xml").documentElement
-  );
   button.addEventListener("click", () => {
     exceptions.splice(index, 1);
     browser.storage.sync.set({
@@ -89,107 +35,16 @@ function prependExceptionsItem(item, index) {
 
 browser.storage.sync.get(
   [
-    "nitterInstance",
-    "invidiousInstance",
-    "bibliogramInstance",
-    "osmInstance",
-    "redditInstance",
-    "scribeInstance",
-    "searchEngineInstance",
-    "simplyTranslateInstance",
-    "wikipediaInstance",
-    "disableNitter",
-    "disableInvidious",
-    "disableBibliogram",
-    "disableOsm",
-    "disableReddit",
-    "disableScribe",
-    "disableSearchEngine",
-    "disableSimplyTranslate",
-    "disableWikipedia",
-    "alwaysProxy",
-    "onlyEmbeddedVideo",
-    "videoQuality",
-    "removeTwitterSW",
-    "invidiousDarkMode",
-    "persistInvidiousPrefs",
-    "invidiousVolume",
-    "invidiousPlayerStyle",
-    "invidiousSubtitles",
-    "invidiousAutoplay",
     "exceptions",
     "theme",
-    "useFreeTube",
-    "nitterRandomPool",
-    "invidiousRandomPool",
-    "bibliogramRandomPool",
-    "scribeRandomPool",
   ],
   (result) => {
     theme.value = result.theme || "";
     if (result.theme) document.body.classList.add(result.theme);
-    nitterInstance.value = result.nitterInstance || "";
-    invidiousInstance.value = result.invidiousInstance || "";
-    bibliogramInstance.value = result.bibliogramInstance || "";
-    osmInstance.value = result.osmInstance || "";
-    redditInstance.value = result.redditInstance || "";
-    scribeInstance.value = result.scribeInstance || "";
-    searchEngineInstance.value =
-      (result.searchEngineInstance && result.searchEngineInstance.link) || "";
-    simplyTranslateInstance.value = result.simplyTranslateInstance || "";
-    wikipediaInstance.value = result.wikipediaInstance || "";
-    disableNitter.checked = !result.disableNitter;
-    disableInvidious.checked = !result.disableInvidious;
-    disableBibliogram.checked = !result.disableBibliogram;
-    disableOsm.checked = !result.disableOsm;
-    disableReddit.checked = !result.disableReddit;
-    disableScribe.checked = !result.disableScribe;
-    disableSearchEngine.checked = !result.disableSearchEngine;
-    disableSimplyTranslate.checked = !result.disableSimplyTranslate;
-    disableWikipedia.checked = !result.disableWikipedia;
-    alwaysProxy.checked = result.alwaysProxy;
-    onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
-    videoQuality.value = result.videoQuality || "";
-    removeTwitterSW.checked = !result.removeTwitterSW;
-    invidiousDarkMode.checked = result.invidiousDarkMode;
-    persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
     exceptions = result.exceptions || [];
     exceptions.forEach(prependExceptionsItem);
-    invidiousVolume.value = result.invidiousVolume;
+    shared.autocompletes.forEach((value) => {
-    document.querySelector("#volume-value").textContent = result.invidiousVolume
+
-      ? `${result.invidiousVolume}%`
-      : " - ";
-    invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
-    invidiousSubtitles.value = result.invidiousSubtitles || "";
-    invidiousAutoplay.checked = result.invidiousAutoplay;
-    useFreeTube.checked = result.useFreeTube;
-    nitterRandomPool.value =
-      result.nitterRandomPool || commonHelper.filterInstances(nitterInstances);
-    invidiousRandomPool.value =
-      result.invidiousRandomPool ||
-      commonHelper.filterInstances(invidiousInstances);
-    bibliogramRandomPool.value =
-      result.bibliogramRandomPool ||
-      commonHelper.filterInstances(bibliogramInstances);
-    scribeRandomPool.value =
-      result.scribeRandomPool ||
-      commonHelper.filterInstances(scribeInstances);
-    autocompletes = [
-      { id: "nitter-instance", instances: nitterRandomPool.value.split(',') },
-      { id: "invidious-instance", instances: invidiousRandomPool.value.split(',') },
-      { id: "bibliogram-instance", instances: bibliogramRandomPool.value.split(',') },
-      { id: "scribe-instance", instances: scribeRandomPool.value.split(',') },
-      { id: "reddit-instance", instances: redditInstances },
-      { id: "osm-instance", instances: osmInstances },
-      {
-        id: "searchEngine-instance",
-        instances: searchEngineInstances.map((instance) => instance.link),
-      },
-      { id: "simplyTranslate-instance", instances: simplyTranslateInstances },
-      { id: "wikipedia-instance", instances: wikipediaInstances },
-    ];
-    autocompletes.forEach((value) => {
-      autocomplete(document.getElementById(value.id), value.instances);
     });
   }
 );
@@ -217,252 +72,7 @@ function addToExceptions() {
     input.setCustomValidity("Invalid RegExp");
   }
 }
-
+document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);
-document
-  .getElementById("add-to-exceptions")
-  .addEventListener("click", addToExceptions);
-
-function debounce(func, wait, immediate) {
-  let timeout;
-  return () => {
-    let context = this,
-      args = arguments;
-    let later = () => {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    let callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-}
-
-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 "";
-  }
-}
-
-const nitterInstanceChange = debounce(() => {
-  if (nitterInstance.checkValidity()) {
-    browser.storage.sync.set({
-      nitterInstance: parseURL(nitterInstance.value),
-    });
-  }
-}, 500);
-nitterInstance.addEventListener("input", nitterInstanceChange);
-
-const invidiousInstanceChange = debounce(() => {
-  if (invidiousInstance.checkValidity()) {
-    browser.storage.sync.set({
-      invidiousInstance: parseURL(invidiousInstance.value),
-    });
-  }
-}, 500);
-invidiousInstance.addEventListener("input", invidiousInstanceChange);
-
-const bibliogramInstanceChange = debounce(() => {
-  if (bibliogramInstance.checkValidity()) {
-    browser.storage.sync.set({
-      bibliogramInstance: parseURL(bibliogramInstance.value),
-    });
-  }
-}, 500);
-bibliogramInstance.addEventListener("input", bibliogramInstanceChange);
-
-const osmInstanceChange = debounce(() => {
-  if (osmInstance.checkValidity()) {
-    browser.storage.sync.set({
-      osmInstance: parseURL(osmInstance.value),
-    });
-  }
-}, 500);
-osmInstance.addEventListener("input", osmInstanceChange);
-
-const redditInstanceChange = debounce(() => {
-  if (redditInstance.checkValidity()) {
-    browser.storage.sync.set({
-      redditInstance: parseURL(redditInstance.value),
-    });
-  }
-}, 500);
-redditInstance.addEventListener("input", redditInstanceChange);
-
-const scribeInstanceChange = debounce(() => {
-  if (scribeInstance.checkValidity()) {
-    browser.storage.sync.set({
-      scribeInstance: parseURL(scribeInstance.value),
-    });
-  }
-}, 500);
-scribeInstance.addEventListener("input", scribeInstanceChange);
-
-const searchEngineInstanceChange = debounce(() => {
-  const instance = searchEngineInstances.find(
-    (instance) => instance.link === searchEngineInstance.value
-  );
-  if (instance || !searchEngineInstance.value) {
-    browser.storage.sync.set({
-      searchEngineInstance: instance || searchEngineInstance.value,
-    });
-  } else {
-    searchEngineInstance.setCustomValidity("Must be an instance from the list");
-  }
-}, 500);
-searchEngineInstance.addEventListener("input", searchEngineInstanceChange);
-
-const simplyTranslateInstanceChange = debounce(() => {
-  if (simplyTranslateInstance.checkValidity()) {
-    browser.storage.sync.set({
-      simplyTranslateInstance: parseURL(simplyTranslateInstance.value),
-    });
-  }
-}, 500);
-simplyTranslateInstance.addEventListener(
-  "input",
-  simplyTranslateInstanceChange
-);
-
-const wikipediaInstanceChange = debounce(() => {
-  if (wikipediaInstance.checkValidity()) {
-    browser.storage.sync.set({
-      wikipediaInstance: parseURL(wikipediaInstance.value),
-    });
-  }
-}, 500);
-wikipediaInstance.addEventListener(
-  "input",
-  wikipediaInstanceChange
-);
-
-disableNitter.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableNitter: !event.target.checked });
-});
-
-disableInvidious.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableInvidious: !event.target.checked });
-});
-
-disableBibliogram.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableBibliogram: !event.target.checked });
-});
-
-disableOsm.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableOsm: !event.target.checked });
-});
-
-disableReddit.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableReddit: !event.target.checked });
-});
-
-disableScribe.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableScribe: !event.target.checked });
-});
-
-disableSearchEngine.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
-});
-
-disableSimplyTranslate.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableSimplyTranslate: !event.target.checked });
-});
-
-disableWikipedia.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableWikipedia: !event.target.checked });
-});
-
-alwaysProxy.addEventListener("change", (event) => {
-  browser.storage.sync.set({ alwaysProxy: event.target.checked });
-});
-
-onlyEmbeddedVideo.addEventListener("change", (event) => {
-  browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
-});
-
-videoQuality.addEventListener("change", (event) => {
-  browser.storage.sync.set({
-    videoQuality: event.target.options[videoQuality.selectedIndex].value,
-  });
-});
-
-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 });
-});
-
-useFreeTube.addEventListener("change", (event) => {
-  browser.storage.sync.set({ useFreeTube: event.target.checked });
-});
-
-const invidiousVolumeChange = debounce(() => {
-  document.querySelector(
-    "#volume-value"
-  ).textContent = `${invidiousVolume.value}%`;
-  browser.storage.sync.set({
-    invidiousVolume: invidiousVolume.value,
-  });
-}, 1);
-invidiousVolume.addEventListener("input", invidiousVolumeChange);
-
-invidiousPlayerStyle.addEventListener("change", (event) => {
-  browser.storage.sync.set({
-    invidiousPlayerStyle:
-      event.target.options[invidiousPlayerStyle.selectedIndex].value,
-  });
-});
-
-const invidiousSubtitlesChange = debounce(() => {
-  browser.storage.sync.set({ invidiousSubtitles: invidiousSubtitles.value });
-}, 500);
-invidiousSubtitles.addEventListener("input", invidiousSubtitlesChange);
-
-invidiousAutoplay.addEventListener("change", (event) => {
-  browser.storage.sync.set({ invidiousAutoplay: event.target.checked });
-});
-
-const nitterRandomPoolChange = debounce(() => {
-  browser.storage.sync.set({ nitterRandomPool: nitterRandomPool.value });
-}, 500);
-nitterRandomPool.addEventListener("input", nitterRandomPoolChange);
-
-const invidiousRandomPoolChange = debounce(() => {
-  browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool.value });
-}, 500);
-invidiousRandomPool.addEventListener("input", invidiousRandomPoolChange);
-
-const bibliogramRandomPoolChange = debounce(() => {
-  browser.storage.sync.set({
-    bibliogramRandomPool: bibliogramRandomPool.value,
-  });
-}, 500);
-bibliogramRandomPool.addEventListener("input", bibliogramRandomPoolChange);
-
-const scribeRandomPoolChange = debounce(() => {
-  browser.storage.sync.set({
-    scribeRandomPool: scribeRandomPool.value,
-  });
-}, 500);
-scribeRandomPool.addEventListener("input", scribeRandomPoolChange);
 
 theme.addEventListener("change", (event) => {
   const value = event.target.options[theme.selectedIndex].value;
@@ -484,110 +94,6 @@ theme.addEventListener("change", (event) => {
   });
 });
 
-function autocomplete(input, list) {
-  let currentFocus;
-  input.addEventListener("focus", (e) => {
-    showOptions(e, true);
-  });
-  input.addEventListener("input", (e) => {
-    const val = e.target.value;
-    if (!val) {
-      return false;
-    }
-    currentFocus = -1;
-    showOptions(e);
-  });
-  input.addEventListener("keydown", function (e) {
-    let x = document.getElementById(this.id + "autocomplete-list");
-    if (x) x = x.getElementsByTagName("div");
-    if (e.keyCode == 40) {
-      currentFocus++;
-      addActive(x);
-    } else if (e.keyCode == 38) {
-      currentFocus--;
-      addActive(x);
-    } else if (e.keyCode == 13) {
-      e.preventDefault();
-      if (currentFocus > -1) {
-        if (x) x[currentFocus].click();
-      }
-    }
-  });
-  function showOptions(event, showAll = false) {
-    let div,
-      i,
-      val = event.target.value;
-    closeAllLists();
-    div = document.createElement("div");
-    div.setAttribute("id", event.target.id + "autocomplete-list");
-    div.setAttribute("class", "autocomplete-items");
-    event.target.parentNode.appendChild(div);
-    for (i = 0; i < list.length; i++) {
-      if (list[i].toLowerCase().indexOf(val.toLowerCase()) > -1) {
-        div.appendChild(getItem(list[i], val));
-      } else if (showAll) {
-        div.appendChild(getItem(list[i], val));
-      }
-    }
-  }
-  function getItem(item, val) {
-    const div = document.createElement("div");
-    const strong = document.createElement("strong");
-    strong.textContent = item.substr(0, val.length);
-    div.innerText = item.substr(val.length);
-    const hiddenInput = document.createElement("input");
-    hiddenInput.type = "hidden";
-    hiddenInput.value = item;
-    div.prepend(strong);
-    div.appendChild(hiddenInput);
-    div.addEventListener("click", function (e) {
-      input.value = div.getElementsByTagName("input")[0].value;
-      input.dispatchEvent(new Event("input"));
-      closeAllLists();
-    });
-    return div;
-  }
-  function addActive(x) {
-    if (!x) return false;
-    removeActive(x);
-    if (currentFocus >= x.length) currentFocus = 0;
-    if (currentFocus < 0) currentFocus = x.length - 1;
-    x[currentFocus].classList.add("autocomplete-active");
-  }
-  function removeActive(x) {
-    for (let i = 0; i < x.length; i++) {
-      x[i].classList.remove("autocomplete-active");
-    }
-  }
-  function closeAllLists(elmnt) {
-    let x = document.getElementsByClassName("autocomplete-items");
-    for (let i = 0; i < x.length; i++) {
-      if (elmnt != x[i] && elmnt != input) {
-        x[i].parentNode.removeChild(x[i]);
-      }
-    }
-  }
-  document.addEventListener("click", (e) => {
-    if (!autocompletes.find((element) => element.id === e.target.id)) {
-      closeAllLists(e.target);
-    }
-  });
-}
-
-var coll = document.getElementsByClassName("collapsible");
-var i;
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function () {
-    this.classList.toggle("collapsible-active");
-    var content = this.nextElementSibling;
-    if (content.style.display === "block") {
-      content.style.display = "none";
-    } else {
-      content.style.display = "block";
-    }
-  });
-}
-
 document.querySelector("#update-instances").addEventListener("click", () => {
   document.querySelector("#update-instances").innerHTML = '...';
   if (commonHelper.getInstances())

src/pages/options/reddit.js

@@ -0,0 +1,38 @@
+import redditHelper from "../../assets/javascripts/helpers/reddit.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+
+const redditInstances = redditHelper.redirects;
+
+let redditInstance = document.getElementById("reddit-instance");
+let disableReddit = document.getElementById("disable-reddit");
+
+
+browser.storage.sync.get(
+    [
+        "redditInstance",
+        "disableReddit",
+    ],
+    (result) => {
+        redditInstance.value = result.redditInstance || "";
+        disableReddit.checked = !result.disableReddit;
+        let id = "reddit-instance";
+        let instances = redditInstances;
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const redditInstanceChange = commonHelper.debounce(() => {
+    if (redditInstance.checkValidity()) {
+        browser.storage.sync.set({
+            redditInstance: shared.parseURL(redditInstance.value),
+        });
+    }
+}, 500);
+redditInstance.addEventListener("input", redditInstanceChange);
+
+disableReddit.addEventListener("change", (event) => {
+    browser.storage.sync.set({ disableReddit: !event.target.checked });
+});

src/pages/options/searchEngine.js

@@ -0,0 +1,42 @@
+import searchHelper from "../../assets/javascripts/helpers/google-search.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+const searchEngineInstances = searchHelper.redirects;
+let searchEngineInstance = document.getElementById("searchEngine-instance");
+let disableSearchEngine = document.getElementById("disable-searchEngine");
+
+browser.storage.sync.get(
+  [
+    "searchEngineInstance",
+    "disableSearchEngine",
+  ],
+  (result) => {
+    searchEngineInstance.value = (result.searchEngineInstance && result.searchEngineInstance.link) || "";
+
+    disableSearchEngine.checked = !result.disableSearchEngine;
+
+    let id = "searchEngine-instance"
+    let instances = searchEngineInstances.map((instance) => instance.link)
+    shared.autocompletes.push({ id: id, instances: instances })
+    shared.autocomplete(document.getElementById(id), instances);
+  }
+)
+
+const searchEngineInstanceChange = commonHelper.debounce(() => {
+  const instance = searchEngineInstances.find(
+    (instance) => instance.link === searchEngineInstance.value
+  );
+  if (instance || !searchEngineInstance.value) {
+    browser.storage.sync.set({
+      searchEngineInstance: instance || searchEngineInstance.value,
+    });
+  } else {
+    searchEngineInstance.setCustomValidity("Must be an instance from the list");
+  }
+}, 500);
+searchEngineInstance.addEventListener("input", searchEngineInstanceChange);
+
+disableSearchEngine.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
+});

src/pages/options/shared.js

@@ -0,0 +1,115 @@
+var autocompletes = [];
+
+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 "";
+}
+
+
+function autocomplete(input, list) {
+    let currentFocus;
+    input.addEventListener("focus", (e) => {
+        showOptions(e, true);
+    });
+    input.addEventListener("input", (e) => {
+        const val = e.target.value;
+        if (!val) {
+            return false;
+        }
+        currentFocus = -1;
+        showOptions(e);
+    });
+    input.addEventListener("keydown", function (e) {
+        let x = document.getElementById(this.id + "autocomplete-list");
+        if (x) x = x.getElementsByTagName("div");
+        if (e.keyCode == 40) {
+            currentFocus++;
+            addActive(x);
+        } else if (e.keyCode == 38) {
+            currentFocus--;
+            addActive(x);
+        } else if (e.keyCode == 13) {
+            e.preventDefault();
+            if (currentFocus > -1) {
+                if (x) x[currentFocus].click();
+            }
+        }
+    });
+    function showOptions(event, showAll = false) {
+        let div,
+            i,
+            val = event.target.value;
+        closeAllLists();
+        div = document.createElement("div");
+        div.setAttribute("id", event.target.id + "autocomplete-list");
+        div.setAttribute("class", "autocomplete-items");
+        event.target.parentNode.appendChild(div);
+        for (i = 0; i < list.length; i++) {
+            if (list[i].toLowerCase().indexOf(val.toLowerCase()) > -1) {
+                div.appendChild(getItem(list[i], val));
+            } else if (showAll) {
+                div.appendChild(getItem(list[i], val));
+            }
+        }
+    }
+    function getItem(item, val) {
+        const div = document.createElement("div");
+        const strong = document.createElement("strong");
+        strong.textContent = item.substr(0, val.length);
+        div.innerText = item.substr(val.length);
+        const hiddenInput = document.createElement("input");
+        hiddenInput.type = "hidden";
+        hiddenInput.value = item;
+        div.prepend(strong);
+        div.appendChild(hiddenInput);
+        div.addEventListener("click", function (e) {
+            input.value = div.getElementsByTagName("input")[0].value;
+            input.dispatchEvent(new Event("input"));
+            closeAllLists();
+        });
+        return div;
+    }
+    function addActive(x) {
+        if (!x) return false;
+        removeActive(x);
+        if (currentFocus >= x.length) currentFocus = 0;
+        if (currentFocus < 0) currentFocus = x.length - 1;
+        x[currentFocus].classList.add("autocomplete-active");
+    }
+    function removeActive(x) {
+        for (let i = 0; i < x.length; i++) {
+            x[i].classList.remove("autocomplete-active");
+        }
+    }
+    function closeAllLists(elmnt) {
+        let x = document.getElementsByClassName("autocomplete-items");
+        for (let i = 0; i < x.length; i++) {
+            if (elmnt != x[i] && elmnt != input) {
+                x[i].parentNode.removeChild(x[i]);
+            }
+        }
+    }
+    document.addEventListener("click", (e) => {
+        if (!autocompletes.find((element) => element.id === e.target.id)) {
+            closeAllLists(e.target);
+        }
+    });
+}
+
+export default {
+    autocompletes,
+    parseURL,
+    autocomplete
+}

src/pages/options/translate.js

@@ -0,0 +1,42 @@
+import googleTranslateHelper from "../../assets/javascripts/helpers/google-translate.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+const simplyTranslateInstances = googleTranslateHelper.redirects;
+let simplyTranslateInstance = document.getElementById("simplyTranslate-instance");
+let disableSimplyTranslate = document.getElementById("disable-simplyTranslate");
+
+
+browser.storage.sync.get(
+    [
+        "simplyTranslateInstance",
+        "disableSimplyTranslate",
+    ],
+    (result) => {
+
+        simplyTranslateInstance.value = result.simplyTranslateInstance || "";
+        disableSimplyTranslate.checked = !result.disableSimplyTranslate;
+        let id = "simplyTranslate-instance"
+        let instances = simplyTranslateInstances;
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const simplyTranslateInstanceChange = commonHelper.debounce(() => {
+    if (simplyTranslateInstance.checkValidity()) {
+        browser.storage.sync.set({
+            simplyTranslateInstance: shared.parseURL(simplyTranslateInstance.value),
+        });
+    }
+}, 500);
+simplyTranslateInstance.addEventListener(
+    "input",
+    simplyTranslateInstanceChange
+);
+
+
+
+disableSimplyTranslate.addEventListener("change", (event) => {
+    browser.storage.sync.set({ disableSimplyTranslate: !event.target.checked });
+});

src/pages/options/twitter.js

@@ -0,0 +1,53 @@
+import twitterHelper from "../../assets/javascripts/helpers/twitter.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+const nitterInstances = twitterHelper.redirects;
+let nitterInstance = document.getElementById("nitter-instance");
+let disableNitter = document.getElementById("disable-nitter");
+let nitterRandomPool = document.getElementById("nitter-random-pool");
+let removeTwitterSW = document.getElementById("remove-twitter-sw");
+
+browser.storage.sync.get(
+    [
+        "nitterInstance",
+        "disableNitter",
+        "nitterRandomPool",
+        "removeTwitterSW",
+    ],
+    (result) => {
+        nitterInstance.value = result.nitterInstance || "";
+        disableNitter.checked = !result.disableNitter;
+        nitterRandomPool.value = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances);
+        removeTwitterSW.checked = !result.removeTwitterSW;
+        let id = "nitter-instance"
+        let instances = nitterRandomPool.value.split(',')
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const nitterInstanceChange = commonHelper.debounce(
+    () => {
+        if (nitterInstance.checkValidity()) {
+            browser.storage.sync.set({
+                nitterInstance: shared.parseURL(nitterInstance.value),
+            });
+        }
+    },
+    500)
+nitterInstance.addEventListener("input", nitterInstanceChange);
+
+
+disableNitter.addEventListener("change", (event) => {
+    browser.storage.sync.set({ disableNitter: !event.target.checked });
+});
+
+removeTwitterSW.addEventListener("change", (event) => {
+    browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
+});
+
+const nitterRandomPoolChange = commonHelper.debounce(() => {
+    browser.storage.sync.set({ nitterRandomPool: nitterRandomPool.value });
+}, 500);
+nitterRandomPool.addEventListener("input", nitterRandomPoolChange);

src/pages/options/wikipedia.js

@@ -0,0 +1,42 @@
+import wikipediaHelper from "../../assets/javascripts/helpers/wikipedia.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+
+const wikipediaInstances = wikipediaHelper.redirects;
+
+let wikipediaInstance = document.getElementById("wikipedia-instance");
+
+let disableWikipedia = document.getElementById("disable-wikipedia");
+
+browser.storage.sync.get(
+    [
+        "wikipediaInstance",
+        "disableWikipedia",
+    ],
+    (result) => {
+        wikipediaInstance.value = result.wikipediaInstance || "";
+
+        disableWikipedia.checked = !result.disableWikipedia;
+        let id = "wikipedia-instance"
+        let instances = wikipediaInstances
+        shared.autocompletes.push({ id: id, instances: instances })
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const wikipediaInstanceChange = commonHelper.debounce(() => {
+    if (wikipediaInstance.checkValidity()) {
+        browser.storage.sync.set({
+            wikipediaInstance: shared.parseURL(wikipediaInstance.value),
+        });
+    }
+}, 500);
+wikipediaInstance.addEventListener(
+    "input",
+    wikipediaInstanceChange
+);
+
+disableWikipedia.addEventListener("change", (event) => {
+    browser.storage.sync.set({ disableWikipedia: !event.target.checked });
+});

src/pages/options/youtube.js

@@ -0,0 +1,150 @@
+import youtubeHelper from "../../assets/javascripts/helpers/youtube.js";
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import shared from "./shared.js";
+
+const invidiousInstances = youtubeHelper.redirects;
+
+let invidiousInstance = document.getElementById("invidious-instance");
+let disableInvidious = document.getElementById("disable-invidious");
+let invidiousDarkMode = document.getElementById("invidious-dark-mode");
+let persistInvidiousPrefs = document.getElementById("persist-invidious-prefs");
+let invidiousVolume = document.getElementById("invidious-volume");
+let invidiousPlayerStyle = document.getElementById("invidious-player-style");
+let invidiousSubtitles = document.getElementById("invidious-subtitles");
+let invidiousAutoplay = document.getElementById("invidious-autoplay");
+let invidiousRandomPool = document.getElementById("invidious-random-pool");
+let useFreeTube = document.getElementById("use-freetube");
+let alwaysProxy = document.getElementById("always-proxy");
+let onlyEmbeddedVideo = document.getElementById("only-embed");
+let videoQuality = document.getElementById("video-quality");
+
+browser.storage.sync.get(
+    [
+        "invidiousInstance",
+        "disableInvidious",
+        "invidiousDarkMode",
+        "persistInvidiousPrefs",
+        "invidiousVolume",
+        "invidiousPlayerStyle",
+        "invidiousSubtitles",
+        "invidiousAutoplay",
+        "invidiousRandomPool",
+        "useFreeTube",
+        "alwaysProxy",
+        "onlyEmbeddedVideo",
+        "videoQuality",
+    ],
+    (result) => {
+        invidiousInstance.value = result.invidiousInstance || "";
+        disableInvidious.checked = !result.disableInvidious;
+        invidiousDarkMode.checked = result.invidiousDarkMode;
+        persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
+        invidiousVolume.value = result.invidiousVolume;
+        document.querySelector("#volume-value").textContent = result.invidiousVolume ? `${result.invidiousVolume}%` : " - ";
+        invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
+        invidiousSubtitles.value = result.invidiousSubtitles || "";
+        invidiousAutoplay.checked = result.invidiousAutoplay;
+        invidiousRandomPool.value = result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances);
+        useFreeTube.checked = result.useFreeTube;
+        onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
+        alwaysProxy.checked = result.alwaysProxy;
+        videoQuality.value = result.videoQuality || "";
+        let id = "invidious-instance"
+        let instances = invidiousRandomPool.value.split(',');
+        shared.autocompletes.push({ id: id, instances: instances });
+        shared.autocomplete(document.getElementById(id), instances);
+    }
+)
+
+const invidiousInstanceChange = commonHelper.debounce(
+    () => {
+        if (invidiousInstance.checkValidity())
+            browser.storage.sync.set({
+                invidiousInstance: shared.parseURL(invidiousInstance.value),
+            });
+    },
+    500
+);
+invidiousInstance.addEventListener("input", invidiousInstanceChange);
+
+disableInvidious.addEventListener(
+    "change",
+    (event) => {
+        browser.storage.sync.set({ disableInvidious: !event.target.checked });
+    }
+);
+
+invidiousDarkMode.addEventListener(
+    "change",
+    (event) => {
+        console.info("InvidiousDarkMode", event.target.checked);
+        browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
+    }
+);
+
+persistInvidiousPrefs.addEventListener(
+    "change",
+    (event) => {
+        console.info("Persist preferences (as cookie)", event.target.checked);
+        browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
+    }
+);
+
+const invidiousVolumeChange = commonHelper.debounce(
+    () => {
+        document.querySelector("#volume-value").textContent = `${invidiousVolume.value}%`;
+        browser.storage.sync.set({
+            invidiousVolume: invidiousVolume.value,
+        });
+    },
+    1
+);
+invidiousVolume.addEventListener("input", invidiousVolumeChange);
+
+invidiousPlayerStyle.addEventListener("change", (event) => {
+    browser.storage.sync.set({
+        invidiousPlayerStyle: event.target.options[invidiousPlayerStyle.selectedIndex].value,
+    });
+});
+
+const invidiousSubtitlesChange = commonHelper.debounce(
+    () => {
+        browser.storage.sync.set({ invidiousSubtitles: invidiousSubtitles.value });
+    },
+    500
+);
+invidiousSubtitles.addEventListener("input", invidiousSubtitlesChange);
+
+invidiousAutoplay.addEventListener(
+    "change",
+    (event) => {
+        browser.storage.sync.set({ invidiousAutoplay: event.target.checked });
+    }
+);
+
+const invidiousRandomPoolChange = commonHelper.debounce(
+    () => {
+        browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool.value });
+    },
+    500
+);
+invidiousRandomPool.addEventListener("input", invidiousRandomPoolChange);
+
+
+useFreeTube.addEventListener("change", (event) => {
+    browser.storage.sync.set({ useFreeTube: event.target.checked });
+});
+
+alwaysProxy.addEventListener("change", (event) => {
+    browser.storage.sync.set({ alwaysProxy: event.target.checked });
+});
+
+onlyEmbeddedVideo.addEventListener("change", (event) => {
+    browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
+});
+
+videoQuality.addEventListener("change", (event) => {
+    browser.storage.sync.set({
+        videoQuality: event.target.options[videoQuality.selectedIndex].value,
+    });
+});

src/pages/popup/popup.html

@@ -56,7 +56,7 @@
 
   <div class="buttons">
     <a class="button" id="update-instances">
-      <span data-localise="__MSG_updateInstances__">Update Instances&nbsp;</span>
+      <span>Update Instances&nbsp;</span>
     </a>
     <a class="button" id="more-options">
       <span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>