about summary refs log tree commit diff stats
path: root/src/pages/options
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/options')
-rw-r--r--src/pages/options/index.html17
-rw-r--r--src/pages/options/index.js399
-rw-r--r--src/pages/options/index.pug10
-rw-r--r--src/pages/options/init.js54
-rw-r--r--src/pages/options/widgets/general.js219
-rw-r--r--src/pages/options/widgets/general.pug88
-rw-r--r--src/pages/options/widgets/services.pug83
7 files changed, 17 insertions, 853 deletions
diff --git a/src/pages/options/index.html b/src/pages/options/index.html
new file mode 100644
index 00000000..b197d4a7
--- /dev/null
+++ b/src/pages/options/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg">
+	<title>Settings</title>
+	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' href='../fonts/styles.css'>
+	<script defer src='build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/options/index.js b/src/pages/options/index.js
deleted file mode 100644
index fcc51298..00000000
--- a/src/pages/options/index.js
+++ /dev/null
@@ -1,399 +0,0 @@
-import utils from "../../assets/javascripts/utils.js"
-
-let config,
-	options,
-	divs = {}
-
-for (const a of document.getElementById("links").getElementsByTagName("a")) {
-	if (!a.href.includes("https://")) {
-		a.addEventListener("click", e => {
-			const path = a.getAttribute("href").replace("#", "")
-			loadPage(path)
-			e.preventDefault()
-		})
-	}
-}
-
-config = await utils.getConfig()
-options = await utils.getOptions()
-
-/**
- * @param {string} service
- */
-async function changeFrontendsSettings(service) {
-	options = await utils.getOptions()
-	const opacityDiv = document.getElementById(`${service}-opacity`)
-	if (document.getElementById(`${service}-enabled`).checked) {
-		opacityDiv.style.pointerEvents = 'auto'
-		opacityDiv.style.opacity = 1
-		opacityDiv.style.userSelect = 'auto'
-	} else {
-		opacityDiv.style.pointerEvents = 'none'
-		opacityDiv.style.opacity = 0.4
-		opacityDiv.style.userSelect = 'none'
-	}
-	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
-					||
-					(config.services[service].frontends[divs[service].frontend.value].desktopApp && divs[service].embedFrontend && frontend == divs[service].embedFrontend.value)
-				) {
-					frontendDiv.style.display = ""
-					if (config.services[service].frontends[frontend].localhost === true) {
-						document.getElementById(`${service}-instance-div`).style.display = ""
-
-						if (options[service].instance == "localhost") {
-							frontendDiv.style.display = "none"
-						}
-					} else {
-						document.getElementById(`${service}-instance-div`).style.display = "none"
-					}
-				} else {
-					frontendDiv.style.display = "none"
-				}
-			}
-		}
-	}
-	if (document.getElementById(`${service}-redirectType`)) {
-		const frontend = options[service].frontend
-		if (config.services[service].frontends[frontend].embeddable) {
-			document.getElementById(`${service}-redirectType`).innerHTML = `
-			<option value="both" data-localise="__MSG_both__">both</options>
-			<option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option>
-			<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
-			`
-		}
-		else if (config.services[service].frontends[frontend].desktopApp && Object.values(config.services[service].frontends).some(frontend => frontend.embeddable)) {
-			document.getElementById(`${service}-redirectType`).innerHTML = `
-			<option value="both" data-localise="__MSG_both__">both</options>
-			<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
-			`
-			if (options[service].redirectType == "sub_frame") {
-				options[service].redirectType = "main_frame"
-				browser.storage.local.set({ options })
-			}
-		} else {
-			document.getElementById(`${service}-redirectType`).innerHTML =
-				'<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>'
-			options[service].redirectType = "main_frame"
-
-			browser.storage.local.set({ options })
-		}
-		document.getElementById(`${service}-redirectType`).value = options[service].redirectType
-		if (config.services[service].frontends[frontend].desktopApp && options[service].redirectType != "main_frame") {
-			document.getElementById(`${service}-embedFrontend-div`).style.display = ''
-			document.getElementById(divs[service].embedFrontend.value).style.display = ''
-		}
-		else if (config.services[service].frontends[frontend].desktopApp && options[service].redirectType == "main_frame") {
-			document.getElementById(`${service}-embedFrontend-div`).style.display = 'none'
-			document.getElementById(divs[service].embedFrontend.value).style.display = 'none'
-		} else {
-			document.getElementById(`${service}-embedFrontend-div`).style.display = 'none'
-		}
-	}
-	const frontend_name_element = document.getElementById(`${service}_page`).getElementsByClassName("frontend_name")[0]
-	frontend_name_element.href = config.services[service].frontends[divs[service].frontend.value].url
-}
-
-/**
- * @param {string} path
- */
-async function loadPage(path) {
-	options = await utils.getOptions()
-	for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none"
-	document.getElementById(`${path}_page`).style.display = "block"
-
-	for (const element of document.getElementsByClassName("title")) {
-		const a = element.getElementsByTagName('a')[0]
-		if (a.getAttribute("href") == `#${path}`) {
-			element.classList.add("selected")
-		} else {
-			element.classList.remove("selected")
-		}
-	}
-
-	for (const service in config.services) {
-		if (options[service].enabled) {
-			document.getElementById(`${service}-link`).style.opacity = 1
-		} else {
-			document.getElementById(`${service}-link`).style.opacity = 0.4
-		}
-	}
-
-	window.history.pushState({ id: "100" }, "Page 2", `/pages/options/index.html#${path}`)
-
-	if (path != 'general') {
-		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", async () => {
-				let options = await utils.getOptions()
-				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)
-			})
-		}
-
-		changeFrontendsSettings(service)
-
-
-		for (const frontend in config.services[service].frontends) {
-			if (config.services[service].frontends[frontend].instanceList) {
-				processCustomInstances(frontend, document)
-				document.getElementById(`ping-${frontend}`).addEventListener("click", async () => {
-					document.getElementById(`ping-${frontend}`).getElementsByTagName('x')[0].innerHTML = "Pinging..."
-					await ping(frontend)
-					document.getElementById(`ping-${frontend}`).getElementsByTagName('x')[0].innerHTML = "Ping instances"
-				})
-			}
-		}
-
-		!async function () {
-			const blacklist = await utils.getBlacklist(options)
-			const redirects = await utils.getList(options)
-
-			for (const frontend in config.services[service].frontends) {
-				if (config.services[service].frontends[frontend].instanceList) {
-					if (redirects == 'disabled' || blacklist == 'disabled') {
-						document.getElementById(frontend).getElementsByClassName('clearnet')[0].style.display = 'none'
-						document.getElementById(frontend).getElementsByClassName('ping')[0].style.display = 'none'
-					}
-					else if (!redirects || !blacklist) {
-						document.getElementById(frontend)
-							.getElementsByClassName('clearnet')[0]
-							.getElementsByClassName("checklist")[0]
-							.getElementsByClassName('loading')[0]
-							.innerHTML = 'Could not fetch instances.'
-					}
-					else {
-						createList(frontend, config.networks, document, redirects, blacklist)
-					}
-				}
-			}
-		}()
-	}
-}
-
-async function calcCustomInstances(frontend) {
-	let options = await utils.getOptions()
-	let customInstances = options[frontend]
-	const pingCache = await utils.getPingCache()
-
-	document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances
-		.map(
-			x => {
-				let time = pingCache[x]
-				let timeText = ""
-				if (time) {
-					const { color, text } = processTime(time)
-					timeText = `<span class="ping" style="color:${color};">${text}</span>`
-				}
-				return `<div>
-							<x>
-								<a href="${x}" target="_blank">${x}</a>
-								${timeText}
-							</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 () => {
-			const index = customInstances.indexOf(item)
-			if (index > -1) customInstances.splice(index, 1)
-			options = await utils.getOptions()
-			options[frontend] = customInstances
-			browser.storage.local.set({ options }, async () => {
-				calcCustomInstances(frontend)
-				const blacklist = await utils.getBlacklist(options)
-				const redirects = await utils.getList(options)
-				createList(frontend, config.networks, document, redirects, blacklist)
-			})
-		})
-	}
-}
-
-async function processCustomInstances(frontend, document) {
-	calcCustomInstances(frontend)
-	document.getElementById(frontend).getElementsByClassName("custom-instance-form")[0].addEventListener("submit", async event => {
-		event.preventDefault()
-		let options = await utils.getOptions()
-		let customInstances = options[frontend]
-		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) {
-			if (!customInstances.includes(protocolHostVar)) {
-				customInstances.push(protocolHostVar)
-				options = await utils.getOptions()
-				options[frontend] = customInstances
-				browser.storage.local.set({ options }, () => {
-					frontendCustomInstanceInput.value = ""
-					calcCustomInstances(frontend)
-				})
-			}
-		}
-	})
-}
-
-/**
- * @param {string} frontend
- * @param {*} networks
- * @param {*} document
- * @param {*} redirects
- * @param {*} blacklist
- */
-async function createList(frontend, networks, document, redirects, blacklist) {
-	const pingCache = await utils.getPingCache()
-	const options = await utils.getOptions()
-	for (const network in networks) {
-		const checklist = document.getElementById(frontend)
-			.getElementsByClassName(network)[0]
-			.getElementsByClassName("checklist")[0]
-
-		if (!redirects[frontend]) {
-			checklist.innerHTML = '<div class="block block-option">No instances found.</div>'
-			break
-		}
-
-		const instances = redirects[frontend][network]
-		if (!instances || instances.length === 0) continue
-
-		document.getElementById(frontend)
-			.getElementsByClassName("custom-instance")[0]
-			.placeholder = redirects[frontend].clearnet[0]
-
-		const sortedInstances = instances.sort((a, b) => blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b))
-
-		const content = sortedInstances
-			.map(x => {
-				const cloudflare = blacklist.cloudflare.includes(x) ?
-					`<a target="_blank" href="https://libredirect.github.io/docs.html#instances">
-                        <span style="color:red;">cloudflare</span>
-                    </a>` : ""
-
-				let time = pingCache[x]
-				let timeText = ""
-				if (time) {
-					const { color, text } = processTime(time)
-					timeText = `<span class="ping" style="color:${color};">${text}</span>`
-				}
-
-				const chosen = options[frontend].includes(x) ? `<span style="color:grey;">chosen</span>` : ""
-
-				const warnings = [cloudflare, timeText, chosen].join(" ")
-				return `<div class="frontend">
-                            <x>
-                                <a href="${x}" target="_blank">${x}</a>
-								${warnings}
-                            </x>
-                            <button class="add add-${x}">
-                                <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" />
-                                </svg>
-                            </button>
-                        </div>`
-			})
-
-		checklist.innerHTML = [
-			`<div class="block block-option">
-                <label>${utils.camelCase(network)}</label>
-            </div>`,
-			...content,
-			"<br>"
-		].join("\n<hr>\n")
-
-		for (const instance of instances) {
-			checklist.getElementsByClassName(`add-${instance}`)[0]
-				.addEventListener("click", async () => {
-					let options = await utils.getOptions()
-					if (!options[frontend].includes(instance)) {
-						options[frontend].push(instance)
-						browser.storage.local.set({ options }, () => {
-							calcCustomInstances(frontend)
-							createList(frontend, config.networks, document, redirects, blacklist)
-						})
-					}
-				})
-		}
-	}
-}
-
-const r = window.location.href.match(/#(.*)/)
-if (r) loadPage(r[1])
-else loadPage("general")
-
-/**
- * @param {string} frontend
- */
-async function ping(frontend) {
-	const instanceElements = [
-		...document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].getElementsByTagName('x'),
-		...document.getElementById(frontend).getElementsByClassName('clearnet')[0].getElementsByTagName('x')
-	]
-
-	let pingCache = await utils.getPingCache()
-	let redundancyList = {}
-	for (const element of instanceElements) {
-		let span = element.getElementsByClassName('ping')[0]
-		if (!span) span = document.createElement('span')
-		span.classList = ['ping']
-		span.innerHTML = '<span style="color:lightblue">pinging...</span>'
-		element.appendChild(span)
-		const href = element.getElementsByTagName('a')[0].href
-		const innerHTML = element.getElementsByTagName('a')[0].innerHTML
-		const time = redundancyList[innerHTML] ?? await utils.ping(href)
-		const { color, text } = processTime(time)
-		span.innerHTML = `<span style="color:${color};">${text}</span>`
-		pingCache[innerHTML] = time
-		redundancyList[innerHTML] = time
-
-		browser.storage.local.set({ pingCache })
-	}
-}
-
-/**
- * @param {number} time
- */
-function processTime(time) {
-	let text
-	let color
-	if (time < 5000) {
-		text = `${time}ms`
-		if (time <= 1000) color = "green"
-		else if (time <= 2000) color = "orange"
-	}
-	else if (time >= 5000) {
-		color = "red"
-		if (time == 5000) text = "5000ms+"
-		if (time > 5000) text = `Error: ${time - 5000}`
-	}
-	else {
-		color = "red"
-		text = 'Server not found'
-	}
-	return {
-		color, text
-	}
-}
diff --git a/src/pages/options/index.pug b/src/pages/options/index.pug
deleted file mode 100644
index 4e19b087..00000000
--- a/src/pages/options/index.pug
+++ /dev/null
@@ -1,10 +0,0 @@
-doctype html
-html(id="elementToShowWithJavaScript" lang="en")
-    include /src/pages/widgets/head
-    body(class="option" dir="auto")
-        include /src/pages/widgets/links
-        div#pages
-            include /src/pages/options/widgets/general
-            include /src/pages/options/widgets/services
-    script(type="module" src="./index.js")
-    
\ No newline at end of file
diff --git a/src/pages/options/init.js b/src/pages/options/init.js
deleted file mode 100644
index f88c9ef9..00000000
--- a/src/pages/options/init.js
+++ /dev/null
@@ -1,54 +0,0 @@
-window.browser = window.browser || window.chrome
-
-import localise from "../../assets/javascripts/localise.js"
-import utils from "../../assets/javascripts/utils.js"
-import servicesHelper from "../../assets/javascripts/services.js"
-
-if (!(await utils.getOptions())) {
-	await servicesHelper.initDefaults()
-}
-
-function changeTheme() {
-	return new Promise(async resolve => {
-		switch ((await utils.getOptions()).theme) {
-			case "dark":
-				document.body.classList.add("dark-theme")
-				document.body.classList.remove("light-theme")
-				for (const element of document.body.getElementsByClassName('dark')) {
-					element.style.display = 'none';
-				}
-				break
-			case "light":
-				document.body.classList.add("light-theme")
-				document.body.classList.remove("dark-theme")
-				for (const element of document.body.getElementsByClassName('light')) {
-					element.style.display = 'none';
-				}
-				break
-			default:
-				if (matchMedia("(prefers-color-scheme: light)").matches) {
-					document.body.classList.add("light-theme")
-					document.body.classList.remove("dark-theme")
-					for (const element of document.body.getElementsByClassName('light')) {
-						element.style.display = 'none';
-					}
-				} else {
-					document.body.classList.add("dark-theme")
-					document.body.classList.remove("light-theme")
-					for (const element of document.body.getElementsByClassName('dark')) {
-						element.style.display = 'none';
-					}
-				}
-		}
-		resolve()
-	})
-}
-
-changeTheme()
-if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) {
-	document.getElementsByTagName("body")[0].classList.add("rtl")
-	document.getElementsByTagName("body")[0].dir = "rtl"
-}
-localise.localisePage()
-
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", changeTheme)
diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js
deleted file mode 100644
index 6f2852a9..00000000
--- a/src/pages/options/widgets/general.js
+++ /dev/null
@@ -1,219 +0,0 @@
-"use strict"
-window.browser = window.browser || window.chrome
-
-import utils from "../../../assets/javascripts/utils.js"
-import servicesHelper from "../../../assets/javascripts/services.js"
-
-const isChrome = browser.runtime.getBrowserInfo === undefined
-
-async function setOption(option, type, event) {
-	let options = await utils.getOptions()
-	if (type == "select") {
-		options[option] = event.target.options[event.target.options.selectedIndex].value
-	} else if (type == "checkbox") {
-		options[option] = event.target.checked
-	} else if (type == "range") {
-		options[option] = event.target.value
-	}
-	browser.storage.local.set({ options })
-}
-
-const exportSettingsElement = document.getElementById("export-settings")
-async function exportSettings() {
-	const options = await utils.getOptions()
-	options.version = browser.runtime.getManifest().version
-	let resultString = JSON.stringify(options, null, "  ")
-	exportSettingsElement.href = "data:application/json;base64," + btoa(resultString)
-	exportSettingsElement.download = `libredirect-settings-v${options.version}.json`
-	return
-}
-exportSettings()
-document.getElementById("general_page").onclick = exportSettings
-
-const importSettingsElement = document.getElementById("import-settings")
-const importSettingsElementText = document.getElementById("import_settings_text")
-importSettingsElement.addEventListener("change", () => {
-	function importError() {
-		const oldHTML = importSettingsElementText.innerHTML
-		importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>'
-		setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000)
-	}
-	importSettingsElementText.innerHTML = "..."
-	let file = importSettingsElement.files[0]
-	const reader = new FileReader()
-	reader.readAsText(file)
-	reader.onload = async () => {
-		const data = JSON.parse(reader.result)
-		if (
-			"theme" in data
-			&& data.version == browser.runtime.getManifest().version
-		) {
-			browser.storage.local.clear(async () => {
-				browser.storage.local.set({ options: data }, () => {
-					location.reload()
-				})
-			})
-		} else {
-			console.log("incompatible settings")
-			importError()
-		}
-	}
-	reader.onerror = error => {
-		console.log("error", error)
-		importError()
-	}
-})
-
-const exportSettingsSync = document.getElementById("export-settings-sync")
-const importSettingsSync = document.getElementById("import-settings-sync")
-const importSettingsSyncText = document.getElementById("import_settings_sync_text")
-
-exportSettingsSync.addEventListener("click", async () => {
-	let options = await utils.getOptions()
-	options.version = browser.runtime.getManifest().version
-	browser.storage.sync.set({ options }, () => location.reload())
-})
-
-importSettingsSync.addEventListener("click", () => {
-	function importError() {
-		importSettingsSyncText.innerHTML = '<span style="color:red;">Error!</span>'
-		setTimeout(() => (importSettingsSyncText.innerHTML = oldHTML), 1000)
-	}
-	const oldHTML = importSettingsSyncText.innerHTML
-	importSettingsSyncText.innerHTML = "..."
-	browser.storage.sync.get({ options }, r => {
-		const options = r.options
-		if (options.version == browser.runtime.getManifest().version) {
-			browser.storage.local.set({ options }, () => location.reload())
-		} else {
-			importError()
-		}
-	})
-})
-
-const resetSettings = document.getElementById("reset-settings")
-resetSettings.addEventListener("click", async () => {
-	resetSettings.innerHTML = "..."
-	await servicesHelper.initDefaults()
-	location.reload()
-})
-
-const fetchInstancesElement = document.getElementById('fetch-instances')
-fetchInstancesElement.addEventListener('change', event => {
-	setOption('fetchInstances', 'select', event)
-	location.reload()
-})
-
-const redirectOnlyInIncognitoElement = document.getElementById('redirectOnlyInIncognito')
-redirectOnlyInIncognitoElement.addEventListener('change', event => {
-	setOption('redirectOnlyInIncognito', 'checkbox', event)
-})
-
-const bookmarksMenuElement = document.getElementById('bookmarksMenu')
-bookmarksMenuElement.addEventListener('change', async event => {
-	if (event.target.checked)
-		bookmarksMenuElement.checked = await browser.permissions.request({
-			permissions: ["bookmarks"]
-		})
-	else
-		bookmarksMenuElement.checked = !await browser.permissions.remove({
-			permissions: ["bookmarks"]
-		})
-})
-
-let themeElement = document.getElementById("theme")
-themeElement.addEventListener("change", event => {
-	setOption("theme", "select", event)
-	location.reload()
-})
-
-let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance")
-let instanceTypeElement = document.getElementById("exceptions-custom-instance-type")
-let instanceType = "url"
-
-let config = await utils.getConfig()
-
-for (const service in config.services) {
-	document.getElementById(service).addEventListener("change", async event => {
-		let options = await utils.getOptions()
-		if (event.target.checked && !options.popupServices.includes(service)) options.popupServices.push(service)
-		else if (options.popupServices.includes(service)) {
-			var index = options.popupServices.indexOf(service)
-			if (index !== -1) options.popupServices.splice(index, 1)
-		}
-		browser.storage.local.set({ options })
-	})
-}
-
-let options = await utils.getOptions()
-themeElement.value = options.theme
-fetchInstancesElement.value = options.fetchInstances
-redirectOnlyInIncognitoElement.checked = options.redirectOnlyInIncognito
-bookmarksMenuElement.checked = await browser.permissions.contains({ permissions: ["bookmarks"] })
-for (const service in config.services) document.getElementById(service).checked = options.popupServices.includes(service)
-
-instanceTypeElement.addEventListener("change", event => {
-	instanceType = event.target.options[instanceTypeElement.selectedIndex].value
-	if (instanceType == "url") {
-		nameCustomInstanceInput.setAttribute("type", "url")
-		nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com")
-	} else if (instanceType == "regex") {
-		nameCustomInstanceInput.setAttribute("type", "text")
-		nameCustomInstanceInput.setAttribute("placeholder", "https?://(www.|)youtube.com/")
-	}
-})
-
-let exceptionsCustomInstances = options.exceptions
-function calcExceptionsCustomInstances() {
-	document.getElementById("exceptions-custom-checklist").innerHTML = [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]
-		.map(
-			x => `<div>
-                      ${x}
-                      <button class="add" id="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 x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
-		document.getElementById(`clear-${x}`).addEventListener("click", async () => {
-			let index
-			index = exceptionsCustomInstances.url.indexOf(x)
-			if (index > -1) exceptionsCustomInstances.url.splice(index, 1)
-			else {
-				index = exceptionsCustomInstances.regex.indexOf(x)
-				if (index > -1) exceptionsCustomInstances.regex.splice(index, 1)
-			}
-			options = await utils.getOptions()
-			options.exceptions = exceptionsCustomInstances
-			browser.storage.local.set({ options })
-			calcExceptionsCustomInstances()
-		})
-	}
-}
-calcExceptionsCustomInstances()
-document.getElementById("custom-exceptions-instance-form").addEventListener("submit", async event => {
-	event.preventDefault()
-	let val
-	if (instanceType == "url" && nameCustomInstanceInput.validity.valid) {
-		val = nameCustomInstanceInput.value
-		if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
-	} else if (instanceType == "regex") {
-		val = nameCustomInstanceInput.value
-		if (val.trim() != "" && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
-	}
-	if (val) {
-		options = await utils.getOptions()
-		options.exceptions = exceptionsCustomInstances
-		browser.storage.local.set({ options }, () =>
-			nameCustomInstanceInput.value = ""
-		)
-
-	}
-	calcExceptionsCustomInstances()
-})
diff --git a/src/pages/options/widgets/general.pug b/src/pages/options/widgets/general.pug
deleted file mode 100644
index 70316473..00000000
--- a/src/pages/options/widgets/general.pug
+++ /dev/null
@@ -1,88 +0,0 @@
-section(class="block-option" id="general_page")
-    div(class="block block-option")
-        h1(data-localise="__MSG_general__") General
-    hr
-
-    div(class="block block-option")
-        label(data-localise="__MSG_theme__") Theme
-        select(id="theme" aria-label="select theme")
-            option(value="detect" data-localise="__MSG_auto__") Auto
-            option(value="light" data-localise="__MSG_light__") Light
-            option(value="dark" data-localise="__MSG_dark__") Dark
-
-    div(class="block block-option")
-        label(data-localise="__MSG_fetchPublicInstances__") Fetch public instances
-        select(id="fetch-instances" aria-label="Select fetch public instances")
-            option(value="github") GitHub
-            option(value="codeberg") Codeberg
-            option(value="disable" data-localise="__MSG_disable__") Disable
-
-    div(class="block block-option")
-        label(for='redirectOnlyInIncognito' data-localise="__MSG_redirectOnlyInIncognito__") Redirect Only in Incognito
-        input(id='redirectOnlyInIncognito' type="checkbox")
-
-    div(class="block block-option")
-        label(for='bookmarksMenu' data-localise="__MSG_bookmarksMenu__") Bookmarks menu
-        input(id='bookmarksMenu' type="checkbox")
-
-    div(class="block block-option")
-        label(data-localise="__MSG_excludeFromRedirecting__") Excluded from redirecting
-
-    form(id="custom-exceptions-instance-form")
-        div(class="block block-option")
-            div(class="block" style="padding: 0")
-                input(id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" aria-label="Add url exception input")
-                |&nbsp;
-                select(id="exceptions-custom-instance-type")
-                    option(value="url") URL
-                    option(value="regex") Regex
-                |&nbsp;
-            button(class="add" id="exceptions-add-instance" type="submit" aria-label="Add the url exception")
-                svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
-                    path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
-
-    hr
-
-    div(class="checklist" id="exceptions-custom-checklist")
-
-    div(class="buttons")
-        label(class="button button-inline" id="import_settings_text" for="import-settings")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z")
-            |&nbsp;
-            x(data-localise="__MSG_importSettings__") Import Settings
-        input(id="import-settings" type="file" style="display: none")
-
-        |&nbsp;&nbsp;
-
-        a(class="button button-inline" id="export-settings")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z")
-            |&nbsp;
-            x(data-localise="__MSG_exportSettings__") Export Settings
-
-        |&nbsp;&nbsp;
-
-        button(class="button button-inline" id="export-settings-sync")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z")
-            |&nbsp;
-            x() Export Settings to Sync
-
-        |&nbsp;&nbsp;
-
-        button(class="button button-inline" id="import-settings-sync")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z")
-            |&nbsp;
-            x(id="import_settings_sync_text") Import Settings from Sync
-
-        |&nbsp;&nbsp;
-
-        button(class="button button-inline" id="reset-settings")
-            svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z")
-                path(d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z")
-            x(data-localise="__MSG_resetSettings__") Reset Settings
-
-    script(type="module" src="./widgets/general.js")
\ No newline at end of file
diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug
deleted file mode 100644
index e08bb001..00000000
--- a/src/pages/options/widgets/services.pug
+++ /dev/null
@@ -1,83 +0,0 @@
-each val, service in services
-    section(class="block-option" id=service+"_page")
-        div(class="block block-option")
-            h1
-                a(target="_blank" href=services[service].url)=services[service].name
-
-        hr
-
-        div(class="block block-option")
-            label(for=`${service}-enabled` data-localise="__MSG_enable__") Enable
-            input(id=`${service}-enabled` type="checkbox")
-
-        div(class="block block-option")
-            label(for=service data-localise="__MSG_showInPopup__") Show in popup
-            input(id=service type="checkbox")
-
-        div(id=service+"-opacity")
-
-            div(class="block block-option")
-                label(for=`${service}-frontend`)
-                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
-                select(id=`${service}-frontend`)
-                    each val, frontend in services[service].frontends
-                        option(value=frontend)=services[service].frontends[frontend].name
-
-            div(class="block block-option" id=service+"-instance-div")
-                label(for=`${service}-instance`) Instance Type
-                select(id=`${service}-instance`)
-                    option(value="localhost") localhost
-                    option(value="public") public instances
-
-            div(class="block block-option")
-                label(for=`${service}-redirectType` data-localise="__MSG_redirectType__") Redirect Type
-                select(id=`${service}-redirectType`)
-
-
-            div(id=`${service}-embedFrontend-div` class="block block-option")
-                label(for=`${service}-embedFrontend` data-localise="__MSG_embedFrontend__") Embed Frontend
-                select(id=`${service}-embedFrontend`)
-                    each val, frontend in services[service].frontends
-                        if services[service].frontends[frontend].embeddable && services[service].frontends[frontend].instanceList
-                            option(value=frontend)=services[service].frontends[frontend].name
-
-
-            div(class="block block-option")
-                label(for=`${service}-unsupportedUrls` data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling
-                select(id=`${service}-unsupportedUrls`)
-                    option(value="bypass") bypass
-                    option(value="block") block
-
-            if (service == 'search')
-                div(class="block block-option")
-                    label Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click <a href="https://libredirect.github.io/docs.html#search_engine_chromium">here</a>.
-
-
-            each val, frontend in services[service].frontends
-                if services[service].frontends[frontend].instanceList
-                    div(id=frontend dir="ltr")
-                        hr        
-                        div(dir="auto" class="block block-option")
-                            label(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances
-
-                        form(class="custom-instance-form")
-                            div(class="block block-option")
-                                input(class="custom-instance" type="url" placeholder="https://instance.com" aria-label="Add instance input")
-                                button(class="add add-instance" type="submit" aria-label="Add the instance")
-                                    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")  
-
-                        div(class="ping block")
-                            button(class="button button-inline" id=`ping-${frontend}`)
-                                svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
-                                    path(d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z")
-                                |&nbsp;
-                                x() Ping instances
-
-                        each val, network in networks
-                            div(class=network)
-                                div(class="checklist")
-                                    if (network == 'clearnet')
-                                        div(class="block block-option loading") Loading...
\ No newline at end of file