add custom server address

public/_locales/en/messages.json

@@ -213,6 +213,15 @@
     "whatDeleteButton": {
         "message": "This is the button that allows you to clear all sponsors on the YouTube player."
     },
+    "customServerAddress": {
+        "message": "SponsorBlock Server Address"
+    },
+    "customServerAddressDescription": {
+        "message": "The address SponsorBlock uses to make calls to the server.\nIt must be formatted https://domain with no trailing forward slash (/).\nUnless you have your own server instance this should not be changed."
+    },
+    "saveCustomServerAddress": {
+        "message": "Save"
+    },
     "disableViewTracking": {
         "message": "Disable Sponsor Skip Count Tracking"
     },

public/options/options.css

@@ -76,6 +76,11 @@ body {
     color: white;
 }
 
+.string-container {
+    font-size: 14px;
+    color: white;
+}
+
 .switch {
     position: relative;
     display: inline-block;

public/options/options.html

@@ -93,6 +93,25 @@
 
 			<br/>
 			<br/>
+
+			<div option-type="string-change" sync-option="customServerAddress">
+				<label class="string-container">
+					<div>__MSG_customServerAddress__</div>
+				  <input class="option-text-box" type="text">
+				</label>
+				<div class="option-button custom-server-address-button inline">
+						__MSG_saveCustomServerAddress__
+				</div>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_customServerAddressDescription__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
 	
 			<div option-type="keybind-change" sync-option="startSponsorKeybind">
 				<div class="option-button trigger-button">

src/config.ts

@@ -19,7 +19,8 @@ interface SBConfig {
     invidiousInstances: string[],
     invidiousUpdateInfoShowCount: number,
     autoUpvote: boolean,
-    supportInvidious: false
+    supportInvidious: false,
+    customServerAddress: string
 }
 
 interface SBObject {
@@ -111,7 +112,8 @@ var Config: SBObject = {
         invidiousInstances: ["invidio.us", "invidiou.sh", "invidious.snopyta.org"],
         invidiousUpdateInfoShowCount: 0,
         autoUpvote: true,
-        supportInvidious: false
+        supportInvidious: false,
+        customServerAddress: null 
     },
     localConfig: null,
     config: null

src/options.ts

@@ -1,4 +1,5 @@
 import Config from "./config";
+import * as CompileConfig from "../config.json";
 
 import Utils from "./utils";
 var utils = new Utils();
@@ -65,6 +66,23 @@ async function init() {
                         invidiousInstanceAddInit(<HTMLElement> optionsElements[i], textChangeOption);
                 }
 
+                break;
+            case "string-change":
+                let stringChangeOption = optionsElements[i].getAttribute("sync-option");
+                let stringInput = <HTMLInputElement> optionsElements[i].querySelector(".string-container").querySelector(".option-text-box");
+                let saveButton = <HTMLElement> optionsElements[i].querySelector(".option-button");
+
+                stringInput.value = Config.config[stringChangeOption];
+                // Devs can use config.json to set server address
+                if (stringChangeOption === "customServerAddress") {
+                    stringInput.value = (Config.config.customServerAddress) ? Config.config.customServerAddress : CompileConfig.serverAddress;
+                }
+                
+
+                saveButton.addEventListener("click", () => {
+                   setStringConfigOption(stringInput.value, stringChangeOption);
+                });
+    
                 break;
             case "keybind-change":
                 let keybindButton = optionsElements[i].querySelector(".trigger-button");
@@ -80,6 +98,18 @@ async function init() {
     optionsContainer.classList.add("animated");
 }
 
+/**
+ * Set the value in the string input the the defined config option
+ * 
+ * @param element
+ * @param option
+ */
+function setStringConfigOption(value: string, option: string) {
+    console.log(value);
+    console.log(option);
+    Config.config[option] = value;
+}
+
 /**
  * Called when the config is updated
  * 

src/utils.ts

@@ -240,7 +240,9 @@ class Utils {
     sendRequestToServer(type: string, address: string, callback?: (xmlhttp: XMLHttpRequest, err: boolean) => any) {
         let xmlhttp = new XMLHttpRequest();
   
-        xmlhttp.open(type, CompileConfig.serverAddress + address, true);
+        let serverAddress = (Config.config.customServerAddress) ? Config.config.customServerAddress : CompileConfig.serverAddress;
+
+        xmlhttp.open(type, serverAddress + address, true);
   
         if (callback != undefined) {
             xmlhttp.onreadystatechange = function () {