about summary refs log tree commit diff stats
path: root/src/pages/options
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/options')
-rw-r--r--src/pages/options/index.html212
-rw-r--r--src/pages/options/index.js31
-rw-r--r--src/pages/options/init.js61
-rw-r--r--src/pages/options/widgets/general.js455
-rw-r--r--src/pages/options/widgets/imdb.js54
-rw-r--r--src/pages/options/widgets/imgur.js54
-rw-r--r--src/pages/options/widgets/instagram.js54
-rw-r--r--src/pages/options/widgets/lbry.js82
-rw-r--r--src/pages/options/widgets/lbry.pug8
-rw-r--r--src/pages/options/widgets/maps.js85
-rw-r--r--src/pages/options/widgets/medium.js54
-rw-r--r--src/pages/options/widgets/peertube.js54
-rw-r--r--src/pages/options/widgets/quora.js54
-rw-r--r--src/pages/options/widgets/reddit.js85
-rw-r--r--src/pages/options/widgets/reuters.js54
-rw-r--r--src/pages/options/widgets/search.js109
-rw-r--r--src/pages/options/widgets/sendTargets.js54
-rw-r--r--src/pages/options/widgets/tiktok.js54
-rw-r--r--src/pages/options/widgets/translate.js85
-rw-r--r--src/pages/options/widgets/twitter.js65
-rw-r--r--src/pages/options/widgets/wikipedia.js54
-rw-r--r--src/pages/options/widgets/youtube.js149
-rw-r--r--src/pages/options/widgets/youtube.pug19
-rw-r--r--src/pages/options/widgets/youtubeMusic.js84
-rw-r--r--src/pages/options/widgets/youtubeMusic.pug25
25 files changed, 1100 insertions, 995 deletions
diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index 29e454bf..84955339 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -285,6 +285,7 @@
             <option value="invidious">Invidious</option>
             <option value="piped">Piped</option>
             <option value="pipedMaterial">Piped-Material</option>
+            <option value="cloudtube">CloudTube</option>
             <option value="freetube">FreeTube</option>
             <option value="yatte">Yattee</option>
           </select>
@@ -296,6 +297,7 @@
               <option value="invidious">Invidious</option>
               <option value="piped">Piped</option>
               <option value="pipedMaterial">Piped-Material</option>
+              <option value="cloudtube">CloudTube</option>
             </select>
           </div>
         </div>
@@ -595,6 +597,102 @@
                         <div class="checklist custom-checklist"></div>
           </div>
         </div>
+        <div id="cloudtube">
+          <hr>
+          <div class="normal">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="https://cloudtube.com" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-cloudtube-label" for="latency-cloudtube"> 
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+                              <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>
+                            </svg>&nbsp;
+                            <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
+                          </label>
+                          <input class="button button-inline" id="latency-cloudtube" style="display:none;">
+                        </div>
+          </div>
+          <div class="tor">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://cloudtube.onion" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+          <div class="i2p">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://cloudtube.i2p" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+          <div class="loki">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://cloudtube.loki" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+        </div>
         <script type="module" src="./widgets/youtube.js"></script>
       </section>
       <section class="option-block" id="youtubeMusic_page">
@@ -606,6 +704,13 @@
           <h4 data-localise="__MSG_enable__">Enable</h4>
           <input id="youtubeMusic-enable" type="checkbox">
         </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_frontend__">Frontend</h4>
+          <select id="youtubeMusic-frontend">
+            <option value="beatbump">Beatbump</option>
+            <option value="hyperpipe">Hyperpipe</option>
+          </select>
+        </div>
         <div id="beatbump">
           <hr>
           <div class="normal">
@@ -619,7 +724,7 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://beatbump.wewe" type="url">
+                            <input class="custom-instance" placeholder="https://beatbump.org" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
@@ -702,6 +807,102 @@
                         <div class="checklist custom-checklist"></div>
           </div>
         </div>
+        <div id="hyperpipe">
+          <hr>
+          <div class="normal">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="https://hyperpipe.org" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-hyperpipe-label" for="latency-hyperpipe"> 
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+                              <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>
+                            </svg>&nbsp;
+                            <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
+                          </label>
+                          <input class="button button-inline" id="latency-hyperpipe" style="display:none;">
+                        </div>
+          </div>
+          <div class="tor">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://hyperpipe.onion" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+          <div class="i2p">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://hyperpipe.i2p" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+          <div class="loki">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://hyperpipe.loki" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+        </div>
         <script type="module" src="./widgets/youtubeMusic.js"></script>
       </section>
       <section class="option-block" id="twitter_page">
@@ -1994,13 +2195,20 @@
       </section>
       <section class="option-block" id="lbry_page">
         <div class="some-block option-block">
-          <h1 data-localise="__MSG_lbry__">LBRY/Odysee</h1>
+          <h1 data-localise="__MSG_lbry__">LBRY</h1>
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
           <input id="lbry-enable" type="checkbox">
         </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_frontend__">Frontend</h4>
+          <select id="lbry-frontend">
+            <option value="librarian">Librarian</option>
+            <option value="lbryDesktop" data-localise="__MSG_lbryDesktop__">LBRY Desktop</option>
+          </select>
+        </div>
         <div id="librarian">
           <hr>
           <div class="normal">
diff --git a/src/pages/options/index.js b/src/pages/options/index.js
index 39f9c8f3..409fa5b5 100644
--- a/src/pages/options/index.js
+++ b/src/pages/options/index.js
@@ -1,24 +1,23 @@
-for (const a of document.getElementById('links').getElementsByTagName('a')) {
-    a.addEventListener('click', e => {
-        const path = a.getAttribute('href').replace('#', '');
-        loadPage(path);
-        e.preventDefault();
-    })
+for (const a of document.getElementById("links").getElementsByTagName("a")) {
+	a.addEventListener("click", e => {
+		const path = a.getAttribute("href").replace("#", "")
+		loadPage(path)
+		e.preventDefault()
+	})
 }
 
 function loadPage(path) {
-    for (const section of document.getElementById('pages').getElementsByTagName('section'))
-        section.style.display = 'none';
-    document.getElementById(`${path}_page`).style.display = 'block';
+	for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none"
+	document.getElementById(`${path}_page`).style.display = "block"
 
-    for (const a of document.getElementById('links').getElementsByTagName('a'))
-        if (a.getAttribute('href') == `#${path}`) a.classList.add('selected')
-        else a.classList.remove('selected')
+	for (const a of document.getElementById("links").getElementsByTagName("a"))
+		if (a.getAttribute("href") == `#${path}`) a.classList.add("selected")
+		else a.classList.remove("selected")
 
-    let stateObj = { id: "100" };
-    window.history.pushState(stateObj, "Page 2", `/pages/options/index.html#${path}`);
+	let stateObj = { id: "100" }
+	window.history.pushState(stateObj, "Page 2", `/pages/options/index.html#${path}`)
 }
 
 const r = window.location.href.match(/#(.*)/)
-if (r) loadPage(r[1]);
-else loadPage('general');
\ No newline at end of file
+if (r) loadPage(r[1])
+else loadPage("general")
diff --git a/src/pages/options/init.js b/src/pages/options/init.js
index daea2963..5b679da4 100644
--- a/src/pages/options/init.js
+++ b/src/pages/options/init.js
@@ -1,38 +1,35 @@
-window.browser = window.browser || window.chrome;
+window.browser = window.browser || window.chrome
 
-import localise from "../../assets/javascripts/localise.js";
+import localise from "../../assets/javascripts/localise.js"
 
 function changeTheme() {
-    return new Promise(resolve => {
-        browser.storage.local.get(
-            "theme",
-            r => {
-                switch (r.theme) {
-                    case "dark":
-                        document.body.classList.add("dark-theme");
-                        document.body.classList.remove("light-theme");
-                        break;
-                    case "light":
-                        document.body.classList.add("light-theme");
-                        document.body.classList.remove("dark-theme");
-                        break;
-                    default:
-                        if (matchMedia("(prefers-color-scheme: light)").matches) {
-                            document.body.classList.add("light-theme");
-                            document.body.classList.remove("dark-theme");
-                        } else {
-                            document.body.classList.add("dark-theme");
-                            document.body.classList.remove("light-theme");
-                        }
-                }
-                resolve();
-            }
-        )
-    })
+	return new Promise(resolve => {
+		browser.storage.local.get("theme", r => {
+			switch (r.theme) {
+				case "dark":
+					document.body.classList.add("dark-theme")
+					document.body.classList.remove("light-theme")
+					break
+				case "light":
+					document.body.classList.add("light-theme")
+					document.body.classList.remove("dark-theme")
+					break
+				default:
+					if (matchMedia("(prefers-color-scheme: light)").matches) {
+						document.body.classList.add("light-theme")
+						document.body.classList.remove("dark-theme")
+					} else {
+						document.body.classList.add("dark-theme")
+						document.body.classList.remove("light-theme")
+					}
+			}
+			resolve()
+		})
+	})
 }
 
-changeTheme();
-if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) document.getElementsByTagName("body")[0].classList.add("rtl");
-localise.localisePage();
+changeTheme()
+if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) document.getElementsByTagName("body")[0].classList.add("rtl")
+localise.localisePage()
 
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", changeTheme)
\ No newline at end of file
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", changeTheme)
diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js
index 352e4b76..5407159d 100644
--- a/src/pages/options/widgets/general.js
+++ b/src/pages/options/widgets/general.js
@@ -1,242 +1,217 @@
-"use strict";
-window.browser = window.browser || window.chrome;
+"use strict"
+window.browser = window.browser || window.chrome
 
-import utils from "../../../assets/javascripts/utils.js";
-import generalHelper from "../../../assets/javascripts/general.js";
+import utils from "../../../assets/javascripts/utils.js"
+import generalHelper from "../../../assets/javascripts/general.js"
 
-import youtubeHelper from "../../../assets/javascripts/youtube/youtube.js";
-import youtubeMusicHelper from "../../../assets/javascripts/youtubeMusic.js";
-import twitterHelper from "../../../assets/javascripts/twitter.js";
-import instagramHelper from "../../../assets/javascripts/instagram.js";
-import redditHelper from "../../../assets/javascripts/reddit.js";
-import searchHelper from "../../../assets/javascripts/search.js";
-import translateHelper from "../../../assets/javascripts/translate/translate.js";
-import mapsHelper from "../../../assets/javascripts/maps.js";
-import wikipediaHelper from "../../../assets/javascripts/wikipedia.js";
-import mediumHelper from "../../../assets/javascripts/medium.js";
-import quoraHelper from "../../../assets/javascripts/quora.js";
-import libremdbHelper from "../../../assets/javascripts/imdb.js";
-import reutersHelper from "../../../assets/javascripts/reuters.js";
-import imgurHelper from "../../../assets/javascripts/imgur.js";
-import tiktokHelper from "../../../assets/javascripts/tiktok.js";
-import sendTargetsHelper from "../../../assets/javascripts/sendTargets.js";
-import peertubeHelper from "../../../assets/javascripts/peertube.js";
-import lbryHelper from "../../../assets/javascripts/lbry.js";
+import youtubeHelper from "../../../assets/javascripts/youtube/youtube.js"
+import youtubeMusicHelper from "../../../assets/javascripts/youtubeMusic.js"
+import twitterHelper from "../../../assets/javascripts/twitter.js"
+import instagramHelper from "../../../assets/javascripts/instagram.js"
+import redditHelper from "../../../assets/javascripts/reddit.js"
+import searchHelper from "../../../assets/javascripts/search.js"
+import translateHelper from "../../../assets/javascripts/translate/translate.js"
+import mapsHelper from "../../../assets/javascripts/maps.js"
+import wikipediaHelper from "../../../assets/javascripts/wikipedia.js"
+import mediumHelper from "../../../assets/javascripts/medium.js"
+import quoraHelper from "../../../assets/javascripts/quora.js"
+import libremdbHelper from "../../../assets/javascripts/imdb.js"
+import reutersHelper from "../../../assets/javascripts/reuters.js"
+import imgurHelper from "../../../assets/javascripts/imgur.js"
+import tiktokHelper from "../../../assets/javascripts/tiktok.js"
+import sendTargetsHelper from "../../../assets/javascripts/sendTargets.js"
+import peertubeHelper from "../../../assets/javascripts/peertube.js"
+import lbryHelper from "../../../assets/javascripts/lbry.js"
 
-let updateInstancesElement = document.getElementById("update-instances");
+let updateInstancesElement = document.getElementById("update-instances")
 updateInstancesElement.addEventListener("click", async () => {
-  let oldHtml = updateInstancesElement.innerHTML
-  updateInstancesElement.innerHTML = '...';
-  if (await utils.updateInstances()) {
-    updateInstancesElement.innerHTML = oldHtml;
-    location.reload();
-  }
-  else
-    updateInstancesElement.innerHTML = 'Failed Miserabely';
-});
+	let oldHtml = updateInstancesElement.innerHTML
+	updateInstancesElement.innerHTML = "..."
+	if (await utils.updateInstances()) {
+		updateInstancesElement.innerHTML = oldHtml
+		location.reload()
+	} else updateInstancesElement.innerHTML = "Failed Miserabely"
+})
 
-let exportSettingsElement = document.getElementById("export-settings");
+let exportSettingsElement = document.getElementById("export-settings")
 
 function exportSettings() {
-  browser.storage.local.get(
-    null,
-    result => {
-      let resultString = JSON.stringify(result, null, '  ');
-      exportSettingsElement.href = 'data:application/json;base64,' + btoa(encodeURI(resultString));
-      exportSettingsElement.download = 'libredirect-settings.json';
-    }
-  );
+	browser.storage.local.get(null, result => {
+		let resultString = JSON.stringify(result, null, "  ")
+		exportSettingsElement.href = "data:application/json;base64," + btoa(encodeURI(resultString))
+		exportSettingsElement.download = "libredirect-settings.json"
+	})
 }
-exportSettings();
-
-document.getElementById('general_page').addEventListener('click', exportSettings)
+exportSettings()
 
-let importSettingsElement = document.getElementById("import-settings");
-let importSettingsElementText = document.getElementById('import_settings_text');
-importSettingsElement.addEventListener("change",
-  () => {
-    importSettingsElementText.innerHTML = '...';
-    let file = importSettingsElement.files[0];
-    const reader = new FileReader();
-    reader.readAsText(file);
-    reader.onload = async () => {
-      const data = JSON.parse(reader.result)
-      if (
-        "theme" in data &&
-        "disableImgur" in data &&
-        "imgurRedirects" in data
-      ) {
-        browser.storage.local.clear(
-          () => {
-            browser.storage.local.set({ ...data },
-              async () => {
-                await youtubeHelper.pasteInvidiousCookies();
-                await youtubeHelper.pastePipedLocalStorage();
-                await youtubeHelper.pastePipedMaterialLocalStorage();
+document.getElementById("general_page").addEventListener("click", exportSettings)
 
-                await translateHelper.pasteSimplyTranslateCookies();
-                await translateHelper.pasteLingvaLocalStorage();
+let importSettingsElement = document.getElementById("import-settings")
+let importSettingsElementText = document.getElementById("import_settings_text")
+importSettingsElement.addEventListener("change", () => {
+	importSettingsElementText.innerHTML = "..."
+	let file = importSettingsElement.files[0]
+	const reader = new FileReader()
+	reader.readAsText(file)
+	reader.onload = async () => {
+		const data = JSON.parse(reader.result)
+		if ("theme" in data && "disableImgur" in data && "imgurRedirects" in data) {
+			browser.storage.local.clear(() => {
+				browser.storage.local.set({ ...data }, async () => {
+					await youtubeHelper.pasteInvidiousCookies()
+					await youtubeHelper.pastePipedLocalStorage()
+					await youtubeHelper.pastePipedMaterialLocalStorage()
 
-                await twitterHelper.pasteNitterCookies();
+					await translateHelper.pasteSimplyTranslateCookies()
+					await translateHelper.pasteLingvaLocalStorage()
 
-                await wikipediaHelper.pasteWikilessCookies();
+					await twitterHelper.pasteNitterCookies()
 
-                await searchHelper.pasteSearxCookies();
-                await searchHelper.pasteSearxngCookies();
-                await searchHelper.pasteLibrexCookies();
+					await wikipediaHelper.pasteWikilessCookies()
 
-                await redditHelper.pasteLibredditCookies();
-                await redditHelper.pasteTedditCookies();
+					await searchHelper.pasteSearxCookies()
+					await searchHelper.pasteSearxngCookies()
+					await searchHelper.pasteLibrexCookies()
 
-                await tiktokHelper.pasteProxiTokCookies();
+					await redditHelper.pasteLibredditCookies()
+					await redditHelper.pasteTedditCookies()
 
-                location.reload();
-              })
+					await tiktokHelper.pasteProxiTokCookies()
 
-          });
-      } else {
-        console.log('incompatible settings');
-        importError()
-      }
-    }
-    reader.onerror = error => {
-      console.log('error', error);
-      importError()
-    };
-  }
-);
+					location.reload()
+				})
+			})
+		} else {
+			console.log("incompatible settings")
+			importError()
+		}
+	}
+	reader.onerror = error => {
+		console.log("error", error)
+		importError()
+	}
+})
 function importError() {
-  const oldHTML = importSettingsElementText.innerHTML;
-  importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>';
-  setTimeout(() => importSettingsElementText.innerHTML = oldHTML, 1000);
+	const oldHTML = importSettingsElementText.innerHTML
+	importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>'
+	setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000)
 }
 
-const resetSettings = document.getElementById("reset-settings");
-resetSettings.addEventListener("click",
-  async () => {
-    resetSettings.innerHTML = '...'
-    browser.storage.local.clear(
-      () => {
-        fetch('/instances/blacklist.json').then(response => response.text()).then(async data => {
-          browser.storage.local.set({ cloudflareBlackList: JSON.parse(data).cloudflare },
-            () => {
-              browser.storage.local.set({ authenticateBlackList: JSON.parse(data).authenticate },
-                async () => {
-                  await generalHelper.initDefaults();
-                  await youtubeHelper.initDefaults();
-                  await youtubeMusicHelper.initDefaults();
-                  await twitterHelper.initDefaults();
-                  await instagramHelper.initDefaults();
-                  await mapsHelper.initDefaults();
-                  await searchHelper.initDefaults();
-                  await translateHelper.initDefaults();
-                  await mediumHelper.initDefaults();
-                  await quoraHelper.initDefaults();
-                  await libremdbHelper.initDefaults();
-                  await reutersHelper.initDefaults();
-                  await redditHelper.initDefaults();
-                  await wikipediaHelper.initDefaults();
-                  await imgurHelper.initDefaults();
-                  await tiktokHelper.initDefaults();
-                  await sendTargetsHelper.initDefaults();
-                  await peertubeHelper.initDefaults();
-                  await lbryHelper.initDefaults();
-                  location.reload();
-                })
-            })
-        })
-      });
-
-  }
-);
+const resetSettings = document.getElementById("reset-settings")
+resetSettings.addEventListener("click", async () => {
+	resetSettings.innerHTML = "..."
+	browser.storage.local.clear(() => {
+		fetch("/instances/blacklist.json")
+			.then(response => response.text())
+			.then(async data => {
+				browser.storage.local.set({ cloudflareBlackList: JSON.parse(data).cloudflare }, () => {
+					browser.storage.local.set({ authenticateBlackList: JSON.parse(data).authenticate }, async () => {
+						await generalHelper.initDefaults()
+						await youtubeHelper.initDefaults()
+						await youtubeMusicHelper.initDefaults()
+						await twitterHelper.initDefaults()
+						await instagramHelper.initDefaults()
+						await mapsHelper.initDefaults()
+						await searchHelper.initDefaults()
+						await translateHelper.initDefaults()
+						await mediumHelper.initDefaults()
+						await quoraHelper.initDefaults()
+						await libremdbHelper.initDefaults()
+						await reutersHelper.initDefaults()
+						await redditHelper.initDefaults()
+						await wikipediaHelper.initDefaults()
+						await imgurHelper.initDefaults()
+						await tiktokHelper.initDefaults()
+						await sendTargetsHelper.initDefaults()
+						await peertubeHelper.initDefaults()
+						await lbryHelper.initDefaults()
+						location.reload()
+					})
+				})
+			})
+	})
+})
 
 let autoRedirectElement = document.getElementById("auto-redirect")
 autoRedirectElement.addEventListener("change", event => {
-  browser.storage.local.set({ autoRedirect: event.target.checked })
-});
+	browser.storage.local.set({ autoRedirect: event.target.checked })
+})
 
-let themeElement = document.getElementById("theme");
+let themeElement = document.getElementById("theme")
 themeElement.addEventListener("change", event => {
-  const value = event.target.options[theme.selectedIndex].value;
-  browser.storage.local.set({ theme: value });
-  location.reload();
+	const value = event.target.options[theme.selectedIndex].value
+	browser.storage.local.set({ theme: value })
+	location.reload()
 })
 
-let protocolElement = document.getElementById("protocol");
+let protocolElement = document.getElementById("protocol")
 protocolElement.addEventListener("change", event => {
-  const value = event.target.options[protocol.selectedIndex].value;
-  browser.storage.local.set({ protocol: value });
-  location.reload();
+	const value = event.target.options[protocol.selectedIndex].value
+	browser.storage.local.set({ protocol: value })
+	location.reload()
 })
 
 let protocolFallbackCheckbox = document.getElementById("protocol-fallback-checkbox")
 protocolFallbackCheckbox.addEventListener("change", event => {
-  browser.storage.local.set({ protocolFallback: event.target.checked });
+	browser.storage.local.set({ protocolFallback: event.target.checked })
 })
 
-let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
-let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
+let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance")
+let instanceTypeElement = document.getElementById("exceptions-custom-instance-type")
 let instanceType = "url"
 
-let popupFrontends;
+let popupFrontends
 for (const frontend of generalHelper.allPopupFrontends)
-  document.getElementById(frontend).addEventListener("change",
-    event => {
-      if (event.target.checked && !popupFrontends.includes(frontend))
-        popupFrontends.push(frontend)
-      else if (popupFrontends.includes(frontend)) {
-        var index = popupFrontends.indexOf(frontend);
-        if (index !== -1) popupFrontends.splice(index, 1);
-      }
-      browser.storage.local.set({ popupFrontends })
-    }
-  )
+	document.getElementById(frontend).addEventListener("change", event => {
+		if (event.target.checked && !popupFrontends.includes(frontend)) popupFrontends.push(frontend)
+		else if (popupFrontends.includes(frontend)) {
+			var index = popupFrontends.indexOf(frontend)
+			if (index !== -1) popupFrontends.splice(index, 1)
+		}
+		browser.storage.local.set({ popupFrontends })
+	})
 
 // const firstPartyIsolate = document.getElementById('firstPartyIsolate');
 // firstPartyIsolate.addEventListener("change", () => browser.storage.local.set({ firstPartyIsolate: firstPartyIsolate.checked }))
 
 browser.storage.local.get(
-  [
-    'theme',
-    'autoRedirect',
-    'exceptions',
-    'protocol',
-    'protocolFallback'
-    // 'firstPartyIsolate'
-  ],
-  r => {
-    autoRedirectElement.checked = r.autoRedirect;
-    themeElement.value = r.theme;
-    protocolElement.value = r.protocol;
-    protocolFallbackCheckbox.checked = r.protocolFallback;
-    // firstPartyIsolate.checked = r.firstPartyIsolate;
-
-    let protocolFallbackElement = document.getElementById('protocol-fallback')
-    if (protocolElement.value == "normal") {
-      protocolFallbackElement.style.display = 'none';
-    } else {
-      protocolFallbackElement.style.display = 'block';
-    }
+	[
+		"theme",
+		"autoRedirect",
+		"exceptions",
+		"protocol",
+		"protocolFallback",
+		// 'firstPartyIsolate'
+	],
+	r => {
+		autoRedirectElement.checked = r.autoRedirect
+		themeElement.value = r.theme
+		protocolElement.value = r.protocol
+		protocolFallbackCheckbox.checked = r.protocolFallback
+		// firstPartyIsolate.checked = r.firstPartyIsolate;
 
+		let protocolFallbackElement = document.getElementById("protocol-fallback")
+		if (protocolElement.value == "normal") {
+			protocolFallbackElement.style.display = "none"
+		} else {
+			protocolFallbackElement.style.display = "block"
+		}
 
-    instanceTypeElement.addEventListener("change",
-      event => {
-        instanceType = event.target.options[instanceTypeElement.selectedIndex].value
-        if (instanceType == 'url') {
-          nameCustomInstanceInput.setAttribute("type", "url");
-          nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com");
-        }
-        else if (instanceType == 'regex') {
-          nameCustomInstanceInput.setAttribute("type", "text");
-          nameCustomInstanceInput.setAttribute("placeholder", "https?:\/\/(www\.|)youtube\.com\/");
-        }
-      }
-    )
-    let exceptionsCustomInstances = r.exceptions;
-    function calcExceptionsCustomInstances() {
-      document.getElementById("exceptions-custom-checklist").innerHTML =
-        [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map(
-          (x) => `<div>
+		instanceTypeElement.addEventListener("change", event => {
+			instanceType = event.target.options[instanceTypeElement.selectedIndex].value
+			if (instanceType == "url") {
+				nameCustomInstanceInput.setAttribute("type", "url")
+				nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com")
+			} else if (instanceType == "regex") {
+				nameCustomInstanceInput.setAttribute("type", "text")
+				nameCustomInstanceInput.setAttribute("placeholder", "https?://(www.|)youtube.com/")
+			}
+		})
+		let exceptionsCustomInstances = r.exceptions
+		function calcExceptionsCustomInstances() {
+			document.getElementById("exceptions-custom-checklist").innerHTML = [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]
+				.map(
+					x => `<div>
                       ${x}
                       <button class="add" id="clear-${x}">
                         <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
@@ -246,53 +221,49 @@ browser.storage.local.get(
                       </button>
                     </div>
                     <hr>`
-        ).join('\n');
+				)
+				.join("\n")
 
-      for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
-        document.getElementById(`clear-${x}`).addEventListener("click",
-          () => {
-            console.log(x);
-            let index;
-            index = exceptionsCustomInstances.url.indexOf(x);
-            if (index > -1)
-              exceptionsCustomInstances.url.splice(index, 1);
-            else {
-              index = exceptionsCustomInstances.regex.indexOf(x);
-              if (index > -1)
-                exceptionsCustomInstances.regex.splice(index, 1);
-            }
-            browser.storage.local.set({ exceptions: exceptionsCustomInstances })
-            calcExceptionsCustomInstances();
-          });
-      }
-    }
-    calcExceptionsCustomInstances();
-    document.getElementById("custom-exceptions-instance-form").addEventListener("submit", (event) => {
-      event.preventDefault();
+			for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
+				document.getElementById(`clear-${x}`).addEventListener("click", () => {
+					console.log(x)
+					let index
+					index = exceptionsCustomInstances.url.indexOf(x)
+					if (index > -1) exceptionsCustomInstances.url.splice(index, 1)
+					else {
+						index = exceptionsCustomInstances.regex.indexOf(x)
+						if (index > -1) exceptionsCustomInstances.regex.splice(index, 1)
+					}
+					browser.storage.local.set({ exceptions: exceptionsCustomInstances })
+					calcExceptionsCustomInstances()
+				})
+			}
+		}
+		calcExceptionsCustomInstances()
+		document.getElementById("custom-exceptions-instance-form").addEventListener("submit", event => {
+			event.preventDefault()
 
-      let val
-      if (instanceType == 'url') {
-        if (nameCustomInstanceInput.validity.valid) {
-          let url = new URL(nameCustomInstanceInput.value);
-          val = `${url.protocol}//${url.host}`
-          if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
-        }
-      } else if (instanceType == 'regex') {
-        val = nameCustomInstanceInput.value
-        if (val.trim() != '' && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
-      }
-      if (val) {
-        browser.storage.local.set({ exceptions: exceptionsCustomInstances })
-        nameCustomInstanceInput.value = '';
-      }
-      calcExceptionsCustomInstances();
-    })
+			let val
+			if (instanceType == "url") {
+				if (nameCustomInstanceInput.validity.valid) {
+					let url = new URL(nameCustomInstanceInput.value)
+					val = `${url.protocol}//${url.host}`
+					if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
+				}
+			} else if (instanceType == "regex") {
+				val = nameCustomInstanceInput.value
+				if (val.trim() != "" && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
+			}
+			if (val) {
+				browser.storage.local.set({ exceptions: exceptionsCustomInstances })
+				nameCustomInstanceInput.value = ""
+			}
+			calcExceptionsCustomInstances()
+		})
 
-    browser.storage.local.get('popupFrontends',
-      r => {
-        popupFrontends = r.popupFrontends;
-        for (const frontend of generalHelper.allPopupFrontends)
-          document.getElementById(frontend).checked = popupFrontends.includes(frontend);
-      }
-    )
-  })
+		browser.storage.local.get("popupFrontends", r => {
+			popupFrontends = r.popupFrontends
+			for (const frontend of generalHelper.allPopupFrontends) document.getElementById(frontend).checked = popupFrontends.includes(frontend)
+		})
+	}
+)
diff --git a/src/pages/options/widgets/imdb.js b/src/pages/options/widgets/imdb.js
index ad115e93..094c5672 100644
--- a/src/pages/options/widgets/imdb.js
+++ b/src/pages/options/widgets/imdb.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("libremdb")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("imdb-enable");
-const imdb = document.getElementById('imdb_page');
+const enable = document.getElementById("imdb-enable")
+const imdb = document.getElementById("imdb_page")
 //const frontend = document.getElementById("imdb-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableImdb",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableImdb;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableImdb", "protocol"], r => {
+	enable.checked = !r.disableImdb
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 imdb.addEventListener("change", () => {
-    browser.storage.local.set({ disableImdb: !enable.checked })
+	browser.storage.local.set({ disableImdb: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('imdb', frontends[i], protocols[x], document)
-    }
-    utils.latency('imdb', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("imdb", frontends[i], protocols[x], document)
+	}
+	utils.latency("imdb", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/imgur.js b/src/pages/options/widgets/imgur.js
index 475bf472..236e809d 100644
--- a/src/pages/options/widgets/imgur.js
+++ b/src/pages/options/widgets/imgur.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("rimgo")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("imgur-enable");
-const imgur = document.getElementById('imgur_page');
+const enable = document.getElementById("imgur-enable")
+const imgur = document.getElementById("imgur_page")
 //const frontend = document.getElementById("imgur-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableImgur",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableImgur;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-);
+browser.storage.local.get(["disableImgur", "protocol"], r => {
+	enable.checked = !r.disableImgur
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 imgur.addEventListener("change", () => {
-    browser.storage.local.set({ disableImgur: !enable.checked });
+	browser.storage.local.set({ disableImgur: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('imgur', frontends[i], protocols[x], document)
-    }
-    utils.latency('imgur', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("imgur", frontends[i], protocols[x], document)
+	}
+	utils.latency("imgur", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/instagram.js b/src/pages/options/widgets/instagram.js
index 84456845..e22f720f 100644
--- a/src/pages/options/widgets/instagram.js
+++ b/src/pages/options/widgets/instagram.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("bibliogram")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("instagram-enable");
-const instagram = document.getElementById('instagram_page')
+const enable = document.getElementById("instagram-enable")
+const instagram = document.getElementById("instagram_page")
 //const frontend = document.getElementById("instagram-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableInstagram",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableInstagram;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableInstagram", "protocol"], r => {
+	enable.checked = !r.disableInstagram
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 instagram.addEventListener("change", () => {
-    browser.storage.local.set({ disableInstagram: !enable.checked })
+	browser.storage.local.set({ disableInstagram: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('instagram', frontends[i], protocols[x], document)
-    }
-    utils.latency('instagram', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("instagram", frontends[i], protocols[x], document)
+	}
+	utils.latency("instagram", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/lbry.js b/src/pages/options/widgets/lbry.js
index 645017ff..76e212cb 100644
--- a/src/pages/options/widgets/lbry.js
+++ b/src/pages/options/widgets/lbry.js
@@ -1,61 +1,57 @@
-import utils from "../../../assets/javascripts/utils.js";
-
-// UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
+import utils from "../../../assets/javascripts/utils.js"
 
 const frontends = new Array("librarian")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("lbry-enable");
-const lbry = document.getElementById('lbry_page');
-//const frontend = document.getElementById("lbry-frontend");
+const enable = document.getElementById("lbry-enable")
+const lbry = document.getElementById("lbry_page")
+const frontend = document.getElementById("lbry-frontend")
 let protocol
 
-/*
 function changeFrontendsSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        if (frontends[i] == frontend.value) {
-            frontendDiv.style.display = 'block'
-        } else {
-            frontendDiv.style.display = 'none'
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
 }
-*/
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableLbryTargets",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableLbryTargets;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableLbryTargets", "protocol", "lbryFrontend"], r => {
+	enable.checked = !r.disableLbryTargets
+	protocol = r.protocol
+	frontend.value = r.lbryFrontend
+	changeFrontendsSettings()
+	changeProtocolSettings()
+})
 
 lbry.addEventListener("change", () => {
-    browser.storage.local.set({ disableLbryTargets: !enable.checked });
+	browser.storage.local.set({
+		disableLbryTargets: !enable.checked,
+		lbryFrontend: frontend.value,
+	})
+	changeFrontendsSettings()
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('lbryTargets', frontends[i], protocols[x], document)
-    }
-    utils.latency('lbryTargets', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("lbryTargets", frontends[i], protocols[x], document)
+	}
+	utils.latency("lbryTargets", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/lbry.pug b/src/pages/options/widgets/lbry.pug
index 2bdccb5a..678b87d9 100644
--- a/src/pages/options/widgets/lbry.pug
+++ b/src/pages/options/widgets/lbry.pug
@@ -1,11 +1,17 @@
 section#lbry_page.option-block
     .some-block.option-block
-        h1(data-localise="__MSG_lbry__") LBRY/Odysee
+        h1(data-localise="__MSG_lbry__") LBRY
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
         input#lbry-enable(type="checkbox")
 
+    .some-block.option-block
+        h4(data-localise="__MSG_frontend__") Frontend
+        select#lbry-frontend
+            option(value="librarian") Librarian
+            option(value="lbryDesktop" data-localise="__MSG_lbryDesktop__") LBRY Desktop
+
     #librarian
         hr
         .normal
diff --git a/src/pages/options/widgets/maps.js b/src/pages/options/widgets/maps.js
index 9e4be6d3..acc8aca8 100644
--- a/src/pages/options/widgets/maps.js
+++ b/src/pages/options/widgets/maps.js
@@ -1,64 +1,57 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 const frontends = new Array("facil")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("maps-enable");
-const maps = document.getElementById('maps_page');
-const frontend = document.getElementById("maps-frontend");
+const enable = document.getElementById("maps-enable")
+const maps = document.getElementById("maps_page")
+const frontend = document.getElementById("maps-frontend")
 let protocol
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
 function changeFrontendsSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        if (frontends[i] == frontend.value) {
-            frontendDiv.style.display = 'block'
-        } else {
-            frontendDiv.style.display = 'none'
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableMaps",
-        "protocol",
-        "mapsFrontend"
-    ],
-    r => {
-        enable.checked = !r.disableMaps;
-        protocol = r.protocol;
-        frontend.value = r.mapsFrontend;
-        changeFrontendsSettings();
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableMaps", "protocol", "mapsFrontend"], r => {
+	enable.checked = !r.disableMaps
+	protocol = r.protocol
+	frontend.value = r.mapsFrontend
+	changeFrontendsSettings()
+	changeProtocolSettings()
+})
 
 maps.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableMaps: !enable.checked,
-        mapsFrontend: frontend.value
-    });
-    changeFrontendsSettings();
+	browser.storage.local.set({
+		disableMaps: !enable.checked,
+		mapsFrontend: frontend.value,
+	})
+	changeFrontendsSettings()
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++) {
-        utils.processDefaultCustomInstances('maps', frontends[i], protocols[x], document)
-    }
-    utils.latency('maps', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("maps", frontends[i], protocols[x], document)
+	}
+	utils.latency("maps", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/medium.js b/src/pages/options/widgets/medium.js
index 765a956c..8db5c0f0 100644
--- a/src/pages/options/widgets/medium.js
+++ b/src/pages/options/widgets/medium.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("scribe")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("medium-enable");
-const medium = document.getElementById('medium_page');
+const enable = document.getElementById("medium-enable")
+const medium = document.getElementById("medium_page")
 //const frontend = document.getElementById("medium-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableMedium",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableMedium;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableMedium", "protocol"], r => {
+	enable.checked = !r.disableMedium
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 medium.addEventListener("change", () => {
-    browser.storage.local.set({ disableMedium: !enable.checked })
+	browser.storage.local.set({ disableMedium: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('medium', frontends[i], protocols[x], document)
-    }
-    utils.latency('medium', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("medium", frontends[i], protocols[x], document)
+	}
+	utils.latency("medium", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/peertube.js b/src/pages/options/widgets/peertube.js
index 9e994119..e3b8dcc5 100644
--- a/src/pages/options/widgets/peertube.js
+++ b/src/pages/options/widgets/peertube.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("simpleertube")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("peertube-enable");
-const peertube = document.getElementById('peertube_page');
+const enable = document.getElementById("peertube-enable")
+const peertube = document.getElementById("peertube_page")
 //const frontend = document.getElementById("peertube-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disablePeertubeTargets",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disablePeertubeTargets;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disablePeertubeTargets", "protocol"], r => {
+	enable.checked = !r.disablePeertubeTargets
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 peertube.addEventListener("change", () => {
-    browser.storage.local.set({ disablePeertubeTargets: !enable.checked })
+	browser.storage.local.set({ disablePeertubeTargets: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('peertube', frontends[i], protocols[x], document)
-    }
-    utils.latency('peertube', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("peertube", frontends[i], protocols[x], document)
+	}
+	utils.latency("peertube", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/quora.js b/src/pages/options/widgets/quora.js
index ded21e57..f3e361c3 100644
--- a/src/pages/options/widgets/quora.js
+++ b/src/pages/options/widgets/quora.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("quetre")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("quora-enable");
-const quora = document.getElementById('quora_page');
+const enable = document.getElementById("quora-enable")
+const quora = document.getElementById("quora_page")
 //const frontend = document.getElementById("quora-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableQuora",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableQuora;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableQuora", "protocol"], r => {
+	enable.checked = !r.disableQuora
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 quora.addEventListener("change", () => {
-    browser.storage.local.set({ disableQuora: !enable.checked })
+	browser.storage.local.set({ disableQuora: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('quora', frontends[i], protocols[x], document)
-    }
-    utils.latency('quora', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("quora", frontends[i], protocols[x], document)
+	}
+	utils.latency("quora", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/reddit.js b/src/pages/options/widgets/reddit.js
index a32632d2..c2d16fa3 100644
--- a/src/pages/options/widgets/reddit.js
+++ b/src/pages/options/widgets/reddit.js
@@ -1,64 +1,57 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 const frontends = new Array("libreddit", "teddit")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("reddit-enable");
-const reddit = document.getElementById('reddit_page');
-const frontend = document.getElementById("reddit-frontend");
+const enable = document.getElementById("reddit-enable")
+const reddit = document.getElementById("reddit_page")
+const frontend = document.getElementById("reddit-frontend")
 let protocol
 
 function changeFrontendsSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        if (frontends[i] == frontend.value) {
-            frontendDiv.style.display = 'block'
-        } else {
-            frontendDiv.style.display = 'none'
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
 }
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableReddit",
-        "protocol",
-        "redditFrontend",
-    ],
-    r => {
-        enable.checked = !r.disableReddit
-        protocol = r.protocol
-        frontend.value = r.redditFrontend
-        changeFrontendsSettings();
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableReddit", "protocol", "redditFrontend"], r => {
+	enable.checked = !r.disableReddit
+	protocol = r.protocol
+	frontend.value = r.redditFrontend
+	changeFrontendsSettings()
+	changeProtocolSettings()
+})
 
 reddit.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableReddit: !enable.checked,
-        redditFrontend: frontend.value
-    });
-    changeFrontendsSettings();
+	browser.storage.local.set({
+		disableReddit: !enable.checked,
+		redditFrontend: frontend.value,
+	})
+	changeFrontendsSettings()
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('reddit', frontends[i], protocols[x], document)
-    }
-    utils.latency('reddit', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("reddit", frontends[i], protocols[x], document)
+	}
+	utils.latency("reddit", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/reuters.js b/src/pages/options/widgets/reuters.js
index 297e3e70..d8c937e4 100644
--- a/src/pages/options/widgets/reuters.js
+++ b/src/pages/options/widgets/reuters.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("neuters")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("reuters-enable");
-const reuters = document.getElementById('reuters_page');
+const enable = document.getElementById("reuters-enable")
+const reuters = document.getElementById("reuters_page")
 //const frontend = document.getElementById("reuters-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableReuters",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableReuters;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableReuters", "protocol"], r => {
+	enable.checked = !r.disableReuters
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 reuters.addEventListener("change", () => {
-    browser.storage.local.set({ disableReuters: !enable.checked })
+	browser.storage.local.set({ disableReuters: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('reuters', frontends[i], protocols[x], document)
-    }
-    utils.latency('reuters', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("reuters", frontends[i], protocols[x], document)
+	}
+	utils.latency("reuters", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/search.js b/src/pages/options/widgets/search.js
index 7cadf143..3301cd70 100644
--- a/src/pages/options/widgets/search.js
+++ b/src/pages/options/widgets/search.js
@@ -1,4 +1,4 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // GOAL: to never mention frontends/protocls outside these two arrays, so that adding a new frontend/protocol is as easy as adding it here.
 // This may be expanded across the whole project, where almost everything becomes a template, and the frontend/protocol parts just become a JSON file.
@@ -15,8 +15,8 @@ for (let i = 0; i < frontends.length; i++) {
   this.frontends[i] = frontends[i].getElementsByClassName(protocol)
 }
 */
-    // There was a class here, but I deleted a bit of it
-    /*
+// There was a class here, but I deleted a bit of it
+/*
     this.searxDiv = searxDiv.getElementsByClassName(protocol)[0];
     this.searxngDiv = searxngDiv.getElementsByClassName(protocol)[0];
     this.librexDiv = librexDiv.getElementsByClassName(protocol)[0];
@@ -35,23 +35,22 @@ const searxngDiv = document.getElementById("searxng");
 const whoogleDiv = document.getElementById("whoogle");
 */
 
-const enable = document.getElementById("search-enable");
-const search = document.getElementById('search_page');
-const frontend = document.getElementById("search-frontend");
+const enable = document.getElementById("search-enable")
+const search = document.getElementById("search_page")
+const frontend = document.getElementById("search-frontend")
 let protocol
 
 function changeFrontendsSettings() {
-  for (let i = 0; i < frontends.length; i++) {
-    const frontendDiv = document.getElementById(frontends[i])
-    if (frontends[i] == frontend.value) {
-      frontendDiv.style.display = 'block'
-    } else {
-      frontendDiv.style.display = 'none'
-    }
-  }
-
-
-  /*
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
+
+	/*
   if (frontend.value == 'searx') {
     searxDiv.style.display = 'block';
     searxngDiv.style.display = 'none';
@@ -79,32 +78,27 @@ function changeFrontendsSettings() {
   */
 }
 
-
-
 function changeProtocolSettings() {
-
-
-  for (let i = 0; i < frontends.length; i++) {
-    const frontendDiv = document.getElementById(frontends[i])
-    //if (frontends[i] == frontend.value) {       // Here we are checking if the frontend matches the current one. This skips the protocol checking for that frontend, speeding things up. I no longer do this as protocol setting is only set once in the ui so every frontend needs to get their protocols setup immidiately.
-      for (let x = 0; x < protocols.length; x++) {
-        const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-        if (protocols[x] == protocol) { //if the frontend value equals the selected one, it will show. Otherwise, it will be hidden
-          protocolDiv.style.display = 'block'
-        } else {
-          protocolDiv.style.display = 'none'
-        }
-      }
-      /*
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		//if (frontends[i] == frontend.value) {       // Here we are checking if the frontend matches the current one. This skips the protocol checking for that frontend, speeding things up. I no longer do this as protocol setting is only set once in the ui so every frontend needs to get their protocols setup immidiately.
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				//if the frontend value equals the selected one, it will show. Otherwise, it will be hidden
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+		/*
     } else {
       continue
     }
     */
-  }
-
+	}
 
-
-/*
+	/*
     * "Legacy" code
   const normalsearxDiv = searxDiv.getElementsByClassName("normal")[0];
   const torsearxDiv = searxDiv.getElementsByClassName("tor")[0];
@@ -168,35 +162,28 @@ function changeProtocolSettings() {
   */
 }
 
-browser.storage.local.get(
-  [
-    "disableSearch",
-    "searchFrontend",
-    "protocol",
-  ],
-  r => {
-    enable.checked = !r.disableSearch;
-    frontend.value = r.searchFrontend;
-    protocol = r.protocol;
-
-    changeFrontendsSettings();
-    changeProtocolSettings();
-  }
-);
+browser.storage.local.get(["disableSearch", "searchFrontend", "protocol"], r => {
+	enable.checked = !r.disableSearch
+	frontend.value = r.searchFrontend
+	protocol = r.protocol
+
+	changeFrontendsSettings()
+	changeProtocolSettings()
+})
 
 for (let i = 0; i < frontends.length; i++) {
-  for (let x = 0; x < protocols.length; x++){
-    utils.processDefaultCustomInstances('search', frontends[i], protocols[x], document)
-  }
-  utils.latency('search', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("search", frontends[i], protocols[x], document)
+	}
+	utils.latency("search", frontends[i], document, location)
 }
 
 search.addEventListener("change", () => {
-  browser.storage.local.set({
-    disableSearch: !enable.checked,
-    searchFrontend: frontend.value,
-  });
-  changeFrontendsSettings();
+	browser.storage.local.set({
+		disableSearch: !enable.checked,
+		searchFrontend: frontend.value,
+	})
+	changeFrontendsSettings()
 })
 
 /*
diff --git a/src/pages/options/widgets/sendTargets.js b/src/pages/options/widgets/sendTargets.js
index 27c90d4e..9380a72f 100644
--- a/src/pages/options/widgets/sendTargets.js
+++ b/src/pages/options/widgets/sendTargets.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("send")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("sendTargets-enable");
-const sendTargets = document.getElementById('sendTargets_page');
+const enable = document.getElementById("sendTargets-enable")
+const sendTargets = document.getElementById("sendTargets_page")
 //const frontend = document.getElementById("sendTargets-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableSendTarget",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableSendTarget;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableSendTarget", "protocol"], r => {
+	enable.checked = !r.disableSendTarget
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 sendTargets.addEventListener("change", () => {
-    browser.storage.local.set({ disableSendTarget: !enable.checked })
+	browser.storage.local.set({ disableSendTarget: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('sendTargets', frontends[i], protocols[x], document)
-    }
-    utils.latency('sendTargets', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("sendTargets", frontends[i], protocols[x], document)
+	}
+	utils.latency("sendTargets", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/tiktok.js b/src/pages/options/widgets/tiktok.js
index 37c36366..38ec9ea0 100644
--- a/src/pages/options/widgets/tiktok.js
+++ b/src/pages/options/widgets/tiktok.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("proxiTok")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("tiktok-enable");
-const tiktok = document.getElementById('tiktok_page');
+const enable = document.getElementById("tiktok-enable")
+const tiktok = document.getElementById("tiktok_page")
 //const frontend = document.getElementById("tiktok-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableTiktok",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableTiktok;
-        protocol = r.protocol;
-        changeProtocolSettings();
-      }
-)
+browser.storage.local.get(["disableTiktok", "protocol"], r => {
+	enable.checked = !r.disableTiktok
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 tiktok.addEventListener("change", () => {
-    browser.storage.local.set({ disableTiktok: !enable.checked });
+	browser.storage.local.set({ disableTiktok: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('tiktok', frontends[i], protocols[x], document)
-    }
-    utils.latency('tiktok', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("tiktok", frontends[i], protocols[x], document)
+	}
+	utils.latency("tiktok", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/translate.js b/src/pages/options/widgets/translate.js
index 87b8bb8d..e1008139 100644
--- a/src/pages/options/widgets/translate.js
+++ b/src/pages/options/widgets/translate.js
@@ -1,64 +1,57 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 const frontends = new Array("simplyTranslate", "lingva")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("translate-enable");
-const translate = document.getElementById('translate_page');
-const frontend = document.getElementById("translate-frontend");
+const enable = document.getElementById("translate-enable")
+const translate = document.getElementById("translate_page")
+const frontend = document.getElementById("translate-frontend")
 let protocol
 
 function changeFrontendsSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        if (frontends[i] == frontend.value) {
-            frontendDiv.style.display = 'block'
-        } else {
-            frontendDiv.style.display = 'none'
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
 }
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "translateDisable",
-        "translateFrontend",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.translateDisable;
-        frontend.value = r.translateFrontend;
-        protocol = r.protocol;
-        changeFrontendsSettings();
-        changeProtocolSettings();
-    }
-);
+browser.storage.local.get(["translateDisable", "translateFrontend", "protocol"], r => {
+	enable.checked = !r.translateDisable
+	frontend.value = r.translateFrontend
+	protocol = r.protocol
+	changeFrontendsSettings()
+	changeProtocolSettings()
+})
 
 translate.addEventListener("change", () => {
-    browser.storage.local.set({
-        translateDisable: !enable.checked,
-        translateFrontend: frontend.value,
-    })
-    changeFrontendsSettings();
+	browser.storage.local.set({
+		translateDisable: !enable.checked,
+		translateFrontend: frontend.value,
+	})
+	changeFrontendsSettings()
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('translate', frontends[i], protocols[x], document)
-    }
-    utils.latency('translate', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("translate", frontends[i], protocols[x], document)
+	}
+	utils.latency("translate", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/twitter.js b/src/pages/options/widgets/twitter.js
index d54fc928..5ad760b3 100644
--- a/src/pages/options/widgets/twitter.js
+++ b/src/pages/options/widgets/twitter.js
@@ -1,13 +1,13 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("nitter")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("twitter-enable");
-const twitter = document.getElementById('twitter_page');
-const redirectType = document.getElementById("twitter-redirect_type");
+const enable = document.getElementById("twitter-enable")
+const twitter = document.getElementById("twitter_page")
+const redirectType = document.getElementById("twitter-redirect_type")
 //const frontend = document.getElementById("twitter-frontend");
 let protocol
 
@@ -25,43 +25,36 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableTwitter",
-        "protocol",
-        "twitterRedirectType"
-    ],
-    r => {
-        enable.checked = !r.disableTwitter;
-        protocol = r.protocol;
-        redirectType.value = r.twitterRedirectType;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableTwitter", "protocol", "twitterRedirectType"], r => {
+	enable.checked = !r.disableTwitter
+	protocol = r.protocol
+	redirectType.value = r.twitterRedirectType
+	changeProtocolSettings()
+})
 
 twitter.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableTwitter: !enable.checked,
-        twitterRedirectType: redirectType.value,
-    });
+	browser.storage.local.set({
+		disableTwitter: !enable.checked,
+		twitterRedirectType: redirectType.value,
+	})
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++){
-        utils.processDefaultCustomInstances('twitter', frontends[i], protocols[x], document)
-    }
-    utils.latency('twitter', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("twitter", frontends[i], protocols[x], document)
+	}
+	utils.latency("twitter", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/wikipedia.js b/src/pages/options/widgets/wikipedia.js
index 09b21d02..9d06488b 100644
--- a/src/pages/options/widgets/wikipedia.js
+++ b/src/pages/options/widgets/wikipedia.js
@@ -1,12 +1,12 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
 // UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
 
 const frontends = new Array("wikiless")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-const enable = document.getElementById("wikipedia-enable");
-const wikipedia = document.getElementById('wikipedia_page');
+const enable = document.getElementById("wikipedia-enable")
+const wikipedia = document.getElementById("wikipedia_page")
 //const frontend = document.getElementById("wikipedia-frontend");
 let protocol
 
@@ -24,38 +24,32 @@ function changeFrontendsSettings() {
 */
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableWikipedia",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableWikipedia;
-        protocol = r.protocol;
-        changeProtocolSettings();
-    }
-)
+browser.storage.local.get(["disableWikipedia", "protocol"], r => {
+	enable.checked = !r.disableWikipedia
+	protocol = r.protocol
+	changeProtocolSettings()
+})
 
 wikipedia.addEventListener("change", () => {
-    browser.storage.local.set({ disableWikipedia: !enable.checked })
+	browser.storage.local.set({ disableWikipedia: !enable.checked })
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++) {
-        utils.processDefaultCustomInstances('wikipedia', frontends[i], protocols[x], document)
-    }
-    utils.latency('wikipedia', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("wikipedia", frontends[i], protocols[x], document)
+	}
+	utils.latency("wikipedia", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/youtube.js b/src/pages/options/widgets/youtube.js
index 76b673bd..065a195b 100644
--- a/src/pages/options/widgets/youtube.js
+++ b/src/pages/options/widgets/youtube.js
@@ -1,101 +1,92 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
-const frontends = new Array("invidious", "piped", "pipedMaterial")
+const frontends = new Array("invidious", "piped", "pipedMaterial", "cloudtube")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 const singleInstanceFrontends = new Array("freetube", "yatte")
 
-const enable = document.getElementById("youtube-enable");
-const youtube = document.getElementById('youtube_page');
-const youtubeEmbedFrontend = document.getElementById("youtube-embed_frontend");
-const onlyEmbeddedVideo = document.getElementById("youtube-redirect_type");
-const embeddedFrontendDiv = document.getElementById("youtube-embedded_frontend");
-const frontend = document.getElementById("youtube-frontend");
+const enable = document.getElementById("youtube-enable")
+const youtube = document.getElementById("youtube_page")
+const youtubeEmbedFrontend = document.getElementById("youtube-embed_frontend")
+const onlyEmbeddedVideo = document.getElementById("youtube-redirect_type")
+const embeddedFrontendDiv = document.getElementById("youtube-embedded_frontend")
+const frontend = document.getElementById("youtube-frontend")
 let protocol
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
 function changeEmbedFrontendsSettings() {
-    if (embeddedFrontendDiv.style.display == 'block') {
-        for (let i = 0; i < frontends.length; i++) {
-            const embeddedFrontendDiv = document.getElementById(frontends[i])
-            if (frontends[i] == youtubeEmbedFrontend.value) {
-                embeddedFrontendDiv.style.display = 'block'
-            } else {
-                embeddedFrontendDiv.style.display = 'none'
-            }
-        }
-    }
+	if (embeddedFrontendDiv.style.display == "block") {
+		for (let i = 0; i < frontends.length; i++) {
+			const embeddedFrontendDiv = document.getElementById(frontends[i])
+			if (frontends[i] == youtubeEmbedFrontend.value) {
+				embeddedFrontendDiv.style.display = "block"
+			} else {
+				embeddedFrontendDiv.style.display = "none"
+			}
+		}
+	}
 }
 
 function changeFrontendsSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        if (frontends[i] == frontend.value) {
-            frontendDiv.style.display = 'block'
-        } else {
-            frontendDiv.style.display = 'none'
-        }
-    }
-    let singleInstanceFrontend = false
-    for (let i = 0; i < singleInstanceFrontends.length; i++) {
-        if (singleInstanceFrontends[i] == frontend.value) {
-            singleInstanceFrontend = true
-        }
-    }
-    if (singleInstanceFrontend == true) {
-        embeddedFrontendDiv.style.display = 'block'
-    } else {
-        embeddedFrontendDiv.style.display = 'none'
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
+	let singleInstanceFrontend = false
+	for (let i = 0; i < singleInstanceFrontends.length; i++) {
+		if (singleInstanceFrontends[i] == frontend.value) {
+			singleInstanceFrontend = true
+		}
+	}
+	if (singleInstanceFrontend == true) {
+		embeddedFrontendDiv.style.display = "block"
+	} else {
+		embeddedFrontendDiv.style.display = "none"
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableYoutube",
-        "onlyEmbeddedVideo",
-        "youtubeRedirects",
-        "youtubeFrontend",
+browser.storage.local.get(["disableYoutube", "onlyEmbeddedVideo", "youtubeRedirects", "youtubeFrontend", "youtubeEmbedFrontend", "protocol"], r => {
+	enable.checked = !r.disableYoutube
+	onlyEmbeddedVideo.value = r.onlyEmbeddedVideo
+	youtubeEmbedFrontend.value = r.youtubeEmbedFrontend
+	frontend.value = r.youtubeFrontend
+	protocol = r.protocol
 
-        "youtubeEmbedFrontend",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableYoutube;
-        onlyEmbeddedVideo.value = r.onlyEmbeddedVideo;
-        frontend.value = r.youtubeFrontend;
-        protocol = r.protocol;
-
-        changeFrontendsSettings();
-        changeProtocolSettings();
-        changeEmbedFrontendsSettings();
-    }
-);
+	changeFrontendsSettings()
+	changeProtocolSettings()
+	changeEmbedFrontendsSettings()
+})
 
 youtube.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableYoutube: !enable.checked,
-        youtubeEmbedFrontend: youtubeEmbedFrontend.value,
-        onlyEmbeddedVideo: onlyEmbeddedVideo.value
-    })
-    changeFrontendsSettings();
-    changeEmbedFrontendsSettings();
+	browser.storage.local.set({
+		disableYoutube: !enable.checked,
+		youtubeEmbedFrontend: youtubeEmbedFrontend.value,
+		youtubeFrontend: frontend.value,
+		onlyEmbeddedVideo: onlyEmbeddedVideo.value,
+	})
+	changeFrontendsSettings()
+	changeEmbedFrontendsSettings()
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++) {
-        utils.processDefaultCustomInstances('youtube', frontends[i], protocols[x], document)
-    }
-    utils.latency('youtube', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("youtube", frontends[i], protocols[x], document)
+	}
+	utils.latency("youtube", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/youtube.pug b/src/pages/options/widgets/youtube.pug
index a7832d4c..33a43c34 100644
--- a/src/pages/options/widgets/youtube.pug
+++ b/src/pages/options/widgets/youtube.pug
@@ -12,6 +12,7 @@ section#youtube_page.option-block
             option(value="invidious") Invidious
             option(value="piped") Piped
             option(value="pipedMaterial") Piped-Material
+            option(value="cloudtube") CloudTube
             option(value="freetube") FreeTube
             option(value="yatte") Yattee
 
@@ -22,6 +23,7 @@ section#youtube_page.option-block
                 option(value="invidious") Invidious
                 option(value="piped") Piped
                 option(value="pipedMaterial") Piped-Material
+                option(value="cloudtube") CloudTube
 
     .some-block.option-block
         h4(data-localise="__MSG_redirectType__") Redirect Type
@@ -81,4 +83,21 @@ section#youtube_page.option-block
             include ../../widgets/instances.pug
             +instances('http://piped-material.loki')
 
+    #cloudtube
+        hr
+        .normal
+            include ../../widgets/instances.pug
+            +instances('https://cloudtube.com')
+            include ../../widgets/latency.pug
+            +latency('cloudtube')
+        .tor
+            +instances('http://cloudtube.onion')
+            include ../../widgets/instances.pug
+        .i2p
+            include ../../widgets/instances.pug
+            +instances('http://cloudtube.i2p')
+        .loki
+            include ../../widgets/instances.pug
+            +instances('http://cloudtube.loki')
+
     script(type="module" src="./widgets/youtube.js")
diff --git a/src/pages/options/widgets/youtubeMusic.js b/src/pages/options/widgets/youtubeMusic.js
index 4d33c1fa..ad51ce7c 100644
--- a/src/pages/options/widgets/youtubeMusic.js
+++ b/src/pages/options/widgets/youtubeMusic.js
@@ -1,61 +1,57 @@
-import utils from "../../../assets/javascripts/utils.js";
+import utils from "../../../assets/javascripts/utils.js"
 
-// UNCOMMENT ALL COMMENTS ONCE OTHER FRONTENDS EXIST
-
-const frontends = new Array("beatbump")
+const frontends = new Array("beatbump", "hyperpipe")
 const protocols = new Array("normal", "tor", "i2p", "loki")
 
-let enable = document.getElementById("youtubeMusic-enable");
-const youtubeMusic = document.getElementById('youtubeMusic_page');
-//const frontend = document.getElementById("youtubeMusic-frontend");
+let enable = document.getElementById("youtubeMusic-enable")
+const youtubeMusic = document.getElementById("youtubeMusic_page")
+const frontend = document.getElementById("youtubeMusic-frontend")
 let protocol
 
-/*
 function changeFrontendsSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        if (frontends[i] == frontend.value) {
-            frontendDiv.style.display = 'block'
-        } else {
-            frontendDiv.style.display = 'none'
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		if (frontends[i] == frontend.value) {
+			frontendDiv.style.display = "block"
+		} else {
+			frontendDiv.style.display = "none"
+		}
+	}
 }
-*/
 
 function changeProtocolSettings() {
-    for (let i = 0; i < frontends.length; i++) {
-        const frontendDiv = document.getElementById(frontends[i])
-        for (let x = 0; x < protocols.length; x++) {
-            const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
-            if (protocols[x] == protocol) {
-                protocolDiv.style.display = 'block'
-            } else {
-                protocolDiv.style.display = 'none'
-            }
-        }
-    }
+	for (let i = 0; i < frontends.length; i++) {
+		const frontendDiv = document.getElementById(frontends[i])
+		for (let x = 0; x < protocols.length; x++) {
+			const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+			if (protocols[x] == protocol) {
+				protocolDiv.style.display = "block"
+			} else {
+				protocolDiv.style.display = "none"
+			}
+		}
+	}
 }
 
-browser.storage.local.get(
-    [
-        "disableYoutubeMusic",
-        "protocol"
-    ],
-    r => {
-        enable.checked = !r.disableYoutubeMusic
-        protocol = r.protocol
-        changeProtocolSettings()
-    }
-);
+browser.storage.local.get(["disableYoutubeMusic", "youtubeMusicFrontend", "protocol"], r => {
+	enable.checked = !r.disableYoutubeMusic
+	frontend.value = r.youtubeMusicFrontend
+	protocol = r.protocol
+	changeFrontendsSettings()
+	changeProtocolSettings()
+})
 
 youtubeMusic.addEventListener("change", () => {
-    browser.storage.local.set({ disableYoutubeMusic: !enable.checked })
+	browser.storage.local.set({
+		disableYoutubeMusic: !enable.checked,
+		youtubeMusicFrontend: frontend.value,
+	})
+	changeFrontendsSettings()
 })
 
 for (let i = 0; i < frontends.length; i++) {
-    for (let x = 0; x < protocols.length; x++) {
-        utils.processDefaultCustomInstances('youtubeMusic', frontends[i], protocols[x], document)
-    }
-    utils.latency('youtubeMusic', frontends[i], document, location)
+	for (let x = 0; x < protocols.length; x++) {
+		utils.processDefaultCustomInstances("youtubeMusic", frontends[i], protocols[x], document)
+	}
+	utils.latency("youtubeMusic", frontends[i], document, location)
 }
diff --git a/src/pages/options/widgets/youtubeMusic.pug b/src/pages/options/widgets/youtubeMusic.pug
index f307ae9a..bcba3d2d 100644
--- a/src/pages/options/widgets/youtubeMusic.pug
+++ b/src/pages/options/widgets/youtubeMusic.pug
@@ -6,11 +6,17 @@ section#youtubeMusic_page.option-block
         h4(data-localise="__MSG_enable__") Enable
         input#youtubeMusic-enable(type="checkbox")
 
+    .some-block.option-block
+        h4(data-localise="__MSG_frontend__") Frontend
+        select#youtubeMusic-frontend
+            option(value="beatbump") Beatbump
+            option(value="hyperpipe") Hyperpipe
+
     #beatbump
         hr
         .normal
             include ../../widgets/instances.pug
-            +instances('https://beatbump.wewe')
+            +instances('https://beatbump.org')
             include ../../widgets/latency.pug
             +latency('beatbump')
         .tor
@@ -23,4 +29,21 @@ section#youtubeMusic_page.option-block
             include ../../widgets/instances.pug
             +instances('http://beatbump.loki')
 
+    #hyperpipe
+        hr
+        .normal
+            include ../../widgets/instances.pug
+            +instances('https://hyperpipe.org')
+            include ../../widgets/latency.pug
+            +latency('hyperpipe')
+        .tor
+            +instances('http://hyperpipe.onion')
+            include ../../widgets/instances.pug
+        .i2p
+            include ../../widgets/instances.pug
+            +instances('http://hyperpipe.i2p')
+        .loki
+            include ../../widgets/instances.pug
+            +instances('http://hyperpipe.loki')
+
     script(type="module" src="./widgets/youtubeMusic.js")