Removed Wikiless, Neuters. Optimization

README.md

@@ -25,7 +25,6 @@ A web extension that redirects YouTube, Twitter, Instagram... requests to altern
 - TikTok => [ProxiTok](https://github.com/pablouser1/ProxiTok)
 - Reddit => [Libreddit](https://github.com/spikecodes/libreddit#instances), [Teddit](https://codeberg.org/teddit/teddit#instances)
 - Imgur => [Rimgo](https://codeberg.org/video-prize-ranch/rimgo)
-- Wikipedia => [Wikiless](https://codeberg.org/orenom/wikiless)
 - Medium => [Scribe](https://sr.ht/~edwardloveall/Scribe/)
 - Quora => [Quetre](https://github.com/zyachel/quetre)
 - IMDb => [libremdb](https://github.com/zyachel/libremdb)

package.json

@@ -10,8 +10,7 @@
 		"build": "web-ext build",
 		"test": "web-ext lint",
 		"instances": "python3 src/instances/get_instances.py && git update-index --assume-unchanged src/instances/blacklist.json src/instances/data.json",
-		"ejs": "ejs src/pages/options/index.ejs -f src/config/config.json -o src/pages/options/index.html && ejs src/pages/popup/popup.ejs -f src/config/config.json -o src/pages/popup/popup.html",
+		"pug": "pug --pretty --basedir ./ --obj ./src/config.json src/pages/options/index.pug --out src/pages/options/ && pug --pretty --basedir ./ --obj ./src/config.json src/pages/popup/popup.pug --out src/pages/popup/"
-		"pug": "pug --pretty --basedir ./ --obj ./src/config/config.json src/pages/options/index.pug --out src/pages/options/ src/pages/popup/popup.pug --out src/pages/popup/"
 	},
 	"repository": {
 		"type": "git",
@@ -24,7 +23,6 @@
 	},
 	"homepage": "https://libredirect.github.io",
 	"devDependencies": {
-		"pug": "^2.0.4",
 		"web-ext": "^7.2.0"
 	},
 	"webExt": {

src/assets/javascripts/services.js

@@ -10,7 +10,7 @@ function init() {
 			options = r.options
 			redirects = r.redirects
 			targets = r.targets
-			fetch("/config/config.json")
+			fetch("/config.json")
 				.then(response => response.text())
 				.then(configData => {
 					config = JSON.parse(configData)
@@ -124,10 +124,6 @@ function redirect(url, type, initiator, forceRedirection) {
 			else return `${randomInstance}/u${url.pathname}${url.search}` // Likely a user profile, redirect to '/u/...'
 		case "lbryDesktop":
 			return url.href.replace(/^https?:\/{2}odysee\.com\//, "lbry://").replace(/:(?=[a-zA-Z0-9])/g, "#")
-		case "neuters":
-			if (url.pathname.startsWith("/article/") || url.pathname.startsWith("/pf/") || url.pathname.startsWith("/arc/") || url.pathname.startsWith("/resizer/")) return null
-			else if (url.pathname.endsWith("/")) return `${randomInstance}${url.pathname}`
-			else return `${randomInstance}${url.pathname}/`
 		case "searx":
 		case "searxng":
 			return `${randomInstance}/${url.search}`
@@ -363,27 +359,6 @@ function redirect(url, type, initiator, forceRedirection) {
 				if (query) return `${randomInstance}/${mapCentre}/Mpnk/${query}`
 			}
 		}
-		case "wikiless":
-			let GETArguments = []
-			if (url.search.length > 0) {
-				let search = url.search.substring(1) //get rid of '?'
-				let argstrings = search.split("&")
-				for (let i = 0; i < argstrings.length; i++) {
-					let args = argstrings[i].split("=")
-					GETArguments.push([args[0], args[1]])
-				}
-			}
-
-			let link = `${randomInstance}${url.pathname}`
-			let urlSplit = url.host.split(".")
-			if (urlSplit[0] != "wikipedia" && urlSplit[0] != "www") {
-				if (urlSplit[0] == "m") GETArguments.push(["mobileaction", "toggle_view_mobile"])
-				else GETArguments.push(["lang", urlSplit[0]])
-				if (urlSplit[1] == "m") GETArguments.push(["mobileaction", "toggle_view_mobile"])
-				// wikiless doesn't have mobile view support yet
-			}
-			for (let i = 0; i < GETArguments.length; i++) link += (i == 0 ? "?" : "&") + GETArguments[i][0] + "=" + GETArguments[i][1]
-			return link
 		case "lingva":
 			let params_arr = url.search.split("&")
 			params_arr[0] = params_arr[0].substring(1)
@@ -443,7 +418,7 @@ function redirect(url, type, initiator, forceRedirection) {
 
 function computeService(url, returnFrontend) {
 	return new Promise(resolve => {
-		fetch("/config/config.json")
+		fetch("/config.json")
 			.then(response => response.text())
 			.then(configData => {
 				const config = JSON.parse(configData)
@@ -529,13 +504,8 @@ function reverse(url, urlString) {
 				case "twitter":
 				case "reddit":
 				case "imdb":
-				case "reuters":
 				case "quora":
 				case "medium":
-				case "wikipedia":
-					if (!urlString) resolve(config.services[service].url + url.pathname + url.search)
-					else resolve(url.replace(/https?:\/{2}(?:[^\s\/]+\.)+[a-zA-Z0-9]+/, config.services[service].url))
-					return
 				case "fandom":
 					let regex = url.pathname.match(/^\/([a-zA-Z0-9-]+)\/wiki\/([a-zA-Z0-9-]+)/)
 					if (regex) {
@@ -555,7 +525,7 @@ function reverse(url, urlString) {
 
 function setRedirects(passedRedirects) {
 	return new Promise(resolve => {
-		fetch("/config/config.json")
+		fetch("/config.json")
 			.then(response => response.text())
 			.then(configData => {
 				browser.storage.local.get(/* [ */ "options" /* , "blacklists"] */, async r => {
@@ -612,7 +582,7 @@ function initDefaults() {
 		fetch("/instances/data.json")
 			.then(response => response.text())
 			.then(data => {
-				fetch("/config/config.json")
+				fetch("/config.json")
 					.then(response => response.text())
 					.then(configData => {
 						browser.storage.local.get(["options", "blacklists"], r => {
@@ -655,7 +625,7 @@ function initDefaults() {
 
 function upgradeOptions() {
 	return new Promise(resolve => {
-		fetch("/config/config.json")
+		fetch("/config.json")
 			.then(response => response.text())
 			.then(configData => {
 				browser.storage.local.get(null, r => {
@@ -727,7 +697,7 @@ function processUpdate() {
 		fetch("/instances/data.json")
 			.then(response => response.text())
 			.then(data => {
-				fetch("/config/config.json")
+				fetch("/config.json")
 					.then(response => response.text())
 					.then(configData => {
 						browser.storage.local.get(["options", "blacklists", "targets"], r => {

src/assets/javascripts/utils.js

@@ -1,6 +1,5 @@
 window.browser = window.browser || window.chrome
 
-import localise from "./localise.js"
 import servicesHelper from "./services.js"
 
 function getRandomInstance(instances) {
@@ -11,204 +10,11 @@ function camelCase(str) {
 	return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-let cloudflareBlackList = []
-let authenticateBlackList = []
-async function initBlackList() {
-	return new Promise(resolve => {
-		fetch("/instances/blacklist.json")
-			.then(response => response.text())
-			.then(data => {
-				cloudflareBlackList = JSON.parse(data).cloudflare
-				authenticateBlackList = JSON.parse(data).authenticate
-				resolve()
-			})
-	})
-}
-
-function updateInstances() {
-	return new Promise(async resolve => {
-		let http = new XMLHttpRequest()
-		let fallback = new XMLHttpRequest()
-		http.open("GET", "https://codeberg.org/LibRedirect/libredirect/raw/branch/master/src/instances/data.json", false)
-		http.send(null)
-		if (http.status != 200) {
-			fallback.open("GET", "https://raw.githubusercontent.com/libredirect/libredirect/master/src/instances/data.json", false)
-			fallback.send(null)
-			if (fallback.status === 200) {
-				http = fallback
-			} else {
-				resolve()
-				return
-			}
-		}
-		await initBlackList()
-		const instances = JSON.parse(http.responseText)
-
-		await servicesHelper.setRedirects(instances)
-
-		console.info("Successfully updated Instances")
-		resolve(true)
-		return
-	})
-}
-
 function protocolHost(url) {
 	if (url.username && url.password) return `${url.protocol}//${url.username}:${url.password}@${url.host}`
 	return `${url.protocol}//${url.host}`
 }
 
-async function processDefaultCustomInstances(service, frontend, network, document) {
-	let frontendNetworkElement = document.getElementById(frontend).getElementsByClassName(network)[0]
-
-	let frontendCustomInstances = []
-	let frontendCheckListElement = frontendNetworkElement.getElementsByClassName("checklist")[0]
-
-	await initBlackList()
-
-	let frontendDefaultRedirects
-
-	let redirects, options
-
-	async function getFromStorage() {
-		return new Promise(async resolve =>
-			browser.storage.local.get(["options", "redirects",], r => {
-				frontendDefaultRedirects = r.options[frontend][network].enabled
-				frontendCustomInstances = r.options[frontend][network].custom
-				options = r.options
-				redirects = r.redirects
-				resolve()
-			})
-		)
-	}
-
-	await getFromStorage()
-
-	function calcFrontendCheckBoxes() {
-		let isTrue = true
-		for (const item of redirects[frontend][network]) {
-			if (!frontendDefaultRedirects.includes(item)) {
-				isTrue = false
-				break
-			}
-		}
-		for (const element of frontendCheckListElement.getElementsByTagName("input")) {
-			element.checked = frontendDefaultRedirects.includes(element.className)
-		}
-		if (frontendDefaultRedirects.length == 0) isTrue = false
-		frontendNetworkElement.getElementsByClassName("toggle-all")[0].checked = isTrue
-	}
-	frontendCheckListElement.innerHTML = [
-		`<div>
-        <x data-localise="__MSG_toggleAll__">Toggle All</x>
-        <input type="checkbox" class="toggle-all"/>
-      </div>`,
-		...redirects[frontend][network]
-			.sort((a, b) =>
-				(cloudflareBlackList.includes(a) && !cloudflareBlackList.includes(b))
-				||
-				(authenticateBlackList.includes(a) && !authenticateBlackList.includes(b))
-			)
-			.map(x => {
-				const cloudflare = cloudflareBlackList.includes(x) ? ' <span style="color:red;">cloudflare</span>' : ""
-				const authenticate = authenticateBlackList.includes(x) ? ' <span style="color:orange;">authenticate</span>' : ""
-
-				let warnings = [cloudflare, authenticate].join(" ")
-				return `<div>
-                    <x><a href="${x}" target="_blank">${x}</a>${warnings}</x>
-                    <input type="checkbox" class="${x}"/>
-                  </div>`
-			}),
-	].join("\n<hr>\n")
-
-	localise.localisePage()
-
-	calcFrontendCheckBoxes()
-	frontendNetworkElement.getElementsByClassName("toggle-all")[0].addEventListener("change", async event => {
-		browser.storage.local.get("options", r => {
-			let options = r.options
-			if (event.target.checked) frontendDefaultRedirects = [...redirects[frontend][network]]
-			else frontendDefaultRedirects = []
-
-			options[frontend][network].enabled = frontendDefaultRedirects
-			browser.storage.local.set({ options })
-			calcFrontendCheckBoxes()
-		})
-	})
-
-	for (let element of frontendCheckListElement.getElementsByTagName("input")) {
-		if (element.className != "toggle-all")
-			frontendNetworkElement.getElementsByClassName(element.className)[0].addEventListener("change", async event => {
-				browser.storage.local.get("options", r => {
-					let options = r.options
-					if (event.target.checked) frontendDefaultRedirects.push(element.className)
-					else {
-						let index = frontendDefaultRedirects.indexOf(element.className)
-						if (index > -1) frontendDefaultRedirects.splice(index, 1)
-					}
-
-					options[frontend][network].enabled = frontendDefaultRedirects
-					browser.storage.local.set({ options })
-					calcFrontendCheckBoxes()
-				})
-			})
-	}
-
-	function calcFrontendCustomInstances() {
-		console.log('calcFrontendCustomInstances()')
-		document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = frontendCustomInstances
-			.map(
-				x => `<div>
-                ${x}
-                <button class="add clear-${x}">
-                  <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                  </svg>
-                </button>
-              </div>
-              <hr>`
-			)
-			.join("\n")
-
-		for (const item of frontendCustomInstances) {
-			document.getElementById(frontend).getElementsByClassName(`clear-${item}`)[0].addEventListener("click", async () => {
-				browser.storage.local.get("options", r => {
-					let options = r.options
-					let index = frontendCustomInstances.indexOf(item)
-					if (index > -1) frontendCustomInstances.splice(index, 1)
-					options[frontend][network].custom = frontendCustomInstances
-					browser.storage.local.set({ options })
-					calcFrontendCustomInstances()
-				})
-			})
-		}
-	}
-	calcFrontendCustomInstances()
-	document.getElementById(frontend).getElementsByClassName("custom-instance-form")[0].addEventListener("submit", async event => {
-		event.preventDefault();
-		browser.storage.local.get("options", async r => {
-			let options = r.options
-			event.preventDefault()
-			let frontendCustomInstanceInput = document.getElementById(frontend).getElementsByClassName("custom-instance")[0]
-			let url
-			try {
-				url = new URL(frontendCustomInstanceInput.value)
-			} catch (error) {
-				return
-			}
-			let protocolHostVar = protocolHost(url)
-			if (frontendCustomInstanceInput.validity.valid && !redirects[frontend][network].includes(protocolHostVar)) {
-				if (!frontendCustomInstances.includes(protocolHostVar)) {
-					frontendCustomInstances.push(protocolHostVar)
-					options[frontend][network].custom = frontendCustomInstances
-					browser.storage.local.set({ options })
-					frontendCustomInstanceInput.value = ""
-				}
-				calcFrontendCustomInstances()
-			}
-		})
-	})
-}
-
 function copyRaw(test, copyRawElement) {
 	return new Promise(resolve => {
 		browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
@@ -266,9 +72,7 @@ function switchInstance(test) {
 
 export default {
 	getRandomInstance,
-	updateInstances,
 	protocolHost,
-	processDefaultCustomInstances,
 	switchInstance,
 	copyRaw,
 	camelCase,

src/config.json

@@ -210,24 +210,6 @@
 			"embeddable": true,
 			"url": "https://imgur.com"
 		},
-		"wikipedia": {
-			"frontends": {
-				"wikiless": {
-					"name": "Wikiless",
-					"instanceList": true
-				}
-			},
-			"targets": [
-				"^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"
-			],
-			"name": "Wikipedia",
-			"options": {
-				"enabled": false
-			},
-			"imageType": "svg",
-			"embeddable": false,
-			"url": "https://wikipedia.org"
-		},
 		"medium": {
 			"frontends": {
 				"scribe": {
@@ -299,24 +281,6 @@
 			"embeddable": false,
 			"url": "https://imdb.com"
 		},
-		"reuters": {
-			"frontends": {
-				"neuters": {
-					"name": "Neuters",
-					"instanceList": true
-				}
-			},
-			"targets": [
-				"^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"
-			],
-			"name": "Reuters",
-			"options": {
-				"enabled": false
-			},
-			"imageType": "svg",
-			"embeddable": false,
-			"url": "https://reuters.com"
-		},
 		"fandom": {
 			"frontends": {
 				"breezeWiki": {

src/index.pug

@@ -1 +0,0 @@
-string of pug

src/instances/get_instances.py

@@ -23,7 +23,7 @@ authRegex = r"https?:\/{2}\S+:\S+@(?:[^\s\/]+\.)*[a-zA-Z0-9]+" + endRegex
 # 2.0 because Libredirect is currently on version 2.x.x
 headers = {'User-Agent': 'Libredirect-instance-fetcher/2.0'}
 
-with open('./src/config/config.json', 'rt') as tmp:
+with open('./src/config.json', 'rt') as tmp:
     config['networks'] = json.load(tmp)['networks']
 
 
@@ -328,12 +328,6 @@ def teddit():
     fetchJsonList('teddit', 'Teddit', 'https://codeberg.org/teddit/teddit/raw/branch/main/instances.json',
                   {'clearnet': 'url', 'tor': 'onion', 'i2p': 'i2p', 'loki': None}, False)
 
-
-def wikiless():
-    fetchJsonList('wikiless', 'Wikiless', 'https://wikiless.org/instances.json',
-                  {'clearnet': 'url', 'tor': 'onion', 'i2p': 'i2p', 'loki': None}, False)
-
-
 def scribe():
     fetchJsonList('scribe', 'Scribe',
                   'https://git.sr.ht/~edwardloveall/scribe/blob/main/docs/instances.json', None, False)
@@ -490,7 +484,6 @@ nitter()
 bibliogram()
 libreddit()
 teddit()
-wikiless()
 scribe()
 quetre()
 libremdb()

src/instances/neuters.json

@@ -1,6 +0,0 @@
-{
-	"clearnet": ["https://neuters.de"],
-	"tor": [],
-	"i2p": [],
-	"loki": []
-}

src/pages/options/index.ejs

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html id="elementToShowWithJavaScript" lang="en">
-  <%- include('src/pages/widgets/head') -%>
-  <body class="option" dir="auto">
-  <%- include('src/pages/widgets/links', {services: services}) -%>
-    <div id="pages">
-      <%- include('src/pages/options/widgets/general', {config: {networks, services}}) -%>
-      <%- include('src/pages/options/widgets/services', {config: {networks, services}}) -%>
-      <%- include('src/pages/options/widgets/about') -%>
-    </div>
-  </body>
-  <script type="module" src="./index.js"></script>
-</html>

src/pages/options/index.js

@@ -1,3 +1,10 @@
+import utils from "../../assets/javascripts/utils.js"
+import localise from "../../assets/javascripts/localise.js"
+
+let config,
+	options,
+	divs = {}
+
 for (const a of document.getElementById("links").getElementsByTagName("a")) {
 	a.addEventListener("click", e => {
 		const path = a.getAttribute("href").replace("#", "")
@@ -6,6 +13,35 @@ for (const a of document.getElementById("links").getElementsByTagName("a")) {
 	})
 }
 
+await new Promise(resolve => {
+	fetch("/config.json").then(response => response.text())
+		.then(data => {
+			config = JSON.parse(data)
+			resolve()
+		})
+})
+await new Promise(resolve => {
+	browser.storage.local.get("options", r => {
+		options = r.options
+		resolve()
+	})
+})
+
+function changeFrontendsSettings(service) {
+	for (const frontend in config.services[service].frontends) {
+		if (config.services[service].frontends[frontend].instanceList) {
+			const frontendDiv = document.getElementById(frontend)
+			if (typeof divs[service].frontend !== "undefined") {
+				if (frontend == divs[service].frontend.value) {
+					frontendDiv.style.display = "block"
+				} else {
+					frontendDiv.style.display = "none"
+				}
+			}
+		}
+	}
+}
+
 function loadPage(path) {
 	for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none"
 	document.getElementById(`${path}_page`).style.display = "block"
@@ -16,8 +52,171 @@ function loadPage(path) {
 
 	let stateObj = { id: "100" }
 	window.history.pushState(stateObj, "Page 2", `/pages/options/index.html#${path}`)
+
+	const service = path;
+	divs[service] = {}
+	for (const option in config.services[service].options) {
+		divs[service][option] = document.getElementById(`${service}-${option}`)
+
+		if (typeof config.services[service].options[option] == "boolean") divs[service][option].checked = options[service][option]
+		else divs[service][option].value = options[service][option]
+
+		divs[service][option].addEventListener("change", () => {
+			browser.storage.local.get("options", r => {
+				let options = r.options
+				if (typeof config.services[service].options[option] == "boolean") options[service][option] = divs[service][option].checked
+				else options[service][option] = divs[service][option].value
+				browser.storage.local.set({ options })
+				changeFrontendsSettings(service)
+			})
+		})
+	}
+
+	if (Object.keys(config.services[service].frontends).length > 1) {
+		changeFrontendsSettings(service)
+	}
+
+	for (const frontend in config.services[service].frontends) {
+		if (config.services[service].frontends[frontend].instanceList) {
+			for (const network in config.networks) {
+				processDefaultCustomInstances(frontend, network, document)
+			}
+		}
+	}
 }
 
 const r = window.location.href.match(/#(.*)/)
 if (r) loadPage(r[1])
 else loadPage("general")
+
+async function processDefaultCustomInstances(frontend, network, document) {
+	let networkElement = document.getElementById(frontend).getElementsByClassName(network)[0]
+	let customInstances = []
+	let checkListElement = networkElement.getElementsByClassName("checklist")[0]
+
+	let cloudflareBlackList = []
+	let authenticateBlackList = []
+	await new Promise(resolve => {
+		fetch("/instances/blacklist.json")
+			.then(response => response.text())
+			.then(data => {
+				cloudflareBlackList = JSON.parse(data).cloudflare
+				authenticateBlackList = JSON.parse(data).authenticate
+				resolve()
+			})
+	})
+
+	let frontendDefaultRedirects
+
+	let redirects, options
+
+	await new Promise(async resolve =>
+		browser.storage.local.get(["options", "redirects",], r => {
+			frontendDefaultRedirects = r.options[frontend][network].enabled
+			customInstances = r.options[frontend][network].custom
+			options = r.options
+			redirects = r.redirects
+			resolve()
+		})
+	)
+
+	function calcCheckBoxes() {
+		for (const element of checkListElement.getElementsByTagName("input")) {
+			element.checked = frontendDefaultRedirects.includes(element.className)
+		}
+	}
+	if (redirects[frontend][network].length > 0)
+		checkListElement.innerHTML = [
+			`
+			<div class="some-block option-block">
+				<h4>${utils.camelCase(network)}</h4>
+			</div>
+			`,
+			...redirects[frontend][network]
+				.sort((a, b) =>
+					(cloudflareBlackList.includes(a) && !cloudflareBlackList.includes(b))
+					||
+					(authenticateBlackList.includes(a) && !authenticateBlackList.includes(b))
+				)
+				.map(x => {
+					const cloudflare = cloudflareBlackList.includes(x) ? ' <span style="color:red;">cloudflare</span>' : ""
+					const authenticate = authenticateBlackList.includes(x) ? ' <span style="color:orange;">authenticate</span>' : ""
+
+					let warnings = [cloudflare, authenticate].join(" ")
+					return `
+					<div>
+						<x>
+							<a href="${x}" target="_blank">${x}</a>${warnings}
+						</x>
+						<input type="checkbox" class="${x}"/>
+                  	</div>`
+				}),
+			'<br>'
+		].join("\n<hr>\n")
+
+	localise.localisePage()
+
+	calcCheckBoxes()
+
+	for (let element of checkListElement.getElementsByTagName("input")) {
+		networkElement.getElementsByClassName(element.className)[0].addEventListener("change", async event => {
+			if (event.target.checked) frontendDefaultRedirects.push(element.className)
+			else {
+				let index = frontendDefaultRedirects.indexOf(element.className)
+				if (index > -1) frontendDefaultRedirects.splice(index, 1)
+			}
+
+			options[frontend][network].enabled = frontendDefaultRedirects
+			browser.storage.local.set({ options }, () => calcCheckBoxes())
+		})
+	}
+
+	function calcCustomInstances() {
+		document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances
+			.map(
+				x => `
+				<div>
+                	${x}
+					<button class="add clear-${x}">
+						<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+							<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+						</svg>
+					</button>
+              	</div>
+              	<hr>`
+			)
+			.join("\n")
+
+		for (const item of customInstances) {
+			document.getElementById(frontend).getElementsByClassName(`clear-${item}`)[0].addEventListener("click", async () => {
+				let index = customInstances.indexOf(item)
+				if (index > -1) customInstances.splice(index, 1)
+				options[frontend][network].custom = customInstances
+				browser.storage.local.set({ options }, () => calcCustomInstances())
+			})
+		}
+	}
+	calcCustomInstances()
+	document.getElementById(frontend).getElementsByClassName("custom-instance-form")[0].addEventListener("submit", async event => {
+		event.preventDefault();
+		event.preventDefault()
+		let frontendCustomInstanceInput = document.getElementById(frontend).getElementsByClassName("custom-instance")[0]
+		let url
+		try {
+			url = new URL(frontendCustomInstanceInput.value)
+		} catch (error) {
+			return
+		}
+		let protocolHostVar = utils.protocolHost(url)
+		if (frontendCustomInstanceInput.validity.valid && !redirects[frontend][network].includes(protocolHostVar)) {
+			if (!customInstances.includes(protocolHostVar)) {
+				customInstances.push(protocolHostVar)
+				options[frontend][network].custom = customInstances
+				browser.storage.local.set({ options }, () => {
+					frontendCustomInstanceInput.value = ""
+					calcCustomInstances()
+				})
+			}
+		}
+	})
+}

src/pages/options/widgets/general.js

@@ -5,21 +5,11 @@ import utils from "../../../assets/javascripts/utils.js"
 import generalHelper from "../../../assets/javascripts/general.js"
 import servicesHelper from "../../../assets/javascripts/services.js"
 
-let updateInstancesElement = document.getElementById("update-instances")
-updateInstancesElement.addEventListener("click", async () => {
-	let oldHtml = updateInstancesElement.innerHTML
-	updateInstancesElement.innerHTML = "..."
-	if (await utils.updateInstances()) {
-		updateInstancesElement.innerHTML = oldHtml
-		location.reload()
-	} else updateInstancesElement.innerHTML = "Failed Miserabely"
-})
-
 let config
 
 async function getConfig() {
 	return new Promise(resolve => {
-		fetch("/config/config.json")
+		fetch("/config.json")
 			.then(response => response.text())
 			.then(data => {
 				config = JSON.parse(data)

src/pages/options/widgets/services.js

@@ -1,76 +0,0 @@
-import utils from "../../../assets/javascripts/utils.js"
-
-let config,
-	options,
-	divs = {}
-
-function getConfig() {
-	return new Promise(resolve => {
-		fetch("/config/config.json")
-			.then(response => response.text())
-			.then(data => {
-				config = JSON.parse(data)
-				resolve()
-			})
-	})
-}
-
-function getOptions() {
-	return new Promise(resolve => {
-		browser.storage.local.get("options", r => {
-			options = r.options
-			resolve()
-		})
-	})
-}
-
-await getConfig()
-await getOptions()
-
-function changeFrontendsSettings(service) {
-	for (const frontend in config.services[service].frontends) {
-		if (config.services[service].frontends[frontend].instanceList) {
-			const frontendDiv = document.getElementById(frontend)
-			if (typeof divs[service].frontend !== "undefined") {
-				if (frontend == divs[service].frontend.value) {
-					frontendDiv.style.display = "block"
-				} else {
-					frontendDiv.style.display = "none"
-				}
-			}
-		}
-	}
-}
-
-for (const service in config.services) {
-	divs[service] = {}
-	//divs[service].page = document.getElementById(`${service}_page`)
-	for (const option in config.services[service].options) {
-		divs[service][option] = document.getElementById(`${service}-${option}`)
-
-		if (typeof config.services[service].options[option] == "boolean") divs[service][option].checked = options[service][option]
-		else divs[service][option].value = options[service][option]
-
-		divs[service][option].addEventListener("change", () => {
-			browser.storage.local.get("options", r => {
-				let options = r.options
-				if (typeof config.services[service].options[option] == "boolean") options[service][option] = divs[service][option].checked
-				else options[service][option] = divs[service][option].value
-				browser.storage.local.set({ options })
-				changeFrontendsSettings(service)
-			})
-		})
-	}
-
-	if (Object.keys(config.services[service].frontends).length > 1) {
-		changeFrontendsSettings(service)
-	}
-
-	for (const frontend in config.services[service].frontends) {
-		if (config.services[service].frontends[frontend].instanceList) {
-			for (const network in config.networks) {
-				utils.processDefaultCustomInstances(service, frontend, network, document)
-			}
-		}
-	}
-}

src/pages/options/widgets/services.pug

@@ -28,25 +28,18 @@ each val, service in services
                     option(value="sub_frame" data-localise="__MSG_onlyEmbedded__") Only Embedded
                     option(value="main_frame" data-localise="__MSG_onlyNotEmbedded__") Only Not Embedded
 
-        hr
-
         each val, frontend in services[service].frontends
             if services[service].frontends[frontend].instanceList
                 div(id=frontend)
                     each val, network in networks
                         div(class=network)
-                            div(class="some-block option-block")
-                                h4=network.charAt(0).toUpperCase() + network.slice(1)
                             div(class="checklist")
-                            hr
                     div(class="some-block option-block")
                         h4(data-localise="__MSG_customInstances__") Custom Instances
                     form(class="custom-instance-form")
                         div(class="some-block option-block")
-                            input(class="custom-instance" placeholder="http://<%= frontend %>.com" type="url" )
+                            input(class="custom-instance" placeholder=`http://${frontend}.com` type="url" )
                             button(class="add add-instance" type="submit")
                                 svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
                                     path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
                     div(class="checklist custom-checklist")
-
-        script(type="module" src="./widgets/services.js")

src/pages/popup/popup.js

@@ -9,7 +9,7 @@ let config,
 
 async function getConfig() {
 	return new Promise(resolve => {
-		fetch("/config/config.json")
+		fetch("/config.json")
 			.then(response => response.text())
 			.then(data => {
 				config = JSON.parse(data)