Restructuring Settings Structure

src/assets/javascripts/helpers/common.js

@@ -88,9 +88,10 @@ function processDefaultCustomInstances(
   getNameCustomRedirects,
   setNameCustomRedirects
 ) {
+  let nameProtocolElement = document.getElementById(name).getElementsByClassName(protocol)[0];
 
   let nameCustomInstances = [];
-  let nameCheckListElement = document.getElementById(`${name}-${protocol}-checklist`);
+  let nameCheckListElement = nameProtocolElement.getElementsByClassName('checklist')[0];
   let nameDefaultRedirects;
 
   function calcNameCheckBoxes() {
@@ -101,22 +102,22 @@ function processDefaultCustomInstances(
         break;
       }
     for (const element of nameCheckListElement.getElementsByTagName('input'))
-      element.checked = nameDefaultRedirects.includes(element.id)
-    document.getElementById(`${name}-${protocol}-toogle-all`).checked = isTrue;
+      element.checked = nameDefaultRedirects.includes(element.className)
+    nameProtocolElement.getElementsByClassName('toogle-all')[0].checked = isTrue;
   }
 
   nameDefaultRedirects = getNameRedirectsChecks();
 
   nameCheckListElement.innerHTML =
     [
-      `<div><x data-localise="__MSG_toggleAll__">Toggle All</x><input type="checkbox" id="${name}-${protocol}-toogle-all" /></div>`,
-      ...nameHelper.getRedirects()[name][protocol].map((x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`),
+      `<div><x data-localise="__MSG_toggleAll__">Toggle All</x><input type="checkbox" class="toogle-all" /></div>`,
+      ...nameHelper.getRedirects()[name][protocol].map((x) => `<div>${x}<input type="checkbox" class="${x}" /></div>`),
     ].join('\n<hr>\n');
 
   localise.localisePage();
 
   calcNameCheckBoxes();
-  document.getElementById(`${name}-${protocol}-toogle-all`).addEventListener("change", event => {
+  nameProtocolElement.getElementsByClassName('toogle-all')[0].addEventListener("change", event => {
     if (event.target.checked)
       nameDefaultRedirects = [...nameHelper.getRedirects()[name][protocol]];
     else
@@ -126,12 +127,12 @@ function processDefaultCustomInstances(
   });
 
   for (let element of nameCheckListElement.getElementsByTagName('input')) {
-    if (element.id != `${name}-${protocol}-toogle-all`)
-      document.getElementById(element.id).addEventListener("change", (event) => {
+    if (element.className != 'toogle-all')
+    nameProtocolElement.getElementsByClassName(element.className)[0].addEventListener("change", event => {
         if (event.target.checked)
-          nameDefaultRedirects.push(element.id)
+          nameDefaultRedirects.push(element.className)
         else {
-          let index = nameDefaultRedirects.indexOf(element.id);
+          let index = nameDefaultRedirects.indexOf(element.className);
           if (index > -1) nameDefaultRedirects.splice(index, 1);
         }
         setNameRedirectsChecks(nameDefaultRedirects);
@@ -141,9 +142,9 @@ function processDefaultCustomInstances(
 
   nameCustomInstances = getNameCustomRedirects();
   function calcNameCustomInstances() {
-    document.getElementById(`${name}-${protocol}-custom-checklist`).innerHTML =
+    nameProtocolElement.getElementsByClassName('custom-checklist')[0].innerHTML =
       nameCustomInstances.map(
-        (x) => `<div>${x}<button class="add" id="clear-${x}">
+        x => `<div>${x}<button class="add clear-${x}">
                               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                               fill="currentColor">
                                   <path d="M0 0h24v24H0V0z" fill="none" />
@@ -155,7 +156,7 @@ function processDefaultCustomInstances(
       ).join('\n');
 
     for (const item of nameCustomInstances) {
-      document.getElementById(`clear-${item}`).addEventListener("click", () => {
+      nameProtocolElement.getElementsByClassName(`clear-${item}`)[0].addEventListener("click", () => {
         let index = nameCustomInstances.indexOf(item);
         if (index > -1) nameCustomInstances.splice(index, 1);
         setNameCustomRedirects(nameCustomInstances);
@@ -164,9 +165,9 @@ function processDefaultCustomInstances(
     }
   }
   calcNameCustomInstances();
-  document.getElementById(`custom-${name}-${protocol}-instance-form`).addEventListener("submit", (event) => {
+  nameProtocolElement.getElementsByClassName('custom-instance-form')[0].addEventListener("submit", event => {
     event.preventDefault();
-    let nameCustomInstanceInput = document.getElementById(`${name}-${protocol}-custom-instance`);
+    let nameCustomInstanceInput = nameProtocolElement.getElementsByClassName('custom-instance')[0];
     let url = new URL(nameCustomInstanceInput.value);
     let protocolHostVar = protocolHost(url);
     if (nameCustomInstanceInput.validity.valid && !nameHelper.getRedirects()[name][protocol].includes(protocolHostVar)) {

src/assets/javascripts/helpers/twitter.js

@@ -84,6 +84,14 @@ function setDisable(val) {
   browser.storage.local.set({ disableTwitter: disable })
 }
 
+let enableCustomSettings;
+const getEnableCustomSettings = () => enableCustomSettings;
+function setEnableCustomSettings(val) {
+  enableCustomSettings = val;
+  browser.storage.local.set({ enableTwitterCustomSettings: enableCustomSettings })
+  console.log("enableTwitterCustomSettings: ", enableCustomSettings)
+}
+
 let protocol;
 const getProtocol = () => protocol;
 function setProtocol(val) {
@@ -248,6 +256,8 @@ async function init() {
         [
           "disableTwitter",
 
+          "enableTwitterCustomSettings",
+
           "twitterRedirects",
 
           "theme",
@@ -267,6 +277,7 @@ async function init() {
         ],
         r => {
           disable = r.disableTwitter ?? false;
+          enableCustomSettings = r.enableTwitterCustomSettings ?? false;
 
           protocol = r.twitterProtocol ?? "normal";
 
@@ -303,6 +314,9 @@ export default {
   getDisable,
   setDisable,
 
+  getEnableCustomSettings,
+  setEnableCustomSettings,
+
   getNitterNormalRedirectsChecks,
   setNitterNormalRedirectsChecks,
 

src/assets/javascripts/helpers/wikipedia.js

@@ -57,8 +57,8 @@ let protocol;
 const getProtocol = () => protocol;
 function setProtocol(val) {
   protocol = val;
-  browser.storage.local.set({ wikilessProtocol: val })
-  console.log("wikilessProtocol: ", val)
+  browser.storage.local.set({ wikipediaProtocol: val })
+  console.log("wikipediaProtocol: ", val)
 }
 
 

src/assets/javascripts/helpers/youtube/options.js

@@ -4,11 +4,7 @@ window.browser = window.browser || window.chrome;
 
 export let youtubeListen;
 export const getYoutubeListen = () => youtubeListen;
-export function setYoutubeListen(val) {
-    youtubeListen = val;
-    browser.storage.local.set({ youtubeListen })
-    console.log("youtubeListen: ", youtubeListen)
-}
+
 
 export let volume;
 export const getVolume = () => volume;
@@ -28,228 +24,88 @@ export function setAutoplay(val) {
 
 export let invidiousQuality;
 export const getInvidiousQuality = () => invidiousQuality;
-export function setinvidiousQuality(val) {
-    invidiousQuality = val;
-    browser.storage.local.set({ invidiousQuality })
-    console.log("invidiousQuality: ", invidiousQuality)
-}
 
 export let invidiousAlwaysProxy;
 export const getInvidiousAlwaysProxy = () => invidiousAlwaysProxy;
-export function setInvidiousAlwaysProxy(val) {
-    invidiousAlwaysProxy = val;
-    browser.storage.local.set({ invidiousAlwaysProxy })
-    console.log("invidiousAlwaysProxy: ", invidiousAlwaysProxy);
-}
 
 export let invidiousPlayerStyle;
 export const getInvidiousPlayerStyle = () => invidiousPlayerStyle;
-export function setInvidiousPlayerStyle(val) {
-    invidiousPlayerStyle = val;
-    browser.storage.local.set({ invidiousPlayerStyle })
-    console.log("invidiousPlayerStyle: ", invidiousPlayerStyle)
-}
 
 export let invidiousVideoLoop;
 export const getInvidiousVideoLoop = () => invidiousVideoLoop;
-export function setInvidiousVideoLoop(val) {
-    invidiousVideoLoop = val;
-    browser.storage.local.set({ invidiousVideoLoop })
-    console.log("invidiousVideoLoop: ", invidiousVideoLoop)
-}
 
 export let invidiousContinueAutoplay;
 export const getInvidiousContinueAutoplay = () => invidiousContinueAutoplay;
-export function setInvidiousContinueAutoplay(val) {
-    invidiousContinueAutoplay = val;
-    browser.storage.local.set({ invidiousContinueAutoplay })
-    console.log("invidiousContinueAutoplay: ", invidiousContinueAutoplay)
-}
 
 export let invidiousContinue;
 export const getInvidiousContinue = () => invidiousContinue;
-export function setInvidiousContinue(val) {
-    invidiousContinue = val;
-    browser.storage.local.set({ invidiousContinue })
-    console.log("invidiousContinue: ", invidiousContinue)
-}
 
 export let invidiousSpeed;
 export const getInvidiousSpeed = () => invidiousSpeed;
-export function setInvidiousSpeed(val) {
-    invidiousSpeed = val;
-    browser.storage.local.set({ invidiousSpeed })
-    console.log("invidiousSpeed: ", invidiousSpeed)
-}
 
 export let invidiousQualityDash;
 export const getInvidiousQualityDash = () => invidiousQualityDash;
-export function setInvidiousQualityDash(val) {
-    invidiousQualityDash = val;
-    browser.storage.local.set({ invidiousQualityDash })
-    console.log("invidiousQualityDash: ", invidiousQualityDash)
-}
 
 export let invidiousComments;
 export const getInvidiousComments = () => invidiousComments;
-export function setInvidiousComments(val) {
-    invidiousComments = val;
-    browser.storage.local.set({ invidiousComments })
-    console.log("invidiousComments: ", invidiousComments)
-}
-
 
 export let invidiousCaptions;
 export const getInvidiousCaptions = () => invidiousCaptions;
-export function setInvidiousCaptions(val) {
-    invidiousCaptions = val;
-    browser.storage.local.set({ invidiousCaptions })
-    console.log("invidiousCaptions: ", invidiousCaptions)
-}
 
 export let invidiousRelatedVideos;
 export const getInvidiousRelatedVideos = () => invidiousRelatedVideos;
-export function setInvidiousRelatedVideos(val) {
-    invidiousRelatedVideos = val;
-    browser.storage.local.set({ invidiousRelatedVideos })
-    console.log("invidiousRelatedVideos: ", invidiousRelatedVideos)
-}
 
 export let invidiousAnnotations;
 export const getInvidiousAnnotations = () => invidiousAnnotations;
-export function setInvidiousAnnotations(val) {
-    invidiousAnnotations = val;
-    browser.storage.local.set({ invidiousAnnotations })
-    console.log("invidiousAnnotations: ", invidiousAnnotations)
-}
 
 export let invidiousExtendDesc;
 export const getInvidiousExtendDesc = () => invidiousExtendDesc;
-export function setInvidiousExtendDesc(val) {
-    invidiousExtendDesc = val;
-    browser.storage.local.set({ invidiousExtendDesc })
-    console.log("invidiousExtendDesc: ", invidiousExtendDesc)
-}
 
 export let invidiousVrMode;
 export const getInvidiousVrMode = () => invidiousVrMode;
-export function setInvidiousVrMode(val) {
-    invidiousVrMode = val;
-    browser.storage.local.set({ invidiousVrMode })
-    console.log("invidiousVrMode: ", invidiousVrMode)
-}
 
 export let invidiousSavePlayerPos;
 export const getInvidiousSavePlayerPos = () => invidiousSavePlayerPos;
-export function setInvidiousSavePlayerPos(val) {
-    invidiousSavePlayerPos = val;
-    browser.storage.local.set({ invidiousSavePlayerPos })
-    console.log("invidiousSavePlayerPos: ", invidiousSavePlayerPos)
-}
 
 export let pipedBufferGoal;
 export const getPipedBufferGoal = () => pipedBufferGoal;
-export function setPipedBufferGoal(val) {
-    pipedBufferGoal = val;
-    browser.storage.local.set({ pipedBufferGoal })
-    console.log("pipedBufferGoal: ", pipedBufferGoal)
-}
 
 export let pipedComments;
 export const getPipedComments = () => pipedComments;
-export function setPipedComments(val) {
-    pipedComments = val;
-    browser.storage.local.set({ pipedComments })
-    console.log("pipedComments: ", pipedComments)
-}
 
 export let pipedDisableLBRY;
 export const getPipedDisableLBRY = () => pipedDisableLBRY;
-export function setPipedDisableLBRY(val) {
-    pipedDisableLBRY = val;
-    browser.storage.local.set({ pipedDisableLBRY })
-    console.log("pipedDisableLBRY: ", pipedDisableLBRY)
-}
 
 export let pipedEnabledCodecs;
 export const getPipedEnabledCodecs = () => pipedEnabledCodecs;
-export function setPipedEnabledCodecs(val) {
-    pipedEnabledCodecs = val;
-    browser.storage.local.set({ pipedEnabledCodecs })
-    console.log("pipedEnabledCodecs: ", pipedEnabledCodecs)
-}
 
 export let pipedHomepage;
 export const getPipedHomepage = () => pipedHomepage;
-export function setPipedHomepage(val) {
-    pipedHomepage = val;
-    browser.storage.local.set({ pipedHomepage })
-    console.log("pipedHomepage: ", pipedHomepage)
-}
 
 export let pipedMinimizeDescription;
 export const getPipedMinimizeDescription = () => pipedMinimizeDescription;
-export function setPipedMinimizeDescription(val) {
-    pipedMinimizeDescription = val;
-    browser.storage.local.set({ pipedMinimizeDescription })
-    console.log("pipedMinimizeDescription: ", pipedMinimizeDescription)
-}
 
 export let pipedProxyLBRY;
 export const getPipedProxyLBRY = () => pipedProxyLBRY;
-export function setPipedProxyLBRY(val) {
-    pipedProxyLBRY = val;
-    browser.storage.local.set({ pipedProxyLBRY })
-    console.log("pipedProxyLBRY: ", pipedProxyLBRY)
-}
 
 export let pipedQuality;
 export const getPipedQuality = () => pipedQuality;
-export function setPipedQuality(val) {
-    pipedQuality = val;
-    browser.storage.local.set({ pipedQuality })
-    console.log("pipedQuality: ", pipedQuality)
-}
 
 export let pipedRegion;
 export const getPipedRegion = () => pipedRegion;
-export function setPipedRegion(val) {
-    pipedRegion = val;
-    browser.storage.local.set({ pipedRegion })
-    console.log("pipedRegion: ", pipedRegion)
-}
 
 export let pipedSelectedSkip;
 export const getPipedSelectedSkip = () => pipedSelectedSkip;
-export function setPipedSelectedSkip(val) {
-    pipedSelectedSkip = val;
-    browser.storage.local.set({ pipedSelectedSkip })
-    console.log("pipedSelectedSkip: ", pipedSelectedSkip)
-}
 
 export let pipedSponsorblock;
 export const getPipedSponsorblock = () => pipedSponsorblock;
-export function setPipedSponsorblock(val) {
-    pipedSponsorblock = val;
-    browser.storage.local.set({ pipedSponsorblock })
-    console.log("pipedSponsorblock: ", pipedSponsorblock)
-}
 
 export let pipedWatchHistory;
 export const getPipedWatchHistory = () => pipedWatchHistory;
-export function setPipedWatchHistory(val) {
-    pipedWatchHistory = val;
-    browser.storage.local.set({ pipedWatchHistory })
-    console.log("pipedWatchHistory: ", pipedWatchHistory)
-}
 
 export let pipedMaterialSkipToLastPoint;
 export const getPipedMaterialSkipToLastPoint = () => pipedMaterialSkipToLastPoint;
-export function setPipedMaterialSkipToLastPoint(val) {
-    pipedMaterialSkipToLastPoint = val;
-    browser.storage.local.set({ pipedMaterialSkipToLastPoint })
-    console.log("pipedMaterialSkipToLastPoint: ", pipedMaterialSkipToLastPoint)
-}
+
 
 export async function initOptions() {
     return new Promise(
@@ -323,6 +179,7 @@ export async function initOptions() {
                     pipedProxyLBRY = r.pipedProxyLBRY ?? false;
                     pipedQuality = r.pipedQuality ?? 0;
                     pipedRegion = r.pipedRegion ?? "US";
+
                     pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
                     pipedSponsorblock = r.pipedSponsorblock ?? true;
                     pipedWatchHistory = r.pipedWatchHistory ?? false;

src/assets/javascripts/helpers/youtube/youtube.js

@@ -4,68 +4,37 @@ window.browser = window.browser || window.chrome;
 
 import commonHelper from '../common.js'
 import {
-  youtubeListen, getYoutubeListen, setYoutubeListen,
-
-  invidiousQuality, getInvidiousQuality, setinvidiousQuality,
-
-  invidiousAlwaysProxy, setInvidiousAlwaysProxy, getInvidiousAlwaysProxy,
-
-  invidiousPlayerStyle, getInvidiousPlayerStyle, setInvidiousPlayerStyle,
-
-  invidiousVideoLoop, getInvidiousVideoLoop, setInvidiousVideoLoop,
-
-  invidiousContinueAutoplay, getInvidiousContinueAutoplay, setInvidiousContinueAutoplay,
-
-  invidiousContinue, getInvidiousContinue, setInvidiousContinue,
-
-  invidiousSpeed, getInvidiousSpeed, setInvidiousSpeed,
-
-  invidiousQualityDash, getInvidiousQualityDash, setInvidiousQualityDash,
-
-  invidiousComments, getInvidiousComments, setInvidiousComments,
-
-  invidiousCaptions, getInvidiousCaptions, setInvidiousCaptions,
-
-  invidiousRelatedVideos, getInvidiousRelatedVideos, setInvidiousRelatedVideos,
-
-  invidiousAnnotations, getInvidiousAnnotations, setInvidiousAnnotations,
-
-  invidiousExtendDesc, getInvidiousExtendDesc, setInvidiousExtendDesc,
-
-  invidiousVrMode, getInvidiousVrMode, setInvidiousVrMode,
-
-  invidiousSavePlayerPos, getInvidiousSavePlayerPos, setInvidiousSavePlayerPos,
-
-  getPipedBufferGoal, setPipedBufferGoal,
-
-  getPipedComments, setPipedComments,
-
-  getPipedDisableLBRY, setPipedDisableLBRY,
-
-  getPipedEnabledCodecs, setPipedEnabledCodecs,
-
-  getPipedHomepage, setPipedHomepage,
-
-  getPipedMinimizeDescription, setPipedMinimizeDescription,
-
-  getPipedProxyLBRY, setPipedProxyLBRY,
-
-  getPipedQuality, setPipedQuality,
-
-  getPipedRegion, setPipedRegion,
-
-  getPipedSelectedSkip, setPipedSelectedSkip,
-
-  getPipedSponsorblock, setPipedSponsorblock,
-
-  getPipedWatchHistory, setPipedWatchHistory,
-
+  youtubeListen, getYoutubeListen,
+  invidiousQuality, getInvidiousQuality,
+  invidiousAlwaysProxy, getInvidiousAlwaysProxy,
+  invidiousPlayerStyle, getInvidiousPlayerStyle,
+  invidiousVideoLoop, getInvidiousVideoLoop,
+  invidiousContinueAutoplay, getInvidiousContinueAutoplay,
+  invidiousContinue, getInvidiousContinue,
+  invidiousSpeed, getInvidiousSpeed,
+  invidiousQualityDash, getInvidiousQualityDash,
+  invidiousComments, getInvidiousComments,
+  invidiousCaptions, getInvidiousCaptions,
+  invidiousRelatedVideos, getInvidiousRelatedVideos,
+  invidiousAnnotations, getInvidiousAnnotations,
+  invidiousExtendDesc, getInvidiousExtendDesc,
+  invidiousVrMode, getInvidiousVrMode,
+  invidiousSavePlayerPos, getInvidiousSavePlayerPos,
+  getPipedBufferGoal,
+  getPipedComments,
+  getPipedDisableLBRY,
+  getPipedEnabledCodecs,
+  getPipedHomepage,
+  getPipedMinimizeDescription,
+  getPipedProxyLBRY,
+  getPipedQuality,
+  getPipedRegion,
+  getPipedSelectedSkip,
+  getPipedSponsorblock,
+  getPipedWatchHistory,
   volume, getVolume, setVolume,
-
   youtubeAutoplay, getAutoplay, setAutoplay,
-
-  getPipedMaterialSkipToLastPoint, setPipedMaterialSkipToLastPoint,
-
+  getPipedMaterialSkipToLastPoint,
   initOptions
 } from './options.js';
 
@@ -127,6 +96,15 @@ function getCustomRedirects() {
   };
 };
 
+async function setYoutubeSettings(val) {
+  return new Promise(
+    resolve => {
+      browser.storage.local.set(val).then(resolve);
+    }
+  )
+
+}
+
 function setInvidiousRedirects(val) {
   redirects.invidious = val;
   browser.storage.local.set({ youtubeRedirects: redirects })
@@ -251,51 +229,16 @@ function setDisable(val) {
 
 let enableCustomSettings;
 const getEnableCustomSettings = () => enableCustomSettings;
-function setEnableCustomSettings(val) {
-  enableCustomSettings = val;
-  browser.storage.local.set({ enableYoutubeCustomSettings: enableCustomSettings })
-  console.log("enableYoutubeCustomSettings: ", enableCustomSettings)
-}
-
 let protocol;
 const getProtocol = () => protocol;
-function setProtocol(val) {
-  protocol = val;
-  browser.storage.local.set({ youtubeProtocol: val })
-  console.log("youtubeProtocol: ", val)
-}
-
 let OnlyEmbeddedVideo;
-function setOnlyEmbeddedVideo(val) {
-  OnlyEmbeddedVideo = val;
-  browser.storage.local.set({ OnlyEmbeddedVideo })
-  console.log("OnlyEmbeddedVideo: ", OnlyEmbeddedVideo)
-}
 const getOnlyEmbeddedVideo = () => OnlyEmbeddedVideo;
-
 let frontend;
 const getFrontend = () => frontend;
-function setFrontend(val) {
-  frontend = val;
-  browser.storage.local.set({ youtubeFrontend: val })
-  console.log("youtubeFrontend: ", val)
-}
-
 let youtubeEmbedFrontend;
 const getYoutubeEmbedFrontend = () => youtubeEmbedFrontend;
-function setYoutubeEmbedFrontend(val) {
-  youtubeEmbedFrontend = val;
-  browser.storage.local.set({ youtubeEmbedFrontend })
-  console.log("youtubeEmbedFrontend: ", youtubeEmbedFrontend)
-}
-
 let bypassWatchOnYoutube;
 const getBypassWatchOnYoutube = () => bypassWatchOnYoutube;
-function setBypassWatchOnYoutube(val) {
-  bypassWatchOnYoutube = val;
-  browser.storage.local.set({ bypassWatchOnYoutube })
-  console.log("bypassWatchOnYoutube: ", bypassWatchOnYoutube)
-}
 
 let alwaysUsePreferred;
 function redirect(url, details, initiator) {
@@ -684,17 +627,16 @@ async function init() {
 }
 
 export default {
+  setYoutubeSettings,
+
   getBypassWatchOnYoutube,
-  setBypassWatchOnYoutube,
 
   initPipedLocalStorage,
   initPipedMaterialLocalStorage,
 
   getFrontend,
-  setFrontend,
 
   getYoutubeEmbedFrontend,
-  setYoutubeEmbedFrontend,
 
   getRedirects,
   getCustomRedirects,
@@ -708,28 +650,21 @@ export default {
 
   initInvidiousCookies,
 
-  setInvidiousAlwaysProxy,
   getInvidiousAlwaysProxy,
 
-  setinvidiousQuality,
   getInvidiousQuality,
 
-  setInvidiousPlayerStyle,
   getInvidiousPlayerStyle,
 
   getInvidiousVideoLoop,
-  setInvidiousVideoLoop,
 
   getDisable,
   setDisable,
 
   getEnableCustomSettings,
-  setEnableCustomSettings,
 
   getProtocol,
-  setProtocol,
 
-  setOnlyEmbeddedVideo,
   getOnlyEmbeddedVideo,
 
   setVolume,
@@ -739,79 +674,54 @@ export default {
   getAutoplay,
 
   getInvidiousContinueAutoplay,
-  setInvidiousContinueAutoplay,
 
   getInvidiousContinue,
-  setInvidiousContinue,
 
   getYoutubeListen,
-  setYoutubeListen,
 
   getInvidiousSpeed,
-  setInvidiousSpeed,
 
   getInvidiousQualityDash,
-  setInvidiousQualityDash,
 
   getInvidiousComments,
-  setInvidiousComments,
 
   getInvidiousCaptions,
-  setInvidiousCaptions,
 
   getInvidiousRelatedVideos,
-  setInvidiousRelatedVideos,
 
   getInvidiousAnnotations,
-  setInvidiousAnnotations,
 
   getInvidiousExtendDesc,
-  setInvidiousExtendDesc,
 
   getInvidiousVrMode,
-  setInvidiousVrMode,
 
   getInvidiousSavePlayerPos,
-  setInvidiousSavePlayerPos,
 
   getPipedBufferGoal,
-  setPipedBufferGoal,
 
   getPipedComments,
-  setPipedComments,
 
   getPipedDisableLBRY,
-  setPipedDisableLBRY,
 
   getPipedEnabledCodecs,
-  setPipedEnabledCodecs,
 
   getPipedHomepage,
-  setPipedHomepage,
 
   getPipedMinimizeDescription,
-  setPipedMinimizeDescription,
 
   getPipedProxyLBRY,
-  setPipedProxyLBRY,
 
   getPipedQuality,
-  setPipedQuality,
 
   getPipedRegion,
-  setPipedRegion,
 
   getPipedSelectedSkip,
-  setPipedSelectedSkip,
 
   getPipedSponsorblock,
-  setPipedSponsorblock,
 
   getPipedWatchHistory,
-  setPipedWatchHistory,
 
   getPipedMaterialSkipToLastPoint,
-  setPipedMaterialSkipToLastPoint,
 
   getInvidiousNormalRedirectsChecks,
   setInvidiousNormalRedirectsChecks,

src/pages/options/imgur/imgur.html

@@ -143,50 +143,53 @@
     </div>
 
     <hr>
-
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="rimgo-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-rimgo-normal-instance-form">
+    <div id="rimgo">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="rimgo-normal-custom-instance" placeholder="https://rimgo.com" type="url" />
-          <button type="submit" class="add" id="rimgo-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="rimgo-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="rimgo-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-rimgo-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="rimgo-tor-custom-instance" placeholder="https://rimgo.com" type="url" />
-          <button type="submit" class="add" id="rimgo-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="rimgo-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://rimgo.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://rimgo.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 

src/pages/options/imgur/imgur.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/instagram/instagram.html

@@ -135,50 +135,54 @@
     </div>
 
     <hr>
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="bibliogram-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-bibliogram-normal-instance-form">
+    <div id="bibliogram">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="bibliogram-normal-custom-instance" placeholder="https://bibliogram.com" type="url" />
-          <button type="submit" class="add" id="bibliogram-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="bibliogram-normal-custom-checklist"></div>
-    </div>
+        <div class="checklist 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://bibliogram.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
 
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="bibliogram-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-bibliogram-tor-instance-form">
+      <div class="tor">
         <div class="some-block option-block">
-          <input id="bibliogram-tor-custom-instance" placeholder="https://bibliogram.com" type="url" />
-          <button type="submit" class="add" id="bibliogram-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="bibliogram-tor-custom-checklist"></div>
+        <div class="checklist 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://bibliogram.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
 
   </section>

src/pages/options/instagram/instagram.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/lbry/lbry.html

@@ -144,56 +144,60 @@
 
     <hr>
 
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="librarian-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-librarian-normal-instance-form">
+    <div id="librarian">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="librarian-normal-custom-instance" placeholder="https://librarian.com" type="url" />
-          <button type="submit" class="add" id="librarian-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="librarian-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="librarian-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-librarian-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="librarian-tor-custom-instance" placeholder="https://librarian.com" type="url" />
-          <button type="submit" class="add" id="librarian-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="librarian-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://librarian.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://librarian.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 
 
   <script type="module" src="../init.js"></script>
   <script type="module" src="./lbry.js"></script>
-  <script type="module" src="../../../assets/javascripts/localise.js"></script> -->
+  <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
 </html>

src/pages/options/lbry/lbry.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/medium/medium.html

@@ -144,51 +144,54 @@
     </div>
 
     <hr>
-
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="scribe-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-scribe-normal-instance-form">
+    <div id="scribe">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="scribe-normal-custom-instance" placeholder="https://scribe.com" type="url" />
-          <button type="submit" class="add" id="scribe-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="scribe-normal-custom-checklist"></div>
-    </div>
-
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="scribe-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-scribe-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="scribe-tor-custom-instance" placeholder="https://scribe.com" type="url" />
-          <button type="submit" class="add" id="scribe-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="scribe-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://scribe.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://scribe.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 

src/pages/options/medium/medium.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/peertube/peertube.html

@@ -144,54 +144,56 @@
     </div>
 
     <hr>
-
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="simpleertube-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-simpleertube-normal-instance-form">
+    <div id="simpleertube">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="simpleertube-normal-custom-instance" placeholder="https://simpleertube.com" type="url" />
-          <button type="submit" class="add" id="simpleertube-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="simpleertube-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="simpleertube-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customPopup__">Custom Instances</h4>
-      </div>
-      <form id="custom-simpleertube-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="simpleertube-tor-custom-instance" placeholder="https://simpleertube.com" type="url" />
-          <button type="submit" class="add" id="simpleertube-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="simpleertube-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://simpleertube.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customPopup__">Custom Instances</h4>
+        </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://simpleertube.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 
-
   <script type="module" src="../init.js"></script>
   <script type="module" src="./peertube.js"></script>
   <script type="module" src="../../../assets/javascripts/localise.js"></script>

src/pages/options/peertube/peertube.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/pixiv/pixiv.html

@@ -135,7 +135,10 @@
     </div>
 
     <div class="some-block option-block">
-      <h4><x data-localise="__MSG_frontend__">Frontend</x>: <span style="color:red;" data-localise="__MSG_notFullyPrivate__">This isn't a fully private frontend</span></h4>
+      <h4>
+        <x data-localise="__MSG_frontend__">Frontend</x>: <span style="color:red;"
+          data-localise="__MSG_notFullyPrivate__">This isn't a fully private frontend</span>
+      </h4>
       <select id="maps-frontend">
         <option value="pixivMoe" data-localise="__MSG_pixivMoe__">pixiv萌え</option>
       </select>
@@ -153,49 +156,53 @@
 
     <hr>
 
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="pixivMoe-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-pixivMoe-normal-instance-form">
+    <div id="pixivMoe">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="pixivMoe-normal-custom-instance" placeholder="https://pixiv.moe" type="url" />
-          <button type="submit" class="add" id="pixivMoe-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="pixivMoe-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="pixivMoe-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-pixivMoe-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="pixivMoe-tor-custom-instance" placeholder="https://pixivMoe.com" type="url" />
-          <button type="submit" class="add" id="pixivMoe-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="pixivMoe-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://pixiv.moe" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://pixivMoe.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 

src/pages/options/pixiv/pixiv.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/reddit/reddit.html

@@ -162,20 +162,20 @@
 
     <div id="libreddit">
 
-      <div id="libreddit-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="libreddit-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-libreddit-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="libreddit-normal-custom-instance" placeholder="https://libreddit.com" type="url" />
-            <button type="submit" class="add" id="libreddit-normal-add-instance">
+            <input class="custom-instance" placeholder="https://libreddit.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -184,23 +184,23 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="libreddit-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="libreddit-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="libreddit-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-libreddit-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="libreddit-tor-custom-instance" placeholder="https://libreddit.com" type="url" />
-            <button type="submit" class="add" id="libreddit-tor-add-instance">
+            <input class="custom-instance" placeholder="https://libreddit.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -209,27 +209,27 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="libreddit-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
     </div>
 
     <div id="teddit">
 
-      <div id="teddit-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="teddit-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-teddit-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="teddit-normal-custom-instance" placeholder="https://teddit.com" type="url" />
-            <button type="submit" class="add" id="teddit-normal-add-instance">
+            <input class="custom-instance" placeholder="https://teddit.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -238,22 +238,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="teddit-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="teddit-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="teddit-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-teddit-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="teddit-tor-custom-instance" placeholder="https://teddit.com" type="url" />
-            <button type="submit" class="add" id="teddit-tor-add-instance">
+            <input class="custom-instance" placeholder="https://teddit.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -262,7 +262,7 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="teddit-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
   </section>

src/pages/options/reddit/reddit.js

@@ -45,11 +45,11 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalLibredditDiv = document.getElementById("libreddit-normal");
-    let torLibredditDiv = document.getElementById("libreddit-tor");
+    let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
+    let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
 
-    let normalTedditDiv = document.getElementById("teddit-normal");
-    let torTedditDiv = document.getElementById("teddit-tor");
+    let normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
+    let torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalLibredditDiv.style.display = 'block';
         normalTedditDiv.style.display = 'block';

src/pages/options/search/search.html

@@ -162,20 +162,20 @@
 
     <div id="searx">
       <hr>
-      <div id="searx-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searx-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searx-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searx-normal-custom-instance" placeholder="https://searx.com" type="url" />
-            <button type="submit" class="add" id="searx-normal-add-instance">
+            <input class="custom-instance" placeholder="https://searx.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -184,22 +184,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searx-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="searx-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searx-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searx-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searx-tor-custom-instance" placeholder="https://searx.com" type="url" />
-            <button type="submit" class="add" id="searx-tor-add-instance">
+            <input class="custom-instance" placeholder="https://searx.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -208,26 +208,26 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searx-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
 
     <div id="searxng">
       <hr>
-      <div id="searxng-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searxng-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searxng-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searxng-normal-custom-instance" placeholder="https://searxng.com" type="url" />
-            <button type="submit" class="add" id="searxng-normal-add-instance">
+            <input class="custom-instance" placeholder="https://searxng.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -236,22 +236,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searxng-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="searxng-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searxng-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searxng-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searxng-tor-custom-instance" placeholder="https://searxng.com" type="url" />
-            <button type="submit" class="add" id="searxng-tor-add-instance">
+            <input class="custom-instance" placeholder="https://searxng.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -260,26 +260,26 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searxng-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
 
     <div id="whoogle">
       <hr>
-      <div id="whoogle-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="whoogle-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-whoogle-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="whoogle-normal-custom-instance" placeholder="https://whoogle.com" type="url" />
-            <button type="submit" class="add" id="whoogle-normal-add-instance">
+            <input class="custom-instance" placeholder="https://whoogle.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -288,22 +288,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="whoogle-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="whoogle-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="whoogle-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-whoogle-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="whoogle-tor-custom-instance" placeholder="https://whoogle.com" type="url" />
-            <button type="submit" class="add" id="whoogle-tor-add-instance">
+            <input class="custom-instance" placeholder="https://whoogle.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -312,10 +312,9 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="whoogle-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
-    </div>
 
   </section>
 

src/pages/options/search/search.js

@@ -61,14 +61,15 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-  let normalsearxDiv = document.getElementById("searx-normal");
-  let torsearxDiv = document.getElementById("searx-tor");
+  let normalsearxDiv = searxDivElement.getElementsByClassName("normal")[0];
+  let torsearxDiv = searxDivElement.getElementsByClassName("tor")[0];
 
-  let normalsearxngDiv = document.getElementById("searxng-normal");
-  let torsearxngDiv = document.getElementById("searxng-tor");
+  let normalsearxngDiv = searxngDivElement.getElementsByClassName("normal")[0];
+  let torsearxngDiv = searxngDivElement.getElementsByClassName("tor")[0];
+
+  let normalwhoogleDiv = whoogleDivElement.getElementsByClassName("normal")[0];
+  let torwhoogleDiv = whoogleDivElement.getElementsByClassName("tor")[0];
 
-  let normalwhoogleDiv = document.getElementById("whoogle-normal");
-  let torwhoogleDiv = document.getElementById("whoogle-tor");
   if (protocol == 'normal') {
     normalsearxDiv.style.display = 'block';
     normalsearxngDiv.style.display = 'block';

src/pages/options/sendTargets/sendTargets.html

@@ -143,50 +143,53 @@
     </div>
 
     <hr>
-
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="send-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-send-normal-instance-form">
+    <div id="send">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="send-normal-custom-instance" placeholder="https://send.com" type="url" />
-          <button type="submit" class="add" id="send-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="send-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="send-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-send-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="send-tor-custom-instance" placeholder="https://send.com" type="url" />
-          <button type="submit" class="add" id="send-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="send-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://send.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://send.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 

src/pages/options/sendTargets/sendTargets.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/spotify/spotify.html

@@ -143,54 +143,56 @@
     </div>
 
     <hr>
-
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="soju-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-soju-normal-instance-form">
+    <div id="soju">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="soju-normal-custom-instance" placeholder="https://soju.com" type="url" />
-          <button type="submit" class="add" id="soju-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="soju-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="soju-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-soju-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="soju-tor-custom-instance" placeholder="https://soju.com" type="url" />
-          <button type="submit" class="add" id="soju-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="soju-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://soju.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://soju.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 
-
   <script type="module" src="../init.js"></script>
   <script type="module" src="./spotify.js"></script>
   <script type="module" src="../../../assets/javascripts/localise.js"></script>

src/pages/options/spotify/spotify.js

@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/tiktok/tiktok.html

@@ -144,49 +144,53 @@
 
     <hr>
 
-    <div id="normal">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="proxiTok-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-proxiTok-normal-instance-form">
+    <div id="proxiTok">
+      <div class="normal">
         <div class="some-block option-block">
-          <input id="proxiTok-normal-custom-instance" placeholder="https://proxiTok.com" type="url" />
-          <button type="submit" class="add" id="proxiTok-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="proxiTok-normal-custom-checklist"></div>
-    </div>
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="proxiTok-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-proxiTok-tor-instance-form">
+        <div class="checklist checklist"></div>
+        <hr>
         <div class="some-block option-block">
-          <input id="proxiTok-tor-custom-instance" placeholder="https://proxiTok.com" type="url" />
-          <button type="submit" class="add" id="proxiTok-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-      </form>
-      <div class="checklist" id="proxiTok-tor-custom-checklist"></div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://proxiTok.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://proxiTok.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
     </div>
   </section>
 

src/pages/options/tiktok/tiktok.js

@@ -3,12 +3,12 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableTiktokElement = document.getElementById("disable-tiktok");
 disableTiktokElement.addEventListener("change",
-    (event) => tiktokHelper.setDisable(!event.target.checked)
+    event => tiktokHelper.setDisable(!event.target.checked)
 );
 
 let protocolElement = document.getElementById("protocol")
 protocolElement.addEventListener("change",
-    (event) => {
+    event => {
         let protocol = event.target.options[protocolElement.selectedIndex].value
         tiktokHelper.setProtocol(protocol);
         changeProtocolSettings(protocol);
@@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';

src/pages/options/translate/translate.html

@@ -2,12 +2,12 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
-    <link href="../../stylesheets/styles.css" rel="stylesheet" />
-    <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
+  <link href="../../stylesheets/styles.css" rel="stylesheet" />
+  <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title>
 </head>
 
 <body dir="auto" class="option">
@@ -128,380 +128,378 @@
 
   </section>
 
-    <section class="option-block">
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_enable__">Enable</h4>
-            <input id="disable-simplyTranslate" type="checkbox" checked />
-        </div>
+  <section class="option-block">
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_enable__">Enable</h4>
+      <input id="disable-simplyTranslate" type="checkbox" checked />
+    </div>
 
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_frontend__">Frontend</h4>
-            <select id="translate-frontend">
-                <option value="simplyTranslate">SimplyTranslate</option>
-                <option value="lingva">Lingva</option>
-            </select>
-        </div>
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_frontend__">Frontend</h4>
+      <select id="translate-frontend">
+        <option value="simplyTranslate">SimplyTranslate</option>
+        <option value="lingva">Lingva</option>
+      </select>
+    </div>
 
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_protocol__">Protocol</h4>
-            <select id="protocol">
-                <option value="normal" data-localise="__MSG_normal__">Normal</option>
-                <option value="tor" data-localise="__MSG_tor__">Tor</option>
-            </select>
-        </div>
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_protocol__">Protocol</h4>
+      <select id="protocol">
+        <option value="normal" data-localise="__MSG_normal__">Normal</option>
+        <option value="tor" data-localise="__MSG_tor__">Tor</option>
+      </select>
+    </div>
 
+    <hr>
+
+    <div id="simplyTranslate">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_from__">From</h4>
+        <select class="from">
+          <option value="DEFAULT">Default</option>
+          <option value="auto">Auto</option>
+          <option value="af">Afrikaans</option>
+          <option value="sq">Albanian</option>
+          <option value="am">Amharic</option>
+          <option value="ar">Arabic</option>
+          <option value="hy">Armenian</option>
+          <option value="az">Azerbaijani</option>
+          <option value="eu">Basque</option>
+          <option value="be">Belarusian</option>
+          <option value="bn">Bengali</option>
+          <option value="bs">Bosnian</option>
+          <option value="bg">Bulgarian</option>
+          <option value="ca">Catalan</option>
+          <option value="ceb">Cebuano</option>
+          <option value="ny">Chichewa</option>
+          <option value="zh-CN">Chinese</option>
+          <option value="co">Corsican</option>
+          <option value="hr">Croatian</option>
+          <option value="cs">Czech</option>
+          <option value="da">Danish</option>
+          <option value="nl">Dutch</option>
+          <option value="en">English</option>
+          <option value="eo">Esperanto</option>
+          <option value="et">Estonian</option>
+          <option value="tl">Filipino</option>
+          <option value="fi">Finnish</option>
+          <option value="fr">French</option>
+          <option value="fy">Frisian</option>
+          <option value="gl">Galician</option>
+          <option value="ka">Georgian</option>
+          <option value="de">German</option>
+          <option value="el">Greek</option>
+          <option value="gu">Gujarati</option>
+          <option value="ht">Haitian Creole</option>
+          <option value="ha">Hausa</option>
+          <option value="haw">Hawaiian</option>
+          <option value="iw">Hebrew</option>
+          <option value="hi">Hindi</option>
+          <option value="hmn">Hmong</option>
+          <option value="hu">Hungarian</option>
+          <option value="is">Icelandic</option>
+          <option value="ig">Igbo</option>
+          <option value="id">Indonesian</option>
+          <option value="ga">Irish</option>
+          <option value="it">Italian</option>
+          <option value="ja">Japanese</option>
+          <option value="jw">Javanese</option>
+          <option value="kn">Kannada</option>
+          <option value="kk">Kazakh</option>
+          <option value="km">Khmer</option>
+          <option value="rw">Kinyarwanda</option>
+          <option value="ko">Korean</option>
+          <option value="ku">Kurdish (Kurmanji)</option>
+          <option value="ky">Kyrgyz</option>
+          <option value="lo">Lao</option>
+          <option value="la">Latin</option>
+          <option value="lv">Latvian</option>
+          <option value="lt">Lithuanian</option>
+          <option value="lb">Luxembourgish</option>
+          <option value="mk">Macedonian</option>
+          <option value="mg">Malagasy</option>
+          <option value="ms">Malay</option>
+          <option value="ml">Malayalam</option>
+          <option value="mt">Maltese</option>
+          <option value="mi">Maori</option>
+          <option value="mr">Marathi</option>
+          <option value="mn">Mongolian</option>
+          <option value="my">Myanmar (Burmese)</option>
+          <option value="ne">Nepali</option>
+          <option value="no">Norwegian</option>
+          <option value="or">Odia (Oriya)</option>
+          <option value="ps">Pashto</option>
+          <option value="fa">Persian</option>
+          <option value="pl">Polish</option>
+          <option value="pt">Portuguese</option>
+          <option value="pa">Punjabi</option>
+          <option value="ro">Romanian</option>
+          <option value="ru">Russian</option>
+          <option value="sm">Samoan</option>
+          <option value="gd">Scots Gaelic</option>
+          <option value="sr">Serbian</option>
+          <option value="st">Sesotho</option>
+          <option value="sn">Shona</option>
+          <option value="sd">Sindhi</option>
+          <option value="si">Sinhala</option>
+          <option value="sk">Slovak</option>
+          <option value="sl">Slovenian</option>
+          <option value="so">Somali</option>
+          <option value="es">Spanish</option>
+          <option value="su">Sundanese</option>
+          <option value="sw">Swahili</option>
+          <option value="sv">Swedish</option>
+          <option value="tg">Tajik</option>
+          <option value="ta">Tamil</option>
+          <option value="tt">Tatar</option>
+          <option value="te">Telugu</option>
+          <option value="th">Thai</option>
+          <option value="tr">Turkish</option>
+          <option value="tk">Turkmen</option>
+          <option value="uk">Ukrainian</option>
+          <option value="ur">Urdu</option>
+          <option value="ug">Uyghur</option>
+          <option value="uz">Uzbek</option>
+          <option value="vi">Vietnamese</option>
+          <option value="cy">Welsh</option>
+          <option value="xh">Xhosa</option>
+          <option value="yi">Yiddish</option>
+          <option value="yo">Yoruba</option>
+          <option value="zu">Zulu</option>
+        </select>
+      </div>
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_to__">To</h4>
+        <select class="to">
+          <option value="DEFAULT">Default</option>
+          <option value="af">Afrikaans</option>
+          <option value="sq">Albanian</option>
+          <option value="am">Amharic</option>
+          <option value="ar">Arabic</option>
+          <option value="hy">Armenian</option>
+          <option value="az">Azerbaijani</option>
+          <option value="eu">Basque</option>
+          <option value="be">Belarusian</option>
+          <option value="bn">Bengali</option>
+          <option value="bs">Bosnian</option>
+          <option value="bg">Bulgarian</option>
+          <option value="ca">Catalan</option>
+          <option value="ceb">Cebuano</option>
+          <option value="ny">Chichewa</option>
+          <option value="zh-CN">Chinese</option>
+          <option value="co">Corsican</option>
+          <option value="hr">Croatian</option>
+          <option value="cs">Czech</option>
+          <option value="da">Danish</option>
+          <option value="nl">Dutch</option>
+          <option value="en">English</option>
+          <option value="eo">Esperanto</option>
+          <option value="et">Estonian</option>
+          <option value="tl">Filipino</option>
+          <option value="fi">Finnish</option>
+          <option value="fr">French</option>
+          <option value="fy">Frisian</option>
+          <option value="gl">Galician</option>
+          <option value="ka">Georgian</option>
+          <option value="de">German</option>
+          <option value="el">Greek</option>
+          <option value="gu">Gujarati</option>
+          <option value="ht">Haitian Creole</option>
+          <option value="ha">Hausa</option>
+          <option value="haw">Hawaiian</option>
+          <option value="iw">Hebrew</option>
+          <option value="hi">Hindi</option>
+          <option value="hmn">Hmong</option>
+          <option value="hu">Hungarian</option>
+          <option value="is">Icelandic</option>
+          <option value="ig">Igbo</option>
+          <option value="id">Indonesian</option>
+          <option value="ga">Irish</option>
+          <option value="it">Italian</option>
+          <option value="ja">Japanese</option>
+          <option value="jw">Javanese</option>
+          <option value="kn">Kannada</option>
+          <option value="kk">Kazakh</option>
+          <option value="km">Khmer</option>
+          <option value="rw">Kinyarwanda</option>
+          <option value="ko">Korean</option>
+          <option value="ku">Kurdish (Kurmanji)</option>
+          <option value="ky">Kyrgyz</option>
+          <option value="lo">Lao</option>
+          <option value="la">Latin</option>
+          <option value="lv">Latvian</option>
+          <option value="lt">Lithuanian</option>
+          <option value="lb">Luxembourgish</option>
+          <option value="mk">Macedonian</option>
+          <option value="mg">Malagasy</option>
+          <option value="ms">Malay</option>
+          <option value="ml">Malayalam</option>
+          <option value="mt">Maltese</option>
+          <option value="mi">Maori</option>
+          <option value="mr">Marathi</option>
+          <option value="mn">Mongolian</option>
+          <option value="my">Myanmar (Burmese)</option>
+          <option value="ne">Nepali</option>
+          <option value="no">Norwegian</option>
+          <option value="or">Odia (Oriya)</option>
+          <option value="ps">Pashto</option>
+          <option value="fa">Persian</option>
+          <option value="pl">Polish</option>
+          <option value="pt">Portuguese</option>
+          <option value="pa">Punjabi</option>
+          <option value="ro">Romanian</option>
+          <option value="ru">Russian</option>
+          <option value="sm">Samoan</option>
+          <option value="gd">Scots Gaelic</option>
+          <option value="sr">Serbian</option>
+          <option value="st">Sesotho</option>
+          <option value="sn">Shona</option>
+          <option value="sd">Sindhi</option>
+          <option value="si">Sinhala</option>
+          <option value="sk">Slovak</option>
+          <option value="sl">Slovenian</option>
+          <option value="so">Somali</option>
+          <option value="es">Spanish</option>
+          <option value="su">Sundanese</option>
+          <option value="sw">Swahili</option>
+          <option value="sv">Swedish</option>
+          <option value="tg">Tajik</option>
+          <option value="ta">Tamil</option>
+          <option value="tt">Tatar</option>
+          <option value="te">Telugu</option>
+          <option value="th">Thai</option>
+          <option value="tr">Turkish</option>
+          <option value="tk">Turkmen</option>
+          <option value="uk">Ukrainian</option>
+          <option value="ur">Urdu</option>
+          <option value="ug">Uyghur</option>
+          <option value="uz">Uzbek</option>
+          <option value="vi">Vietnamese</option>
+          <option value="cy">Welsh</option>
+          <option value="xh">Xhosa</option>
+          <option value="yi">Yiddish</option>
+          <option value="yo">Yoruba</option>
+          <option value="zu">Zulu</option>
+        </select>
+      </div>
+
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_engine__">Engine</h4>
+        <select class="engine">
+          <option value="DEFAULT" data-localise="__MSG_default__">Default</option>
+          <option value="google">Google</option>
+          <option value="libre">Libre</option>
+          <option value="deepl">Deepl</option>
+          <option value="iciba">ICIBA</option>
+          <option value="reverso">Reverso</option>
+        </select>
+      </div>
+      <div class="normal">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist checklist">
+        </div>
         <hr>
-
-        <div id="simplyTranslate">
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_from__">From</h4>
-                <select id="from">
-                    <option value="DEFAULT">Default</option>
-                    <option value="auto">Auto</option>
-                    <option value="af">Afrikaans</option>
-                    <option value="sq">Albanian</option>
-                    <option value="am">Amharic</option>
-                    <option value="ar">Arabic</option>
-                    <option value="hy">Armenian</option>
-                    <option value="az">Azerbaijani</option>
-                    <option value="eu">Basque</option>
-                    <option value="be">Belarusian</option>
-                    <option value="bn">Bengali</option>
-                    <option value="bs">Bosnian</option>
-                    <option value="bg">Bulgarian</option>
-                    <option value="ca">Catalan</option>
-                    <option value="ceb">Cebuano</option>
-                    <option value="ny">Chichewa</option>
-                    <option value="zh-CN">Chinese</option>
-                    <option value="co">Corsican</option>
-                    <option value="hr">Croatian</option>
-                    <option value="cs">Czech</option>
-                    <option value="da">Danish</option>
-                    <option value="nl">Dutch</option>
-                    <option value="en">English</option>
-                    <option value="eo">Esperanto</option>
-                    <option value="et">Estonian</option>
-                    <option value="tl">Filipino</option>
-                    <option value="fi">Finnish</option>
-                    <option value="fr">French</option>
-                    <option value="fy">Frisian</option>
-                    <option value="gl">Galician</option>
-                    <option value="ka">Georgian</option>
-                    <option value="de">German</option>
-                    <option value="el">Greek</option>
-                    <option value="gu">Gujarati</option>
-                    <option value="ht">Haitian Creole</option>
-                    <option value="ha">Hausa</option>
-                    <option value="haw">Hawaiian</option>
-                    <option value="iw">Hebrew</option>
-                    <option value="hi">Hindi</option>
-                    <option value="hmn">Hmong</option>
-                    <option value="hu">Hungarian</option>
-                    <option value="is">Icelandic</option>
-                    <option value="ig">Igbo</option>
-                    <option value="id">Indonesian</option>
-                    <option value="ga">Irish</option>
-                    <option value="it">Italian</option>
-                    <option value="ja">Japanese</option>
-                    <option value="jw">Javanese</option>
-                    <option value="kn">Kannada</option>
-                    <option value="kk">Kazakh</option>
-                    <option value="km">Khmer</option>
-                    <option value="rw">Kinyarwanda</option>
-                    <option value="ko">Korean</option>
-                    <option value="ku">Kurdish (Kurmanji)</option>
-                    <option value="ky">Kyrgyz</option>
-                    <option value="lo">Lao</option>
-                    <option value="la">Latin</option>
-                    <option value="lv">Latvian</option>
-                    <option value="lt">Lithuanian</option>
-                    <option value="lb">Luxembourgish</option>
-                    <option value="mk">Macedonian</option>
-                    <option value="mg">Malagasy</option>
-                    <option value="ms">Malay</option>
-                    <option value="ml">Malayalam</option>
-                    <option value="mt">Maltese</option>
-                    <option value="mi">Maori</option>
-                    <option value="mr">Marathi</option>
-                    <option value="mn">Mongolian</option>
-                    <option value="my">Myanmar (Burmese)</option>
-                    <option value="ne">Nepali</option>
-                    <option value="no">Norwegian</option>
-                    <option value="or">Odia (Oriya)</option>
-                    <option value="ps">Pashto</option>
-                    <option value="fa">Persian</option>
-                    <option value="pl">Polish</option>
-                    <option value="pt">Portuguese</option>
-                    <option value="pa">Punjabi</option>
-                    <option value="ro">Romanian</option>
-                    <option value="ru">Russian</option>
-                    <option value="sm">Samoan</option>
-                    <option value="gd">Scots Gaelic</option>
-                    <option value="sr">Serbian</option>
-                    <option value="st">Sesotho</option>
-                    <option value="sn">Shona</option>
-                    <option value="sd">Sindhi</option>
-                    <option value="si">Sinhala</option>
-                    <option value="sk">Slovak</option>
-                    <option value="sl">Slovenian</option>
-                    <option value="so">Somali</option>
-                    <option value="es">Spanish</option>
-                    <option value="su">Sundanese</option>
-                    <option value="sw">Swahili</option>
-                    <option value="sv">Swedish</option>
-                    <option value="tg">Tajik</option>
-                    <option value="ta">Tamil</option>
-                    <option value="tt">Tatar</option>
-                    <option value="te">Telugu</option>
-                    <option value="th">Thai</option>
-                    <option value="tr">Turkish</option>
-                    <option value="tk">Turkmen</option>
-                    <option value="uk">Ukrainian</option>
-                    <option value="ur">Urdu</option>
-                    <option value="ug">Uyghur</option>
-                    <option value="uz">Uzbek</option>
-                    <option value="vi">Vietnamese</option>
-                    <option value="cy">Welsh</option>
-                    <option value="xh">Xhosa</option>
-                    <option value="yi">Yiddish</option>
-                    <option value="yo">Yoruba</option>
-                    <option value="zu">Zulu</option>
-                </select>
-            </div>
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_to__">To</h4>
-                <select id="to">
-                    <option value="DEFAULT">Default</option>
-                    <option value="af">Afrikaans</option>
-                    <option value="sq">Albanian</option>
-                    <option value="am">Amharic</option>
-                    <option value="ar">Arabic</option>
-                    <option value="hy">Armenian</option>
-                    <option value="az">Azerbaijani</option>
-                    <option value="eu">Basque</option>
-                    <option value="be">Belarusian</option>
-                    <option value="bn">Bengali</option>
-                    <option value="bs">Bosnian</option>
-                    <option value="bg">Bulgarian</option>
-                    <option value="ca">Catalan</option>
-                    <option value="ceb">Cebuano</option>
-                    <option value="ny">Chichewa</option>
-                    <option value="zh-CN">Chinese</option>
-                    <option value="co">Corsican</option>
-                    <option value="hr">Croatian</option>
-                    <option value="cs">Czech</option>
-                    <option value="da">Danish</option>
-                    <option value="nl">Dutch</option>
-                    <option value="en">English</option>
-                    <option value="eo">Esperanto</option>
-                    <option value="et">Estonian</option>
-                    <option value="tl">Filipino</option>
-                    <option value="fi">Finnish</option>
-                    <option value="fr">French</option>
-                    <option value="fy">Frisian</option>
-                    <option value="gl">Galician</option>
-                    <option value="ka">Georgian</option>
-                    <option value="de">German</option>
-                    <option value="el">Greek</option>
-                    <option value="gu">Gujarati</option>
-                    <option value="ht">Haitian Creole</option>
-                    <option value="ha">Hausa</option>
-                    <option value="haw">Hawaiian</option>
-                    <option value="iw">Hebrew</option>
-                    <option value="hi">Hindi</option>
-                    <option value="hmn">Hmong</option>
-                    <option value="hu">Hungarian</option>
-                    <option value="is">Icelandic</option>
-                    <option value="ig">Igbo</option>
-                    <option value="id">Indonesian</option>
-                    <option value="ga">Irish</option>
-                    <option value="it">Italian</option>
-                    <option value="ja">Japanese</option>
-                    <option value="jw">Javanese</option>
-                    <option value="kn">Kannada</option>
-                    <option value="kk">Kazakh</option>
-                    <option value="km">Khmer</option>
-                    <option value="rw">Kinyarwanda</option>
-                    <option value="ko">Korean</option>
-                    <option value="ku">Kurdish (Kurmanji)</option>
-                    <option value="ky">Kyrgyz</option>
-                    <option value="lo">Lao</option>
-                    <option value="la">Latin</option>
-                    <option value="lv">Latvian</option>
-                    <option value="lt">Lithuanian</option>
-                    <option value="lb">Luxembourgish</option>
-                    <option value="mk">Macedonian</option>
-                    <option value="mg">Malagasy</option>
-                    <option value="ms">Malay</option>
-                    <option value="ml">Malayalam</option>
-                    <option value="mt">Maltese</option>
-                    <option value="mi">Maori</option>
-                    <option value="mr">Marathi</option>
-                    <option value="mn">Mongolian</option>
-                    <option value="my">Myanmar (Burmese)</option>
-                    <option value="ne">Nepali</option>
-                    <option value="no">Norwegian</option>
-                    <option value="or">Odia (Oriya)</option>
-                    <option value="ps">Pashto</option>
-                    <option value="fa">Persian</option>
-                    <option value="pl">Polish</option>
-                    <option value="pt">Portuguese</option>
-                    <option value="pa">Punjabi</option>
-                    <option value="ro">Romanian</option>
-                    <option value="ru">Russian</option>
-                    <option value="sm">Samoan</option>
-                    <option value="gd">Scots Gaelic</option>
-                    <option value="sr">Serbian</option>
-                    <option value="st">Sesotho</option>
-                    <option value="sn">Shona</option>
-                    <option value="sd">Sindhi</option>
-                    <option value="si">Sinhala</option>
-                    <option value="sk">Slovak</option>
-                    <option value="sl">Slovenian</option>
-                    <option value="so">Somali</option>
-                    <option value="es">Spanish</option>
-                    <option value="su">Sundanese</option>
-                    <option value="sw">Swahili</option>
-                    <option value="sv">Swedish</option>
-                    <option value="tg">Tajik</option>
-                    <option value="ta">Tamil</option>
-                    <option value="tt">Tatar</option>
-                    <option value="te">Telugu</option>
-                    <option value="th">Thai</option>
-                    <option value="tr">Turkish</option>
-                    <option value="tk">Turkmen</option>
-                    <option value="uk">Ukrainian</option>
-                    <option value="ur">Urdu</option>
-                    <option value="ug">Uyghur</option>
-                    <option value="uz">Uzbek</option>
-                    <option value="vi">Vietnamese</option>
-                    <option value="cy">Welsh</option>
-                    <option value="xh">Xhosa</option>
-                    <option value="yi">Yiddish</option>
-                    <option value="yo">Yoruba</option>
-                    <option value="zu">Zulu</option>
-                </select>
-            </div>
-
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_engine__">Engine</h4>
-                <select id="simplyTranslate-engine">
-                    <option value="DEFAULT" data-localise="__MSG_default__">Default</option>
-                    <option value="google">Google</option>
-                    <option value="libre">Libre</option>
-                    <option value="deepl">Deepl</option>
-                    <option value="iciba">ICIBA</option>
-                    <option value="reverso">Reverso</option>
-                </select>
-            </div>
-            <div id="simplyTranslate-normal">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="simplyTranslate-normal-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-                </div>
-                <form id="custom-simplyTranslate-normal-instance-form">
-                    <div class="some-block option-block">
-                        <input id="simplyTranslate-normal-custom-instance" placeholder="https://simplyTranslate.com"
-                            type="url" />
-                        <button type="submit" class="add" id="simplyTranslate-normal-add-instance">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                                fill="currentColor">
-                                <path d="M0 0h24v24H0V0z" fill="none" />
-                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                            </svg>
-                        </button>
-                    </div>
-                </form>
-                <div class="checklist" id="simplyTranslate-normal-custom-checklist"></div>
-            </div>
-            <div id="simplyTranslate-tor">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="simplyTranslate-tor-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise"__MSG_customInstances__">Custom Instances</h4>
-                </div>
-                <form id="custom-simplyTranslate-tor-instance-form">
-                    <div class="some-block option-block">
-                        <input id="simplyTranslate-tor-custom-instance" placeholder="https://simplyTranslate.com"
-                            type="url" />
-                        <button type="submit" class="add" id="simplyTranslate-tor-add-instance">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                                fill="currentColor">
-                                <path d="M0 0h24v24H0V0z" fill="none" />
-                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                            </svg>
-                        </button>
-                    </div>
-                </form>
-                <div class="checklist" id="simplyTranslate-tor-custom-checklist"></div>
-            </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-
-        <div id="lingva">
-            <div id="lingva-normal">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="lingva-normal-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-                </div>
-                <form id="custom-lingva-normal-instance-form">
-                    <div class="some-block option-block">
-                        <input id="lingva-normal-custom-instance" placeholder="https://lingva.com" type="url" />
-                        <button type="submit" class="add" id="lingva-normal-add-instance">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                                fill="currentColor">
-                                <path d="M0 0h24v24H0V0z" fill="none" />
-                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                            </svg>
-                        </button>
-                    </div>
-                </form>
-                <div class="checklist" id="lingva-normal-custom-checklist"></div>
-            </div>
-            <div id="lingva-tor">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="lingva-tor-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-                </div>
-                <form id="custom-lingva-tor-instance-form">
-                    <div class="some-block option-block">
-                        <input id="lingva-tor-custom-instance" placeholder="https://lingva.com" type="url" />
-                        <button type="submit" class="add" id="lingva-tor-add-instance">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                                fill="currentColor">
-                                <path d="M0 0h24v24H0V0z" fill="none" />
-                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                            </svg>
-                        </button>
-                    </div>
-                </form>
-                <div class="checklist" id="lingva-tor-custom-checklist"></div>
-            </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://simplyTranslate.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
+        <div class="checklist 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://simplyTranslate.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+    </div>
 
-    </section>
+    <div id="lingva">
+      <div class="normal">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://lingva.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://lingva.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+    </div>
 
-    <script type="module" src="../init.js"></script>
-    <script type="module" src="./translate.js"></script>
-    <script type="module" src="../../../assets/javascripts/localise.js"></script>
+  </section>
+
+  <script type="module" src="../init.js"></script>
+  <script type="module" src="./translate.js"></script>
+  <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
 </html>

src/pages/options/translate/translate.js

@@ -6,8 +6,8 @@ disableElement.addEventListener("change",
     (event) => translateHelper.setDisable(!event.target.checked)
 );
 
-let simplyTranslateDivElement = document.getElementById("simplyTranslate")
-let lingvaDivElement = document.getElementById("lingva")
+let simplyTranslateDivElement = document.getElementById("simplyTranslate");
+let lingvaDivElement = document.getElementById("lingva");
 
 
 function changeFrontendsSettings(frontend) {
@@ -22,14 +22,14 @@ function changeFrontendsSettings(frontend) {
 }
 let translateFrontendElement = document.getElementById("translate-frontend");
 translateFrontendElement.addEventListener("change",
-    (event) => {
+    event => {
         let frontend = event.target.options[translateFrontendElement.selectedIndex].value
         translateHelper.setFrontend(frontend)
         changeFrontendsSettings(frontend);
     }
 );
 
-let protocolElement = document.getElementById("protocol")
+let protocolElement = document.getElementById("protocol");
 protocolElement.addEventListener("change",
     (event) => {
         let protocol = event.target.options[protocolElement.selectedIndex].value
@@ -39,11 +39,12 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate-normal");
-    let torSimplyTranslateDiv = document.getElementById("simplyTranslate-tor");
+    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
+    let torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
+
+    let normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
+    let torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
 
-    let normalLingvaDiv = document.getElementById("lingva-normal");
-    let torLingvaDiv = document.getElementById("lingva-tor");
     if (protocol == 'normal') {
         normalSimplyTranslateDiv.style.display = 'block';
         normalLingvaDiv.style.display = 'block';
@@ -58,17 +59,18 @@ function changeProtocolSettings(protocol) {
     }
 }
 
-let fromElement = document.getElementById("from");
+let fromElement = document.getElementsByClassName("from")[0];
 fromElement.addEventListener("change",
     event => translateHelper.setFrom(event.target.options[fromElement.selectedIndex].value)
 );
 
-let toElement = document.getElementById("to");
+let toElement = document.getElementsByClassName("to")[0];
 toElement.addEventListener("change",
     event => translateHelper.setTo(event.target.options[toElement.selectedIndex].value)
 );
 
-let simplyTranslateEngineElement = document.getElementById("simplyTranslate-engine");
+let simplyTranslateElement = document.getElementById("simplyTranslate")
+let simplyTranslateEngineElement = simplyTranslateElement.getElementsByClassName("engine")[0];
 simplyTranslateEngineElement.addEventListener("change",
     event => translateHelper.setSimplyTranslateEngine(event.target.options[simplyTranslateEngineElement.selectedIndex].value)
 );
@@ -110,7 +112,6 @@ translateHelper.init().then(() => {
         translateHelper.setSimplyTranslateTorCustomRedirects
     );
 
-
     commonHelper.processDefaultCustomInstances(
         'lingva',
         'normal',

src/pages/options/twitter/twitter.html

@@ -149,84 +149,154 @@
       <input id="bypass-watch-on-twitter" type="checkbox" checked />
     </div>
 
-    <hr>
-
-    <div class="custom-settings">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_theme__">Theme</h4>
-        <select name="theme">
-          <option value="Auto">Auto</option>
-          <option value="Auto (Twitter)">Auto (Twitter)</option>
-          <option value="Auto (Twitter)">Auto (Twitter)</option>
-          <option value="Black">Black</option>
-          <option value="Mastodon">Mastodon</option>
-          <option value="Nitter">Nitter</option>
-          <option value="Pleroma">Pleroma</option>
-          <option value="Twitter">Twitter</option>
-          <option value="Twitter Dark" selected="">Twitter Dark</option>
-        </select>
-      </div>
-    </div>
-
-
     <div class="some-block option-block">
-      <h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4>
-      <input id="infiniteScroll" type="checkbox" />
+      <h4 data-localise="__MSG_enableCustomNitter__">Enable Custom Settings (will use cookies)</h4>
+      <input id="enable-twitter-custom-settings" type="checkbox" />
     </div>
 
-    <div class="some-block option-block">
-      <h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4>
-      <input id="stickyProfile" type="checkbox" />
-    </div>
+    <div id="nitter">
 
-    <hr>
+      <div class="custom-settings">
 
-    <div id="normal">
-
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist" id="nitter-normal-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-nitter-normal-instance-form">
+        <hr>
         <div class="some-block option-block">
-          <input id="nitter-normal-custom-instance" placeholder="https://nitter.com" type="url" />
-          <button type="submit" class="add" id="nitter-normal-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h2>Display</h2>
         </div>
-      </form>
-      <div class="checklist" id="nitter-normal-custom-checklist"></div>
 
-    </div>
-
-    <div id="tor">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4>
-      </div>
-      <div class="checklist" id="nitter-tor-checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form id="custom-nitter-tor-instance-form">
         <div class="some-block option-block">
-          <input id="nitter-tor-custom-instance" placeholder="https://nitter.com" type="url" />
-          <button type="submit" class="add" id="nitter-tor-add-instance">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-            </svg>
-          </button>
+          <h4 data-localise="__MSG_theme__">Theme</h4>
+          <select name="theme">
+            <option value="Auto">Auto</option>
+            <option value="Auto (Twitter)">Auto (Twitter)</option>
+            <option value="Auto (Twitter)">Auto (Twitter)</option>
+            <option value="Black">Black</option>
+            <option value="Mastodon">Mastodon</option>
+            <option value="Nitter">Nitter</option>
+            <option value="Pleroma">Pleroma</option>
+            <option value="Twitter">Twitter</option>
+            <option value="Twitter Dark" selected="">Twitter Dark</option>
+          </select>
         </div>
-      </form>
-      <div class="checklist" id="nitter-tor-custom-checklist"></div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4>
+          <input class="infiniteScroll" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4>
+          <input class="stickyProfile" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_bidiSupport__">Support bidirectional text (makes clicking on tweets harder)</h4>
+          <input class="bidiSupport" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideTweetStats__">Hide tweet stats (replies, retweets, likes)</h4>
+          <input class="hideTweetStats" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideBanner__">Hide profile banner</h4>
+          <input class="hideBanner" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hidePins__">Hide pinned tweets</h4>
+          <input class="hidePins" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hideReplies__">Hide tweet replies</h4>
+          <input class="hideReplies" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_squareAvatars__">Square profile pictures</h4>
+          <input class="squareAvatars" type="checkbox" />
+        </div>
+
+        <hr>
+
+        <div class="some-block option-block">
+          <h2>Media</h2>
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_mp4Playback__">Enable mp4 video playback (only for gifs)</h4>
+          <input class="mp4Playback" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_hlsPlayback__">Enable hls video streaming (requires JavaScript)</h4>
+          <input class="hlsPlayback" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_proxyVideos__">Proxy video streaming through the server (might be slow)</h4>
+          <input class="proxyVideos" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayGifs__">Autoplay gifs</h4>
+          <input class="autoplayGifs" type="checkbox" />
+        </div>
+
+      </div>
+      <hr>
+
+      <div class="normal">
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist 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://nitter.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+
+      </div>
+
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4>
+        </div>
+        <div class="checklist 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://nitter.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
+
     </div>
 
   </section>

src/pages/options/twitter/twitter.js

@@ -2,23 +2,23 @@ import twitterHelper from "../../../assets/javascripts/helpers/twitter.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableTwitterElement = document.getElementById("disable-nitter");
-disableTwitterElement.addEventListener("change",
-    (event) => twitterHelper.setDisable(!event.target.checked)
-);
-
-let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    (event) => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        twitterHelper.setProtocol(protocol);
-        changeProtocolSettings(protocol);
-    }
-);
+let customSettingsDivElement = document.getElementsByClassName("custom-settings");
+let protocolElement = document.getElementById("protocol");
+let enableYoutubeCustomSettingsElement = document.getElementById("enable-twitter-custom-settings");
+let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter");
 
+let nitterElement = document.getElementById("nitter");
+document.addEventListener("change", _ => {
+    twitterHelper.setDisable(!disableTwitterElement.checked)
+    twitterHelper.setProtocol(protocolElement.value);
+    twitterHelper.setEnableCustomSettings(enableYoutubeCustomSettingsElement.checked);
+    twitterHelper.setBypassWatchOnTwitter(bypassWatchOnTwitterElement.checked);
+    changeProtocolSettings(protocolElement.value);
+})
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = nitterElement.getElementsByClassName("normal")[0];
+    let torDiv = nitterElement.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -27,15 +27,15 @@ function changeProtocolSettings(protocol) {
         normalDiv.style.display = 'none';
         torDiv.style.display = 'block';
     }
+    if (enableYoutubeCustomSettingsElement.checked)
+        for (const item of customSettingsDivElement) item.style.display = 'block';
+    else
+        for (const item of customSettingsDivElement) item.style.display = 'none';
 }
 
-let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter")
-bypassWatchOnTwitterElement.addEventListener("change",
-    event => twitterHelper.setBypassWatchOnTwitter(event.target.checked)
-);
-
 twitterHelper.init().then(() => {
     disableTwitterElement.checked = !twitterHelper.getDisable();
+    enableYoutubeCustomSettingsElement.checked = twitterHelper.getEnableCustomSettings();
     bypassWatchOnTwitterElement.checked = twitterHelper.getBypassWatchOnTwitter();
 
     let protocol = twitterHelper.getProtocol();

src/pages/options/wikipedia/wikipedia.html

@@ -2,12 +2,12 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
-    <link href="../../stylesheets/styles.css" rel="stylesheet" />
-    <title>LibRedirect: Wikipedia</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
+  <link href="../../stylesheets/styles.css" rel="stylesheet" />
+  <title>LibRedirect: Wikipedia</title>
 </head>
 
 <body dir="auto" class="option">
@@ -54,7 +54,7 @@
 
     <div class="title">
       <img src="../../../assets/images/imgur-icon.png" />
-      <a href="../imgur/imgur.html"  data-localise="__MSG_imgur__">Imgur</a>
+      <a href="../imgur/imgur.html" data-localise="__MSG_imgur__">Imgur</a>
     </div>
 
     <div class="title">
@@ -127,78 +127,78 @@
     </div>
 
   </section>
-    <section class="option-block">
+  <section class="option-block">
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_enable__">Enable</h4>
+      <input id="disable-wikipedia" type="checkbox" checked />
+    </div>
+
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_protocol__">Protocol</h4>
+      <select id="protocol">
+        <option value="normal" data-localise="__MSG_normal__">Normal</option>
+        <option value="tor" data-localise="__MSG_tor__">Tor</option>
+      </select>
+    </div>
+
+    <hr>
+    <div id="wikiless">
+      <div class="normal">
         <div class="some-block option-block">
-            <h4 data-localise="__MSG_enable__">Enable</h4>
-            <input id="disable-wikipedia" type="checkbox" checked />
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-
-
-        <div class="some-block option-block">
-            <h4 data-localise="__MSG_protocol__">Protocol</h4>
-            <select id="protocol">
-                <option value="normal" data-localise="__MSG_normal__">Normal</option>
-                <option value="tor" data-localise="__MSG_tor__">Tor</option>
-            </select>
+        <div class="checklist checklist">
         </div>
-
         <hr>
-
-        <div id="normal">
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-            </div>
-            <div class="checklist" id="wikiless-normal-checklist">
-            </div>
-            <hr>
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-            </div>
-            <form id="custom-wikiless-normal-instance-form">
-                <div class="some-block option-block">
-                    <input id="wikiless-normal-custom-instance" placeholder="https://wikiless.com" type="url" />
-                    <button type="submit" class="add" id="wikiless-normal-add-instance">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                            fill="currentColor">
-                            <path d="M0 0h24v24H0V0z" fill="none" />
-                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                        </svg>
-                    </button>
-                </div>
-            </form>
-            <div class="checklist" id="wikiless-normal-custom-checklist"></div>
+        <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://wikiless.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
+      </div>
 
-        <div id="tor">
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-            </div>
-            <div class="checklist" id="wikiless-tor-checklist">
-            </div>
-            <hr>
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-            </div>
-            <form id="custom-wikiless-tor-instance-form">
-                <div class="some-block option-block">
-                    <input id="wikiless-tor-custom-instance" placeholder="https://wikiless.com" type="url" />
-                    <button type="submit" class="add" id="wikiless-tor-add-instance">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                            fill="currentColor">
-                            <path d="M0 0h24v24H0V0z" fill="none" />
-                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                        </svg>
-                    </button>
-                </div>
-            </form>
-            <div class="checklist" id="wikiless-tor-custom-checklist"></div>
-
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-    </section>
+        <div class="checklist 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://wikiless.com" type="url" />
+            <button type="submit" class="add add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist custom-checklist"></div>
 
-    <script type="module" src="../init.js"></script>
-    <script type="module" src="./wikipedia.js"></script>
-    <script type="module" src="../../../assets/javascripts/localise.js"></script>
+      </div>
+    </div>
+  </section>
+
+  <script type="module" src="../init.js"></script>
+  <script type="module" src="./wikipedia.js"></script>
+  <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
 </html>

src/pages/options/wikipedia/wikipedia.js

@@ -3,22 +3,21 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableWikipediaElement = document.getElementById("disable-wikipedia");
 disableWikipediaElement.addEventListener("change",
-    (event) => wikipediaHelper.setDisable(!event.target.checked)
+    event => wikipediaHelper.setDisable(!event.target.checked)
 );
 
-let protocolElement = document.getElementById("protocol")
+let protocolElement = document.getElementById("protocol");
 protocolElement.addEventListener("change",
-    (event) => {
+    event => {
         let protocol = event.target.options[protocolElement.selectedIndex].value
         wikipediaHelper.setProtocol(protocol);
         changeProtocolSettings(protocol);
     }
 );
 
-
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementById("normal");
-    let torDiv = document.getElementById("tor");
+    let normalDiv = document.getElementsByClassName("normal")[0];
+    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -33,6 +32,7 @@ wikipediaHelper.init().then(() => {
     disableWikipediaElement.checked = !wikipediaHelper.getDisable();
 
     let protocol = wikipediaHelper.getProtocol();
+    console.log('protocol', protocol);
     protocolElement.value = protocol;
     changeProtocolSettings(protocol);
 

src/pages/options/youtube/invidious.js

@@ -1,165 +1,121 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let invidiousAlwaysProxyElement = document.getElementById("invidious-local");
-invidiousAlwaysProxyElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked)
-);
+let invidiousElement = document.getElementById('invidious');
+let invidiousAlwaysProxyElement = invidiousElement.getElementsByClassName("local")[0];
+let invidiousPlayerStyleElement = invidiousElement.getElementsByClassName("player_style")[0];
+let invidiousQualityElement = invidiousElement.getElementsByClassName("quality")[0];
+let invidiousVideoLoopElement = invidiousElement.getElementsByClassName("video_loop")[0];
+let invidiousContinueAutoplayElement = invidiousElement.getElementsByClassName("continue_autoplay")[0];
+let invidiousContinueElement = invidiousElement.getElementsByClassName("continue")[0];
+let youtubeListenElement = invidiousElement.getElementsByClassName("listen")[0];
+let invidiousSpeedElement = invidiousElement.getElementsByClassName("speed")[0];
+let invidiousQualityDashElement = invidiousElement.getElementsByClassName("quality_dash")[0];
+let invidiousRelatedVideoElement = invidiousElement.getElementsByClassName("related_videos")[0];
+let invidiousAnnotationsElement = invidiousElement.getElementsByClassName("annotations")[0];
+let invidiousExtendDescElement = invidiousElement.getElementsByClassName("extend_desc")[0];
+let invidiousVrModeElement = invidiousElement.getElementsByClassName("vr_mode")[0];
+let invidiousSavePlayerPosElement = invidiousElement.getElementsByClassName("save_player_pos")[0];
+let invidiousComments0Element = invidiousElement.getElementsByClassName("comments[0]")[0];
+let invidiousComments1Element = invidiousElement.getElementsByClassName("comments[1]")[0];
+let invidiousCaptions0Element = invidiousElement.getElementsByClassName("captions[0]")[0];
+let invidiousCaptions1Element = invidiousElement.getElementsByClassName("captions[1]")[0];
+let invidiousCaptions2Element = invidiousElement.getElementsByClassName("captions[2]")[0];
+let autoplayElement = invidiousElement.getElementsByClassName("youtubeAutoplay")[0];
+let volumeElement = invidiousElement.getElementsByClassName("volume")[0];
+let volumeValueElement = invidiousElement.getElementsByClassName("volume-value")[0];
 
-let invidiousPlayerStyleElement = document.getElementById("invidious-player_style");
-invidiousPlayerStyleElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
-);
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
 
-let invidiousQualityElement = document.getElementById("invidious-quality");
-invidiousQualityElement.addEventListener("change",
-    event => youtubeHelper.setinvidiousQuality(event.target.options[invidiousQualityElement.selectedIndex].value)
-);
+invidiousElement.addEventListener("change", async _ => {
+    console.log('changed invidious settings');
+    let commentsList = youtubeHelper.getInvidiousComments();
+    commentsList[0] = invidiousComments0Element.value;
+    commentsList[1] = invidiousComments1Element.value;
 
-let invidiousVideoLoopElement = document.getElementById("invidious-video_loop");
-invidiousVideoLoopElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousVideoLoop(event.target.checked)
-);
+    let captionsList = youtubeHelper.getInvidiousCaptions();
+    captionsList[0] = invidiousCaptions0Element.value;
+    captionsList[1] = invidiousCaptions1Element.value;
+    captionsList[2] = invidiousCaptions2Element.value;
 
-let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay");
-invidiousContinueAutoplayElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousContinueAutoplay(event.target.checked)
-);
-
-let invidiousContinueElement = document.getElementById("invidious-continue");
-invidiousContinueElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousContinue(event.target.checked)
-);
-
-let youtubeListenElement = document.getElementById("invidious-listen");
-youtubeListenElement.addEventListener("change",
-    event => youtubeHelper.setYoutubeListen(event.target.checked)
-);
-
-let invidiousSpeedElement = document.getElementById("invidious-speed");
-invidiousSpeedElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousSpeed(event.target.options[invidiousSpeedElement.selectedIndex].value)
-);
-
-let invidiousQualityDashElement = document.getElementById("invidious-quality_dash");
-invidiousQualityDashElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousQualityDash(event.target.options[invidiousQualityDashElement.selectedIndex].value)
-);
-
-let invidiousComments0Element = document.getElementById("invidious-comments[0]");
-invidiousComments0Element.addEventListener("change",
-    event => {
-        let commentsList = youtubeHelper.getInvidiousComments();
-        commentsList[0] = event.target.options[invidiousComments0Element.selectedIndex].value
-        youtubeHelper.setInvidiousComments(commentsList)
-    }
-);
-let invidiousComments1Element = document.getElementById("invidious-comments[1]");
-invidiousComments1Element.addEventListener("change",
-    event => {
-        let commentsList = youtubeHelper.getInvidiousComments();
-        commentsList[1] = event.target.options[invidiousComments1Element.selectedIndex].value
-        youtubeHelper.setInvidiousComments(commentsList)
-    }
-);
-
-let invidiousCaptions0Element = document.getElementById("invidious-captions[0]");
-invidiousCaptions0Element.addEventListener("change",
-    event => {
-        let captionsList = youtubeHelper.getInvidiousCaptions();
-        captionsList[0] = event.target.options[invidiousCaptions0Element.selectedIndex].value
-        youtubeHelper.setInvidiousCaptions(captionsList)
-    }
-);
-let invidiousCaptions1Element = document.getElementById("invidious-captions[1]");
-invidiousCaptions1Element.addEventListener("change",
-    event => {
-        let captionsList = youtubeHelper.getInvidiousCaptions();
-        captionsList[1] = event.target.options[invidiousCaptions1Element.selectedIndex].value
-        youtubeHelper.setInvidiousCaptions(captionsList)
-    }
-);
-let invidiousCaptions2Element = document.getElementById("invidious-captions[2]");
-invidiousCaptions2Element.addEventListener("change",
-    event => {
-        let captionsList = youtubeHelper.getInvidiousCaptions();
-        captionsList[2] = event.target.options[invidiousCaptions2Element.selectedIndex].value
-        youtubeHelper.setInvidiousCaptions(captionsList)
-    }
-);
-
-let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos");
-invidiousRelatedVideoElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousRelatedVideos(event.target.checked)
-);
-
-let invidiousAnnotationsElement = document.getElementById("invidious-annotations");
-invidiousAnnotationsElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousAnnotations(event.target.checked)
-);
-
-
-let invidiousExtendDescElement = document.getElementById("invidious-extend_desc");
-invidiousExtendDescElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousExtendDesc(event.target.checked)
-);
-
-let invidiousVrModeElement = document.getElementById("invidious-vr_mode");
-invidiousVrModeElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousVrMode(event.target.checked)
-);
-
-let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos");
-invidiousSavePlayerPosElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousSavePlayerPos(event.target.checked)
-);
-
-youtubeHelper.init().then(() => {
-    invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
-
-    invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
-
-    invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
-    invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
-    invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
-    youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
-
-    invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
-    invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
-    invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
-
-    invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
-    invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
-
-    invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
-    invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
-    invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
-
-    invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
-    invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
-    invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
-    invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
-    invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
-
-    commonHelper.processDefaultCustomInstances(
-        'invidious',
-        'normal',
-        youtubeHelper,
-        document,
-        youtubeHelper.getInvidiousNormalRedirectsChecks,
-        youtubeHelper.setInvidiousNormalRedirectsChecks,
-        youtubeHelper.getInvidiousNormalCustomRedirects,
-        youtubeHelper.setInvidiousNormalCustomRedirects
-    );
-
-    commonHelper.processDefaultCustomInstances(
-        'invidious',
-        'tor',
-        youtubeHelper,
-        document,
-        youtubeHelper.getInvidiousTorRedirectsChecks,
-        youtubeHelper.setInvidiousTorRedirectsChecks,
-        youtubeHelper.getInvidiousTorCustomRedirects,
-        youtubeHelper.setInvidiousTorCustomRedirects
-    );
+    await youtubeHelper.setYoutubeSettings({
+        invidiousAlwaysProxy: invidiousAlwaysProxyElement.checked,
+        youtubeAutoplay: autoplayElement.checked,
+        invidiousPlayerStyle: invidiousPlayerStyleElement.value,
+        invidiousQuality: invidiousQualityElement.value,
+        invidiousVideoLoop: invidiousVideoLoopElement.checked,
+        invidiousContinueAutoplay: invidiousContinueAutoplayElement.checked,
+        invidiousContinue: invidiousContinueElement.checked,
+        youtubeListen: youtubeListenElement.checked,
+        invidiousSpeed: invidiousSpeedElement.value,
+        invidiousQualityDash: invidiousQualityDashElement.value,
+        youtubeVolume: volumeElement.value,
+        invidiousComments: commentsList,
+        invidiousCaptions: captionsList,
+        invidiousRelatedVideos: invidiousRelatedVideoElement.checked,
+        invidiousAnnotations: invidiousAnnotationsElement.checked,
+        invidiousExtendDesc: invidiousExtendDescElement.checked,
+        invidiousVrMode: invidiousVrModeElement.checked,
+        invidiousSavePlayerPos: invidiousSavePlayerPosElement.checked
+    });
+    init();
 });
+
+function init() {
+    youtubeHelper.init().then(() => {
+        invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
+
+        autoplayElement.checked = youtubeHelper.getAutoplay();
+
+        invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
+
+        invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
+        invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
+        invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
+        youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
+
+        invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
+        invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
+        invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
+
+        volumeElement.value = youtubeHelper.getVolume();
+        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+
+        invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
+        invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
+
+        invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
+        invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
+        invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
+
+        invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
+        invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
+        invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
+        invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
+        invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
+
+        commonHelper.processDefaultCustomInstances(
+            'invidious',
+            'normal',
+            youtubeHelper,
+            document,
+            youtubeHelper.getInvidiousNormalRedirectsChecks,
+            youtubeHelper.setInvidiousNormalRedirectsChecks,
+            youtubeHelper.getInvidiousNormalCustomRedirects,
+            youtubeHelper.setInvidiousNormalCustomRedirects
+        );
+
+        commonHelper.processDefaultCustomInstances(
+            'invidious',
+            'tor',
+            youtubeHelper,
+            document,
+            youtubeHelper.getInvidiousTorRedirectsChecks,
+            youtubeHelper.setInvidiousTorRedirectsChecks,
+            youtubeHelper.getInvidiousTorCustomRedirects,
+            youtubeHelper.setInvidiousTorCustomRedirects
+        );
+    });
+}
+
+init()

src/pages/options/youtube/piped.js

@@ -1,257 +1,132 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let pipedSponsorblockElement = document.getElementById("piped-sponsorblock");
-pipedSponsorblockElement.addEventListener("change",
-    event => youtubeHelper.setPipedSponsorblock(event.target.checked)
-);
+let pipedElement = document.getElementById('piped');
 
+let pipedListenElement = pipedElement.getElementsByClassName("listen")[0];
+let pipedQualityElement = pipedElement.getElementsByClassName("quality")[0];
+let pipedBufferGoalElement = pipedElement.getElementsByClassName("bufferGoal")[0];
+let pipedRegionElement = pipedElement.getElementsByClassName("region")[0];
+let pipedHomepageElement = pipedElement.getElementsByClassName("homepage")[0];
+let pipedCommentsElement = pipedElement.getElementsByClassName("comments")[0];
+let pipedMinimizeDescriptionElement = pipedElement.getElementsByClassName("minimizeDescription")[0];
+let pipedWatchHistoryElement = pipedElement.getElementsByClassName("watchHistory")[0];
+let pipedDisableLBRYElement = pipedElement.getElementsByClassName("disableLBRY")[0];
+let pipedProxyLBRYElement = pipedElement.getElementsByClassName("proxyLBRY")[0];
+
+let pipedSelectedSkipSponsorElement = pipedElement.getElementsByClassName("selectedSkip-sponsor")[0];
+let pipedSelectedSkipIntroElement = pipedElement.getElementsByClassName("selectedSkip-intro")[0];
+let pipedSelectedSkipOutroElement = pipedElement.getElementsByClassName("selectedSkip-outro")[0];
+let pipedSelectedSkipPreviewElement = pipedElement.getElementsByClassName("selectedSkip-preview")[0];
+let pipedSelectedSkipInteractionElement = pipedElement.getElementsByClassName("selectedSkip-interaction")[0];
+let pipedSelectedSkipSelfpromoElement = pipedElement.getElementsByClassName("selectedSkip-selfpromo")[0];
+let pipedSelectedSkipMusicOfftopicElement = pipedElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
+let pipedSelectedSkipPoiHighlightElement = pipedElement.getElementsByClassName("selectedSkip-poi_highlight")[0];
+let pipedSelectedSkipFillerElement = pipedElement.getElementsByClassName("selectedSkip-filler")[0];
+
+let pipedSponsorblockElement = pipedElement.getElementsByClassName("sponsorblock")[0];
+let pipedEnabledCodecsElement = pipedElement.getElementsByClassName("enabledCodecs")[0];
+let autoplayElement = pipedElement.getElementsByClassName("youtubeAutoplay")[0];
+
+let volumeElement = pipedElement.getElementsByClassName("volume")[0];
+let volumeValueElement = pipedElement.getElementsByClassName("volume-value")[0];
+
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
 function selectSkipModify(value, boolean) {
-    if (boolean) {
-        if (!selectSkip.includes(value)) selectSkip.push(value);
+    if (boolean && !selectSkip.includes(value)) {
+        selectSkip.push(value);
     }
-    else {
+    else if (!boolean) {
         let i = selectSkip.indexOf(value);
         if (i > -1) selectSkip.splice(i, 1);
     }
-    youtubeHelper.setPipedSelectedSkip(selectSkip)
 }
-
-let pipedSelectedSkipSponsorElement = document.getElementById("piped-selectedSkip-sponsor");
-pipedSelectedSkipSponsorElement.addEventListener("change",
-    event => selectSkipModify('sponsor', event.target.checked)
-);
-
-let pipedSelectedSkipIntroElement = document.getElementById("piped-selectedSkip-intro");
-pipedSelectedSkipIntroElement.addEventListener("change",
-    event => selectSkipModify('intro', event.target.checked)
-);
-
-let pipedSelectedSkipOutroElement = document.getElementById("piped-selectedSkip-outro");
-pipedSelectedSkipOutroElement.addEventListener("change",
-    event => selectSkipModify('outro', event.target.checked)
-);
-
-let pipedSelectedSkipPreviewElement = document.getElementById("piped-selectedSkip-preview");
-pipedSelectedSkipPreviewElement.addEventListener("change",
-    event => selectSkipModify('preview', event.target.checked)
-);
-
-let pipedSelectedSkipInteractionElement = document.getElementById("piped-selectedSkip-interaction");
-pipedSelectedSkipInteractionElement.addEventListener("change",
-    event => selectSkipModify('interaction', event.target.checked)
-);
-
-let pipedSelectedSkipSelfpromoElement = document.getElementById("piped-selectedSkip-selfpromo");
-pipedSelectedSkipSelfpromoElement.addEventListener("change",
-    event => selectSkipModify('selfpromo', event.target.checked)
-);
-
-let pipedSelectedSkipMusicOfftopicElement = document.getElementById("piped-selectedSkip-music_offtopic");
-pipedSelectedSkipMusicOfftopicElement.addEventListener("change",
-    event => selectSkipModify('music_offtopic', event.target.checked)
-);
-
-let pipedSelectedSkipPoiHighlightElement = document.getElementById("piped-selectedSkip-poi_highlight");
-pipedSelectedSkipPoiHighlightElement.addEventListener("change",
-    event => selectSkipModify('poi_highlight', event.target.checked)
-);
-
-let pipedSelectedSkipFillerElement = document.getElementById("piped-selectedSkip-filler");
-pipedSelectedSkipFillerElement.addEventListener("change",
-    event => selectSkipModify('filler', event.target.checked)
-);
-
-let pipedListenElement = document.getElementById("piped-listen");
-pipedListenElement.addEventListener("change",
-    event => youtubeHelper.setYoutubeListen(event.target.checked)
-);
-
-let pipedQualityElement = document.getElementById("piped-quality");
-pipedQualityElement.addEventListener("change",
-    event => youtubeHelper.setPipedQuality(event.target.options[pipedQualityElement.selectedIndex].value)
-);
-
-let pipedBufferGoalElement = document.getElementById("piped-bufferGoal");
-pipedBufferGoalElement.addEventListener("change",
-    event => youtubeHelper.setPipedBufferGoal(pipedBufferGoalElement.value)
-);
-
-let pipedRegionElement = document.getElementById("piped-region");
-pipedRegionElement.addEventListener("change",
-    event => youtubeHelper.setPipedRegion(event.target.options[pipedRegionElement.selectedIndex].value)
-);
-
-let pipedHomepageElement = document.getElementById("piped-homepage");
-pipedHomepageElement.addEventListener("change",
-    event => youtubeHelper.setPipedHomepage(event.target.options[pipedHomepageElement.selectedIndex].value)
-);
-
-let pipedCommentsElement = document.getElementById("piped-comments");
-pipedCommentsElement.addEventListener("change",
-    event => youtubeHelper.setPipedComments(event.target.checked)
-);
-
-let pipedMinimizeDescriptionElement = document.getElementById("piped-minimizeDescription");
-pipedMinimizeDescriptionElement.addEventListener("change",
-    event => youtubeHelper.setPipedMinimizeDescription(event.target.checked)
-);
-
-let pipedWatchHistoryElement = document.getElementById("piped-watchHistory");
-pipedWatchHistoryElement.addEventListener("change",
-    event => youtubeHelper.setPipedWatchHistory(event.target.checked)
-);
-
-let pipedEnabledCodecsElement = document.getElementById("piped-enabledCodecs");
-pipedEnabledCodecsElement.addEventListener("change",
-    () => {
-        let result = [];
-        for (const opt of pipedEnabledCodecsElement.options)
-            if (opt.selected) result.push(opt.value);
-        youtubeHelper.setPipedEnabledCodecs(result);
-    }
-);
-
-let pipedDisableLBRYElement = document.getElementById("piped-disableLBRY");
-pipedDisableLBRYElement.addEventListener("change",
-    event => youtubeHelper.setPipedDisableLBRY(event.target.checked)
-);
-
-let pipedProxyLBRYElement = document.getElementById("piped-proxyLBRY");
-pipedProxyLBRYElement.addEventListener("change",
-    event => youtubeHelper.setPipedProxyLBRY(event.target.checked)
-);
-
-let pipedMaterialListenElement = document.getElementById("pipedMaterial-listen");
-pipedMaterialListenElement.addEventListener("change",
-    event => youtubeHelper.setYoutubeListen(event.target.checked)
-);
-
-let pipedMaterialDisableLBRYElement = document.getElementById("pipedMaterial-disableLBRY");
-pipedMaterialDisableLBRYElement.addEventListener("change",
-    event => youtubeHelper.setPipedDisableLBRY(event.target.checked)
-);
-
-let pipedMaterialProxyLBRYElement = document.getElementById("pipedMaterial-proxyLBRY");
-pipedMaterialProxyLBRYElement.addEventListener("change",
-    event => youtubeHelper.setPipedProxyLBRY(event.target.checked)
-);
-
-let pipedMaterialSponsorblockElement = document.getElementById("pipedMaterial-sponsorblock");
-pipedMaterialSponsorblockElement.addEventListener("change",
-    event => youtubeHelper.setPipedSponsorblock(event.target.checked)
-);
-
-let pipedMaterialSkipToLastPointElement = document.getElementById("pipedMaterial-skipToLastPoint");
-pipedMaterialSkipToLastPointElement.addEventListener("change",
-    event => youtubeHelper.setPipedMaterialSkipToLastPoint(event.target.checked)
-);
-
-
-let pipedMaterialSelectedSkipSponsorElement = document.getElementById("pipedMaterial-selectedSkip-sponsor");
-pipedMaterialSelectedSkipSponsorElement.addEventListener("change",
-    event => selectSkipModify('sponsor', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipIntroElement = document.getElementById("pipedMaterial-selectedSkip-intro");
-pipedMaterialSelectedSkipIntroElement.addEventListener("change",
-    event => selectSkipModify('intro', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipOutroElement = document.getElementById("pipedMaterial-selectedSkip-outro");
-pipedMaterialSelectedSkipOutroElement.addEventListener("change",
-    event => selectSkipModify('outro', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipPreviewElement = document.getElementById("pipedMaterial-selectedSkip-preview");
-pipedMaterialSelectedSkipPreviewElement.addEventListener("change",
-    event => selectSkipModify('preview', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipInteractionElement = document.getElementById("pipedMaterial-selectedSkip-interaction");
-pipedMaterialSelectedSkipInteractionElement.addEventListener("change",
-    event => selectSkipModify('interaction', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipSelfpromoElement = document.getElementById("pipedMaterial-selectedSkip-selfpromo");
-pipedMaterialSelectedSkipSelfpromoElement.addEventListener("change",
-    event => selectSkipModify('selfpromo', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipMusicOfftopicElement = document.getElementById("pipedMaterial-selectedSkip-music_offtopic");
-pipedMaterialSelectedSkipMusicOfftopicElement.addEventListener("change",
-    event => selectSkipModify('music_offtopic', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipPoiHighlightElement = document.getElementById("pipedMaterial-selectedSkip-poi_highlight");
-pipedMaterialSelectedSkipPoiHighlightElement.addEventListener("change",
-    event => selectSkipModify('poi_highlight', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipFillerElement = document.getElementById("pipedMaterial-selectedSkip-filler");
-pipedMaterialSelectedSkipFillerElement.addEventListener("change",
-    event => selectSkipModify('filler', event.target.checked)
-);
-
 let selectSkip = [];
-youtubeHelper.init().then(() => {
+pipedElement.addEventListener("change", async () => {
+    console.log("changed piped settings");
+    let pipedEnabledCodecsResult = [];
+    for (const opt of pipedEnabledCodecsElement.options)
+        if (opt.selected) pipedEnabledCodecsResult.push(opt.value);
 
-    pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
-    selectSkip = youtubeHelper.getPipedSelectedSkip();
-    pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
-    pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro');
-    pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro');
-    pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
-    pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
-    pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
-    pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
-    pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
-    pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler');
-    pipedListenElement.checked = youtubeHelper.getYoutubeListen();
-    pipedQualityElement.value = youtubeHelper.getPipedQuality();
-    pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal();
-    pipedRegionElement.value = youtubeHelper.getPipedRegion();
-    pipedHomepageElement.value = youtubeHelper.getPipedHomepage();
-    pipedCommentsElement.checked = youtubeHelper.getPipedComments();
-    pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription();
-    pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory();
-    pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs();
-    pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
-    pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
+    selectSkipModify('sponsor', pipedSelectedSkipSponsorElement.checked);
+    selectSkipModify('intro', pipedSelectedSkipIntroElement.checked);
+    selectSkipModify('outro', pipedSelectedSkipOutroElement.checked);
+    selectSkipModify('preview', pipedSelectedSkipPreviewElement.checked);
+    selectSkipModify('interaction', pipedSelectedSkipInteractionElement.checked);
+    selectSkipModify('selfpromo', pipedSelectedSkipSelfpromoElement.checked);
+    selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopicElement.checked);
+    selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlightElement.checked);
+    selectSkipModify('filler', pipedSelectedSkipFillerElement.checked);
 
-    pipedMaterialListenElement.checked = youtubeHelper.getYoutubeListen();
-    pipedMaterialDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
-    pipedMaterialProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
-    pipedMaterialSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock()
-    pipedMaterialSkipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint();
-    pipedMaterialSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
-    pipedMaterialSelectedSkipIntroElement.checked = selectSkip.includes('intro');
-    pipedMaterialSelectedSkipOutroElement.checked = selectSkip.includes('outro');
-    pipedMaterialSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
-    pipedMaterialSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
-    pipedMaterialSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
-    pipedMaterialSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
-    pipedMaterialSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
-    pipedMaterialSelectedSkipFillerElement.checked = selectSkip.includes('filler');
-
-    commonHelper.processDefaultCustomInstances(
-        'piped',
-        'normal',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedNormalRedirectsChecks,
-        youtubeHelper.setPipedNormalRedirectsChecks,
-        youtubeHelper.getPipedNormalCustomRedirects,
-        youtubeHelper.setPipedNormalCustomRedirects
-    );
-    commonHelper.processDefaultCustomInstances(
-        'piped',
-        'tor',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedTorRedirectsChecks,
-        youtubeHelper.setPipedTorRedirectsChecks,
-        youtubeHelper.getPipedTorCustomRedirects,
-        youtubeHelper.setPipedTorCustomRedirects
-    );
+    await youtubeHelper.setYoutubeSettings({
+        pipedQuality: pipedQualityElement.value,
+        pipedBufferGoal: pipedBufferGoalElement.value,
+        pipedRegion: pipedRegionElement.value,
+        pipedHomepage: pipedHomepageElement.value,
+        pipedComments: pipedCommentsElement.checked,
+        pipedMinimizeDescription: pipedMinimizeDescriptionElement.checked,
+        youtubeAutoplay: autoplayElement.checked,
+        pipedWatchHistory: pipedWatchHistoryElement.checked,
+        pipedDisableLBRY: pipedDisableLBRYElement.checked,
+        pipedProxyLBRY: pipedProxyLBRYElement.checked,
+        youtubeVolume: volumeElement.value,
+        pipedSponsorblock: pipedSponsorblockElement.checked,
+        pipedEnabledCodecs: pipedEnabledCodecsResult,
+        youtubeListen: pipedListenElement.checked,
+        pipedSelectedSkip: selectSkip,
+    });
+    init();
 });
+
+function init() {
+    youtubeHelper.init().then(() => {
+        pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
+        selectSkip = youtubeHelper.getPipedSelectedSkip();
+        pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
+        pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro');
+        pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro');
+        pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
+        autoplayElement.checked = youtubeHelper.getAutoplay();
+        pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
+        pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
+        pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
+        pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
+        pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler');
+        pipedListenElement.checked = youtubeHelper.getYoutubeListen();
+        pipedQualityElement.value = youtubeHelper.getPipedQuality();
+        pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal();
+        pipedRegionElement.value = youtubeHelper.getPipedRegion();
+        pipedHomepageElement.value = youtubeHelper.getPipedHomepage();
+        pipedCommentsElement.checked = youtubeHelper.getPipedComments();
+        pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription();
+        pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory();
+        pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs();
+        pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
+        pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
+
+        volumeElement.value = youtubeHelper.getVolume();
+        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+
+        commonHelper.processDefaultCustomInstances(
+            'piped',
+            'normal',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedNormalRedirectsChecks,
+            youtubeHelper.setPipedNormalRedirectsChecks,
+            youtubeHelper.getPipedNormalCustomRedirects,
+            youtubeHelper.setPipedNormalCustomRedirects
+        );
+        commonHelper.processDefaultCustomInstances(
+            'piped',
+            'tor',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedTorRedirectsChecks,
+            youtubeHelper.setPipedTorRedirectsChecks,
+            youtubeHelper.getPipedTorCustomRedirects,
+            youtubeHelper.setPipedTorCustomRedirects
+        );
+    });
+}
+init();

src/pages/options/youtube/pipedMaterial.js

@@ -1,25 +1,112 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-youtubeHelper.init().then(() => {
-    commonHelper.processDefaultCustomInstances(
-        'pipedMaterial',
-        'normal',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedMaterialNormalRedirectsChecks,
-        youtubeHelper.setPipedMaterialNormalRedirectsChecks,
-        youtubeHelper.getPipedMaterialNormalCustomRedirects,
-        youtubeHelper.setPipedMaterialNormalCustomRedirects
-    );
-    commonHelper.processDefaultCustomInstances(
-        'pipedMaterial',
-        'tor',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedMaterialTorRedirectsChecks,
-        youtubeHelper.setPipedMaterialTorRedirectsChecks,
-        youtubeHelper.getPipedMaterialTorCustomRedirects,
-        youtubeHelper.setPipedMaterialTorCustomRedirects
-    );
+let pipedMaterialElement = document.getElementById('pipedMaterial');
+let listenElement = pipedMaterialElement.getElementsByClassName("listen")[0];
+let disableLBRYElement = pipedMaterialElement.getElementsByClassName("disableLBRY")[0];
+let proxyLBRYElement = pipedMaterialElement.getElementsByClassName("proxyLBRY")[0];
+let sponsorblockElement = pipedMaterialElement.getElementsByClassName("sponsorblock")[0];
+let skipToLastPointElement = pipedMaterialElement.getElementsByClassName("skipToLastPoint")[0];
+
+let selectedSkipSponsorElement = pipedMaterialElement.getElementsByClassName("selectedSkip-sponsor")[0];
+let selectedSkipIntroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-intro")[0];
+let selectedSkipOutroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-outro")[0];
+let selectedSkipPreviewElement = pipedMaterialElement.getElementsByClassName("selectedSkip-preview")[0];
+let selectedSkipInteractionElement = pipedMaterialElement.getElementsByClassName("selectedSkip-interaction")[0];
+let selectedSkipSelfpromoElement = pipedMaterialElement.getElementsByClassName("selectedSkip-selfpromo")[0];
+let selectedSkipMusicOfftopicElement = pipedMaterialElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
+
+let autoplayElement = pipedMaterialElement.getElementsByClassName("youtubeAutoplay")[0];
+
+let volumeElement = pipedMaterialElement.getElementsByClassName("volume")[0];
+let volumeValueElement = pipedMaterialElement.getElementsByClassName("volume-value")[0];
+
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
+
+let selectSkip = [];
+function selectSkipModify(value, boolean) {
+    if (boolean && !selectSkip.includes(value)) {
+        selectSkip.push(value);
+    }
+    else if (!boolean) {
+        let i = selectSkip.indexOf(value);
+        if (i > -1) selectSkip.splice(i, 1);
+    }
+}
+pipedMaterialElement.addEventListener("change", async () => {
+    console.log("changed piped settings");
+
+    selectSkipModify('sponsors', selectedSkipSponsorElement.checked);
+    selectSkipModify('intro', selectedSkipIntroElement.checked);
+    selectSkipModify('outro', selectedSkipOutroElement.checked);
+    selectSkipModify('preview', selectedSkipPreviewElement.checked);
+    selectSkipModify('interaction', selectedSkipInteractionElement.checked);
+    selectSkipModify('selfpromo', selectedSkipSelfpromoElement.checked);
+    selectSkipModify('music_offtopic', selectedSkipMusicOfftopicElement.checked);
+
+    await youtubeHelper.setYoutubeSettings({
+        youtubeListen: listenElement.checked,
+        pipedDisableLBRY: disableLBRYElement.checked,
+        pipedProxyLBRY: proxyLBRYElement.checked,
+        pipedSponsorblock: sponsorblockElement.checked,
+        pipedSkipToLastPoint: skipToLastPointElement.checked,
+        pipedSelectedSkipSponsor: selectedSkipSponsorElement.checked,
+        pipedSelectedSkipIntro: selectedSkipIntroElement.checked,
+        pipedSelectedSkipOutro: selectedSkipOutroElement.checked,
+        youtubeAutoplay: autoplayElement.checked,
+        youtubeVolume: volumeElement.value,
+        pipedSelectedSkipPreview: selectedSkipPreviewElement.checked,
+        pipedSelectedSkipInteraction: selectedSkipInteractionElement.checked,
+        pipedSelectedSkipSelfpromo: selectedSkipSelfpromoElement.checked,
+        pipedSelectedSkipMusicOfftopic: selectedSkipMusicOfftopicElement.checked,
+
+        pipedSponsorblock: sponsorblockElement.checked,
+        pipedMaterialSkipToLastPoint: skipToLastPointElement.checked,
+        pipedSelectedSkip: selectSkip,
+    });
+    init();
 });
+
+function init() {
+    youtubeHelper.init().then(() => {
+        autoplayElement.checked = youtubeHelper.getAutoplay();
+
+        listenElement.checked = youtubeHelper.getYoutubeListen();
+        disableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
+        proxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
+        sponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
+        skipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint();
+        selectedSkipSponsorElement.checked = selectSkip.includes('sponsors');
+        selectedSkipIntroElement.checked = selectSkip.includes('intro');
+        selectedSkipOutroElement.checked = selectSkip.includes('outro');
+        selectedSkipPreviewElement.checked = selectSkip.includes('preview');
+        selectedSkipInteractionElement.checked = selectSkip.includes('interaction');
+        selectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
+        selectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
+
+        volumeElement.value = youtubeHelper.getVolume();
+        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+
+        commonHelper.processDefaultCustomInstances(
+            'pipedMaterial',
+            'normal',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedMaterialNormalRedirectsChecks,
+            youtubeHelper.setPipedMaterialNormalRedirectsChecks,
+            youtubeHelper.getPipedMaterialNormalCustomRedirects,
+            youtubeHelper.setPipedMaterialNormalCustomRedirects
+        );
+        commonHelper.processDefaultCustomInstances(
+            'pipedMaterial',
+            'tor',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedMaterialTorRedirectsChecks,
+            youtubeHelper.setPipedMaterialTorRedirectsChecks,
+            youtubeHelper.getPipedMaterialTorCustomRedirects,
+            youtubeHelper.setPipedMaterialTorCustomRedirects
+        );
+    });
+}
+init();

src/pages/options/youtube/youtube.html

@@ -154,7 +154,7 @@
         <select id="youtube-embed-frontend">
           <option value="invidious">Invidious</option>
           <option value="piped">Piped</option>
-          <option value="pipedMaterial">Piped-Material</option>
+          <option value="pipedMaterial">Material</option>
           <option value="youtube">Youtube</option>
         </select>
       </div>
@@ -190,64 +190,47 @@
         <input id="enable-youtube-custom-settings" type="checkbox" />
       </div>
 
+    </div>
+
+    <div id="invidious">
+
       <div class="custom-settings">
 
         <hr>
 
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
-          <input id="invidious-youtubeAutoplay" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
-          <h4><x data-localise="__MSG_volume__">Volume: </x><span id="volume-value">--%</span></h4>
-          <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
-        </div>
-
-      </div>
-
-    </div>
-
-    <div id="invidious">
-
-
-      <div class="custom-settings">
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_playerStyle__">Player Style</h4>
-          <select id="invidious-player_style">
-            <option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
-            <option value="youtube" data-localise="__MSG_youtube__">YouTube</option>
-          </select>
-        </div>
-
         <div class="some-block option-block">
           <h4 data-localise="__MSG_alwaysLoop__">Always loop</h4>
-          <input id="invidious-video_loop" type="checkbox" />
+          <input class="video_loop" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
+          <input class="youtubeAutoplay" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_playNext__">Play next by default</h4>
-          <input id="invidious-continue" type="checkbox" />
+          <input class="continue" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_autoplayNext__">Autoplay next video</h4>
-          <input id="invidious-continue_autoplay" type="checkbox" />
+          <input class="continue_autoplay" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos</h4>
-          <input id="invidious-local" type="checkbox" />
+          <input class="local" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_listenByDefault__">Listen by default</h4>
-          <input id="invidious-listen" type="checkbox" />
+          <input class="listen" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultSpeed__">Default speed</h4>
-          <select id="invidious-speed">
+          <select class="speed">
             <option>2.0</option>
             <option>1.75</option>
             <option>1.5</option>
@@ -261,7 +244,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_prefQuality__">Preferred video quality</h4>
-          <select id="invidious-quality">
+          <select class="quality">
             <option value="hd720">720p</option>
             <option value="medium">480p</option>
             <option value="dash" data-localise="__MSG_dash__">DASH (adaptive quality)</option>
@@ -271,7 +254,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_prefDashQuality__">Preferred DASH video quality</h4>
-          <select id="invidious-quality_dash">
+          <select class="quality_dash">
             <option value="auto" data-localise="__MSG_auto__">Auto</option>
             <option value="best" data-localise="__MSG_best__">Best</option>
             <option value="4320p">4320p</option>
@@ -288,16 +271,23 @@
           </select>
         </div>
 
+        <div class="some-block option-block">
+          <h4>
+            <x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
+          </h4>
+          <input class="volume" name="volume" type="range" min="0" max="100" step="1" />
+        </div>
+
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultComments__">Default comments</h4>
-          <select id="invidious-comments[0]">
+          <select class="comments[0]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="youtube">YouTube</option>
             <option value="reddit">Reddit</option>
             </option>
           </select>
           &nbsp;
-          <select id="invidious-comments[1]">
+          <select class="comments[1]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="youtube">YouTube</option>
             <option value="reddit">Reddit</option>
@@ -306,7 +296,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultCaptions__">Default captions</h4>
-          <select id="invidious-captions[0]">
+          <select class="captions[0]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="English">English</option>
             <option value="English (auto-generated)">English (auto-generated)</option>
@@ -439,7 +429,7 @@
             <option value="Zulu">Zulu</option>
           </select>
           &nbsp;
-          <select id="invidious-captions[1]">
+          <select class="captions[1]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="English">English</option>
             <option value="English (auto-generated)">English (auto-generated)</option>
@@ -572,7 +562,7 @@
             <option value="Zulu">Zulu</option>
           </select>
           &nbsp;
-          <select id="invidious-captions[2]">
+          <select class="captions[2]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="English">English</option>
             <option value="English (auto-generated)">English (auto-generated)</option>
@@ -708,47 +698,54 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_showRelated__">Show related videos</h4>
-          <input id="invidious-related_videos" type="checkbox" />
+          <input class="related_videos" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_showAnnotations__">Show annotations by default</h4>
-          <input id="invidious-annotations" type="checkbox" />
+          <input class="annotations" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_autoExtendDesc__">Automatically extend video description</h4>
-          <input id="invidious-extend_desc" type="checkbox" />
+          <input class="extend_desc" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_interactive360__">Interactive 360 degree videos (requires WebGL)</h4>
-          <input id="invidious-vr_mode" type="checkbox" />
+          <input class="vr_mode" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_savePlaybackPos__">Save playback position</h4>
-          <input id="invidious-save_player_pos" type="checkbox" />
+          <input class="save_player_pos" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_playerStyle__">Player Style</h4>
+          <select class="player_style">
+            <option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
+            <option value="youtube" data-localise="__MSG_youtube__">YouTube</option>
+          </select>
         </div>
 
       </div>
       <hr>
 
-      <div id="invidious-normal">
-
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="invidious-normal-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-invidious-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="invidious-normal-custom-instance" placeholder="https://invidious.com" type="url" />
-            <button type="submit" class="add" id="invidious-normal-add-instance">
+            <input class="custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -757,23 +754,23 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="invidious-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="invidious-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="invidious-tor-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-invidious-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="invidious-tor-custom-instance" placeholder="https://invidious.com" type="url" />
-            <button type="submit" class="add" id="invidious-tor-add-instance">
+            <input class="custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -782,73 +779,85 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="invidious-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
     </div>
 
     <div id="piped">
-
       <div class="custom-settings">
+        <hr>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
+          <input class="youtubeAutoplay" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>
+            <x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
+          </h4>
+          <input class="volume" name="volume" type="range" min="0" max="100" step="1" />
+        </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4>
-          <input id="piped-sponsorblock" type="checkbox" />
+          <input class="sponsorblock" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4>
-          <input id="piped-selectedSkip-sponsor" type="checkbox" />
+          <input class="selectedSkip-sponsor" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4>
-          <input id="piped-selectedSkip-intro" type="checkbox" />
+          <input class="selectedSkip-intro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4>
-          <input id="piped-selectedSkip-outro" type="checkbox" />
+          <input class="selectedSkip-outro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4>
-          <input id="piped-selectedSkip-preview" type="checkbox" />
+          <input class="selectedSkip-preview" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4>
-          <input id="piped-selectedSkip-interaction" type="checkbox" />
+          <input class="selectedSkip-interaction" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4>
-          <input id="piped-selectedSkip-selfpromo" type="checkbox" />
+          <input class="selectedSkip-selfpromo" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4>
-          <input id="piped-selectedSkip-music_offtopic" type="checkbox" />
+          <input class="selectedSkip-music_offtopic" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipHighlight__">Skip Highlight</h4>
-          <input id="piped-selectedSkip-poi_highlight" type="checkbox" />
+          <input class="selectedSkip-poi_highlight" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
-          <input id="piped-selectedSkip-filler" type="checkbox" />
+          <input class="selectedSkip-filler" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
-          <input id="piped-listen" type="checkbox" />
+          <input class="listen" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultQuality__">Default Quality</h4>
-          <select id="piped-quality">
+          <select class="quality">
             <option value="0">Auto</option>
             <option value="144">144p</option>
             <option value="240">240p</option>
@@ -864,12 +873,12 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_bufferingGoal__">Buffering Goal (in seconds)</h4>
-          <input id="piped-bufferGoal" type="number" min="10" />
+          <input class="bufferGoal" type="number" min="10" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_countrySelection__">Country Selection</h4>
-          <select id="piped-region">
+          <select class="region">
             <option value="AF">Afghanistan</option>
             <option value="AL">Albania</option>
             <option value="DZ">Algeria</option>
@@ -1068,7 +1077,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultHomepage__">Default Homepage</h4>
-          <select id="piped-homepage">
+          <select class="homepage">
             <option value="trending" data-localise="__MSG_trending__">Trending</option>
             <option value="feed" data-localise="__MSG_feed__">Feed</option>
           </select>
@@ -1076,22 +1085,22 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_showComments__">Show Comments</h4>
-          <input id="piped-comments" type="checkbox" />
+          <input class="comments" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_minimizeDesc__">Minimize Description by default</h4>
-          <input id="piped-minimizeDescription" type="checkbox" />
+          <input class="minimizeDescription" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_storeHistory__">Store Watch History</h4>
-          <input id="piped-watchHistory" type="checkbox" />
+          <input class="watchHistory" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enabledCodecs__">Enabled Codecs (Multiple)</h4>
-          <select id="piped-enabledCodecs" multiple>
+          <select class="enabledCodecs" multiple>
             <option value="av1">AV1</option>
             <option value="vp9">VP9</option>
             <option value="avc">AVC (h.264)</option>
@@ -1100,30 +1109,31 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_disableLBRY__">Disable LBRY for Streaming</h4>
-          <input id="piped-disableLBRY" type="checkbox" />
+          <input class="disableLBRY" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enableProxyLBRY__">Enable Proxy for LBRY</h4>
-          <input id="piped-proxyLBRY" type="checkbox" />
+          <input class="proxyLBRY" type="checkbox" />
         </div>
 
       </div>
+
       <hr>
-      <div id="piped-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="piped-normal-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-piped-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="piped-normal-custom-instance" placeholder="https://piped.com" type="url" />
-            <button type="submit" class="add" id="piped-normal-add-instance">
+            <input class="custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1132,23 +1142,23 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="piped-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="piped-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="piped-tor-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-piped-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="piped-tor-custom-instance" placeholder="https://piped.com" type="url" />
-            <button type="submit" class="add" id="piped-tor-add-instance">
+            <input class="custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1157,101 +1167,103 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="piped-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
       <hr>
     </div>
 
     <div id="pipedMaterial">
-      <hr>
-
       <div class="custom-settings">
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
+          <input class="youtubeAutoplay" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>
+            <x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
+          </h4>
+          <input class="volume" name="volume" type="range" min="0" max="100" step="1" />
+        </div>
+
         <div class="some-block option-block">
           <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
-          <input id="pipedMaterial-listen" type="checkbox" />
+          <input class="listen" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_disableLBRY__">Disable LBRY</h4>
-          <input id="pipedMaterial-disableLBRY" type="checkbox" />
+          <input class="disableLBRY" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_proxyLBRY__">Proxy LBRY videos</h4>
-          <input id="pipedMaterial-proxyLBRY" type="checkbox" />
+          <input class="proxyLBRY" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4>
-          <input id="pipedMaterial-sponsorblock" type="checkbox" />
+          <input class="sponsorblock" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
-          <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen</h4>
-          <input id="pipedMaterial-skipToLastPoint" type="checkbox" />
+          <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen
+          </h4>
+          <input class="skipToLastPoint" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4>
-          <input id="pipedMaterial-selectedSkip-sponsor" type="checkbox" />
+          <input class="selectedSkip-sponsor" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4>
-          <input id="pipedMaterial-selectedSkip-intro" type="checkbox" />
+          <input class="selectedSkip-intro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4>
-          <input id="pipedMaterial-selectedSkip-outro" type="checkbox" />
+          <input class="selectedSkip-outro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4>
-          <input id="pipedMaterial-selectedSkip-preview" type="checkbox" />
+          <input class="selectedSkip-preview" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4>
-          <input id="pipedMaterial-selectedSkip-interaction" type="checkbox" />
+          <input class="selectedSkip-interaction" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4>
-          <input id="pipedMaterial-selectedSkip-selfpromo" type="checkbox" />
+          <input class="selectedSkip-selfpromo" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4>
-          <input id="pipedMaterial-selectedSkip-music_offtopic" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_skipHighlights__">Skip Highlight</h4>
-          <input id="pipedMaterial-selectedSkip-poi_highlight" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
-          <input id="pipedMaterial-selectedSkip-filler" type="checkbox" />
+          <input class="selectedSkip-music_offtopic" type="checkbox" />
         </div>
         <hr>
 
       </div>
 
-      <div id="pipedMaterial-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="pipedMaterial-normal-checklist"></div>
+        <div class="checklist" class="checklist"></div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-pipedMaterial-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="pipedMaterial-normal-custom-instance" placeholder="https://piped-material.com" type="url" />
-            <button type="submit" class="add" id="pipedMaterial-normal-add-instance">
+            <input class="custom-instance" placeholder="https://material.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1260,22 +1272,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="pipedMaterial-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="pipedMaterial-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="pipedMaterial-tor-checklist"></div>
+        <div class="checklist" class="checklist"></div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-pipedMaterial-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="pipedMaterial-tor-custom-instance" placeholder="https://pipedMaterial.com" type="url" />
-            <button type="submit" class="add" id="pipedMaterial-tor-add-instance">
+            <input class="custom-instance" placeholder="https://pipedMaterial.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1284,7 +1296,7 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="pipedMaterial-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
   </section>

src/pages/options/youtube/youtube.js

@@ -1,12 +1,17 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 
+let disableYoutubeElement = document.getElementById("disable-invidious");
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious");
 let pipedDivElement = document.getElementById("piped");
 let pipedMaterialDivElement = document.getElementById("pipedMaterial");
-let invidiousPipedPipedMaterialDivElement = document.getElementById("invidious-piped-pipedMaterial");
 let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
 let customSettingsDivElement = document.getElementsByClassName("custom-settings");
+let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
+let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
+let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
+let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube");
+let protocolElement = document.getElementById("protocol");
 
 function changeFrontendsSettings() {
     let frontend = youtubeFrontendElement.value;
@@ -17,28 +22,24 @@ function changeFrontendsSettings() {
         for (const item of customSettingsDivElement) item.style.display = 'none';
 
     if (frontend == 'invidious') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'block';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'piped') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'block';
         pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'pipedMaterial') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'block';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'freetube' || frontend == 'yatte') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'none'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'none';
@@ -49,91 +50,28 @@ function changeFrontendsSettings() {
 
 function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) {
     if (youtubeEmbedFrontend == 'invidious') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'block';
     }
     if (youtubeEmbedFrontend == 'piped') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         pipedDivElement.style.display = 'block';
         invidiousDivElement.style.display = 'none';
     }
     else if (youtubeEmbedFrontend == 'youtube') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'none'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
     }
 }
 
-youtubeFrontendElement.addEventListener("change",
-    event => {
-        let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
-        youtubeHelper.setFrontend(frontend);
-        changeFrontendsSettings();
-    }
-);
-
-let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
-youtubeEmbedFrontendElement.addEventListener("change",
-    event => {
-        let youtubeEmbedFrontend = event.target.options[youtubeEmbedFrontendElement.selectedIndex].value
-        youtubeHelper.setYoutubeEmbedFrontend(youtubeEmbedFrontend);
-        changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend);
-    }
-);
-
-let disableYoutubeElement = document.getElementById("disable-invidious");
-disableYoutubeElement.addEventListener("change",
-    event => youtubeHelper.setDisable(!event.target.checked)
-);
-
-let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
-enableYoutubeCustomSettingsElement.addEventListener("change",
-    event => {
-        youtubeHelper.setEnableCustomSettings(event.target.checked)
-        changeFrontendsSettings();
-    }
-);
-
-let volumeElement = document.getElementById("invidious-volume");
-let volumeValueElement = document.getElementById("volume-value");
-
-volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
-volumeElement.addEventListener("change", () => youtubeHelper.setVolume(volumeElement.value));
-
-let autoplayElement = document.getElementById("invidious-youtubeAutoplay");
-autoplayElement.addEventListener("change",
-    event => youtubeHelper.setAutoplay(event.target.checked)
-);
-
-let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
-OnlyEmbeddedVideoElement.addEventListener("change",
-    event => youtubeHelper.setOnlyEmbeddedVideo(event.target.options[OnlyEmbeddedVideoElement.selectedIndex].value)
-);
-
-let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube")
-bypassWatchOnYoutubeElement.addEventListener("change",
-    event => youtubeHelper.setBypassWatchOnYoutube(event.target.checked)
-);
-
-let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    event => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        youtubeHelper.setProtocol(protocol);
-        changeProtocolSettings(protocol);
-    }
-);
-
 function changeProtocolSettings(protocol) {
-    let normalPipedDiv = document.getElementById("piped-normal");
-    let torPipedDiv = document.getElementById("piped-tor");
+    let normalPipedDiv = document.getElementById('piped').getElementsByClassName("normal")[0];
+    let torPipedDiv = document.getElementById('piped').getElementsByClassName("tor")[0];
 
-    let normalPipedMaterialDiv = document.getElementById("pipedMaterial-normal");
-    let torPipedMaterialDiv = document.getElementById("pipedMaterial-tor");
+    let normalPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("normal")[0];
+    let torPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("tor")[0];
 
-    let normalInvidiousDiv = document.getElementById("invidious-normal");
-    let torInvidiousDiv = document.getElementById("invidious-tor");
+    let normalInvidiousDiv = document.getElementById('invidious').getElementsByClassName("normal")[0];
+    let torInvidiousDiv = document.getElementById('invidious').getElementsByClassName("tor")[0];
 
     if (protocol == 'normal') {
         normalInvidiousDiv.style.display = 'block';
@@ -157,14 +95,29 @@ function changeProtocolSettings(protocol) {
     }
 }
 
+
+document.addEventListener("change", () => {
+    youtubeHelper.setYoutubeSettings({
+        disableYoutube: !disableYoutubeElement.checked,
+        youtubeFrontend: youtubeFrontendElement.value,
+        youtubeEmbedFrontend: youtubeEmbedFrontendElement.value,
+        enableYoutubeCustomSettings: enableYoutubeCustomSettingsElement.checked,
+        OnlyEmbeddedVideo: OnlyEmbeddedVideoElement.value,
+        bypassWatchOnYoutube: bypassWatchOnYoutubeElement.checked,
+        youtubeProtocol: protocolElement.value,
+    })
+    changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontendElement.value);
+    changeProtocolSettings(protocolElement.value);
+    changeFrontendsSettings();
+})
+
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
     enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings();
-    volumeElement.value = youtubeHelper.getVolume();
-    volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+    
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();
     bypassWatchOnYoutubeElement.checked = youtubeHelper.getBypassWatchOnYoutube();
-    autoplayElement.checked = youtubeHelper.getAutoplay();
+    
     let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;
     changeFrontendsSettings();

src/pages/stylesheets/styles.css

@@ -90,7 +90,7 @@ select {
   background-color: var(--bg-secondary);
   border: none;
   margin: 0;
-  width: 200px;
+  width: 180px;
   border-radius: 3px;
 }
 
@@ -108,6 +108,9 @@ section.option-block {
   width: 700px;
   margin: 0 50px;
 }
+section.option-block h2{
+  margin: 0;
+}
 
 body.option {
   display: flex;