Refining code. Adding frontend option to search

author: ManeraKai <manerakai@protonmail.com> 2022-01-31 21:01:16 +0300
committer: ManeraKai <manerakai@protonmail.com> 2022-01-31 21:01:24 +0300
commit: 540b41ef0a752bf7aa0d90df37bdb69a28b6f39f (patch)
tree: 741443b9b61f81b0c8690c3c71aed75bc770c781 /src/pages/options
parent: Updating RandomPools (diff)
download: libredirect-540b41ef0a752bf7aa0d90df37bdb69a28b6f39f.zip
20 files changed, 813 insertions, 439 deletions
diff --git a/src/pages/options/general.html b/src/pages/options/general.html
new file mode 100644
index 00000000..db0dedd2
--- /dev/null
+++ b/src/pages/options/general.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="../stylesheets/styles.css" rel="stylesheet" />
+  <title>LibRedirect Options</title>
+</head>
+
+<body class="option">
+
+  <section class="links">
+    <a href="general.html" class="selected">General</a>
+    <a href="youtube.html">Youtube</a>
+    <a href="twitter.html">Twitter</a>
+    <a href="instagram.html">Instagram</a>
+    <a href="reddit.html">Reddit</a>
+    <a href="search.html">Search</a>
+    <a href="translate.html">Translate</a>
+    <a href="maps.html">Maps</a>
+    <a href="wikipedia.html" >Wikipedia</a>
+    <a href="medium.html">Medium</a>
+  </section>
+
+
+  <section class="option-block">
+    <div class="some-block option-block">
+      <h4>Theme</h4>
+      <select id="theme">
+        <option value="">System</option>
+        <option value="light-theme">Light</option>
+        <option value="dark-theme">Dark</option>
+      </select>
+    </div>
+    <div class="buttons buttons-inline">
+      <a class="button button-inline" id="update-instances">
+        <span>Update Instances</span>
+      </a>
+    </div>
+    <hr>
+    <section class="settings-block">
+      <p data-localise="__MSG_exceptionsDescriptionP1__">
+        Enter a URL or Regular Expression to be excluded from redirects.
+      </p>
+      <p data-localise="__MSG_exceptionsDescriptionP2__">
+        All requests for or initiating from a URL that matches your exception
+        will be excluded from redirects.
+      </p>
+      <p data-localise="__MSG_exceptionsDescriptionP3__">
+        Note - Supports JavaScript regular expressions, excluding the
+        enclosing forward slashes.
+      </p>
+    </section>
+    <section class="settings-block">
+      <table class="exceptions option">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_addException__">Add Exception</h1>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" />
+            </td>
+            <td>
+              <input type="radio" id="url" name="type" value="URL" checked />
+              <label class="radio" for="url">URL</label>
+              <input type="radio" id="regExp" name="type" value="RegExp" />
+              <label class="radio" for="regExp">RegExp</label>
+            </td>
+            <td>
+              <button id="add-to-exceptions">
+                <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+                  <line x1="256" y1="112" x2="256" y2="400" style="
+                        fill: none;
+                        stroke: #fff;
+                        stroke-linecap: round;
+                        stroke-linejoin: round;
+                        stroke-width: 32px;
+                      " />
+                  <line x1="400" y1="256" x2="112" y2="256" style="
+                        fill: none;
+                        stroke: #fff;
+                        stroke-linecap: round;
+                        stroke-linejoin: round;
+                        stroke-width: 32px;
+                      " />
+                </svg>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <ul id="exceptions-items"></ul>
+  </section>
+
+
+  <script type="module" src="./general.js"></script>
+  <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/options.js b/src/pages/options/general.js
index 5d6aed4e..e77f2aee 100644
--- a/src/pages/options/options.js
+++ b/src/pages/options/general.js
@@ -91,7 +91,7 @@ themeElement.addEventListener("change", (event) => {
 
 document.querySelector("#update-instances").addEventListener("click", () => {
   document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.getInstances())
+  if (commonHelper.updateInstances())
     document.querySelector("#update-instances").innerHTML = 'Done!';
   else
     document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
diff --git a/src/pages/options/instagram.html b/src/pages/options/instagram.html
new file mode 100644
index 00000000..37c14e54
--- /dev/null
+++ b/src/pages/options/instagram.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+</head>
+
+<body class="option">
+
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html" class="selected">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Enable</h1>
+            <input id="disable-bibliogram" type="checkbox" checked />
+        </div>
+        <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>
+
+        <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>
+    <script type="module" src="./instagram.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/instagram.js b/src/pages/options/instagram.js
index 7d2864e1..db31de1e 100644
--- a/src/pages/options/instagram.js
+++ b/src/pages/options/instagram.js
@@ -46,4 +46,13 @@ bibliogramRandomPoolElement.addEventListener("input", commonHelper.debounce(() =
     bibliogramRandomPool = commonHelper.filterList(bibliogramRandomPoolElement.value.split("\n"))
     commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool);
     browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPool });
-}, 50));
\ No newline at end of file
+}, 50));
+
+
+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
diff --git a/src/pages/options/maps.html b/src/pages/options/maps.html
new file mode 100644
index 00000000..5074c44f
--- /dev/null
+++ b/src/pages/options/maps.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html" class="selected">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Maps (OpenStreetMap)</h1>
+            <input id="disable-osm" type="checkbox" checked />
+        </div>
+        <div class="some-block option-block">
+            <h4>Instance</h4>
+            <div class="autocomplete">
+                <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" />
+            </div>
+        </div>
+    </section>
+    <script type="module" src="./maps.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/medium.html b/src/pages/options/medium.html
new file mode 100644
index 00000000..a2343f2e
--- /dev/null
+++ b/src/pages/options/medium.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html" class="selected">Medium</a>
+    </section>
+
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Medium (Scribe)</h1>
+            <input id="disable-scribe" type="checkbox" checked />
+        </div>
+        <div class="some-block option-block">
+            <h4>Instance</h4>
+            <div class="autocomplete">
+                <input id="scribe-instance" type="url" name="scribe-instance"
+                    data-localise-placeholder="__MSG_randomInstancePlaceholder__"
+                    placeholder="Random instance (none selected)" />
+            </div>
+        </div>
+        <section class="settings-block">
+            <h4>Instance List</h4>
+            <div class="random-pool">
+                <textarea id="scribe-random-pool" type="text"></textarea>
+                <ul id="scribe-random-pool-list"></ul>
+            </div>
+        </section>
+    </section>
+
+    <script type="module" src="./medium.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/medium.js b/src/pages/options/medium.js
index 6fbc390d..bd86089f 100644
--- a/src/pages/options/medium.js
+++ b/src/pages/options/medium.js
@@ -50,4 +50,12 @@ scribeRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
     scribeRandomPool = commonHelper.filterList(scribeRandomPoolElement.value.split("\n"))
     commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool);
     browser.storage.sync.set({ scribeRandomPool: scribeRandomPool });
-}, 50));
\ No newline at end of file
+}, 50));
+
+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
diff --git a/src/pages/options/options.html b/src/pages/options/options.html
deleted file mode 100644
index 04903e7f..00000000
--- a/src/pages/options/options.html
+++ /dev/null
@@ -1,370 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title></title>
-  <link href="../stylesheets/styles.css" rel="stylesheet" />
-  <title>LibRedirect Options</title>
-</head>
-
-<body class="option">
-
-  <div class="option">
-
-    <section class="general">
-      <div class="some-block option-block">
-        <h4>Theme</h4>
-        <select id="theme">
-          <option value="">System</option>
-          <option value="light-theme">Light</option>
-          <option value="dark-theme">Dark</option>
-        </select>
-      </div>
-      <div class="buttons buttons-inline">
-        <a class="button button-inline" id="update-instances">
-          <span>Update Instances</span>
-        </a>
-      </div>
-      <hr>
-      <section class="settings-block">
-        <p data-localise="__MSG_exceptionsDescriptionP1__">
-          Enter a URL or Regular Expression to be excluded from redirects.
-        </p>
-        <p data-localise="__MSG_exceptionsDescriptionP2__">
-          All requests for or initiating from a URL that matches your exception
-          will be excluded from redirects.
-        </p>
-        <p data-localise="__MSG_exceptionsDescriptionP3__">
-          Note - Supports JavaScript regular expressions, excluding the
-          enclosing forward slashes.
-        </p>
-      </section>
-      <section class="settings-block">
-        <table class="exceptions option">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_addException__">Add Exception</h1>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" />
-              </td>
-              <td>
-                <input type="radio" id="url" name="type" value="URL" checked />
-                <label class="radio" for="url">URL</label>
-                <input type="radio" id="regExp" name="type" value="RegExp" />
-                <label class="radio" for="regExp">RegExp</label>
-              </td>
-              <td>
-                <button id="add-to-exceptions">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
-                    <line x1="256" y1="112" x2="256" y2="400" style="
-                        fill: none;
-                        stroke: #fff;
-                        stroke-linecap: round;
-                        stroke-linejoin: round;
-                        stroke-width: 32px;
-                      " />
-                    <line x1="400" y1="256" x2="112" y2="256" style="
-                        fill: none;
-                        stroke: #fff;
-                        stroke-linecap: round;
-                        stroke-linejoin: round;
-                        stroke-width: 32px;
-                      " />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <ul id="exceptions-items"></ul>
-    </section>
-
-    <section class="youtube">
-      <div class="some-block option-block">
-        <h1>Youtube (Invidious)</h1>
-        <input id="disable-invidious" type="checkbox" checked />
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Instance</h4>
-        <div class="autocomplete">
-          <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
-            placeholder="Random instance (none selected)" />
-        </div>
-      </div>
-
-      <section class="settings-block">
-        <h4>Random Instance Pool</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>
-
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
-        <input id="use-freetube" type="checkbox" checked />
-      </div>
-
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4>
-        <input id="always-proxy" type="checkbox" checked />
-      </div>
-
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
-        <input id="only-embed" type="checkbox" checked />
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Video Quality</h4>
-        <select id="video-quality">
-          <option value="">Default</option>
-          <option value="hd720">720p</option>
-          <option value="medium">480p</option>
-          <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
-          </option>
-        </select>
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Dark mode</h4>
-        <input id="invidious-dark-mode" type="checkbox" checked />
-      </div>
-
-      <div class="some-block">
-        <h4>Volume: <span id="volume-value">50%</span></h4>
-        <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Player Style</h4>
-        <select id="invidious-player-style">
-          <option value="">Invidious</option>
-          <option value="youtube">YouTube</option>
-        </select>
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Subtitles - language codes</h4>
-        <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Automatically play video on load</h4>
-        <input id="invidious-autoplay" type="checkbox" checked />
-      </div>
-
-      <div class="some-block option-block">
-        <h4>Persist preferences (as cookie)</h4>
-        <input id="persist-invidious-prefs" type="checkbox" checked />
-      </div>
-
-
-    </section>
-
-    <section class="twitter">
-
-      <div class="some-block option-block">
-        <h1>Twitter (Nitter)</h1>
-        <input id="disable-nitter" type="checkbox" checked />
-      </div>
-      <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>
-
-      <section class="settings-block">
-        <h4>Random instance pool</h4>
-        <div class="random-pool">
-          <textarea id="nitter-random-pool" type="text"></textarea>
-          <ul id="nitter-random-pool-list"></ul>
-        </div>
-      </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 />
-      </div>
-
-    </section>
-
-    <section class="instagram">
-      <div class="some-block option-block">
-        <h1>Instagram (Bibliogram)</h1>
-        <input id="disable-bibliogram" type="checkbox" checked />
-      </div>
-      <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>
-
-      <section class="settings-block">
-        <h4>Random instance pool</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 class="reddit">
-
-      <div class="some-block option-block">
-        <h1>Reddit (LibReddit)</h1>
-        <input id="disable-reddit" type="checkbox" checked />
-      </div>
-
-      <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 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 class="settings-block">
-        <h4>LibReddit Random instance pool</h4>
-        <div class="random-pool">
-          <textarea id="libreddit-random-pool" type="text"></textarea>
-          <ul id="libreddit-random-pool-list"></ul>
-        </div>
-      </section>
-
-      <section class="settings-block">
-        <h4>Teddit Random instance pool</h4>
-        <div class="random-pool">
-          <textarea id="teddit-random-pool" type="text"></textarea>
-          <ul id="teddit-random-pool-list"></ul>
-        </div>
-      </section>
-
-    </section>
-
-    <section class="search">
-      <div class="some-block option-block">
-        <h1>Search</h1>
-        <input id="disable-searchEngine" type="checkbox" checked />
-      </div>
-      <div class="some-block option-block">
-        <h4>Instance</h4>
-        <div class="autocomplete">
-          <input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
-            placeholder="Random instance (none selected)" />
-        </div>
-      </div>
-
-
-    </section>
-
-    <section class="translate">
-      <div class="some-block option-block">
-        <h1>Translate (SimplyTranslate)</h1>
-        <input id="disable-simplyTranslate" type="checkbox" checked />
-      </div>
-      <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>
-
-
-    </section>
-
-    <section class="maps">
-      <div class="some-block option-block">
-        <h1>Maps (OpenStreetMap)</h1>
-        <input id="disable-osm" type="checkbox" checked />
-      </div>
-      <div class="some-block option-block">
-        <h4>Instance</h4>
-        <div class="autocomplete">
-          <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" />
-        </div>
-      </div>
-
-
-    </section>
-
-    <section class="wikipedia">
-      <div class="some-block option-block">
-        <h1>Wikipedia (Wikiless)</h1>
-        <input id="disable-wikipedia" type="checkbox" checked />
-      </div>
-      <div class="some-block option-block">
-        <h4>Instance</h4>
-        <div class="autocomplete">
-          <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" />
-        </div>
-      </div>
-
-      <section class="settings-block">
-        <h4>Random instance pool</h4>
-        <div class="random-pool">
-          <textarea id="wikiless-random-pool" type="text"></textarea>
-          <ul id="wikiless-random-pool-list"></ul>
-        </div>
-      </section>
-
-    </section>
-
-    <section class="medium">
-      <div class="some-block option-block">
-        <h1>Medium (Scribe)</h1>
-        <input id="disable-scribe" type="checkbox" checked />
-      </div>
-      <div class="some-block option-block">
-        <h4>Instance</h4>
-        <div class="autocomplete">
-          <input id="scribe-instance" type="url" name="scribe-instance"
-            data-localise-placeholder="__MSG_randomInstancePlaceholder__"
-            placeholder="Random instance (none selected)" />
-        </div>
-      </div>
-      <section class="settings-block">
-        <h4>Random instance pool (comma-separated)</h4>
-        <div class="random-pool">
-          <textarea id="scribe-random-pool" type="text"></textarea>
-          <ul id="scribe-random-pool-list"></ul>
-        </div>
-      </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>
-
-</html>
\ No newline at end of file
diff --git a/src/pages/options/reddit.html b/src/pages/options/reddit.html
new file mode 100644
index 00000000..b5af36f7
--- /dev/null
+++ b/src/pages/options/reddit.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html" class="selected">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+
+    <section class="option-block">
+
+        <div class="some-block option-block">
+            <h1>Reddit</h1>
+            <input id="disable-reddit" type="checkbox" checked />
+        </div>
+
+        <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 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 class="settings-block">
+            <h4>LibReddit Instance List</h4>
+            <div class="random-pool">
+                <textarea id="libreddit-random-pool" type="text"></textarea>
+                <ul id="libreddit-random-pool-list"></ul>
+            </div>
+        </section>
+
+        <section class="settings-block">
+            <h4>Teddit Instance List</h4>
+            <div class="random-pool">
+                <textarea id="teddit-random-pool" type="text"></textarea>
+                <ul id="teddit-random-pool-list"></ul>
+            </div>
+        </section>
+
+    </section>
+
+    <script type="module" src="./reddit.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/reddit.js b/src/pages/options/reddit.js
index 59307096..6702c4de 100644
--- a/src/pages/options/reddit.js
+++ b/src/pages/options/reddit.js
@@ -39,10 +39,10 @@ browser.storage.sync.get(
         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);
+        // let id = "reddit-instance";
+        // let instances = redditInstances;
+        // shared.autocompletes.push({ id: id, instances: instances })
+        // shared.autocomplete(document.getElementById(id), instances);
     }
 )
 
@@ -74,4 +74,18 @@ tedditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
     tedditRandomPool = commonHelper.filterList(tedditRandomPoolElement.value.split("\n"))
     commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
     browser.storage.sync.set({ tedditRandomPool: tedditRandomPool });
-}, 50));
\ No newline at end of file
+}, 50));
+
+browser.storage.onChanged.addListener((changes) => {
+    if ("libredditRandomPool" in changes) {
+        libredditRandomPool = changes.libredditRandomPool.newValue;
+        libredditRandomPoolElement.value = libredditRandomPool.join("\n");
+        commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool);
+    }
+
+    if ("tedditRandomPool" in changes) {
+        tedditRandomPool = changes.tedditRandomPool.newValue;
+        tedditRandomPoolElement.value = tedditRandomPool.join("\n");
+        commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
+    }
+})
\ No newline at end of file
diff --git a/src/pages/options/search.html b/src/pages/options/search.html
new file mode 100644
index 00000000..6a5af775
--- /dev/null
+++ b/src/pages/options/search.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html" class="selected">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Search</h1>
+            <input id="disable-search" type="checkbox" checked />
+        </div>
+        <div class="some-block option-block">
+            <h4>Instance</h4>
+            <!-- <div class="autocomplete"> -->
+                <input id="search-instance" type="url"
+                    data-localise-placeholder="__MSG_randomInstancePlaceholder__"
+                    placeholder="Random instance (none selected)" />
+            <!-- </div> -->
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Frontend</h4>
+            <select id="search-frontend">
+                <option value="searx">SearX</option>
+                <option value="whoogle">Whoogle</option>
+            </select>
+        </div>
+
+        <section class="settings-block">
+            <h4>SearX Instance List</h4>
+            <div class="random-pool">
+                <textarea id="searx-random-pool" type="text"></textarea>
+                <ul id="searx-random-pool-list"></ul>
+            </div>
+        </section>
+
+        <section class="settings-block">
+            <h4>Whoogle Instance List</h4>
+            <div class="random-pool">
+                <textarea id="whoogle-random-pool" type="text"></textarea>
+                <ul id="whoogle-random-pool-list"></ul>
+            </div>
+        </section>
+
+    </section>
+
+
+    <script type="module" src="./search.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/search.js b/src/pages/options/search.js
new file mode 100644
index 00000000..dc3246db
--- /dev/null
+++ b/src/pages/options/search.js
@@ -0,0 +1,69 @@
+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");
+
+let whoogleRandomPoolElement = document.getElementById("whoogle-random-pool");
+let whoogleRandomPoolListElement = document.getElementById("whoogle-random-pool-list");
+
+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 });
+});
diff --git a/src/pages/options/searchEngine.js b/src/pages/options/searchEngine.js
deleted file mode 100644
index 856e51c4..00000000
--- a/src/pages/options/searchEngine.js
+++ /dev/null
@@ -1,42 +0,0 @@
-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 searchEngineInstanceElement = document.getElementById("searchEngine-instance");
-let disableSearchEngineElement = document.getElementById("disable-searchEngine");
-
-browser.storage.sync.get(
-  [
-    "searchEngineInstance",
-    "disableSearchEngine",
-  ],
-  (result) => {
-    searchEngineInstanceElement.value = (result.searchEngineInstance && result.searchEngineInstance.link) || "";
-
-    disableSearchEngineElement.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 === searchEngineInstanceElement.value
-  );
-  if (instance || !searchEngineInstanceElement.value) {
-    browser.storage.sync.set({
-      searchEngineInstance: instance || searchEngineInstanceElement.value,
-    });
-  } else {
-    searchEngineInstanceElement.setCustomValidity("Must be an instance from the list");
-  }
-}, 500);
-searchEngineInstanceElement.addEventListener("input", searchEngineInstanceChange);
-
-disableSearchEngineElement.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
-});
diff --git a/src/pages/options/translate.html b/src/pages/options/translate.html
new file mode 100644
index 00000000..18ffc333
--- /dev/null
+++ b/src/pages/options/translate.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html" class="selected">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Translate (SimplyTranslate)</h1>
+            <input id="disable-simplyTranslate" type="checkbox" checked />
+        </div>
+        <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>
+    </section>
+
+
+    <script type="module" src="./translate.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/twitter.html b/src/pages/options/twitter.html
new file mode 100644
index 00000000..87bc1c86
--- /dev/null
+++ b/src/pages/options/twitter.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html" class="selected">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+    <section class="option-block">
+
+        <div class="some-block option-block">
+            <h1>Enable</h1>
+            <input id="disable-nitter" type="checkbox" checked />
+        </div>
+        <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>
+
+        <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>
+        <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 />
+        </div>
+
+    </section>
+
+    <script type="module" src="./twitter.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/twitter.js b/src/pages/options/twitter.js
index 3e9b2a4a..21ee66b7 100644
--- a/src/pages/options/twitter.js
+++ b/src/pages/options/twitter.js
@@ -23,11 +23,11 @@ browser.storage.sync.get(
         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 })
@@ -56,3 +56,11 @@ nitterRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
     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
new file mode 100644
index 00000000..309b876f
--- /dev/null
+++ b/src/pages/options/wikipedia.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html" class="selected">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Wikipedia (Wikiless)</h1>
+            <input id="disable-wikipedia" type="checkbox" checked />
+        </div>
+        <div class="some-block option-block">
+            <h4>Instance</h4>
+            <div class="autocomplete">
+                <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" />
+            </div>
+        </div>
+
+        <section class="settings-block">
+            <h4>Instance List</h4>
+            <div class="random-pool">
+                <textarea id="wikiless-random-pool" type="text"></textarea>
+                <ul id="wikiless-random-pool-list"></ul>
+            </div>
+        </section>
+    </section>
+
+    <script type="module" src="./wikipedia.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/wikipedia.js b/src/pages/options/wikipedia.js
index 243c918e..8306d842 100644
--- a/src/pages/options/wikipedia.js
+++ b/src/pages/options/wikipedia.js
@@ -51,3 +51,13 @@ wikilessRandomPoolElement.addEventListener("input", commonHelper.debounce(() =>
     browser.storage.sync.set({ wikilessRandomPool: wikilessRandomPool });
 }, 50));
 
+
+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
diff --git a/src/pages/options/youtube.html b/src/pages/options/youtube.html
new file mode 100644
index 00000000..1eb4e125
--- /dev/null
+++ b/src/pages/options/youtube.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="../stylesheets/styles.css" rel="stylesheet" />
+    <title>LibRedirect Options: Twitter</title>
+</head>
+
+<body class="option">
+
+    <section class="links">
+        <a href="general.html">General</a>
+        <a href="youtube.html" class="selected">Youtube</a>
+        <a href="twitter.html">Twitter</a>
+        <a href="instagram.html">Instagram</a>
+        <a href="reddit.html">Reddit</a>
+        <a href="search.html">Search</a>
+        <a href="translate.html">Translate</a>
+        <a href="maps.html">Maps</a>
+        <a href="wikipedia.html">Wikipedia</a>
+        <a href="medium.html">Medium</a>
+    </section>
+
+    <section class="option-block">
+        <div class="some-block option-block">
+            <h1>Enable</h1>
+            <input id="disable-invidious" type="checkbox" checked />
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Instance</h4>
+            <!-- <div class="autocomplete"> -->
+            <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
+                placeholder="Random instance (none selected)" />
+            <!-- </div> -->
+        </div>
+
+        <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>
+
+        <div class="some-block option-block">
+            <h4>Player Style</h4>
+            <select id="invidious-player-style">
+                <option value="">Invidious</option>
+                <option value="youtube">YouTube</option>
+            </select>
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Dark mode</h4>
+            <input id="invidious-dark-mode" type="checkbox" checked />
+        </div>
+
+        <div class="some-block">
+            <h4>Volume: <span id="volume-value">50%</span></h4>
+            <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
+        </div>
+
+        <div class="some-block option-block">
+            <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
+            <input id="use-freetube" type="checkbox" checked />
+        </div>
+
+        <div class="some-block option-block">
+            <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4>
+            <input id="always-proxy" type="checkbox" checked />
+        </div>
+
+        <div class="some-block option-block">
+            <h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
+            <input id="only-embed" type="checkbox" checked />
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Video Quality</h4>
+            <select id="video-quality">
+                <option value="">Default</option>
+                <option value="hd720">720p</option>
+                <option value="medium">480p</option>
+                <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+                </option>
+            </select>
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Subtitles - language codes</h4>
+            <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Automatically play video on load</h4>
+            <input id="invidious-autoplay" type="checkbox" checked />
+        </div>
+
+        <div class="some-block option-block">
+            <h4>Persist preferences (as cookie)</h4>
+            <input id="persist-invidious-prefs" type="checkbox" checked />
+        </div>
+
+
+    </section>
+
+    <script type="module" src="./youtube.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js
index 60b31afa..8749a711 100644
--- a/src/pages/options/youtube.js
+++ b/src/pages/options/youtube.js
@@ -15,9 +15,9 @@ 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 alwaysProxyElement = document.getElementById("always-proxy");
-let onlyEmbeddedVideoElement = document.getElementById("only-embed");
-let videoQualityElement = document.getElementById("video-quality");
+let invidiousAlwaysProxyElement = document.getElementById("always-proxy");
+let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed");
+let invidiousVideoQualityElement = document.getElementById("video-quality");
 
 let invidiousRandomPool;
 
@@ -33,9 +33,9 @@ browser.storage.sync.get(
         "invidiousAutoplay",
         "invidiousRandomPool",
         "useFreeTube",
-        "alwaysProxy",
-        "onlyEmbeddedVideo",
-        "videoQuality",
+        "invidiousAlwaysProxy",
+        "invidiousOnlyEmbeddedVideo",
+        "invidiousVideoQuality",
     ],
     (result) => {
         invidiousInstanceElement.value = result.invidiousInstance || "";
@@ -47,9 +47,9 @@ browser.storage.sync.get(
         invidiousPlayerStyleElement.value = result.invidiousPlayerStyle || "";
         invidiousSubtitlesElement.value = result.invidiousSubtitles || "";
         useFreeTubeElement.checked = result.useFreeTube;
-        onlyEmbeddedVideoElement.checked = result.onlyEmbeddedVideo;
-        alwaysProxyElement.checked = result.alwaysProxy;
-        videoQualityElement.value = result.videoQuality || "";
+        invidiousOnlyEmbeddedVideoElement.checked = result.invidiousOnlyEmbeddedVideo;
+        invidiousAlwaysProxyElement.checked = result.invidiousAlwaysProxy;
+        invidiousVideoQualityElement.value = result.invidiousVideoQuality || "";
         invidiousAutoplayElement.checked = result.invidiousAutoplay;
 
         invidiousRandomPool = result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances)
@@ -118,19 +118,22 @@ useFreeTubeElement.addEventListener("change", (event) => {
     browser.storage.sync.set({ useFreeTube: event.target.checked });
 });
 
-alwaysProxyElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ alwaysProxy: event.target.checked });
+invidiousAlwaysProxyElement.addEventListener("change", (event) => {
+    browser.storage.sync.set({ invidiousAlwaysProxy: event.target.checked });
 });
 
-onlyEmbeddedVideoElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
+invidiousOnlyEmbeddedVideoElement.addEventListener("change", (event) => {
+    browser.storage.sync.set({ invidiousOnlyEmbeddedVideo: event.target.checked });
 });
 
-videoQualityElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ videoQuality: event.target.options[videoQualityElement.selectedIndex].value });
+invidiousVideoQualityElement.addEventListener("change", (event) => {
+    browser.storage.sync.set({ invidiousVideoQuality: event.target.options[invidiousVideoQualityElement.selectedIndex].value });
 });
 
 browser.storage.onChanged.addListener((changes) => {
-    if ("invidiousRandomPool" in changes)
-        invidiousRandomPool.value = changes.invidiousRandomPool.newValue;
+    if ("invidiousRandomPool" in changes) {
+        invidiousRandomPool = changes.invidiousRandomPool.newValue;
+        invidiousRandomPoolElement.value = invidiousRandomPool.join("\n");
+        commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool);
+    }
 })
\ No newline at end of file
author	ManeraKai <manerakai@protonmail.com>	2022-01-31 21:01:16 +0300
committer	ManeraKai <manerakai@protonmail.com>	2022-01-31 21:01:24 +0300
commit	540b41ef0a752bf7aa0d90df37bdb69a28b6f39f (patch)
tree	741443b9b61f81b0c8690c3c71aed75bc770c781 /src/pages/options
parent	Updating RandomPools (diff)
download	libredirect-540b41ef0a752bf7aa0d90df37bdb69a28b6f39f.zip