Added option for custom invidious instances.

_locales/en/messages.json

@@ -353,5 +353,23 @@
     },
     "optionsInfo": {
         "message": "Enable Invidious support, disable autoskip, hide buttons and more."
+    },
+    "addInvidiousInstance": {
+        "message": "Add Invidious Instance"
+    },
+    "addInvidiousInstanceDescription": {
+        "message": "Add a custom instance of Invidious. This must be formatted with JUST the domain. Example: invidious.ajay.app"
+    },
+    "add": {
+        "message": "Add"
+    },
+    "addInvidiousInstanceError": {
+        "message": "This is an invalid domain. This should JUST include the domain part. Example: invidious.ajay.app"
+    },
+    "resetInvidiousInstance": {
+        "message": "Reset Invidious Instance List"
+    },
+    "resetInvidiousInstanceAlert": {
+        "message": "You are about to reset the Invidious instance list?"
     }
 }

manifest.json

@@ -73,5 +73,11 @@
     "page": "options/options.html",
     "open_in_tab": true
   },
-  "manifest_version": 2
+  "manifest_version": 2,
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "57.0"
+    }
+  }
 }

options/options.css

@@ -7,6 +7,10 @@ body {
     text-align: center;
 }
 
+.inline {
+    display: inline-block;
+}
+
 .bold {
     font-weight: bold;
 }

options/options.html

@@ -38,6 +38,36 @@
 			<br/>
 			<br/>
 	
+			<div option-type="text-change" sync-option="invidiousInstances">
+				<div class="option-button trigger-button">
+					__MSG_addInvidiousInstance__
+				</div>
+	
+				<br/>
+	
+				<div class="small-description">__MSG_addInvidiousInstanceDescription__</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<input class="option-text-box" type="text">
+	
+					<br/>
+					<br/>
+	
+					<div class="option-button text-change-set inline">
+						__MSG_add__
+					</div>
+
+					<div class="option-button invidious-instance-reset inline">
+						__MSG_resetInvidiousInstance__
+					</div>
+				</div>
+			</div>
+
+			<br/>
+			<br/>
+	
 			<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
 				<label class="switch-container" label-name="__MSG_autoSkip__">
 					<label class="switch">

options/options.js

@@ -265,11 +265,49 @@ function activateTextChange(element) {
     let textBox = element.querySelector(".option-text-box");
     let option = element.getAttribute("sync-option");
 
+    // See if anything extra must be done
+    switch (option) {
+        case "invidiousInstances":
+
+            let setButton = element.querySelector(".text-change-set");
+            setButton.addEventListener("click", function(e) {
+                if (textBox.value.includes("/") || textBox.value.includes("http") || textBox.value.includes(":")) {
+                    alert(chrome.i18n.getMessage("addInvidiousInstanceError"));
+                } else {
+                    // Add this
+                    chrome.storage.sync.get([option], function(result) {
+                        if (!result[option]) result[option] = [];
+
+                        result[option].push(textBox.value);
+
+                        setOptionValue(option, result[option]);
+
+                        textBox.value = "";
+
+                        // Hide this section again
+                        element.querySelector(".option-hidden-section").classList.add("hidden");
+                        button.classList.remove("disabled");
+                    });
+                }
+            });
+
+            let resetButton = element.querySelector(".invidious-instance-reset");
+            resetButton.addEventListener("click", function(e) {
+                if (confirm(chrome.i18n.getMessage("resetInvidiousInstanceAlert"))) {
+                    setOptionValue(option, []);
+                }
+            });
+    
+            element.querySelector(".option-hidden-section").classList.remove("hidden");
+
+            return;
+    }
+
     chrome.storage.sync.get([option], function(result) {
         textBox.value = result[option];
 
         let setButton = element.querySelector(".text-change-set");
-        setButton.addEventListener("click", () => setOptionValue(option, textBox.value));
+        setButton.addEventListener("click", (e) => setOptionValue(option, textBox.value));
 
         element.querySelector(".option-hidden-section").classList.remove("hidden");
     });