Optimizing and fixing bugs #286

31 files changed, 352 insertions, 409 deletions

diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js
index c810fb8a..6ca1e190 100644
--- a/src/pages/options/widgets/general.js
+++ b/src/pages/options/widgets/general.js
@@ -65,7 +65,7 @@ importSettingsElement.addEventListener("change",
         "cloudflareList" in data &&
         "imgurRedirects" in data
       ) {
-        console.log('importing a valid file...');
+        await browser.storage.local.clear();
         await browser.storage.local.set({ ...data })
         location.reload();
       } else
diff --git a/src/pages/options/widgets/imgur.js b/src/pages/options/widgets/imgur.js
index 036f33ed..ffb28405 100644
--- a/src/pages/options/widgets/imgur.js
+++ b/src/pages/options/widgets/imgur.js
@@ -1,32 +1,25 @@
-import imgurHelper from "../../../assets/javascripts/imgur.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableImgurElement = document.getElementById("disable-imgur");
-let protocolElement = document.getElementById("protocol")
+const enable = document.getElementById("imgur-enable");
+const protocol = document.getElementById("imgur-protocol")
+const imgur = document.getElementById('imgur_page');
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableImgur: !disableImgurElement.checked,
-        imgurProtocol: protocolElement.value,
-    });
-    changeProtocolSettings(protocolElement.value);
-})
+const normalDiv = imgur.getElementsByClassName("normal")[0];
+const torDiv = imgur.getElementsByClassName("tor")[0];
+const i2pDiv = imgur.getElementsByClassName("i2p")[0];
 
-function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    let i2pDiv = document.getElementsByClassName("i2p")[0];
-    if (protocol == 'normal') {
+function changeProtocolSettings() {
+    if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
         i2pDiv.style.display = 'none';
     }
-    else if (protocol == 'tor') {
+    else if (protocol.value == 'tor') {
         normalDiv.style.display = 'none';
         torDiv.style.display = 'block';
         i2pDiv.style.display = 'none';
     }
-    else if (protocol == 'i2p') {
+    else if (protocol.value == 'i2p') {
         normalDiv.style.display = 'none';
         torDiv.style.display = 'none';
         i2pDiv.style.display = 'block';
@@ -39,12 +32,20 @@ browser.storage.local.get(
         "imgurProtocol",
     ],
     r => {
-        disableImgurElement.checked = !r.disableImgur;
-        protocolElement.value = r.imgurProtocol;
-        changeProtocolSettings(r.imgurProtocol);
+        enable.checked = !r.disableImgur;
+        protocol.value = r.imgurProtocol;
+        changeProtocolSettings();
     }
 );
 
+imgur.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableImgur: !enable.checked,
+        imgurProtocol: protocol.value,
+    });
+})
+
 utils.processDefaultCustomInstances('imgur', 'rimgo', 'normal', document);
 utils.processDefaultCustomInstances('imgur', 'rimgo', 'tor', document);
 utils.processDefaultCustomInstances('imgur', 'rimgo', 'i2p', document);
diff --git a/src/pages/options/widgets/imgur.pug b/src/pages/options/widgets/imgur.pug
index 45104cd3..5e514341 100644
--- a/src/pages/options/widgets/imgur.pug
+++ b/src/pages/options/widgets/imgur.pug
@@ -5,11 +5,11 @@ section#imgur_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-imgur(type="checkbox")
+        input#imgur-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#imgur-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
             option(value="i2p" data-localise="__MSG_i2p__") I2P
@@ -20,7 +20,7 @@ section#imgur_page.option-block
             include ../../widgets/instances.pug
             +instances('https://rimgo.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('rimgo')
         .tor
             include ../../widgets/instances.pug
             +instances('https://rimgo.onion')
diff --git a/src/pages/options/widgets/instagram.js b/src/pages/options/widgets/instagram.js
index f04fc8c5..97b237c3 100644
--- a/src/pages/options/widgets/instagram.js
+++ b/src/pages/options/widgets/instagram.js
@@ -1,20 +1,13 @@
-import instagramHelper from "../../../assets/javascripts/instagram.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-const disable = document.getElementById("disable-bibliogram");
-const protocol = document.getElementById("protocol");
+const enable = document.getElementById("instagram-enable");
+const protocol = document.getElementById("instagram-protocol");
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableInstagram: disable.checked,
-        instagramProtocol: protocol.value,
-    })
-    changeProtocolSettings();
-})
+const instagram = document.getElementById('instagram_page')
+const normalDiv = instagram.getElementsByClassName("normal")[0];
+const torDiv = instagram.getElementsByClassName("tor")[0];
 
 function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -31,10 +24,20 @@ browser.storage.local.get(
         "instagramProtocol"
     ],
     r => {
-        disable.checked = !r.disableInstagram;
+        enable.checked = !r.disableInstagram;
         protocol.value = r.instagramProtocol;
         changeProtocolSettings();
+    }
+)
+
+instagram.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableInstagram: enable.checked,
+        instagramProtocol: protocol.value,
     })
+})
+
 
 utils.processDefaultCustomInstances('instagram', 'bibliogram', 'normal', document);
 utils.processDefaultCustomInstances('instagram', 'bibliogram', 'tor', document);
diff --git a/src/pages/options/widgets/instagram.pug b/src/pages/options/widgets/instagram.pug
index e5698b41..47cfcdbc 100644
--- a/src/pages/options/widgets/instagram.pug
+++ b/src/pages/options/widgets/instagram.pug
@@ -5,11 +5,11 @@ section#instagram_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-bibliogram(type="checkbox")
+        input#instagram-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#instagram-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -19,9 +19,8 @@ section#instagram_page.option-block
             include ../../widgets/instances.pug
             +instances('https://bibliogram.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('bibliogram')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://bibliogram.onion')
 
     script(type="module" src="./widgets/instagram.js")
\ No newline at end of file
diff --git a/src/pages/options/widgets/lbry.js b/src/pages/options/widgets/lbry.js
index 2aac362f..131aa566 100644
--- a/src/pages/options/widgets/lbry.js
+++ b/src/pages/options/widgets/lbry.js
@@ -1,20 +1,13 @@
-import lbryHelper from "../../../assets/javascripts/lbry.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-lbry");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("lbry-enable");
+const protocol = document.getElementById("lbry-protocol")
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableLbryTargets: !lbryHelper.checked,
-        lbryTargetsProtocol: protocol.value,
-    });
-    changeProtocolSettings()
-})
+const lbry = document.getElementById('lbry_page');
+const normalDiv = lbry.getElementsByClassName("normal")[0];
+const torDiv = lbry.getElementsByClassName("tor")[0];
 
 function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -31,12 +24,20 @@ browser.storage.local.get(
         "lbryTargetsProtocol"
     ],
     r => {
-        disable.checked = !r.disableLbryTargets;
+        enable.checked = !r.disableLbryTargets;
         protocol.value = r.lbryTargetsProtocol;
         changeProtocolSettings();
     }
 )
 
+lbry.addEventListener("change", () => {
+    changeProtocolSettings()
+    browser.storage.local.set({
+        disableLbryTargets: !enable.checked,
+        lbryTargetsProtocol: protocol.value,
+    });
+})
+
 utils.processDefaultCustomInstances('lbryTargets', 'librarian', 'normal', document);
 utils.processDefaultCustomInstances('lbryTargets', 'librarian', 'tor', document);
 
diff --git a/src/pages/options/widgets/lbry.pug b/src/pages/options/widgets/lbry.pug
index 21c4f497..4e88d2bf 100644
--- a/src/pages/options/widgets/lbry.pug
+++ b/src/pages/options/widgets/lbry.pug
@@ -4,11 +4,11 @@ section#lbry_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-lbry(type="checkbox")
+        input#lbry-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#lbry-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#lbry_page.option-block
             include ../../widgets/instances.pug
             +instances('https://librarian.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('librarian')
         .tor
             include ../../widgets/instances.pug
             +instances('https://librarian.onion')
diff --git a/src/pages/options/widgets/maps.js b/src/pages/options/widgets/maps.js
index ddfa8345..b9825fb0 100644
--- a/src/pages/options/widgets/maps.js
+++ b/src/pages/options/widgets/maps.js
@@ -1,18 +1,11 @@
-import mapsHelper from "../../../assets/javascripts/maps.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-const disable = document.getElementById("disable-osm");
+const enable = document.getElementById("maps-enable");
 const frontend = document.getElementById("maps-frontend");
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableMaps: !disable.checked,
-        mapsFrontend: frontend.value,
-    })
-    changeFrontendsSettings();
-})
-
+const maps = document.getElementById('maps_page');
 const facilDiv = document.getElementById("facil")
+
 function changeFrontendsSettings() {
     if (frontend.value == 'facil') facilDiv.style.display = 'block';
     else if (frontend.value == 'osm') facilDiv.style.display = 'none';
@@ -24,9 +17,18 @@ browser.storage.local.get(
         "mapsFrontend",
     ],
     r => {
-        disable.checked = !r.disableMaps;
+        enable.checked = !r.disableMaps;
         frontend.value = r.mapsFrontend;
         changeFrontendsSettings();
     }
 )
+
+maps.addEventListener("change", () => {
+    changeFrontendsSettings();
+    browser.storage.local.set({
+        disableMaps: !enable.checked,
+        mapsFrontend: frontend.value,
+    })
+})
+
 utils.processDefaultCustomInstances('maps', 'facil', 'normal', document);
\ No newline at end of file
diff --git a/src/pages/options/widgets/maps.pug b/src/pages/options/widgets/maps.pug
index b36c3521..42c81d8e 100644
--- a/src/pages/options/widgets/maps.pug
+++ b/src/pages/options/widgets/maps.pug
@@ -4,7 +4,7 @@ section#maps_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-osm(type="checkbox")
+        input#maps-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -18,6 +18,6 @@ section#maps_page.option-block
             include ../../widgets/instances.pug
             +instances('https://facilmap.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('facilmap')
 
     script(type="module" src="./widgets/maps.js")
\ No newline at end of file
diff --git a/src/pages/options/widgets/medium.js b/src/pages/options/widgets/medium.js
index 085d6804..43c2700d 100644
--- a/src/pages/options/widgets/medium.js
+++ b/src/pages/options/widgets/medium.js
@@ -1,8 +1,29 @@
-import mediumHelper from "../../../assets/javascripts/medium.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-medium");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("medium-enable");
+const protocol = document.getElementById("medium-protocol")
+const medium = document.getElementById('medium_page');
+
+function changeProtocolSettings() {
+    const normalDiv = document.getElementsByClassName("normal")[0];
+    const torDiv = document.getElementsByClassName("tor")[0];
+    if (protocol.value == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol.value == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
+
+medium.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableMedium: !enable.checked,
+        mediumProtocol: protocol.value,
+    })
+})
 
 browser.storage.local.get(
     [
@@ -10,33 +31,12 @@ browser.storage.local.get(
         "mediumProtocol"
     ],
     r => {
-        disable.checked = !r.disableMedium;
+        enable.checked = !r.disableMedium;
         protocol.value = r.mediumProtocol;
         changeProtocolSettings();
     }
 )
+
 utils.processDefaultCustomInstances('medium', 'scribe', 'normal', document);
 utils.processDefaultCustomInstances('medium', 'scribe', 'tor', document);
-
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableMedium: !disable.checked,
-        mediumProtocol: protocol.value,
-    })
-    changeProtocolSettings();
-})
-
-function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    if (protocol.value == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol.value == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
-
 utils.latency('medium', 'scribe', document, location)
\ No newline at end of file
diff --git a/src/pages/options/widgets/medium.pug b/src/pages/options/widgets/medium.pug
index 10c18f6d..f0a1ad55 100644
--- a/src/pages/options/widgets/medium.pug
+++ b/src/pages/options/widgets/medium.pug
@@ -4,11 +4,11 @@ section#medium_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-medium(type="checkbox")
+        input#medium-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#medium-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#medium_page.option-block
             include ../../widgets/instances.pug
             +instances('https://scribe.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('scribe')
         .tor
             include ../../widgets/instances.pug
             +instances('https://scribe.onion')
diff --git a/src/pages/options/widgets/peertube.js b/src/pages/options/widgets/peertube.js
index f2cede89..01b4f6b5 100644
--- a/src/pages/options/widgets/peertube.js
+++ b/src/pages/options/widgets/peertube.js
@@ -1,40 +1,42 @@
-import peertubeHelper from "../../../assets/javascripts/peertube.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-peertube");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("peertube-enable");
+const protocol = document.getElementById("peertube-protocol");
+const peertube = document.getElementById('peertube_page');
+
+function changeProtocolSettings() {
+    const normalDiv = peertube.getElementsByClassName("normal")[0];
+    const torDiv = peertube.getElementsByClassName("tor")[0];
+    if (protocol.value == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol.value == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
+
 browser.storage.local.get(
     [
         "disablePeertubeTargets",
         "peertubeTargetsProtocol"
     ],
     r => {
-        disable.checked = !r.disablePeertubeTargets;
+        enable.checked = !r.disablePeertubeTargets;
         protocol.value = r.peertubeTargetsProtocol;
         changeProtocolSettings();
     }
 )
-utils.processDefaultCustomInstances('peertube', 'simpleertube', 'normal', document);
-utils.processDefaultCustomInstances('peertube', 'simpleertube', 'tor', document);
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disablePeertubeTargets: !disable.checked,
+peertube.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disablePeertubeTargets: !enable.checked,
         peertubeTargetsProtocol: protocol.value
     })
-    changeProtocolSettings();
 })
 
-function changeProtocolSettings() {
-    const normalDiv = document.getElementsByClassName("normal")[0];
-    const torDiv = document.getElementsByClassName("tor")[0];
-    if (protocol.value == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol.value == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
+utils.processDefaultCustomInstances('peertube', 'simpleertube', 'normal', document);
+utils.processDefaultCustomInstances('peertube', 'simpleertube', 'tor', document);
 utils.latency('peertube', 'simpleertube', document, location)
\ No newline at end of file
diff --git a/src/pages/options/widgets/peertube.pug b/src/pages/options/widgets/peertube.pug
index 496fb2df..0beec59c 100644
--- a/src/pages/options/widgets/peertube.pug
+++ b/src/pages/options/widgets/peertube.pug
@@ -4,11 +4,11 @@ section#peertube_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-peertube(type="checkbox")
+        input#peertube-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#peertube-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#peertube_page.option-block
             include ../../widgets/instances.pug
             +instances('https://simpleertube.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('simpleertube')
         .tor
             include ../../widgets/instances.pug
             +instances('https://simpleertube.onion')
diff --git a/src/pages/options/widgets/reddit.js b/src/pages/options/widgets/reddit.js
index da4221aa..9e4dfedd 100644
--- a/src/pages/options/widgets/reddit.js
+++ b/src/pages/options/widgets/reddit.js
@@ -1,45 +1,18 @@
-import redditHelper from "../../../assets/javascripts/reddit.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let libredditDivElement = document.getElementById("libreddit")
-let tedditDivElement = document.getElementById("teddit")
+const libredditDivElement = document.getElementById("libreddit")
+const tedditDivElement = document.getElementById("teddit")
 
-let disableRedditElement = document.getElementById("disable-reddit");
-let frontend = document.getElementById("reddit-frontend");
-let protocol = document.getElementById("protocol")
-
-document.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableReddit: !disableRedditElement.checked,
-        redditProtocol: protocol.value,
-        redditFrontend: frontend.value,
-    });
-    changeFrontendsSettings();
-    changeProtocolSettings();
-})
-
-const libredditForm = libredditDivElement.getElementsByTagName('form')[0];
-const libredditCookies = libredditForm.getElementsByTagName('input')[0];
-libredditForm.addEventListener('submit', async event => {
-    event.preventDefault();
-    const url = new URL(libredditCookies.value);
-    redditHelper.initLibredditCookies(url);
-});
-
-const tedditForm = tedditDivElement.getElementsByTagName('form')[0];
-const tedditCookies = tedditForm.getElementsByTagName('input')[0];
-tedditForm.addEventListener('submit', async event => {
-    event.preventDefault();
-    const url = new URL(tedditCookies.value);
-    redditHelper.initTedditCookies(url);
-});
+const enable = document.getElementById("reddit-enable");
+const frontend = document.getElementById("reddit-frontend");
+const protocol = document.getElementById("reddit-protocol");
+const reddit = document.getElementById('reddit_page');
 
 function changeProtocolSettings() {
-    let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
-    let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
-
-    let normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
-    let torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
+    const normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
+    const torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
+    const normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
+    const torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalLibredditDiv.style.display = 'block';
         normalTedditDiv.style.display = 'block';
@@ -53,6 +26,7 @@ function changeProtocolSettings() {
         torLibredditDiv.style.display = 'block';
     }
 }
+
 function changeFrontendsSettings() {
     if (frontend.value == 'libreddit') {
         libredditDivElement.style.display = 'block';
@@ -69,11 +43,9 @@ browser.storage.local.get(
         "disableReddit",
         "redditProtocol",
         "redditFrontend",
-
-        "enableLibredditCustomSettings",
     ],
     r => {
-        disableRedditElement.checked = !r.disableReddit
+        enable.checked = !r.disableReddit
         protocol.value = r.redditProtocol
         frontend.value = r.redditFrontend
         changeFrontendsSettings();
@@ -81,6 +53,16 @@ browser.storage.local.get(
     }
 )
 
+reddit.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableReddit: !enable.checked,
+        redditProtocol: protocol.value,
+        redditFrontend: frontend.value,
+    });
+    changeFrontendsSettings();
+    changeProtocolSettings();
+})
+
 utils.processDefaultCustomInstances('reddit', 'libreddit', 'normal', document);
 utils.processDefaultCustomInstances('reddit', 'libreddit', 'tor', document);
 utils.processDefaultCustomInstances('reddit', 'teddit', 'normal', document);
diff --git a/src/pages/options/widgets/reddit.pug b/src/pages/options/widgets/reddit.pug
index ae72b31f..74b8d82e 100644
--- a/src/pages/options/widgets/reddit.pug
+++ b/src/pages/options/widgets/reddit.pug
@@ -4,7 +4,7 @@ section#reddit_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-reddit(type="checkbox")
+        input#reddit-enable(type="checkbox")
 
     .some-block.option-block
         h4#frontend(data-localise="__MSG_frontend__") Frontend
@@ -14,7 +14,7 @@ section#reddit_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#reddit-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
diff --git a/src/pages/options/widgets/search.js b/src/pages/options/widgets/search.js
index 2506279a..62b8bd78 100644
--- a/src/pages/options/widgets/search.js
+++ b/src/pages/options/widgets/search.js
@@ -1,55 +1,15 @@
-import searchHelper from "../../../assets/javascripts/search.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let searxDiv = document.getElementById("searx");
-let searxngDiv = document.getElementById("searxng");
-let whoogleDiv = document.getElementById("whoogle");
-
-let disable = document.getElementById("disable-search");
-let frontend = document.getElementById("search-frontend");
-let protocol = document.getElementById("protocol")
-
-const searxngForm = searxngDiv.getElementsByTagName('form')[0];
-const searxngCookies = searxngForm.getElementsByTagName('input')[0];
-searxngForm.addEventListener('submit', async event => {
-  event.preventDefault();
-  const url = new URL(searxngCookies.value);
-  searchHelper.initSearxngCookies(url);
-});
-
-const searxForm = searxDiv.getElementsByTagName('form')[0];
-const searxCookies = searxForm.getElementsByTagName('input')[0];
-searxForm.addEventListener('submit', async event => {
-  event.preventDefault();
-  const url = new URL(searxCookies.value);
-  searchHelper.initSearxCookies(url);
-});
+const searxDiv = document.getElementById("searx");
+const searxngDiv = document.getElementById("searxng");
+const whoogleDiv = document.getElementById("whoogle");
 
-browser.storage.local.get(
-  [
-    "disableSearch",
-    "searchFrontend",
-    "searchProtocol",
-  ],
-  r => {
-    disable.checked = !r.disableSearch;
-    frontend.value = r.searchFrontend;
-    protocol.value = r.searchProtocol;
+const enable = document.getElementById("search-enable");
+const frontend = document.getElementById("search-frontend");
+const protocol = document.getElementById("search-protocol");
 
-    changeFrontendsSettings();
-    changeProtocolSettings();
-  }
-);
+const search = document.getElementById('search_page');
 
-document.addEventListener("change", async () => {
-  await browser.storage.local.set({
-    disableSearch: !disable.checked,
-    searchFrontend: frontend.value,
-    searchProtocol: protocol.value,
-  });
-  changeFrontendsSettings(frontend.value);
-  changeProtocolSettings(protocol.value);
-})
 
 function changeFrontendsSettings() {
   let SearxWhoogleElement = document.getElementById("searx-whoogle");
@@ -74,17 +34,17 @@ function changeFrontendsSettings() {
 }
 
 function changeProtocolSettings() {
-  let normalsearxDiv = searxDiv.getElementsByClassName("normal")[0];
-  let torsearxDiv = searxDiv.getElementsByClassName("tor")[0];
-  let i2psearxDiv = searxDiv.getElementsByClassName("i2p")[0];
+  const normalsearxDiv = searxDiv.getElementsByClassName("normal")[0];
+  const torsearxDiv = searxDiv.getElementsByClassName("tor")[0];
+  const i2psearxDiv = searxDiv.getElementsByClassName("i2p")[0];
 
-  let normalsearxngDiv = searxngDiv.getElementsByClassName("normal")[0];
-  let torsearxngDiv = searxngDiv.getElementsByClassName("tor")[0];
-  let i2psearxngDiv = searxngDiv.getElementsByClassName("i2p")[0];
+  const normalsearxngDiv = searxngDiv.getElementsByClassName("normal")[0];
+  const torsearxngDiv = searxngDiv.getElementsByClassName("tor")[0];
+  const i2psearxngDiv = searxngDiv.getElementsByClassName("i2p")[0];
 
-  let normalwhoogleDiv = whoogleDiv.getElementsByClassName("normal")[0];
-  let torwhoogleDiv = whoogleDiv.getElementsByClassName("tor")[0];
-  let i2pwhoogleDiv = whoogleDiv.getElementsByClassName("i2p")[0];
+  const normalwhoogleDiv = whoogleDiv.getElementsByClassName("normal")[0];
+  const torwhoogleDiv = whoogleDiv.getElementsByClassName("tor")[0];
+  const i2pwhoogleDiv = whoogleDiv.getElementsByClassName("i2p")[0];
 
   if (protocol.value == 'normal') {
     normalsearxDiv.style.display = 'block';
@@ -127,6 +87,32 @@ function changeProtocolSettings() {
   }
 }
 
+browser.storage.local.get(
+  [
+    "disableSearch",
+    "searchFrontend",
+    "searchProtocol",
+  ],
+  r => {
+    enable.checked = !r.disableSearch;
+    frontend.value = r.searchFrontend;
+    protocol.value = r.searchProtocol;
+
+    changeFrontendsSettings();
+    changeProtocolSettings();
+  }
+);
+
+search.addEventListener("change", () => {
+  browser.storage.local.set({
+    disableSearch: !enable.checked,
+    searchFrontend: frontend.value,
+    searchProtocol: protocol.value,
+  });
+  changeFrontendsSettings(frontend.value);
+  changeProtocolSettings(protocol.value);
+})
+
 utils.processDefaultCustomInstances('search', 'searx', 'normal', document);
 utils.processDefaultCustomInstances('search', 'searx', 'tor', document);
 utils.processDefaultCustomInstances('search', 'searx', 'i2p', document);
diff --git a/src/pages/options/widgets/search.pug b/src/pages/options/widgets/search.pug
index feea4b0d..7e16e74f 100644
--- a/src/pages/options/widgets/search.pug
+++ b/src/pages/options/widgets/search.pug
@@ -5,7 +5,7 @@ section#search_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-search(type="checkbox")
+        input#search-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -14,11 +14,10 @@ section#search_page.option-block
             option(value="searx") SearX
             option(value="whoogle") Whoogle
 
-
     #searx-whoogle
         .some-block.option-block
             h4(data-localise="__MSG_protocol__") Protocol
-            select#protocol
+            select#search-protocol
                 option(value="normal" data-localise="__MSG_normal__") Normal
                 option(value="tor" data-localise="__MSG_tor__") Tor
                 option(value="i2p" data-localise="__MSG_i2p__") I2P
diff --git a/src/pages/options/widgets/sendTargets.js b/src/pages/options/widgets/sendTargets.js
index 37e2588e..1cb1e74e 100644
--- a/src/pages/options/widgets/sendTargets.js
+++ b/src/pages/options/widgets/sendTargets.js
@@ -1,8 +1,21 @@
-import sendTargetsHelper from "../../../assets/javascripts/sendTargets.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-sendTargets");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("sendTargets-enable");
+const protocol = document.getElementById("sendTargets-protocol")
+const sendTargets = document.getElementById('sendTargets_page');
+
+function changeProtocolSettings() {
+    let normalDiv = sendTargets.getElementsByClassName("normal")[0];
+    let torDiv = sendTargets.getElementsByClassName("tor")[0];
+    if (protocol.value == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol.value == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
 
 browser.storage.local.get(
     [
@@ -10,33 +23,20 @@ browser.storage.local.get(
         "sendTargetsProtocol",
     ],
     r => {
-        disable.checked = !r.disableSendTarget;
+        enable.checked = !r.disableSendTarget;
         protocol.value = r.sendTargetsProtocol;
         changeProtocolSettings();
     }
 )
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableSendTarget: !disable.checked,
+sendTargets.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableSendTarget: !enable.checked,
         sendTargetsProtocol: protocol.value,
     })
-    changeProtocolSettings();
 })
 
-function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    if (protocol.value == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol.value == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
-
 utils.processDefaultCustomInstances('sendTargets', 'send', 'normal', document);
 utils.processDefaultCustomInstances('sendTargets', 'send', 'tor', document);
 
diff --git a/src/pages/options/widgets/sendTargets.pug b/src/pages/options/widgets/sendTargets.pug
index c4a933d1..5b776b0a 100644
--- a/src/pages/options/widgets/sendTargets.pug
+++ b/src/pages/options/widgets/sendTargets.pug
@@ -4,11 +4,11 @@ section#sendTargets_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-sendTargets(type="checkbox")
+        input#sendTargets-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#sendTargets-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#sendTargets_page.option-block
             include ../../widgets/instances.pug
             +instances('https://send.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('send')
         .tor
             include ../../widgets/instances.pug
             +instances('https://send.onion')
diff --git a/src/pages/options/widgets/tiktok.js b/src/pages/options/widgets/tiktok.js
index 6b5702e1..f4c31832 100644
--- a/src/pages/options/widgets/tiktok.js
+++ b/src/pages/options/widgets/tiktok.js
@@ -1,12 +1,25 @@
-import tiktokHelper from "../../../assets/javascripts/tiktok.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-tiktok");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("tiktok-enable");
+const protocol = document.getElementById("tiktok-protocol")
+const tiktok = document.getElementById('tiktok_page');
 
-document.addEventListener("change", () => {
+function changeProtocolSettings() {
+    let normalDiv = tiktok.getElementsByClassName("normal")[0];
+    let torDiv = tiktok.getElementsByClassName("tor")[0];
+    if (protocol.value == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol.value == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
+
+tiktok.addEventListener("change", () => {
     browser.storage.local.set({
-        disableTiktok: !disable.checked,
+        disableTiktok: !enable.checked,
         tiktokProtocol: protocol.value,
     });
     changeProtocolSettings();
@@ -18,7 +31,7 @@ browser.storage.local.get(
         "tiktokProtocol",
     ],
     r => {
-        disable.checked = !r.disableTiktok;
+        enable.checked = !r.disableTiktok;
         protocol.value = r.tiktokProtocol;
         changeProtocolSettings();
         let normalDiv = document.getElementsByClassName("normal")[0];
@@ -34,19 +47,6 @@ browser.storage.local.get(
     }
 )
 
-function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    if (protocol.value == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol.value == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
-
 utils.processDefaultCustomInstances('tiktok', 'proxiTok', 'normal', document);
 utils.processDefaultCustomInstances('tiktok', 'proxiTok', 'tor', document);
 
diff --git a/src/pages/options/widgets/tiktok.pug b/src/pages/options/widgets/tiktok.pug
index ec55671c..f0cc39c6 100644
--- a/src/pages/options/widgets/tiktok.pug
+++ b/src/pages/options/widgets/tiktok.pug
@@ -4,11 +4,11 @@ section#tiktok_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-tiktok(type="checkbox")
+        input#tiktok-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#tiktok-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
     
@@ -18,7 +18,7 @@ section#tiktok_page.option-block
             include ../../widgets/instances.pug
             +instances('https://proxitok.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('proxiTok')
         .tor
             include ../../widgets/instances.pug
             +instances('https://proxitok.onion')
diff --git a/src/pages/options/widgets/translate.js b/src/pages/options/widgets/translate.js
index 3e1990f4..3e1f53eb 100644
--- a/src/pages/options/widgets/translate.js
+++ b/src/pages/options/widgets/translate.js
@@ -1,12 +1,12 @@
-import translateHelper from "../../../assets/javascripts/translate/translate.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-simplyTranslate");
-let simplyTranslateDiv = document.getElementById("simplyTranslate");
-let lingvaDiv = document.getElementById("lingva");
-let frontend = document.getElementById("translate-frontend");
-let protocol = document.getElementById("protocol");
+const enable = document.getElementById("translate-enable");
+const frontend = document.getElementById("translate-frontend");
+const protocol = document.getElementById("translate-protocol");
+const simplyTranslateDiv = document.getElementById("simplyTranslate");
+const lingvaDiv = document.getElementById("lingva");
 
+const translate = document.getElementById('translate_page');
 
 function changeFrontendsSettings() {
     if (frontend.value == 'simplyTranslate') {
@@ -20,11 +20,11 @@ function changeFrontendsSettings() {
 }
 
 function changeProtocolSettings() {
-    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
-    let torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
+    const normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
+    const torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
 
-    let normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
-    let torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
+    const normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
+    const torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
 
     if (protocol.value == 'normal') {
         normalSimplyTranslateDiv.style.display = 'block';
@@ -47,7 +47,7 @@ browser.storage.local.get(
         "translateProtocol",
     ],
     r => {
-        disable.checked = !r.translateDisable;
+        enable.checked = !r.translateDisable;
         frontend.value = r.translateFrontend;
         protocol.value = r.translateProtocol;
         changeFrontendsSettings();
@@ -55,9 +55,9 @@ browser.storage.local.get(
     }
 );
 
-document.addEventListener("change", () => {
+translate.addEventListener("change", () => {
     browser.storage.local.set({
-        translateDisable: !disable.checked,
+        translateDisable: !enable.checked,
         translateFrontend: frontend.value,
         translateProtocol: protocol.value,
     })
diff --git a/src/pages/options/widgets/translate.pug b/src/pages/options/widgets/translate.pug
index a97a4245..6fc9b38c 100644
--- a/src/pages/options/widgets/translate.pug
+++ b/src/pages/options/widgets/translate.pug
@@ -4,7 +4,7 @@ section#translate_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-simplyTranslate(type="checkbox")
+        input#translate-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -14,7 +14,7 @@ section#translate_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#translate-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
diff --git a/src/pages/options/widgets/twitter.js b/src/pages/options/widgets/twitter.js
index 266fd027..25356733 100644
--- a/src/pages/options/widgets/twitter.js
+++ b/src/pages/options/widgets/twitter.js
@@ -1,18 +1,21 @@
-import twitterHelper from "../../../assets/javascripts/twitter.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-nitter");
-let protocol = document.getElementById("protocol");
+const enable = document.getElementById("twitter-enable");
+const protocol = document.getElementById("twitter-protocol");
+const twitter = document.getElementById('twitter_page');
 
-let nitterDiv = document.getElementById('nitter');
-
-const nitterForm = nitterDiv.getElementsByTagName('form')[0];
-const nitterCookies = nitterForm.getElementsByTagName('input')[0];
-nitterForm.addEventListener('submit', event => {
-  event.preventDefault();
-  const url = new URL(nitterCookies.value);
-  twitterHelper.initNitterCookies(url);
-});
+function changeProtocolSettings() {
+    let normalDiv = twitter.getElementsByClassName("normal")[0];
+    let torDiv = twitter.getElementsByClassName("tor")[0];
+    if (protocol.value == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol.value == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
 
 browser.storage.local.get(
     [
@@ -20,34 +23,21 @@ browser.storage.local.get(
         "twitterProtocol",
     ],
     r => {
-        disable.checked = !r.disableTwitter;
+        enable.checked = !r.disableTwitter;
         protocol.value = r.twitterProtocol;
         changeProtocolSettings();
     }
 )
 
-document.addEventListener("change", () => {
+twitter.addEventListener("change", () => {
     browser.storage.local.set({
-        disableTwitter: !disable.checked,
+        disableTwitter: !enable.checked,
         twitterProtocol: protocol.value,
     });
     changeProtocolSettings();
 })
 
-function changeProtocolSettings() {
-    let normalDiv = nitterDiv.getElementsByClassName("normal")[0];
-    let torDiv = nitterDiv.getElementsByClassName("tor")[0];
-    if (protocol.value == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol.value == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
-
 utils.processDefaultCustomInstances('twitter', 'nitter', 'normal', document);
 utils.processDefaultCustomInstances('twitter', 'nitter', 'tor', document)
 
-utils.latency('twitter', 'nitter', document, location)
\ No newline at end of file
+utils.latency('twitter', 'nitter', document, location, true)
\ No newline at end of file
diff --git a/src/pages/options/widgets/twitter.pug b/src/pages/options/widgets/twitter.pug
index af743dcd..36835e8a 100644
--- a/src/pages/options/widgets/twitter.pug
+++ b/src/pages/options/widgets/twitter.pug
@@ -4,11 +4,11 @@ section#twitter_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-nitter(type="checkbox")
+        input#twitter-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#twitter-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,9 +18,8 @@ section#twitter_page.option-block
             include ../../widgets/instances.pug
             +instances('https://nitter.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('nitter')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://nitter.onion')
 
     script(type="module" src="./widgets/twitter.js")
diff --git a/src/pages/options/widgets/wikipedia.js b/src/pages/options/widgets/wikipedia.js
index 6e847c8d..c9e582be 100644
--- a/src/pages/options/widgets/wikipedia.js
+++ b/src/pages/options/widgets/wikipedia.js
@@ -1,33 +1,13 @@
-import wikipediaHelper from "../../../assets/javascripts/wikipedia.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableWikipediaElement = document.getElementById("disable-wikipedia");
-let protocolElement = document.getElementById("protocol");
-
-browser.storage.local.get(
-    [
-        "disableWikipedia",
-        "wikipediaProtocol",
-    ],
-    r => {
-        disableWikipediaElement.checked = !r.disableWikipedia;
-        protocolElement.value = r.wikipediaProtocol;
-        changeProtocolSettings(r.wikipediaProtocol);
-    }
-)
-
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableWikipedia: !disableWikipediaElement.checked,
-        wikipediaProtocol: protocolElement.value,
-    })
-    changeProtocolSettings(protocolElement.value)
-})
+const enable = document.getElementById("wikipedia-enable");
+const protocolElement = document.getElementById("wikipedia-protocol");
+const wikipedia = document.getElementById('wikipedia_page');
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    let i2pDiv = document.getElementsByClassName("i2p")[0];
+    const normalDiv = wikipedia.getElementsByClassName("normal")[0];
+    const torDiv = wikipedia.getElementsByClassName("tor")[0];
+    const i2pDiv = wikipedia.getElementsByClassName("i2p")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -44,6 +24,27 @@ function changeProtocolSettings(protocol) {
         i2pDiv.style.display = 'block';
     }
 }
+
+browser.storage.local.get(
+    [
+        "disableWikipedia",
+        "wikipediaProtocol",
+    ],
+    r => {
+        enable.checked = !r.disableWikipedia;
+        protocolElement.value = r.wikipediaProtocol;
+        changeProtocolSettings(r.wikipediaProtocol);
+    }
+)
+
+wikipedia.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableWikipedia: !enable.checked,
+        wikipediaProtocol: protocolElement.value,
+    })
+    changeProtocolSettings(protocolElement.value)
+})
+
 utils.processDefaultCustomInstances('wikipedia', 'wikiless', 'normal', document);
 utils.processDefaultCustomInstances('wikipedia', 'wikiless', 'tor', document);
 utils.processDefaultCustomInstances('wikipedia', 'wikiless', 'i2p', document);
diff --git a/src/pages/options/widgets/wikipedia.pug b/src/pages/options/widgets/wikipedia.pug
index 79d1e323..a0315739 100644
--- a/src/pages/options/widgets/wikipedia.pug
+++ b/src/pages/options/widgets/wikipedia.pug
@@ -4,11 +4,11 @@ section#wikipedia_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-wikipedia(type="checkbox")
+        input#wikipedia-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#wikipedia-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
             option(value="i2p" data-localise="__MSG_i2p__") I2P
@@ -19,7 +19,7 @@ section#wikipedia_page.option-block
             include ../../widgets/instances.pug
             +instances('https://wikiless.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('wikiless')
         .tor
             include ../../widgets/instances.pug
             +instances('https://wikiless.onion')
@@ -29,4 +29,3 @@ section#wikipedia_page.option-block
             +instances('https://wikiless.i2p')
 
     script(type="module" src="./widgets/wikipedia.js")
-    
\ No newline at end of file
diff --git a/src/pages/options/widgets/youtube.js b/src/pages/options/widgets/youtube.js
index 423a30c5..26867643 100644
--- a/src/pages/options/widgets/youtube.js
+++ b/src/pages/options/widgets/youtube.js
@@ -1,38 +1,38 @@
 import youtubeHelper from "../../../assets/javascripts/youtube/youtube.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableYoutube = document.getElementById("disable-invidious");
-let youtubeFrontend = document.getElementById("youtube-frontend");
-let invidiousDiv = document.getElementById("invidious");
-let pipedDiv = document.getElementById("piped");
-let pipedMaterialDiv = document.getElementById("pipedMaterial");
-let freetubeYatteeDiv = document.getElementById("freetube-yatte");
-let youtubeEmbedFrontend = document.getElementById("youtube-embed-frontend");
-let onlyEmbeddedVideo = document.getElementById("only-embed");
-let protoco = document.getElementById("protocol");
+const enable = document.getElementById("youtube-enable");
+const frontend = document.getElementById("youtube-frontend");
+const youtubeEmbedFrontend = document.getElementById("youtube-embed_frontend");
+const onlyEmbeddedVideo = document.getElementById("youtube-redirect_type");
+const protocol = document.getElementById("youtube-protocol");
+const youtube = document.getElementById('youtube_page');
+
+const invidiousDiv = document.getElementById("invidious");
+const pipedDiv = document.getElementById("piped");
+const pipedMaterialDiv = document.getElementById("pipedMaterial");
+const freetubeYatteeDiv = document.getElementById("freetube-yatte");
 
 function changeFrontendsSettings() {
-    let frontend = youtubeFrontend.value;
-
-    if (frontend == 'invidious') {
+    if (frontend.value == 'invidious') {
         invidiousDiv.style.display = 'block';
         pipedDiv.style.display = 'none';
         pipedMaterialDiv.style.display = 'none';
         freetubeYatteeDiv.style.display = 'none';
     }
-    else if (frontend == 'piped') {
+    else if (frontend.value == 'piped') {
         invidiousDiv.style.display = 'none';
         pipedDiv.style.display = 'block';
         pipedMaterialDiv.style.display = 'none';
         freetubeYatteeDiv.style.display = 'none';
     }
-    else if (frontend == 'pipedMaterial') {
+    else if (frontend.value == 'pipedMaterial') {
         invidiousDiv.style.display = 'none';
         pipedDiv.style.display = 'none';
         pipedMaterialDiv.style.display = 'block';
         freetubeYatteeDiv.style.display = 'none';
     }
-    else if (frontend == 'freetube' || frontend == 'yatte') {
+    else if (frontend.value == 'freetube' || frontend.value == 'yatte') {
         invidiousDiv.style.display = 'none';
         pipedDiv.style.display = 'none';
         pipedMaterialDiv.style.display = 'none';
@@ -74,7 +74,7 @@ function changeProtocolSettings() {
     const normalInvidiousDiv = document.getElementById('invidious').getElementsByClassName("normal")[0];
     const torInvidiousDiv = document.getElementById('invidious').getElementsByClassName("tor")[0];
 
-    if (protoco.value == 'normal') {
+    if (protocol.value == 'normal') {
         normalInvidiousDiv.style.display = 'block';
         torInvidiousDiv.style.display = 'none';
 
@@ -84,7 +84,7 @@ function changeProtocolSettings() {
         normalPipedMaterialDiv.style.display = 'block';
         torPipedMaterialDiv.style.display = 'none';
     }
-    else if (protoco.value == 'tor') {
+    else if (protocol.value == 'tor') {
         normalInvidiousDiv.style.display = 'none';
         torInvidiousDiv.style.display = 'block';
 
@@ -96,13 +96,13 @@ function changeProtocolSettings() {
     }
 }
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableYoutube: !disableYoutube.checked,
-        youtubeFrontend: youtubeFrontend.value,
+youtube.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableYoutube: !enable.checked,
+        youtubeFrontend: frontend.value,
         youtubeEmbedFrontend: youtubeEmbedFrontend.value,
         onlyEmbeddedVideo: onlyEmbeddedVideo.value,
-        youtubeProtocol: protoco.value,
+        youtubeProtocol: protocol.value,
     })
     changeProtocolSettings();
     changeYoutubeEmbedFrontendsSettings();
@@ -120,35 +120,19 @@ browser.storage.local.get(
         "youtubeProtocol",
     ],
     r => {
-        disableYoutube.checked = !r.disableYoutube;
+        enable.checked = !r.disableYoutube;
         onlyEmbeddedVideo.value = r.onlyEmbeddedVideo;
-        youtubeFrontend.value = r.youtubeFrontend;
-        protoco.value = r.youtubeProtocol;
+        frontend.value = r.youtubeFrontend;
+        protocol.value = r.youtubeProtocol;
 
         changeFrontendsSettings();
         changeProtocolSettings();
 
         youtubeEmbedFrontend.value = youtubeEmbedFrontend.value
-        if (r.youtubeFrontend == "freetube" || r.youtubeFrontend == "yatte") changeYoutubeEmbedFrontendsSettings()
+        if (r.frontend == "freetube" || r.frontend == "yatte") changeYoutubeEmbedFrontendsSettings()
     }
 );
 
-const invidiousForm = invidiousDiv.getElementsByTagName('form')[0];
-const invidiousCookies = invidiousForm.getElementsByTagName('input')[0];
-invidiousForm.addEventListener('submit', async event => {
-    event.preventDefault();
-    const url = new URL(invidiousCookies.value);
-    youtubeHelper.initInvidiousCookies(url);
-});
-
-// const pipedForm = pipedDiv.getElementsByTagName('form')[0];
-// const pipedCookies = pipedForm.getElementsByTagName('input')[0];
-// pipedForm.addEventListener('submit', async event => {
-//     event.preventDefault();
-//     const url = new URL(pipedCookies.value);
-//     youtubeHelper.applyPipedLocalStorage(url);
-// });
-
 utils.processDefaultCustomInstances('youtube', 'invidious', 'normal', document);
 utils.processDefaultCustomInstances('youtube', 'invidious', 'tor', document);
 utils.processDefaultCustomInstances('youtube', 'pipedMaterial', 'normal', document);
diff --git a/src/pages/options/widgets/youtube.pug b/src/pages/options/widgets/youtube.pug
index 71bf104b..7985244f 100644
--- a/src/pages/options/widgets/youtube.pug
+++ b/src/pages/options/widgets/youtube.pug
@@ -4,7 +4,7 @@ section#youtube_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-invidious(type="checkbox")
+        input#youtube-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -18,7 +18,7 @@ section#youtube_page.option-block
     #freetube-yatte
         .some-block.option-block
             h4(data-localise="__MSG_embeddedVids__") Embedded Videos Frontend
-            select#youtube-embed-frontend
+            select#youtube-embed_frontend
                 option(value="invidious") Invidious
                 option(value="piped") Piped
                 option(value="pipedMaterial") Piped-Material
@@ -27,13 +27,13 @@ section#youtube_page.option-block
     #invidious-piped-pipedMaterial
         .some-block.option-block
             h4(data-localise="__MSG_protocol__") Protocol
-            select#protocol
+            select#youtube-protocol
                 option(value="normal" data-localise="__MSG_normal__") Normal
                 option(value="tor" data-localise="__MSG_tor__") Tor
 
         .some-block.option-block
             h4(data-localise="__MSG_redirectType__") Redirect Type
-            select#only-embed
+            select#youtube-redirect_type
                 option(value="both" data-localise="__MSG_both__") both
                 option(value="onlyEmbedded" data-localise="__MSG_onlyEmbedded__") Only Embedded
                 option(value="onlyNotEmbedded" data-localise="__MSG_onlyNotEmbedded__") Only Not Embedded
@@ -46,27 +46,22 @@ section#youtube_page.option-block
             include ../../widgets/latency.pug
             +latency('invidious')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://invidious.onion')
 
     #piped
         hr
         .normal
-            include ../../widgets/instances.pug
             +instances('https://piped.com')
             +latency('piped')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://piped.onion')
 
     #pipedMaterial
         hr
         .normal
-            include ../../widgets/instances.pug
             +instances('https://piped-material.com')
             +latency('pipedMaterial')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://piped-material.onion')
 
 
diff --git a/src/pages/options/widgets/youtubeMusic.js b/src/pages/options/widgets/youtubeMusic.js
index 9a9bf8fb..cb5ab1d7 100644
--- a/src/pages/options/widgets/youtubeMusic.js
+++ b/src/pages/options/widgets/youtubeMusic.js
@@ -1,23 +1,23 @@
-import youtubeMusicHelper from "../../../assets/javascripts/youtubeMusic.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableYoutubeMusicElement = document.getElementById("disable-beatbump");
+let enable = document.getElementById("youtubeMusic-enable");
+const youtubeMusic = document.getElementById('youtubeMusic_page');
 
 browser.storage.local.get(
     [
         "disableYoutubeMusic",
     ],
     r => {
-        disableYoutubeMusicElement.checked = !r.disableYoutubeMusic;
+        enable.checked = !r.disableYoutubeMusic;
     }
 );
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableYoutubeMusic: !disableYoutubeMusicElement.checked,
+youtubeMusic.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableYoutubeMusic: !enable.checked,
     })
 })
 
 utils.processDefaultCustomInstances('youtubeMusic', 'beatbump', 'normal', document);
 
-utils.latency('youtubeMusic', 'beatbump', document, location)
\ No newline at end of file
+utils.latency('youtubeMusic', 'beatbump', document, location, true)
\ No newline at end of file
diff --git a/src/pages/options/widgets/youtubeMusic.pug b/src/pages/options/widgets/youtubeMusic.pug
index 231b6caf..ac4d6403 100644
--- a/src/pages/options/widgets/youtubeMusic.pug
+++ b/src/pages/options/widgets/youtubeMusic.pug
@@ -4,7 +4,7 @@ section#youtubeMusic_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-beatbump(type="checkbox")
+        input#youtubeMusic-enable(type="checkbox")
 
     #beatbump
         hr
@@ -12,6 +12,6 @@ section#youtubeMusic_page.option-block
             include ../../widgets/instances.pug
             +instances('https://beatbump.wewe')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('beatbump')
 
     script(type="module" src="./widgets/youtubeMusic.js")