Refining code. Adding frontend option to search

24 files changed, 966 insertions, 613 deletions

diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 741e9116..d19eed94 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -36,7 +36,7 @@ const redditBypassPaths = redditHelper.bypassPaths;
 const redditDefault = redditHelper.redirects[0];
 
 const googleSearchRegex = searchHelper.targets;
-const searchEngineInstances = searchHelper.redirects;
+const searchInstances = searchHelper.redirects;
 const simplyTranslateInstances = googleTranslateHelper.redirects;
 const simplyTranslateDefault = simplyTranslateInstances[0];
 const googleTranslateDomains = googleTranslateHelper.targets;
@@ -50,7 +50,7 @@ let disableBibliogram;
 let disableOsm;
 let disableReddit;
 let disableScribe;
-let disableSearchEngine;
+let disableSearch;
 let disableSimplyTranslate;
 let disableWikipedia;
 let nitterInstance;
@@ -59,12 +59,12 @@ let bibliogramInstance;
 let osmInstance;
 let scribeInstance;
 let redditInstance;
-let searchEngineInstance;
+let searchInstance;
 let simplyTranslateInstance;
 let wikipediaInstance;
-let alwaysProxy;
-let onlyEmbeddedVideo;
-let videoQuality;
+let invidiousAlwaysProxy;
+let invidiousOnlyEmbeddedVideo;
+let invidiousVideoQuality;
 let invidiousDarkMode;
 let invidiousVolume;
 let invidiousPlayerStyle;
@@ -80,6 +80,7 @@ let scribeRandomPool;
 
 let exceptions;
 let redditFrontend;
+let searchFrontend;
 
 window.browser = window.browser || window.chrome;
 
@@ -91,7 +92,7 @@ browser.storage.sync.get(
     "osmInstance",
     "redditInstance",
     "scribeInstance",
-    "searchEngineInstance",
+    "searchInstance",
     "simplyTranslateInstance",
     "wikipediaInstance",
     "disableNitter",
@@ -100,12 +101,12 @@ browser.storage.sync.get(
     "disableOsm",
     "disableReddit",
     "disableScribe",
-    "disableSearchEngine",
+    "disableSearch",
     "disableSimplyTranslate",
     "disableWikipedia",
-    "alwaysProxy",
-    "onlyEmbeddedVideo",
-    "videoQuality",
+    "invidiousAlwaysProxy",
+    "invidiousOnlyEmbeddedVideo",
+    "invidiousVideoQuality",
     "invidiousDarkMode",
     "invidiousVolume",
     "invidiousPlayerStyle",
@@ -119,13 +120,15 @@ browser.storage.sync.get(
     "wikilessRandomPool",
     "exceptions",
     "redditFrontend",
+    "searchFrontend",
   ],
   (result) => {
     osmInstance = result.osmInstance || osmDefault;
     disableOsm = result.disableOsm;
 
-    searchEngineInstance = result.searchEngineInstance;
-    disableSearchEngine = result.disableSearchEngine;
+    searchInstance = result.searchInstance;
+    disableSearch = result.disableSearch;
+    searchFrontend = result.searchFrontend;
 
     simplyTranslateInstance = result.simplyTranslateInstance || simplyTranslateDefault;
     disableSimplyTranslate = result.disableSimplyTranslate;
@@ -144,12 +147,12 @@ browser.storage.sync.get(
       : [];
 
 
-    onlyEmbeddedVideo = result.onlyEmbeddedVideo;
+    invidiousOnlyEmbeddedVideo = result.invidiousOnlyEmbeddedVideo;
     invidiousDarkMode = result.invidiousDarkMode;
     disableInvidious = result.disableInvidious;
-    alwaysProxy = result.alwaysProxy;
+    invidiousAlwaysProxy = result.invidiousAlwaysProxy;
     invidiousInstance = result.invidiousInstance;
-    videoQuality = result.videoQuality;
+    invidiousVideoQuality = result.invidiousVideoQuality;
     invidiousVolume = result.invidiousVolume;
     invidiousPlayerStyle = result.invidiousPlayerStyle;
     invidiousSubtitles = result.invidiousSubtitles || "";
@@ -186,107 +189,49 @@ browser.storage.sync.get(
 );
 
 browser.storage.onChanged.addListener((changes) => {
-  if ("nitterInstance" in changes)
-    nitterInstance = changes.nitterInstance.newValue;
+  if ("invidiousInstance" in changes) invidiousInstance = changes.invidiousInstance.newValue;
+  if ("disableInvidious" in changes) disableInvidious = changes.disableInvidious.newValue;
+  if ("invidiousAlwaysProxy" in changes) invidiousAlwaysProxy = changes.invidiousAlwaysProxy.newValue;
+  if ("invidiousOnlyEmbeddedVideo" in changes) invidiousOnlyEmbeddedVideo = changes.invidiousOnlyEmbeddedVideo.newValue;
+  if ("invidiousVideoQuality" in changes) invidiousVideoQuality = changes.invidiousVideoQuality.newValue;
+  if ("invidiousDarkMode" in changes) invidiousDarkMode = changes.invidiousDarkMode.newValue;
+  if ("invidiousVolume" in changes) invidiousVolume = changes.invidiousVolume.newValue;
+  if ("invidiousPlayerStyle" in changes) invidiousPlayerStyle = changes.invidiousPlayerStyle.newValue;
+  if ("invidiousSubtitles" in changes) invidiousSubtitles = changes.invidiousSubtitles.newValue;
+  if ("invidiousAutoplay" in changes) invidiousAutoplay = changes.invidiousAutoplay.newValue;
+  if ("useFreeTube" in changes) useFreeTube = changes.useFreeTube.newValue;
+  if ("invidiousRandomPool" in changes) invidiousRandomPool = changes.invidiousRandomPool.newValue;
 
-  if ("invidiousInstance" in changes)
-    invidiousInstance = changes.invidiousInstance.newValue;
+  if ("nitterInstance" in changes) nitterInstance = changes.nitterInstance.newValue;
+  if ("disableNitter" in changes) disableNitter = changes.disableNitter.newValue;
+  if ("nitterRandomPool" in changes) nitterRandomPool = changes.nitterRandomPool.newValue;
 
-  if ("bibliogramInstance" in changes)
-    bibliogramInstance = changes.bibliogramInstance.newValue;
+  if ("bibliogramInstance" in changes) bibliogramInstance = changes.bibliogramInstance.newValue;
+  if ("disableBibliogram" in changes) disableBibliogram = changes.disableBibliogram.newValue;
+  if ("bibliogramRandomPool" in changes) bibliogramRandomPool = changes.bibliogramRandomPool.newValue;
 
-  if ("osmInstance" in changes)
-    osmInstance = changes.osmInstance.newValue || osmDefault;
+  if ("redditInstance" in changes) redditInstance = changes.redditInstance.newValue || redditDefault;
+  if ("disableReddit" in changes) disableReddit = changes.disableReddit.newValue;
+  if ("redditFrontend" in changes) redditFrontend = changes.redditFrontend.newValue
 
-  if ("simplyTranslateInstance" in changes)
-    simplyTranslateInstance = changes.simplyTranslateInstance.newValue || simplyTranslateDefault;
+  if ("searchInstance" in changes) searchInstance = changes.searchInstance.newValue;
+  if ("disableSearch" in changes) disableSearch = changes.disableSearch.newValue;
+  if ("searchFrontend" in changes) searchFrontend = changes.searchFrontend.newValue
 
-  if ("wikipediaInstance" in changes)
-    wikipediaInstance = changes.wikipediaInstance.newValue || wikipediaDefault;
+  if ("simplyTranslateInstance" in changes) simplyTranslateInstance = changes.simplyTranslateInstance.newValue || simplyTranslateDefault;
+  if ("disableSimplyTranslate" in changes) disableSimplyTranslate = changes.disableSimplyTranslate.newValue;
 
-  if ("redditInstance" in changes)
-    redditInstance = changes.redditInstance.newValue || redditDefault;
+  if ("osmInstance" in changes) osmInstance = changes.osmInstance.newValue || osmDefault;
+  if ("disableOsm" in changes) disableOsm = changes.disableOsm.newValue;
 
-  if ("redditFrontend" in changes)
-    redditFrontend = changes.redditFrontend.newValue
+  if ("wikipediaInstance" in changes) wikipediaInstance = changes.wikipediaInstance.newValue || wikipediaDefault;
+  if ("disableWikipedia" in changes) disableWikipedia = changes.disableWikipedia.newValue;
 
-  if ("scribeInstance" in changes)
-    scribeInstance = changes.scribeInstance.newValue || scribeDefault;
-
-  if ("searchEngineInstance" in changes)
-    searchEngineInstance = changes.searchEngineInstance.newValue;
-
-  if ("disableNitter" in changes)
-    disableNitter = changes.disableNitter.newValue;
-
-  if ("disableScribe" in changes)
-    disableScribe = changes.disableScribe.newValue;
-
-  if ("disableInvidious" in changes)
-    disableInvidious = changes.disableInvidious.newValue;
-
-  if ("disableBibliogram" in changes)
-    disableBibliogram = changes.disableBibliogram.newValue;
-
-  if ("disableOsm" in changes)
-    disableOsm = changes.disableOsm.newValue;
-
-  if ("disableReddit" in changes)
-    disableReddit = changes.disableReddit.newValue;
-
-  if ("disableSearchEngine" in changes)
-    disableSearchEngine = changes.disableSearchEngine.newValue;
-
-  if ("disableSimplyTranslate" in changes)
-    disableSimplyTranslate = changes.disableSimplyTranslate.newValue;
-
-  if ("disableWikipedia" in changes)
-    disableWikipedia = changes.disableWikipedia.newValue;
-
-  if ("alwaysProxy" in changes)
-    alwaysProxy = changes.alwaysProxy.newValue;
-
-  if ("onlyEmbeddedVideo" in changes)
-    onlyEmbeddedVideo = changes.onlyEmbeddedVideo.newValue;
-
-  if ("videoQuality" in changes)
-    videoQuality = changes.videoQuality.newValue;
-
-  if ("invidiousDarkMode" in changes)
-    invidiousDarkMode = changes.invidiousDarkMode.newValue;
-
-  if ("invidiousVolume" in changes)
-    invidiousVolume = changes.invidiousVolume.newValue;
-
-  if ("invidiousPlayerStyle" in changes)
-    invidiousPlayerStyle = changes.invidiousPlayerStyle.newValue;
-
-  if ("invidiousSubtitles" in changes)
-    invidiousSubtitles = changes.invidiousSubtitles.newValue;
-
-  if ("invidiousAutoplay" in changes)
-    invidiousAutoplay = changes.invidiousAutoplay.newValue;
-
-  if ("useFreeTube" in changes)
-    useFreeTube = changes.useFreeTube.newValue;
-
-  if ("nitterRandomPool" in changes)
-    nitterRandomPool = changes.nitterRandomPool.newValue;
-
-  if ("invidiousRandomPool" in changes)
-    invidiousRandomPool = changes.invidiousRandomPool.newValue;
-
-  if ("bibliogramRandomPool" in changes)
-    bibliogramRandomPool = changes.bibliogramRandomPool.newValue;
-
-  if ("scribeRandomPool" in changes)
-    scribeRandomPool = changes.scribeRandomPool.newValue;
-
-  if ("exceptions" in changes)
-    exceptions = changes.exceptions.newValue.map((e) => {
-      return new RegExp(e);
-    });
+  if ("scribeInstance" in changes) scribeInstance = changes.scribeInstance.newValue || scribeDefault;
+  if ("disableScribe" in changes) disableScribe = changes.disableScribe.newValue;
+  if ("scribeRandomPool" in changes) scribeRandomPool = changes.scribeRandomPool.newValue;
 
+  if ("exceptions" in changes) exceptions = changes.exceptions.newValue.map((e) => new RegExp(e));
 });
 
 function isException(url, initiator) {
@@ -320,18 +265,18 @@ function redirectYouTube(url, initiator, type) {
     // Avoid redirecting `studio.youtube.com`
     return null;
   }
-  if (onlyEmbeddedVideo && type !== "sub_frame") {
+  if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") {
     return null;
   }
   if (useFreeTube && type === "main_frame") {
     return `freetube://${url}`;
   }
   // Apply settings
-  if (alwaysProxy) {
+  if (invidiousAlwaysProxy) {
     url.searchParams.append("local", true);
   }
-  if (videoQuality) {
-    url.searchParams.append("quality", videoQuality);
+  if (invidiousVideoQuality) {
+    url.searchParams.append("quality", invidiousVideoQuality);
   }
   if (invidiousDarkMode) {
     url.searchParams.append("dark_mode", invidiousDarkMode);
@@ -508,8 +453,6 @@ function redirectGoogleMaps(url, initiator) {
 }
 
 function redirectReddit(url, initiator, type) {
-  console.info("reddit is redirecting");
-  console.log(redditFrontend)
 
   if (disableReddit || isException(url, initiator))
     return null;
@@ -570,19 +513,33 @@ function redirectMedium(url, initiator) {
   return `${scribeInstance || commonHelper.getRandomInstance(scribeRandomPool)}${url.pathname}${url.search}`;
 }
 
-function redirectSearchEngine(url, initiator) {
-  if (disableSearchEngine || isException(url, initiator))
+function redirectSearch(url, initiator) {
+  if (disableSearch || isException(url, initiator)) {
+    console.log("disableSearch:", disableSearch)
     return null;
+  }
 
-  const searchEngine = searchEngineInstance || commonHelper.getRandomInstance(searchEngineInstances);
-  let search = "";
+  let search;
+  let searchQ;
+  console.log("searchFrontend", searchFrontend);
+  if (searchFrontend == 'searx') {
+    search = searchInstance || commonHelper.getRandomInstance(searchInstances["searx"]);
+    searchQ = "/"
+  }
+  if (searchFrontend == 'whoogle') {
+    search = searchInstance || commonHelper.getRandomInstance(searchInstances["whoogle"]);
+    searchQ = "/search"
+  }
+
+  let searchQuery = "";
   url.search
     .slice(1)
     .split("&")
     .forEach(function (input) {
-      if (input.startsWith("q=")) search = input;
+      if (input.startsWith("q=")) searchQuery = input;
     });
-  return `${searchEngine.link}${searchEngine.q}?${search}`;
+  console.info("It will direct to:", `${search}${searchQ}?${searchQuery}`)
+  return `${search}${searchQ}?${searchQuery}`;
 }
 
 function redirectGoogleTranslate(url, initiator) {
@@ -634,24 +591,23 @@ browser.webRequest.onBeforeRequest.addListener(
       initiator = new URL(details.initiator);
 
     let newUrl;
-    if (youtubeDomains.includes(url.host))
-      newUrl = redirectYouTube(url, initiator, details.type)
-    else if (twitterDomains.includes(url.host))
-      newUrl = redirectTwitter(url, initiator);
-    else if (instagramDomains.includes(url.host))
-      newUrl = redirectInstagram(url, initiator, details.type);
-    else if (url.href.match(googleMapsRegex))
-      newUrl = redirectGoogleMaps(url, initiator);
-    else if (redditDomains.includes(url.host))
-      newUrl = redirectReddit(url, initiator, details.type);
-    else if (mediumDomains.some((rx) => rx.test(url.host)))
-      newUrl = redirectMedium(url, initiator);
-    else if (url.href.match(googleSearchRegex))
-      newUrl = redirectSearchEngine(url, initiator);
-    else if (googleTranslateDomains.includes(url.host))
-      newUrl = redirectGoogleTranslate(url, initiator);
-    else if (url.host.match(wikipediaRegex))
-      newUrl = redirectWikipedia(url, initiator);
+    if (youtubeDomains.includes(url.host)) newUrl = redirectYouTube(url, initiator, details.type)
+
+    else if (twitterDomains.includes(url.host)) newUrl = redirectTwitter(url, initiator);
+
+    else if (instagramDomains.includes(url.host)) newUrl = redirectInstagram(url, initiator, details.type);
+
+    else if (url.href.match(googleMapsRegex)) newUrl = redirectGoogleMaps(url, initiator);
+
+    else if (redditDomains.includes(url.host)) newUrl = redirectReddit(url, initiator, details.type);
+
+    else if (mediumDomains.some((rx) => rx.test(url.host))) newUrl = redirectMedium(url, initiator);
+
+    else if (googleSearchRegex.some((rx) => rx.test(url.href))) newUrl = redirectSearch(url, initiator);
+
+    else if (googleTranslateDomains.includes(url.host)) newUrl = redirectGoogleTranslate(url, initiator);
+
+    else if (url.host.match(wikipediaRegex)) newUrl = redirectWikipedia(url, initiator);
 
     if (newUrl) {
       console.info("Redirecting", url.href, "=>", newUrl);
@@ -675,11 +631,12 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
   mightyList.push(...invidiousInstances);
   mightyList.push(...nitterInstances);
   mightyList.push(...bibliogramInstances);
-  mightyList.push(...redditInstances['libreddit']);
-  mightyList.push(...redditInstances['teddit']);
-  mightyList.push(redditInstances['desktop']);
-  mightyList.push(redditInstances['mobile']);
-  mightyList.push(...searchEngineInstances);
+  mightyList.push(...redditInstances.libreddit);
+  mightyList.push(...redditInstances.teddit);
+  mightyList.push(redditInstances.desktop);
+  mightyList.push(redditInstances.mobile);
+  mightyList.push(...searchInstances.searx);
+  mightyList.push(...searchInstances.whoogle);
   mightyList.push(...simplyTranslateInstances);
   mightyList.push(...scribeInstances);
   mightyList.push(...wikipediaInstances);
@@ -706,7 +663,7 @@ browser.pageAction.onClicked.addListener((tab) => {
     else
       newUrl = 'https://reddit.com';
   }
-  else if (searchEngineInstances.includes(protocolHost))
+  else if (searchInstances.searx.includes(protocolHost) || searchInstances.whoogle.includes(protocolHost))
     newUrl = 'https://google.com';
   else if (simplyTranslateInstances.includes(protocolHost))
     newUrl = 'https://translate.google.com';
@@ -724,36 +681,29 @@ browser.pageAction.onClicked.addListener((tab) => {
 browser.runtime.onInstalled.addListener((details) => {
   browser.storage.sync.get(
     [
-      "disableSearchEngine",
+      "disableSearch",
       "disableSimplyTranslate",
       "disableWikipedia",
-      "redditFrontend"
+      "redditFrontend",
+      "searchFrontend",
     ],
     (result) => {
-      if (result.disableSearchEngine === undefined)
-        browser.storage.sync.set({
-          disableSearchEngine: true,
-        });
 
-      if (result.disableSimplyTranslate === undefined)
-        browser.storage.sync.set({
-          disableSimplyTranslate: true,
-        });
+      if (result.disableSearch === undefined) browser.storage.sync.set({ disableSearch: true });
+
+      if (result.disableSimplyTranslate === undefined) browser.storage.sync.set({ disableSimplyTranslate: true });
+
+      if (result.disableWikipedia === undefined) browser.storage.sync.set({ disableWikipedia: true });
+
+      if (result.redditFrontend === undefined) browser.storage.sync.set({ redditFrontend: 'libreddit' })
 
-      if (result.disableWikipedia === undefined)
-        browser.storage.sync.set({
-          disableWikipedia: true,
-        });
+      if (result.searchFrontend === undefined) browser.storage.sync.set({ searchFrontend: 'searx' })
 
-      if (result.redditFrontend === undefined)
-        browser.storage.sync.set({
-          redditFrontend: 'libreddit'
-        })
     }
   );
   if (details.reason === "update") {
     browser.storage.sync.get(
-      ["whitelist", "exceptions", "invidiousInstance", "disableSearchEngine"],
+      ["whitelist", "exceptions", "invidiousInstance", "disableSearch"],
       (result) => {
         if (result.whitelist) {
           let whitelist = result.whitelist.map((e) =>
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
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html
index adf45e6c..abb4259d 100644
--- a/src/pages/popup/popup.html
+++ b/src/pages/popup/popup.html
@@ -31,7 +31,7 @@
 
   <div class="some-block">
     <h4>Search</h4>
-    <input id="disable-searchEngine" type="checkbox" checked />
+    <input id="disable-search" type="checkbox" checked />
   </div>
 
   <div class="some-block">
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index 8ee09521..57dda80b 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -7,7 +7,7 @@ let disableInvidious = document.querySelector("#disable-invidious");
 let disableBibliogram = document.querySelector("#disable-bibliogram");
 let disableOsm = document.querySelector("#disable-osm");
 let disableReddit = document.querySelector("#disable-reddit");
-let disableSearchEngine = document.querySelector("#disable-searchEngine");
+let disableSearch = document.querySelector("#disable-search");
 let disableSimplyTranslate = document.querySelector("#disable-simplyTranslate");
 let disableWikipedia = document.querySelector("#disable-wikipedia");
 let disableScribe = document.querySelector("#disable-scribe");
@@ -21,7 +21,7 @@ browser.storage.sync.get(
     "disableBibliogram",
     "disableOsm",
     "disableReddit",
-    "disableSearchEngine",
+    "disableSearch",
     "disableSimplyTranslate",
     "disableWikipedia",
     "disableScribe",
@@ -34,7 +34,7 @@ browser.storage.sync.get(
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
     disableReddit.checked = !result.disableReddit;
-    disableSearchEngine.checked = !result.disableSearchEngine;
+    disableSearch.checked = !result.disableSearch;
     disableSimplyTranslate.checked = !result.disableSimplyTranslate;
     disableWikipedia.checked = !result.disableWikipedia;
     disableScribe.checked = !result.disableScribe;
@@ -61,8 +61,8 @@ disableReddit.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableReddit: !event.target.checked });
 });
 
-disableSearchEngine.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
+disableSearch.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableSearch: !event.target.checked });
 });
 
 disableSimplyTranslate.addEventListener("change", (event) => {
@@ -80,7 +80,7 @@ disableScribe.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/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 22c4b17b..5ee137c5 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -226,8 +226,39 @@ li {
   color: var(--text);
 }
 
-.option {
-  width: 100%;
+section.option-block {
+  width: 50%;
+  margin: 0 50px;
+}
+
+body.option {
+  display: flex;
+  align-items: flex-start;
+  padding: 40px;
+}
+
+
+section.links {
+  margin: 00px 0;
+}
+
+section.links a {
+  display: flex;
+  align-items: center;
+  font-size: 30px;
+  text-decoration: none;
+  color: white;
+  margin: 20px 0;
+  font-weight: bold;
+  transition: 0.1s;
+}
+
+section.links a:hover {
+  color: var(--active);
+}
+
+section.links a.selected {
+  color: var(--active);
 }
 
 .option td {
@@ -270,8 +301,6 @@ input[type="url"]:focus {
 /* \25BE */
 
 
-
-
 hr {
   height: 2px;
   margin: 0 15px;