19 files changed, 131 insertions, 575 deletions

diff --git a/src/pages/options/general.js b/src/pages/options/general.js
index e77f2aee..9b0731a1 100644
--- a/src/pages/options/general.js
+++ b/src/pages/options/general.js
@@ -1,5 +1,6 @@
 "use strict";
 
+import data from "../../assets/javascripts/data.js";
 import commonHelper from "../../assets/javascripts/helpers/common.js";
 
 import shared from "./shared.js";
@@ -7,7 +8,6 @@ import shared from "./shared.js";
 const domparser = new DOMParser();
 
 let themeElement = document.getElementById("theme");
-let exceptions;
 
 window.browser = window.browser || window.chrome;
 
@@ -37,10 +37,11 @@ browser.storage.sync.get(
     "theme",
   ],
   (result) => {
+    data.theme = result.theme || "";
     themeElement.value = result.theme || "";
     if (result.theme) document.body.classList.add(result.theme);
-    exceptions = result.exceptions || [];
-    exceptions.forEach(prependExceptionsItem);
+    data.exceptions = result.exceptions || [];
+    data.exceptions.forEach(prependExceptionsItem);
     shared.autocompletes.forEach((value) => {
     });
   }
diff --git a/src/pages/options/instagram.html b/src/pages/options/instagram.html
index 96d9d07c..25cfc8f2 100644
--- a/src/pages/options/instagram.html
+++ b/src/pages/options/instagram.html
@@ -28,21 +28,21 @@
             <h1>Enable</h1>
             <input id="disable-bibliogram" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
                     placeholder="Random instance (none selected)" />
             </div>
-        </div>
+        </div> -->
 
-        <section class="settings-block">
+        <!-- <section class="settings-block">
             <h4>Instance List</h4>
             <div class="random-pool">
                 <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea>
                 <ul id="bibliogram-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
 
 
     </section>
diff --git a/src/pages/options/instagram.js b/src/pages/options/instagram.js
index db31de1e..77438742 100644
--- a/src/pages/options/instagram.js
+++ b/src/pages/options/instagram.js
@@ -1,58 +1,9 @@
 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 bibliogramInstanceElement = document.getElementById("bibliogram-instance");
 let disableBibliogramElement = document.getElementById("disable-bibliogram");
-let bibliogramRandomPoolElement = document.getElementById("bibliogram-random-pool");
-let bibliogramRandomPoolListElement = document.getElementById("bibliogram-random-pool-list");
-
-let bibliogramRandomPool;
-
-browser.storage.sync.get(
-    [
-        "bibliogramInstance",
-        "disableBibliogram",
-        "bibliogramRandomPool",
-    ],
-    (result) => {
-        bibliogramInstanceElement.value = result.bibliogramInstance || "";
-        disableBibliogramElement.checked = !result.disableBibliogram;
-
-
-        bibliogramRandomPool = result.bibliogramRandomPool || commonHelper.filterInstances(bibliogramInstances)
-        bibliogramRandomPoolElement.value = bibliogramRandomPool.join("\n");
-        commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool);
-        let id = "bibliogram-instance";
-        let instances = bibliogramRandomPoolElement.value.split(',')
-        shared.autocompletes.push({ id: id, instances: instances })
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
-
-bibliogramInstanceElement.addEventListener("input", commonHelper.debounce(() => {
-    if (bibliogramInstanceElement.checkValidity())
-        browser.storage.sync.set({ bibliogramInstance: shared.parseURL(bibliogramInstanceElement.value) });
-}, 500));
-
-disableBibliogramElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableBibliogram: !event.target.checked });
-});
-
-bibliogramRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    bibliogramRandomPool = commonHelper.filterList(bibliogramRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool);
-    browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPool });
-}, 50));
 
+disableBibliogramElement.checked = !instagramHelper.getDisableBibliogram();
 
-browser.storage.onChanged.addListener((changes) => {
-    if ("bibliogramRandomPool" in changes) {
-        bibliogramRandomPool = changes.bibliogramRandomPool.newValue;
-        bibliogramRandomPoolElement.value = bibliogramRandomPool.join("\n");
-        commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool);
-    }
-})
\ No newline at end of file
+disableBibliogramElement.addEventListener("change",
+    (event) => instagramHelper.setDisableBibliogram(!event.target.checked)
+);
\ No newline at end of file
diff --git a/src/pages/options/maps.html b/src/pages/options/maps.html
index 47c5adfa..bfcedbaf 100644
--- a/src/pages/options/maps.html
+++ b/src/pages/options/maps.html
@@ -26,15 +26,15 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Maps (OpenStreetMap)</h1>
+            <h1>Enable</h1>
             <input id="disable-osm" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" />
             </div>
-        </div>
+        </div> -->
     </section>
     <script type="module" src="./init.js"></script>
     <script type="module" src="./maps.js"></script>
diff --git a/src/pages/options/maps.js b/src/pages/options/maps.js
index 89a92057..310f9285 100644
--- a/src/pages/options/maps.js
+++ b/src/pages/options/maps.js
@@ -1,32 +1,9 @@
 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 osmInstanceElement = document.getElementById("osm-instance");
 let disableOsmElement = document.getElementById("disable-osm");
 
-browser.storage.sync.get(
-    [
-        "osmInstance",
-        "disableOsm",
-    ],
-    (result) => {
-        osmInstanceElement.value = result.osmInstance || "";
-        disableOsmElement.checked = !result.disableOsm;
-        let id = "osm-instance"
-        let instances = osmInstances
-        shared.autocompletes.push({ id: id, instances: instances })
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
-
-osmInstanceElement.addEventListener("input", commonHelper.debounce(() => {
-    if (osmInstanceElement.checkValidity())
-        browser.storage.sync.set({ osmInstance: shared.parseURL(osmInstanceElement.value) });
-}, 500));
+disableOsmElement.checked = !mapsHelper.getDisableOsm();
 
-disableOsmElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableOsm: !event.target.checked });
-});
\ No newline at end of file
+disableOsmElement.addEventListener("change",
+    (event) => mapsHelper.setDisableOsm(!event.target.checked)
+);
\ No newline at end of file
diff --git a/src/pages/options/medium.html b/src/pages/options/medium.html
index b04a631e..fb44b7ee 100644
--- a/src/pages/options/medium.html
+++ b/src/pages/options/medium.html
@@ -25,10 +25,10 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Medium (Scribe)</h1>
+            <h1>Enable</h1>
             <input id="disable-scribe" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="scribe-instance" type="url" name="scribe-instance"
@@ -42,7 +42,7 @@
                 <textarea id="scribe-random-pool" type="text"></textarea>
                 <ul id="scribe-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
     </section>
 
     <script type="module" src="./init.js"></script>
diff --git a/src/pages/options/medium.js b/src/pages/options/medium.js
index bd86089f..bcd2c2e4 100644
--- a/src/pages/options/medium.js
+++ b/src/pages/options/medium.js
@@ -1,61 +1,9 @@
 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 scribeInstanceElement = document.getElementById("scribe-instance");
 let disableScribeElement = document.getElementById("disable-scribe");
-let scribeRandomPoolElement = document.getElementById("scribe-random-pool");
-let scribeRandomPoolListElement = document.getElementById('scribe-random-pool-list');
-
-let scribeRandomPool;
-
-browser.storage.sync.get(
-    [
-        "disableScribe",
-        "scribeInstance",
-        "scribeRandomPool",
-    ],
-    (result) => {
-        scribeInstanceElement.value = result.scribeInstance || "";
-        disableScribeElement.checked = !result.disableScribe;
-        
-        scribeRandomPool = result.scribeRandomPool || commonHelper.filterInstances(scribeInstances)
-        scribeRandomPoolElement.value = scribeRandomPool.join("\n");
-        commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool);
-        
-        let id = "scribe-instance";
-        let instances = scribeRandomPoolElement.value.split('\n')
-        shared.autocompletes.push({ id: id, instances: instances })
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
-
-disableScribeElement.addEventListener("change", (event) => {
-    console.info("isScibeEnabled:", event.target.checked)
-    browser.storage.sync.set({ disableScribe: !event.target.checked });
-});
-
-scribeInstanceElement.addEventListener("input", commonHelper.debounce(() => {
-    if (scribeInstanceElement.checkValidity()) {
-        console.info("selectedScribeInstance", scribeInstanceElement.value);
-        browser.storage.sync.set({
-            scribeInstance: shared.parseURL(scribeInstanceElement.value)
-        });
-    }
-}, 500));
 
-scribeRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    scribeRandomPool = commonHelper.filterList(scribeRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool);
-    browser.storage.sync.set({ scribeRandomPool: scribeRandomPool });
-}, 50));
+disableScribeElement.checked = !mediumHelper.getDisableScribe();
 
-browser.storage.onChanged.addListener((changes) => {
-    if ("scribeRandomPool" in changes) {
-        scribeRandomPool = changes.scribeRandomPool.newValue;
-        scribeRandomPoolElement.value = scribeRandomPool.join("\n");
-        commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool);
-    }
-})
\ No newline at end of file
+disableScribeElement.addEventListener("change",
+    (event) => mediumHelper.setDisableScribe(!event.target.checked)
+);
diff --git a/src/pages/options/reddit.html b/src/pages/options/reddit.html
index 88f4c46c..14474285 100644
--- a/src/pages/options/reddit.html
+++ b/src/pages/options/reddit.html
@@ -27,16 +27,16 @@
     <section class="option-block">
 
         <div class="some-block option-block">
-            <h1>Reddit</h1>
+            <h1>Enable</h1>
             <input id="disable-reddit" type="checkbox" checked />
         </div>
 
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="reddit-instance" type="url" placeholder="https://libredd.it" />
             </div>
-        </div>
+        </div> -->
 
         <div class="some-block option-block">
             <h4>Frontend</h4>
@@ -46,7 +46,7 @@
             </select>
         </div>
 
-        <section class="settings-block">
+        <!-- <section class="settings-block">
             <h4>LibReddit Instance List</h4>
             <div class="random-pool">
                 <textarea id="libreddit-random-pool" type="text"></textarea>
@@ -60,7 +60,7 @@
                 <textarea id="teddit-random-pool" type="text"></textarea>
                 <ul id="teddit-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
 
     </section>
 
diff --git a/src/pages/options/reddit.js b/src/pages/options/reddit.js
index 6702c4de..96b736be 100644
--- a/src/pages/options/reddit.js
+++ b/src/pages/options/reddit.js
@@ -1,91 +1,15 @@
-import redditHelper from "../../assets/javascripts/helpers/reddit.js";
-import commonHelper from "../../assets/javascripts/helpers/common.js";
-import shared from "./shared.js";
+import reddit from "../../assets/javascripts/helpers/reddit.js";
 
-
-const redditInstances = redditHelper.redirects;
-
-let redditInstanceElement = document.getElementById("reddit-instance");
 let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
 
-let libredditRandomPoolElement = document.getElementById("libreddit-random-pool");
-let libredditRandomPoolListElement = document.getElementById("libreddit-random-pool-list");
-
-let tedditRandomPoolElement = document.getElementById("teddit-random-pool");
-let tedditRandomPoolListElement = document.getElementById("teddit-random-pool-list");
-
-let libredditRandomPool
-let tedditRandomPool
-
-browser.storage.sync.get(
-    [
-        "redditInstance",
-        "disableReddit",
-        "redditFrontend",
-        "libredditRandomPool",
-        "tedditRandomPool"
-    ],
-    (result) => {
-        redditInstanceElement.value = result.redditInstance || "";
-        disableRedditElement.checked = !result.disableReddit;
-        redditFrontendElement.value = result.redditFrontend;
-
-        libredditRandomPool = result.libredditRandomPool || commonHelper.filterInstances(redditInstances.libreddit)
-        libredditRandomPoolElement.value = libredditRandomPool.join("\n");
-        commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool);
-
-        tedditRandomPool = result.tedditRandomPool || commonHelper.filterInstances(redditInstances.teddit)
-        tedditRandomPoolElement.value = tedditRandomPool.join("\n");
-        commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
-
-        // let id = "reddit-instance";
-        // let instances = redditInstances;
-        // shared.autocompletes.push({ id: id, instances: instances })
-        // shared.autocomplete(document.getElementById(id), instances);
-    }
-)
-
-redditInstanceElement.addEventListener("input", commonHelper.debounce(() => {
-    if (redditInstanceElement.checkValidity()) {
-        browser.storage.sync.set({
-            redditInstance: shared.parseURL(redditInstanceElement.value),
-        });
-    }
-}, 500));
-
-disableRedditElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableReddit: !event.target.checked });
-});
-
-redditFrontendElement.addEventListener("change", (event) => {
-    const value = event.target.options[redditFrontendElement.selectedIndex].value;
-    console.info("Reddit Frontend:", value)
-    browser.storage.sync.set({ redditFrontend: value })
-});
-
-libredditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    libredditRandomPool = commonHelper.filterList(libredditRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool);
-    browser.storage.sync.set({ libredditRandomPool: libredditRandomPool });
-}, 50));
-
-tedditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    tedditRandomPool = commonHelper.filterList(tedditRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
-    browser.storage.sync.set({ tedditRandomPool: tedditRandomPool });
-}, 50));
+disableRedditElement.checked = !reddit.getDisableReddit();
+redditFrontendElement.value = reddit.getRedditFrontend();
 
-browser.storage.onChanged.addListener((changes) => {
-    if ("libredditRandomPool" in changes) {
-        libredditRandomPool = changes.libredditRandomPool.newValue;
-        libredditRandomPoolElement.value = libredditRandomPool.join("\n");
-        commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool);
-    }
+disableRedditElement.addEventListener("change",
+    (event) => reddit.setDisableReddit(!event.target.checked)
+);
 
-    if ("tedditRandomPool" in changes) {
-        tedditRandomPool = changes.tedditRandomPool.newValue;
-        tedditRandomPoolElement.value = tedditRandomPool.join("\n");
-        commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
-    }
-})
\ No newline at end of file
+redditFrontendElement.addEventListener("change",
+    (event) => reddit.setRedditFrontend(event.target.options[redditFrontendElement.selectedIndex].value)
+);
\ No newline at end of file
diff --git a/src/pages/options/search.html b/src/pages/options/search.html
index 63a416cf..77bd4d23 100644
--- a/src/pages/options/search.html
+++ b/src/pages/options/search.html
@@ -25,17 +25,17 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Search</h1>
+            <h1>Enable</h1>
             <input id="disable-search" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
-            <!-- <div class="autocomplete"> -->
+            <div class="autocomplete">
                 <input id="search-instance" type="url"
                     data-localise-placeholder="__MSG_randomInstancePlaceholder__"
                     placeholder="Random instance (none selected)" />
-            <!-- </div> -->
-        </div>
+            </div>
+        </div> -->
 
         <div class="some-block option-block">
             <h4>Frontend</h4>
@@ -44,7 +44,7 @@
                 <option value="whoogle">Whoogle</option>
             </select>
         </div>
-
+<!-- 
         <section class="settings-block">
             <h4>SearX Instance List</h4>
             <div class="random-pool">
@@ -59,7 +59,7 @@
                 <textarea id="whoogle-random-pool" type="text"></textarea>
                 <ul id="whoogle-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
 
     </section>
 
diff --git a/src/pages/options/search.js b/src/pages/options/search.js
index dc3246db..85e39749 100644
--- a/src/pages/options/search.js
+++ b/src/pages/options/search.js
@@ -1,69 +1,15 @@
 import searchHelper from "../../assets/javascripts/helpers/google-search.js";
-import commonHelper from "../../assets/javascripts/helpers/common.js";
-import shared from "./shared.js";
 
-const searchInstances = searchHelper.redirects;
-let searchInstanceElement = document.getElementById("search-instance");
 let disableSearchElement = document.getElementById("disable-search");
 let searchFrontendElement = document.getElementById("search-frontend");
 
-let searxRandomPoolElement = document.getElementById("searx-random-pool");
-let searxRandomPoolListElement = document.getElementById("searx-random-pool-list");
+disableSearchElement.checked = !searchHelper.getDisableSearch();
+searchFrontendElement.value = searchHelper.getSearchFrontend();
 
-let whoogleRandomPoolElement = document.getElementById("whoogle-random-pool");
-let whoogleRandomPoolListElement = document.getElementById("whoogle-random-pool-list");
+searchFrontendElement.addEventListener("change",
+  (event) => searchHelper.setSearchFrontend(event.target.options[searchFrontendElement.selectedIndex].value)
+);
 
-let searxRandomPool
-let whoogleRandomPool
-
-browser.storage.sync.get(
-  [
-    "searchInstance",
-    "disableSearch",
-    "searchFrontend",
-    "searxRandomPool",
-    "whoogleRandomPool"
-  ],
-  (result) => {
-    searchInstanceElement.value = (result.searchInstance && result.searchInstance.link) || "";
-    disableSearchElement.checked = !result.disableSearch;
-    searchFrontendElement.value = result.searchFrontend;
-
-    searxRandomPool = result.searxRandomPool || commonHelper.filterInstances(searchInstances.searx)
-    searxRandomPoolElement.value = searxRandomPool.join("\n");
-    commonHelper.updateListElement(searxRandomPoolListElement, searxRandomPool);
-
-    whoogleRandomPool = result.whoogleRandomPool || commonHelper.filterInstances(searchInstances.whoogle)
-    whoogleRandomPoolElement.value = whoogleRandomPool.join("\n");
-    commonHelper.updateListElement(whoogleRandomPoolListElement, whoogleRandomPool);
-
-    // let id = "search-instance"
-    // let instances = searchInstances.map((instance) => instance.link)
-    // shared.autocompletes.push({ id: id, instances: instances })
-    // shared.autocomplete(document.getElementById(id), instances);
-  }
-)
-
-const searchInstanceChange = commonHelper.debounce(() => {
-  const instance = searchInstances.find(
-    (instance) => instance.link === searchInstanceElement.value
-  );
-  if (instance || !searchInstanceElement.value) {
-    browser.storage.sync.set({
-      searchInstance: instance || searchInstanceElement.value,
-    });
-  } else {
-    searchInstanceElement.setCustomValidity("Must be an instance from the list");
-  }
-}, 500);
-searchInstanceElement.addEventListener("input", searchInstanceChange);
-
-searchFrontendElement.addEventListener("change", (event) => {
-  const value = event.target.options[searchFrontendElement.selectedIndex].value;
-  console.info("Search Frontend:", value)
-  browser.storage.sync.set({ searchFrontend: value })
-});
-
-disableSearchElement.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableSearch: !event.target.checked });
-});
+disableSearchElement.addEventListener("change",
+  (event) => searchHelper.setDisableSearch(!event.target.checked)
+);
diff --git a/src/pages/options/translate.html b/src/pages/options/translate.html
index e33b57a9..7e727c33 100644
--- a/src/pages/options/translate.html
+++ b/src/pages/options/translate.html
@@ -24,15 +24,15 @@
     </section>
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Translate (SimplyTranslate)</h1>
+            <h1>Enable</h1>
             <input id="disable-simplyTranslate" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" />
             </div>
-        </div>
+        </div> -->
     </section>
 
 
diff --git a/src/pages/options/translate.js b/src/pages/options/translate.js
index 7259df00..4e254446 100644
--- a/src/pages/options/translate.js
+++ b/src/pages/options/translate.js
@@ -1,38 +1,9 @@
 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 simplyTranslateInstanceElement = document.getElementById("simplyTranslate-instance");
 let disableSimplyTranslateElement = document.getElementById("disable-simplyTranslate");
 
+disableSimplyTranslateElement.checked = !googleTranslateHelper.getDisableSimplyTranslate();
 
-browser.storage.sync.get(
-    [
-        "simplyTranslateInstance",
-        "disableSimplyTranslate",
-    ],
-    (result) => {
-        simplyTranslateInstanceElement.value = result.simplyTranslateInstance || "";
-        disableSimplyTranslateElement.checked = !result.disableSimplyTranslate;
-        let id = "simplyTranslate-instance"
-        let instances = simplyTranslateInstances;
-        shared.autocompletes.push({ id: id, instances: instances })
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
-
-simplyTranslateInstanceElement.addEventListener(
-    "input",
-    commonHelper.debounce(() => {
-        if (simplyTranslateInstanceElement.checkValidity()) {
-            browser.storage.sync.set({
-                simplyTranslateInstance: shared.parseURL(simplyTranslateInstanceElement.value),
-            });
-        }
-    }, 500));
-
-disableSimplyTranslateElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableSimplyTranslate: !event.target.checked });
-});
\ No newline at end of file
+disableSimplyTranslateElement.addEventListener("change",
+    (event) => googleTranslateHelper.setDisableSimplyTranslate(!event.target.checked)
+);
\ No newline at end of file
diff --git a/src/pages/options/twitter.html b/src/pages/options/twitter.html
index 7922e69d..555b3f64 100644
--- a/src/pages/options/twitter.html
+++ b/src/pages/options/twitter.html
@@ -30,22 +30,22 @@
             <h1>Enable</h1>
             <input id="disable-nitter" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="nitter-instance" type="url" name="nitter-instance"
                     data-localise-placeholder="__MSG_randomInstancePlaceholder__"
                     placeholder="Random instance (none selected)" />
             </div>
-        </div>
+        </div> -->
 
-        <section class="settings-block">
+        <!-- <section class="settings-block">
             <h4>Instance List</h4>
             <div class="random-pool">
                 <textarea id="nitter-random-pool" type="text"></textarea>
                 <ul id="nitter-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
         <div class="some-block option-block">
             <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4>
             <input id="remove-twitter-sw" type="checkbox" checked />
diff --git a/src/pages/options/twitter.js b/src/pages/options/twitter.js
index 21ee66b7..60be6cb0 100644
--- a/src/pages/options/twitter.js
+++ b/src/pages/options/twitter.js
@@ -1,66 +1,15 @@
 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 nitterInstanceElement = document.getElementById("nitter-instance");
 let removeTwitterSWElement = document.getElementById("remove-twitter-sw");
 let disableNitterElement = document.getElementById("disable-nitter");
-let nitterRandomPoolElement = document.getElementById("nitter-random-pool");
-let nitterRandomPoolListElement = document.getElementById('nitter-random-pool-list');
-
-let nitterRandomPool
-
-browser.storage.sync.get(
-    [
-        "nitterInstance",
-        "disableNitter",
-        "nitterRandomPool",
-        "removeTwitterSW",
-    ],
-    (result) => {
-        nitterInstanceElement.value = result.nitterInstance || "";
-        disableNitterElement.checked = !result.disableNitter;
-        removeTwitterSWElement.checked = !result.removeTwitterSW;
-
-        nitterRandomPool = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances)
-        nitterRandomPoolElement.value = nitterRandomPool.join("\n");
-        commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool);
 
-        let id = "nitter-instance"
-        let instances = nitterRandomPool
-        shared.autocompletes.push({ id: id, instances: instances })
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
+disableNitterElement.checked = !twitterHelper.getDisableNitter();
+removeTwitterSWElement.checked = !remove.getRemoveTwitterSW; // Problem
 
-nitterInstanceElement.addEventListener("input", commonHelper.debounce(() => {
-    if (nitterInstanceElement.checkValidity()) {
-        browser.storage.sync.set({
-            nitterInstance: shared.parseURL(nitterInstanceElement.value),
-        });
-    }
-}, 500));
-
-disableNitterElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableNitter: !event.target.checked });
-});
+disableNitterElement.addEventListener("change",
+    (event) => twitterHelper.setDisableNitter(!event.target.checked)
+);
 
 removeTwitterSWElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
+    browser.storage.sync.set({ removeTwitterSW: !event.target.checked }); // Problem
 });
-
-nitterRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    nitterRandomPool = commonHelper.filterList(nitterRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool);
-    browser.storage.sync.set({ nitterRandomPool: nitterRandomPool });
-}, 50));
-
-browser.storage.onChanged.addListener((changes) => {
-    if ("nitterRandomPool" in changes) {
-        nitterRandomPool = changes.nitterRandomPool.newValue;
-        nitterRandomPoolElement.value = nitterRandomPool.join("\n");
-        commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool);
-    }
-})
\ No newline at end of file
diff --git a/src/pages/options/wikipedia.html b/src/pages/options/wikipedia.html
index 8978d08e..d3cc5cb2 100644
--- a/src/pages/options/wikipedia.html
+++ b/src/pages/options/wikipedia.html
@@ -25,10 +25,10 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Wikipedia (Wikiless)</h1>
+            <h1>Enable</h1>
             <input id="disable-wikipedia" type="checkbox" checked />
         </div>
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
             <div class="autocomplete">
                 <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" />
@@ -41,7 +41,7 @@
                 <textarea id="wikiless-random-pool" type="text"></textarea>
                 <ul id="wikiless-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
     </section>
 
     <script type="module" src="./init.js"></script>
diff --git a/src/pages/options/wikipedia.js b/src/pages/options/wikipedia.js
index 8306d842..b2e7d23c 100644
--- a/src/pages/options/wikipedia.js
+++ b/src/pages/options/wikipedia.js
@@ -1,63 +1,9 @@
 import wikipediaHelper from "../../assets/javascripts/helpers/wikipedia.js";
-import commonHelper from "../../assets/javascripts/helpers/common.js";
-import shared from "./shared.js";
 
-
-const wikilessInstances = wikipediaHelper.redirects;
-
-let wikipediaInstanceElement = document.getElementById("wikipedia-instance");
 let disableWikipediaElement = document.getElementById("disable-wikipedia");
-let wikilessRandomPoolElement = document.getElementById("wikiless-random-pool");
-let wikilessRandomPoolListElement = document.getElementById('wikiless-random-pool-list');
-
-let wikilessRandomPool
-
-browser.storage.sync.get(
-    [
-        "wikipediaInstance",
-        "disableWikipedia",
-        "wikilessRandomPool"
-    ],
-    (result) => {
-        wikipediaInstanceElement.value = result.wikipediaInstance || "";
-        disableWikipediaElement.checked = !result.disableWikipedia;
-
-        wikilessRandomPool = result.wikilessRandomPool || commonHelper.filterInstances(wikilessInstances)
-        wikilessRandomPoolElement.value = wikilessRandomPool.join("\n")
-        commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool);
-
-        let id = "wikipedia-instance";
-        let instances = wikilessInstances;
-        shared.autocompletes.push({ id: id, instances: instances })
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
-
-wikipediaInstanceElement.addEventListener("input", commonHelper.debounce(() => {
-    if (wikipediaInstanceElement.checkValidity()) {
-        browser.storage.sync.set({
-            wikipediaInstance: shared.parseURL(wikipediaInstanceElement.value),
-        });
-    }
-}, 500));
-
-disableWikipediaElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableWikipedia: !event.target.checked });
-});
-
-wikilessRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    wikilessRandomPool = commonHelper.filterList(wikilessRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool);
-    browser.storage.sync.set({ wikilessRandomPool: wikilessRandomPool });
-}, 50));
 
+disableWikipediaElement.checked = !wikipediaHelper.getDisableWikipedia();
 
-browser.storage.onChanged.addListener((changes) => {
-    if ("wikilessRandomPool" in changes) {
-        console.info("Wikiless updating");
-        console.info(changes.wikilessRandomPool.newValue)
-        wikilessRandomPool = changes.wikilessRandomPool.newValue;
-        wikilessRandomPoolElement.value = wikilessRandomPool.join("\n");
-        commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool);
-    }
-})
\ No newline at end of file
+disableWikipediaElement.addEventListener("change",
+    (event) => wikipediaHelper.setDisableWikipedia(!event.target.checked)
+);
\ No newline at end of file
diff --git a/src/pages/options/youtube.html b/src/pages/options/youtube.html
index 61dac7bd..442c15c0 100644
--- a/src/pages/options/youtube.html
+++ b/src/pages/options/youtube.html
@@ -30,27 +30,27 @@
             <input id="disable-invidious" type="checkbox" checked />
         </div>
 
-        <div class="some-block option-block">
+        <!-- <div class="some-block option-block">
             <h4>Instance</h4>
-            <!-- <div class="autocomplete"> -->
+            <div class="autocomplete">
             <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
                 placeholder="Random instance (none selected)" />
-            <!-- </div> -->
-        </div>
+            </div>
+        </div> -->
 
-        <section class="settings-block">
+        <!-- <section class="settings-block">
             <h4>Instance List</h4>
             <div class="random-pool">
                 <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool"
                     type="text"></textarea>
                 <ul id="invidious-random-pool-list"></ul>
             </div>
-        </section>
+        </section> -->
 
         <div class="some-block option-block">
             <h4>Player Style</h4>
             <select id="invidious-player-style">
-                <option value="">Invidious</option>
+                <option value="invidious">Invidious</option>
                 <option value="youtube">YouTube</option>
             </select>
         </div>
diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js
index 8749a711..95e7d2c9 100644
--- a/src/pages/options/youtube.js
+++ b/src/pages/options/youtube.js
@@ -1,10 +1,6 @@
 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 invidiousInstanceElement = document.getElementById("invidious-instance");
 let disableInvidiousElement = document.getElementById("disable-invidious");
 let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
 let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
@@ -12,128 +8,75 @@ let invidiousVolumeElement = document.getElementById("invidious-volume");
 let invidiousPlayerStyleElement = document.getElementById("invidious-player-style");
 let invidiousSubtitlesElement = document.getElementById("invidious-subtitles");
 let invidiousAutoplayElement = document.getElementById("invidious-autoplay");
-let invidiousRandomPoolElement = document.getElementById("invidious-random-pool");
-let invidiousRandomPoolListElement = document.getElementById('invidious-random-pool-list');
 let useFreeTubeElement = document.getElementById("use-freetube");
 let invidiousAlwaysProxyElement = document.getElementById("always-proxy");
 let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed");
 let invidiousVideoQualityElement = document.getElementById("video-quality");
+let invidiousVolumeValueElement = document.querySelector("#volume-value");
+
+youtubeHelper.init().then(() => {
+    disableInvidiousElement.checked = !youtubeHelper.getDisableInvidious();
+    invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
+    persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
+    invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
+    invidiousVolumeValueElement.textContent = youtubeHelper.getInvidiousVolume() ? `${youtubeHelper.getInvidiousVolume()}%` : " - ";
+    invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle() || "";
+    invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles() || "";
+    useFreeTubeElement.checked = youtubeHelper.getUseFreeTube();
+    invidiousOnlyEmbeddedVideoElement.checked = youtubeHelper.getInvidiousOnlyEmbeddedVideo();
+    invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
+    invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality() || "";
+    invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay();
+});
 
-let invidiousRandomPool;
-
-browser.storage.sync.get(
-    [
-        "invidiousInstance",
-        "disableInvidious",
-        "invidiousDarkMode",
-        "persistInvidiousPrefs",
-        "invidiousVolume",
-        "invidiousPlayerStyle",
-        "invidiousSubtitles",
-        "invidiousAutoplay",
-        "invidiousRandomPool",
-        "useFreeTube",
-        "invidiousAlwaysProxy",
-        "invidiousOnlyEmbeddedVideo",
-        "invidiousVideoQuality",
-    ],
-    (result) => {
-        invidiousInstanceElement.value = result.invidiousInstance || "";
-        disableInvidiousElement.checked = !result.disableInvidious;
-        invidiousDarkModeElement.checked = result.invidiousDarkMode;
-        persistInvidiousPrefsElement.checked = result.persistInvidiousPrefs;
-        invidiousVolumeElement.value = result.invidiousVolume;
-        document.querySelector("#volume-value").textContent = result.invidiousVolume ? `${result.invidiousVolume}%` : " - ";
-        invidiousPlayerStyleElement.value = result.invidiousPlayerStyle || "";
-        invidiousSubtitlesElement.value = result.invidiousSubtitles || "";
-        useFreeTubeElement.checked = result.useFreeTube;
-        invidiousOnlyEmbeddedVideoElement.checked = result.invidiousOnlyEmbeddedVideo;
-        invidiousAlwaysProxyElement.checked = result.invidiousAlwaysProxy;
-        invidiousVideoQualityElement.value = result.invidiousVideoQuality || "";
-        invidiousAutoplayElement.checked = result.invidiousAutoplay;
-
-        invidiousRandomPool = result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances)
-        invidiousRandomPoolElement.value = invidiousRandomPool.join("\n");
-        commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool);
-
-        let id = "invidious-instance"
-        let instances = invidiousRandomPool;
-        shared.autocompletes.push({ id: id, instances: instances });
-        shared.autocomplete(document.getElementById(id), instances);
-    }
-)
 
-invidiousInstanceElement.addEventListener("input",
-    commonHelper.debounce(() => {
-        if (invidiousInstanceElement.checkValidity())
-            browser.storage.sync.set({ invidiousInstance: shared.parseURL(invidiousInstanceElement.value) });
-    }, 500)
+disableInvidiousElement.addEventListener("change",
+    (event) => youtubeHelper.setDisableInvidious(!event.target.checked)
 );
 
-disableInvidiousElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ disableInvidious: !event.target.checked });
-});
-
-invidiousDarkModeElement.addEventListener("change", (event) => {
-    console.info("InvidiousDarkMode", event.target.checked);
-    browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
-});
+invidiousDarkModeElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousDarkMode(event.target.checked)
+);
 
-persistInvidiousPrefsElement.addEventListener("change", (event) => {
-    console.info("Persist preferences (as cookie)", event.target.checked);
-    browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
-});
+persistInvidiousPrefsElement.addEventListener("change",
+    (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked)
+);
 
 invidiousVolumeElement.addEventListener("input",
     commonHelper.debounce(() => {
-        document.querySelector("#volume-value").textContent = `${invidiousVolumeElement.value}%`;
-        browser.storage.sync.set({ invidiousVolume: invidiousVolumeElement.value });
+        youtubeHelper.setInvidiousVolume(invidiousVolumeElement.value);
+        console.info("youtubeHelper.invidiousVolume:", youtubeHelper.getInvidiousVolume());
+        invidiousVolumeValueElement.textContent = `${invidiousVolumeElement.value}%`;
     }, 1)
 );
 
-invidiousPlayerStyleElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({
-        invidiousPlayerStyle: event.target.options[invidiousPlayerStyleElement.selectedIndex].value,
-    });
-});
+invidiousPlayerStyleElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
+);
 
 invidiousSubtitlesElement.addEventListener("input",
     commonHelper.debounce(() => {
-        browser.storage.sync.set({ invidiousSubtitles: invidiousSubtitlesElement.value });
+        youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value)
     }, 500)
 );
 
-invidiousAutoplayElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ invidiousAutoplay: event.target.checked });
-});
-
-invidiousRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    invidiousRandomPool = commonHelper.filterList(invidiousRandomPoolElement.value.split("\n"))
-    commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool);
-    browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool });
-}, 50)
+invidiousAutoplayElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousAutoplay(event.target.checked)
 );
 
-useFreeTubeElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ useFreeTube: event.target.checked });
-});
 
-invidiousAlwaysProxyElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ invidiousAlwaysProxy: event.target.checked });
-});
+useFreeTubeElement.addEventListener("change",
+    (event) => youtubeHelper.setUseFreeTube(event.target.checked)
+);
 
-invidiousOnlyEmbeddedVideoElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ invidiousOnlyEmbeddedVideo: event.target.checked });
-});
+invidiousAlwaysProxyElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked)
+);
 
-invidiousVideoQualityElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ invidiousVideoQuality: event.target.options[invidiousVideoQualityElement.selectedIndex].value });
-});
+invidiousOnlyEmbeddedVideoElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousOnlyEmbeddedVideo(event.target.checked)
+);
 
-browser.storage.onChanged.addListener((changes) => {
-    if ("invidiousRandomPool" in changes) {
-        invidiousRandomPool = changes.invidiousRandomPool.newValue;
-        invidiousRandomPoolElement.value = invidiousRandomPool.join("\n");
-        commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool);
-    }
-})
\ No newline at end of file
+invidiousVideoQualityElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value)
+);