2 files changed, 38 insertions, 16 deletions
diff --git a/pages/options/options.html b/pages/options/options.html
index 4dde26f8..4baa4ba1 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -14,8 +14,8 @@
   <section class="options settings_block">
     <div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
       <h1>Nitter Redirects</h1>
-      <input aria-hidden="true" id="disableNitter" type="checkbox" checked>&nbsp;
-      <label for="disableNitter" class="checkbox-label">
+      <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
+      <label for="disable-nitter" class="checkbox-label">
       </label>
     </div>
   </section>
@@ -23,8 +23,8 @@
   <section class="options settings_block">
     <div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
       <h1>Invidious Redirects</h1>
-      <input aria-hidden="true" id="disableInvidious" type="checkbox" checked>&nbsp;
-      <label for="disableInvidious" class="checkbox-label">
+      <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
+      <label for="disable-invidious" class="checkbox-label">
       </label>
     </div>
   </section>
@@ -32,19 +32,41 @@
   <section class="options settings_block">
     <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects">
       <h1>Bibliogram Redirects</h1>
-      <input aria-hidden="true" id="disableBibliogram" type="checkbox" checked>&nbsp;
-      <label for="disableBibliogram" class="checkbox-label">
+      <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
+      <label for="disable-bibliogram" class="checkbox-label">
       </label>
     </div>
   </section>
 
   <section class="options settings_block">
     <h1>Nitter Instance</h1>
-    <input id="nitterInstance" type="url" placeholder="https://nitter.net">
+    <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
+    <datalist id="nitter-instance-list">
+      <option value="https://nitter.net">
+      <option value="https://nitter.snopyta.org">
+      <option value="https://nitter.42l.fr">
+      <option value="https://nitter.nixnet.xyz">
+      <option value="https://nitter.13ad.de">
+      <option value="https://tw.openalgeria.org">
+    </datalist>
     <h1>Invidious Instance</h1>
-    <input id="invidiousInstance" type="url" placeholder="https://invidio.us">
+    <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
+    <datalist id="invidious-instances-list">
+      <option value="https://invidio.us">
+      <option value="https://invidious.snopyta.org">
+      <option value="https://invidiou.sh">
+      <option value="https://yewtu.be">
+      <option value="https://invidious.zapashcanon.fr">
+      <option value="https://invidious.toot.koeln">
+      <option value="https://invidious.ggc-project.de">
+    </datalist>
     <h1>Bibliogram Instance</h1>
-    <input id="bibliogramInstance" type="url" placeholder="https://bibliogram.art">
+    <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
+    <datalist id="bibliogram-instance-list">
+      <option value="https://bibliogram.art">
+      <option value="https://bibliogram.snopyta.org">
+      <option value="https://bibliogram.dsrev.ru">
+    </datalist>
   </section>
 
   <footer>
diff --git a/pages/options/options.js b/pages/options/options.js
index a55d0320..62a9cada 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -1,11 +1,11 @@
 'use strict';
 
-let nitterInstance = document.querySelector('#nitterInstance');
-let invidiousInstance = document.querySelector('#invidiousInstance');
-let bibliogramInstance = document.querySelector('#bibliogramInstance');
-let disableNitter = document.querySelector('#disableNitter');
-let disableInvidious = document.querySelector('#disableInvidious');
-let disableBibliogram = document.querySelector('#disableBibliogram');
+let nitterInstance = document.querySelector('#nitter-instance');
+let invidiousInstance = document.querySelector('#invidious-instance');
+let bibliogramInstance = document.querySelector('#bibliogram-instance');
+let disableNitter = document.querySelector('#disable-nitter');
+let disableInvidious = document.querySelector('#disable-invidious');
+let disableBibliogram = document.querySelector('#disable-bibliogram');
 
 chrome.storage.sync.get(
   [
@@ -14,7 +14,7 @@ chrome.storage.sync.get(
     'bibliogramInstance',
     'disableNitter',
     'disableInvidious',
-    'disableBibliogram'
+    'disableBibliogram',
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';