Finished adding default & custom instances

16 files changed, 443 insertions, 32 deletions

diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index ca1f1f19..e4c01885 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -92,18 +92,25 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
   mightyList.push(
     ...youtubeHelper.getRedirects().invidious.normal,
     ...youtubeHelper.getRedirects().piped.normal,
-    ...twitterHelper.getRedirects().normal,
-    ...instagramHelper.getRedirects().normal,
+    
+    ...twitterHelper.getRedirects().nitter.normal,
+
+    ...instagramHelper.getRedirects().bibliogram.normal,
+    
     ...redditHelper.getRedirects().libreddit.normal,
     ...redditHelper.getRedirects().teddit.normal,
     redditHelper.getRedirects().desktop,
     redditHelper.getRedirects().mobile,
+    
     ...searchHelper.getRedirects().searx.normal,
     ...searchHelper.getRedirects().whoogle.normal,
+    
     ...translateHelper.getRedirects().simplyTranslate.normal,
     ...translateHelper.getRedirects().lingva.normal,
-    ...mediumHelper.getRedirects().normal,
-    ...wikipediaHelper.getRedirects().normal
+    
+    ...mediumHelper.getRedirects().scribe.normal,
+    
+    ...wikipediaHelper.getRedirects().wikiless.normal
   );
 
   if (mightyList.includes(protocolHost)) browser.pageAction.show(tabId);
diff --git a/src/pages/options/instagram/instagram.html b/src/pages/options/instagram/instagram.html
index 98e296f8..c7a5fbb7 100644
--- a/src/pages/options/instagram/instagram.html
+++ b/src/pages/options/instagram/instagram.html
@@ -29,6 +29,30 @@
             <input id="disable-bibliogram" type="checkbox" checked />
         </div>
 
+        <hr>
+
+        <div class="some-block option-block">
+            <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="bibliogram-checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+            <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-bibliogram-instance-form">
+            <div class="some-block option-block">
+                <input id="bibliogram-custom-instance" placeholder="https://bibliogram.com" type="url" />
+                <button type="submit" class="add" id="bibliogram-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="bibliogram-custom-checklist"></div>
+
     </section>
     <script type="module" src="../init.js"></script>
     <script type="module" src="./instagram.js"></script>
diff --git a/src/pages/options/instagram/instagram.js b/src/pages/options/instagram/instagram.js
index c5aad9c2..d9115784 100644
--- a/src/pages/options/instagram/instagram.js
+++ b/src/pages/options/instagram/instagram.js
@@ -1,4 +1,5 @@
 import instagramHelper from "../../../assets/javascripts/helpers/instagram.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableInstagramElement = document.getElementById("disable-bibliogram");
 disableInstagramElement.addEventListener("change",
@@ -7,4 +8,14 @@ disableInstagramElement.addEventListener("change",
 
 instagramHelper.init().then(() => {
     disableInstagramElement.checked = !instagramHelper.getDisableInstagram();
+
+    commonHelper.processDefaultCustomInstances(
+        'bibliogram',
+        instagramHelper,
+        document,
+        instagramHelper.getBibliogramRedirectsChecks,
+        instagramHelper.setBibliogramRedirectsChecks,
+        instagramHelper.getBibliogramCustomRedirects,
+        instagramHelper.setBibliogramCustomRedirects
+    )
 })
\ No newline at end of file
diff --git a/src/pages/options/medium/medium.html b/src/pages/options/medium/medium.html
index 1c978d82..4f3f853d 100644
--- a/src/pages/options/medium/medium.html
+++ b/src/pages/options/medium/medium.html
@@ -28,8 +28,33 @@
             <h4>Enable</h4>
             <input id="disable-scribe" type="checkbox" checked />
         </div>
+
+        <hr>
+
+        <div class="some-block option-block">
+            <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="scribe-checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+            <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-scribe-instance-form">
+            <div class="some-block option-block">
+                <input id="scribe-custom-instance" placeholder="https://scribe.com" type="url" />
+                <button type="submit" class="add" id="scribe-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="scribe-custom-checklist"></div>
     </section>
 
+
     <script type="module" src="../init.js"></script>
     <script type="module" src="./medium.js"></script>
     <!-- <script src="../../assets/javascripts/localise.js"></script> -->
diff --git a/src/pages/options/medium/medium.js b/src/pages/options/medium/medium.js
index fea66855..c86f190a 100644
--- a/src/pages/options/medium/medium.js
+++ b/src/pages/options/medium/medium.js
@@ -1,4 +1,5 @@
 import mediumHelper from "../../../assets/javascripts/helpers/medium.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableMediumElement = document.getElementById("disable-scribe");
 disableMediumElement.addEventListener("change",
@@ -7,4 +8,14 @@ disableMediumElement.addEventListener("change",
 
 mediumHelper.init().then(() => {
     disableMediumElement.checked = !mediumHelper.getDisableMedium();
+
+    commonHelper.processDefaultCustomInstances(
+        'scribe',
+        mediumHelper,
+        document,
+        mediumHelper.getScribeRedirectsChecks,
+        mediumHelper.setScribeRedirectsChecks,
+        mediumHelper.getScribeCustomRedirects,
+        mediumHelper.setScribeCustomRedirects
+    )
 })
\ No newline at end of file
diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index c968b954..2e898895 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -45,6 +45,58 @@
                 <option value="teddit">Teddit</option>
             </select>
         </div>
+
+        <hr>
+
+        <div id="libreddit">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="libreddit-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-libreddit-instance-form">
+                <div class="some-block option-block">
+                    <input id="libreddit-custom-instance" placeholder="https://libreddit.com" type="url" />
+                    <button type="submit" class="add" id="libreddit-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="libreddit-custom-checklist"></div>
+        </div>
+
+        <div id="teddit">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="teddit-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-teddit-instance-form">
+                <div class="some-block option-block">
+                    <input id="teddit-custom-instance" placeholder="https://teddit.com" type="url" />
+                    <button type="submit" class="add" id="teddit-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="teddit-custom-checklist"></div>
+        </div>
     </section>
 
     <script type="module" src="../init.js"></script>
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 92bd6e46..c2941dfa 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -1,16 +1,54 @@
 import redditHelper from "../../../assets/javascripts/helpers/reddit.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableRedditElement = document.getElementById("disable-reddit");
 disableRedditElement.addEventListener("change",
     (event) => redditHelper.setDisableReddit(!event.target.checked)
 );
+let libredditDivElement = document.getElementById("libreddit")
+let tedditDivElement = document.getElementById("teddit")
 
+
+function changeFrontendsSettings(frontend) {
+    if (frontend == 'libreddit') {
+        libredditDivElement.style.display = 'block';
+        tedditDivElement.style.display = 'none';
+    }
+    else if (frontend == 'teddit') {
+        libredditDivElement.style.display = 'none';
+        tedditDivElement.style.display = 'block';
+    }
+}
 let redditFrontendElement = document.getElementById("reddit-frontend");
 redditFrontendElement.addEventListener("change",
-    (event) => redditHelper.setRedditFrontend(event.target.options[redditFrontendElement.selectedIndex].value)
+    (event) => {
+        let frontend = event.target.options[redditFrontendElement.selectedIndex].value
+        redditHelper.setRedditFrontend(frontend)
+        changeFrontendsSettings(frontend);
+    }
 );
 
 redditHelper.init().then(() => {
     disableRedditElement.checked = !redditHelper.getDisableReddit();
     redditFrontendElement.value = redditHelper.getRedditFrontend();
+
+    commonHelper.processDefaultCustomInstances(
+        'libreddit',
+        redditHelper,
+        document,
+        redditHelper.getLibredditRedirectsChecks,
+        redditHelper.setLibredditRedirectsChecks,
+        redditHelper.getLibredditCustomRedirects,
+        redditHelper.setLibredditCustomRedirects
+    )
+
+    commonHelper.processDefaultCustomInstances(
+        'teddit',
+        redditHelper,
+        document,
+        redditHelper.getTedditRedirectsChecks,
+        redditHelper.setTedditRedirectsChecks,
+        redditHelper.getTedditCustomRedirects,
+        redditHelper.setTedditCustomRedirects
+    )
 })
\ No newline at end of file
diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index 489ed38a..654292a8 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -28,15 +28,6 @@
             <h4>Enable</h4>
             <input id="disable-search" type="checkbox" checked />
         </div>
-        <!-- <div class="some-block option-block">
-            <h4>Instance</h4>
-            <div class="autocomplete">
-                <input id="search-instance" type="url"
-                    data-localise-placeholder="__MSG_randomInstancePlaceholder__"
-                    placeholder="Random instance (none selected)" />
-            </div>
-        </div> -->
-
         <div class="some-block option-block">
             <h4>Frontend</h4>
             <select id="search-frontend">
@@ -44,6 +35,57 @@
                 <option value="whoogle">Whoogle</option>
             </select>
         </div>
+        <hr>
+
+        <div id="searx">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="searx-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-searx-instance-form">
+                <div class="some-block option-block">
+                    <input id="searx-custom-instance" placeholder="https://searx.com" type="url" />
+                    <button type="submit" class="add" id="searx-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="searx-custom-checklist"></div>
+        </div>
+
+        <div id="whoogle">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="whoogle-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-whoogle-instance-form">
+                <div class="some-block option-block">
+                    <input id="whoogle-custom-instance" placeholder="https://whoogle.com" type="url" />
+                    <button type="submit" class="add" id="whoogle-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="whoogle-custom-checklist"></div>
+        </div>
     </section>
 
 
diff --git a/src/pages/options/search/search.js b/src/pages/options/search/search.js
index e38480e2..c50fbb15 100644
--- a/src/pages/options/search/search.js
+++ b/src/pages/options/search/search.js
@@ -1,16 +1,58 @@
 import searchHelper from "../../../assets/javascripts/helpers/search.js";
-
-let searchFrontendElement = document.getElementById("search-frontend");
-searchFrontendElement.addEventListener("change",
-  (event) => searchHelper.setSearchFrontend(event.target.options[searchFrontendElement.selectedIndex].value)
-);
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableSearchElement = document.getElementById("disable-search");
 disableSearchElement.addEventListener("change",
   (event) => searchHelper.setDisableSearch(!event.target.checked)
 );
 
+
+let searxDivElement = document.getElementById("searx")
+let whoogleDivElement = document.getElementById("whoogle")
+
+
+function changeFrontendsSettings(frontend) {
+  if (frontend == 'searx') {
+    searxDivElement.style.display = 'block';
+    whoogleDivElement.style.display = 'none';
+  }
+  else if (frontend == 'whoogle') {
+    searxDivElement.style.display = 'none';
+    whoogleDivElement.style.display = 'block';
+  }
+}
+let searchFrontendElement = document.getElementById("search-frontend");
+searchFrontendElement.addEventListener("change",
+  (event) => {
+    let frontend = event.target.options[searchFrontendElement.selectedIndex].value
+    searchHelper.setSearchFrontend(frontend)
+    changeFrontendsSettings(frontend);
+  }
+);
+
 searchHelper.init().then(() => {
   disableSearchElement.checked = !searchHelper.getDisableSearch();
-  searchFrontendElement.value = searchHelper.getSearchFrontend();
+  let frontend = searchHelper.getSearchFrontend();
+  searchFrontendElement.value = frontend;
+  changeFrontendsSettings(frontend);
+
+  commonHelper.processDefaultCustomInstances(
+    'searx',
+    searchHelper,
+    document,
+    searchHelper.getSearxRedirectsChecks,
+    searchHelper.setSearxRedirectsChecks,
+    searchHelper.getSearxCustomRedirects,
+    searchHelper.setSearxCustomRedirects
+  )
+
+  commonHelper.processDefaultCustomInstances(
+    'whoogle',
+    searchHelper,
+    document,
+    searchHelper.getWhoogleRedirectsChecks,
+    searchHelper.setWhoogleRedirectsChecks,
+    searchHelper.getWhoogleCustomRedirects,
+    searchHelper.setWhoogleCustomRedirects
+  )
 });
diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 7d4ba006..efc43058 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -27,20 +27,67 @@
             <h4>Enable</h4>
             <input id="disable-simplyTranslate" type="checkbox" checked />
         </div>
-        <!-- <div class="some-block option-block">
-            <h4>Instance</h4>
-            <div class="autocomplete">
-                <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" />
-            </div>
-        </div> -->
 
         <div class="some-block option-block">
             <h4>Frontend</h4>
             <select id="translate-frontend">
-                <option value="simplyTransalte">SimplyTransalte</option>
+                <option value="simplyTranslate">SimplyTranslate</option>
                 <option value="lingva">Lingva</option>
             </select>
         </div>
+
+        <hr>
+
+        <div id="simplyTranslate">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="simplyTranslate-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-simplyTranslate-instance-form">
+                <div class="some-block option-block">
+                    <input id="simplyTranslate-custom-instance" placeholder="https://simplyTranslate.com" type="url" />
+                    <button type="submit" class="add" id="simplyTranslate-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-custom-checklist"></div>
+        </div>
+
+        <div id="lingva">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="lingva-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-lingva-instance-form">
+                <div class="some-block option-block">
+                    <input id="lingva-custom-instance" placeholder="https://lingva.com" type="url" />
+                    <button type="submit" class="add" id="lingva-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-custom-checklist"></div>
+        </div>
+
     </section>
 
     <script type="module" src="../init.js"></script>
diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js
index 480b754e..a28d3215 100644
--- a/src/pages/options/translate/translate.js
+++ b/src/pages/options/translate/translate.js
@@ -1,16 +1,58 @@
 import translateHelper from "../../../assets/javascripts/helpers/translate.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableTranslateElement = document.getElementById("disable-simplyTranslate");
 disableTranslateElement.addEventListener("change",
     (event) => translateHelper.setDisableTranslate(!event.target.checked)
 );
 
+
+let simplyTranslateDivElement = document.getElementById("simplyTranslate")
+let lingvaDivElement = document.getElementById("lingva")
+
+
+function changeFrontendsSettings(frontend) {
+    if (frontend == 'simplyTranslate') {
+        simplyTranslateDivElement.style.display = 'block';
+        lingvaDivElement.style.display = 'none';
+    }
+    else if (frontend == 'lingva') {
+        simplyTranslateDivElement.style.display = 'none';
+        lingvaDivElement.style.display = 'block';
+    }
+}
 let translateFrontendElement = document.getElementById("translate-frontend");
 translateFrontendElement.addEventListener("change",
-    (event) => translateHelper.setFrontend(event.target.options[translateFrontendElement.selectedIndex].value)
+    (event) => {
+        let frontend = event.target.options[translateFrontendElement.selectedIndex].value
+        translateHelper.setFrontend(frontend)
+        changeFrontendsSettings(frontend);
+    }
 );
 
 translateHelper.init().then(() => {
     disableTranslateElement.checked = !translateHelper.getDisableTranslate();
-    translateFrontendElement.value = translateHelper.getFrontend();
+    let frontend = translateHelper.getFrontend();
+    translateFrontendElement.value = frontend;
+    changeFrontendsSettings(frontend);
+
+    commonHelper.processDefaultCustomInstances(
+        'simplyTranslate',
+        translateHelper,
+        document,
+        translateHelper.getSimplyTranslateRedirectsChecks,
+        translateHelper.setSimplyTranslateRedirectsChecks,
+        translateHelper.getSimplyTranslateCustomRedirects,
+        translateHelper.setSimplyTranslateCustomRedirects
+    )
+
+    commonHelper.processDefaultCustomInstances(
+        'lingva',
+        translateHelper,
+        document,
+        translateHelper.getLingvaRedirectsChecks,
+        translateHelper.setLingvaRedirectsChecks,
+        translateHelper.getLingvaCustomRedirects,
+        translateHelper.setLingvaCustomRedirects
+    )
 });
\ No newline at end of file
diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html
index 8e189856..bd0b37e0 100644
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@@ -30,10 +30,30 @@
             <h4>Enable</h4>
             <input id="disable-nitter" type="checkbox" checked />
         </div>
+
+        <hr>
+
+        <div class="some-block option-block">
+            <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="nitter-checklist"></div>
+        <hr>
         <div class="some-block option-block">
-            <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4>
-            <input id="remove-twitter-sw" type="checkbox" checked />
+            <h4>Custom Instances</h4>
         </div>
+        <form id="custom-nitter-instance-form">
+            <div class="some-block option-block">
+                <input id="nitter-custom-instance" placeholder="https://nitter.com" type="url" />
+                <button type="submit" class="add" id="nitter-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="nitter-custom-checklist"></div>
 
     </section>
 
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 4316b456..e9c64643 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -1,4 +1,5 @@
 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",
@@ -7,4 +8,14 @@ disableTwitterElement.addEventListener("change",
 
 twitterHelper.init().then(() => {
     disableTwitterElement.checked = !twitterHelper.getDisableTwitter(); 
+
+    commonHelper.processDefaultCustomInstances(
+        'nitter',
+        twitterHelper,
+        document,
+        twitterHelper.getNitterRedirectsChecks,
+        twitterHelper.setNitterRedirectsChecks,
+        twitterHelper.getNitterCustomRedirects,
+        twitterHelper.setNitterCustomRedirects
+    )
 });
\ No newline at end of file
diff --git a/src/pages/options/wikipedia/wikipedia.html b/src/pages/options/wikipedia/wikipedia.html
index ed811e94..72989228 100644
--- a/src/pages/options/wikipedia/wikipedia.html
+++ b/src/pages/options/wikipedia/wikipedia.html
@@ -28,6 +28,32 @@
             <h4>Enable</h4>
             <input id="disable-wikipedia" type="checkbox" checked />
         </div>
+
+        <hr>
+
+        <div class="some-block option-block">
+            <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="wikiless-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+            <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-wikiless-instance-form">
+            <div class="some-block option-block">
+                <input id="wikiless-custom-instance" placeholder="https://wikiless.com" type="url" />
+                <button type="submit" class="add" id="wikiless-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-custom-checklist"></div>
+
     </section>
 
     <script type="module" src="../init.js"></script>
diff --git a/src/pages/options/wikipedia/wikipedia.js b/src/pages/options/wikipedia/wikipedia.js
index 08a9a6e0..8450714d 100644
--- a/src/pages/options/wikipedia/wikipedia.js
+++ b/src/pages/options/wikipedia/wikipedia.js
@@ -1,10 +1,20 @@
 import wikipediaHelper from "../../../assets/javascripts/helpers/wikipedia.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableWikipediaElement = document.getElementById("disable-wikipedia");
 disableWikipediaElement.addEventListener("change",
     (event) => wikipediaHelper.setDisableWikipedia(!event.target.checked)
 );
-
 wikipediaHelper.init().then(() => {
     disableWikipediaElement.checked = !wikipediaHelper.getDisableWikipedia();
+
+    commonHelper.processDefaultCustomInstances(
+        'wikiless',
+        wikipediaHelper,
+        document,
+        wikipediaHelper.getWikilessRedirectsChecks,
+        wikipediaHelper.setWikilessRedirectsChecks,
+        wikipediaHelper.getWikilessCustomRedirects,
+        wikipediaHelper.setWikilessCustomRedirects
+    )
 })
\ No newline at end of file
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 8ecca39b..bc0e8ef2 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -146,7 +146,10 @@
 
         </div>
 
+
         <div id="piped">
+            <hr>
+
             <div class="some-block option-block">
                 <h4>Default Instances</h4>
             </div>