4 files changed, 41 insertions, 12 deletions

diff --git a/pages/options/options.js b/pages/options/options.js
index ed9c70d6..a55d0320 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -28,9 +28,9 @@ chrome.storage.sync.get(
 
 document.querySelector('#save').addEventListener('click', () => {
   chrome.storage.sync.set({
-    nitterInstance: nitterInstance.value,
-    invidiousInstance: invidiousInstance.value,
-    bibliogramInstance: bibliogramInstance.value,
+    nitterInstance: nitterInstance.value && nitterInstance.checkValidity() ? new URL(nitterInstance.value).origin : '',
+    invidiousInstance: invidiousInstance.value && invidiousInstance.checkValidity() ? new URL(invidiousInstance.value).origin : '',
+    bibliogramInstance: bibliogramInstance.value && bibliogramInstance.checkValidity() ? new URL(bibliogramInstance.value).origin : '',
     disableNitter: !disableNitter.checked,
     disableInvidious: !disableInvidious.checked,
     disableBibliogram: !disableBibliogram.checked
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 986fd8c5..32643aca 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.4</span>
+      <span>Version:&nbsp;<span id="version"></span></span>
     </small>
   </header>
 
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index ecbaf1e7..103f07cf 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -6,6 +6,7 @@ let bibliogramInstance = document.querySelector('#bibliogramInstance');
 let disableNitter = document.querySelector('#disableNitter');
 let disableInvidious = document.querySelector('#disableInvidious');
 let disableBibliogram = document.querySelector('#disableBibliogram');
+let version = document.querySelector('#version');
 
 chrome.storage.sync.get(
   [
@@ -26,6 +27,8 @@ chrome.storage.sync.get(
   }
 );
 
+version.textContent = chrome.runtime.getManifest().version;
+
 function debounce(func, wait, immediate) {
   let timeout;
   return () => {
@@ -42,21 +45,30 @@ function debounce(func, wait, immediate) {
 };
 
 let nitterInstanceChange = debounce(() => {
-  chrome.storage.sync.set({ nitterInstance: nitterInstance.value });
+  if (nitterInstance.checkValidity()) {
+    chrome.storage.sync.set({
+      nitterInstance: nitterInstance.value ? new URL(nitterInstance.value).origin : ''
+    });
+  }
 }, 500);
-
 nitterInstance.addEventListener('input', nitterInstanceChange);
 
 let invidiousInstanceChange = debounce(() => {
-  chrome.storage.sync.set({ invidiousInstance: invidiousInstance.value });
+  if (invidiousInstance.checkValidity()) {
+    chrome.storage.sync.set({
+      invidiousInstance: invidiousInstance.value ? new URL(invidiousInstance.value).origin : ''
+    });
+  }
 }, 500);
-
 invidiousInstance.addEventListener('input', invidiousInstanceChange);
 
 let bibliogramInstanceChange = debounce(() => {
-  chrome.storage.sync.set({ bibliogramInstance: bibliogramInstance.value });
+  if (bibliogramInstance.checkValidity()) {
+    chrome.storage.sync.set({
+      bibliogramInstance: bibliogramInstance.value ? new URL(bibliogramInstance.value).origin : ''
+    });
+  }
 }, 500);
-
 bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
 
 disableNitter.addEventListener('change', event => {
diff --git a/pages/styles.css b/pages/styles.css
index 5a233524..a1fa9337 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -5,6 +5,8 @@
   --white: #FFF;
   --active: #FF5B56;
   --space: 5px;
+  --danger: #f04141;
+  --danger-light: #F9D0D5;
 }
 
 body {
@@ -31,7 +33,7 @@ header .logo-container {
 }
 
 header .logo-container img {
-  width: 100%;
+  max-width: 100%;
 }
 
 header small {
@@ -137,10 +139,25 @@ input:checked+label:after {
   padding: 10px;
   text-align: center;
   text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 0.4s;
+  transition-duration: 0.4s;
 }
 
 .button:hover {
   background-color: var(--active);
-  color: #fff
+  color: #fff;
+}
+
+.button:active {
+  background-color: var(--active);
+  box-shadow: 0 5px var(--dark-grey);
+  transform: translateY(4px);
+}
+
+input[type="url"]:invalid {
+  color: var(--danger);
+  border-color: var(--danger);
+  background-color: var(--danger-light);
 }