Add instances to popup menu

2 files changed, 42 insertions, 16 deletions

diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 889ffcde..22ccb025 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -14,7 +14,7 @@
       <img src="../../images/logo.png" alt="Privacy Redirect logo">
     </div>
     <small>
-      <span>Version</span>: 1.1.1</span>
+      <span>Version</span>: 1.1.2</span>
     </small>
   </header>
 
@@ -36,9 +36,12 @@
     </div>
   </section>
 
-  <footer>
-    <a class="button" id="options" target="_blank">Options</a>
-  </footer>
+  <section class="options settings_block">
+    <h1>Nitter Instance</h1>
+    <input id="nitterInstance" type="url" placeholder="https://nitter.net">
+    <h1>Invidious Instance</h1>
+    <input id="invidiousInstance" type="url" placeholder="https://invidio.us">
+  </section>
 
   <script src="./popup.js"></script>
 
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 2837cdb2..799b5ea3 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -2,27 +2,50 @@
 
 let disableNitter = document.querySelector('#disableNitter');
 let disableInvidious = document.querySelector('#disableInvidious');
+let nitterInstance = document.querySelector('#nitterInstance');
+let invidiousInstance = document.querySelector('#invidiousInstance');
 
 chrome.storage.sync.get(
-  ['disableNitter', 'disableInvidious'],
-  (result) => {
+  ['disableNitter', 'disableInvidious', 'nitterInstance', 'invidiousInstance'],
+  result => {
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
+    nitterInstance.value = result.nitterInstance || '';
+    invidiousInstance.value = result.invidiousInstance || '';
   }
 );
 
-disableNitter.addEventListener('change', (event) => {
+function debounce(func, wait, immediate) {
+  let timeout;
+  return function () {
+    let context = this, args = arguments;
+    let later = function () {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+
+let nitterInstanceChange = debounce(() => {
+  chrome.storage.sync.set({ nitterInstance: nitterInstance.value });
+}, 500);
+
+nitterInstance.addEventListener('input', nitterInstanceChange);
+
+let invidiousInstanceChange = debounce(() => {
+  chrome.storage.sync.set({ invidiousInstance: invidiousInstance.value });
+}, 500);
+
+invidiousInstance.addEventListener('input', invidiousInstanceChange);
+
+disableNitter.addEventListener('change', event => {
   chrome.storage.sync.set({ disableNitter: !event.target.checked });
 });
 
-disableInvidious.addEventListener('change', (event) => {
+disableInvidious.addEventListener('change', event => {
   chrome.storage.sync.set({ disableInvidious: !event.target.checked });
 });
-
-document.querySelector('#options').addEventListener('click', () => {
-  if (chrome.runtime.openOptionsPage) {
-    chrome.runtime.openOptionsPage();
-  } else {
-    window.open(chrome.runtime.getURL('../options/options.html'));
-  }
-});
\ No newline at end of file