Toggle current instance in popup

Fixed bug where testing latency of multiple frontends at the same time wouldn't save all of the timings

9 files changed, 252 insertions, 54 deletions

diff --git a/src/assets/images/instance-icon.svg b/src/assets/images/instance-icon.svg
new file mode 100644
index 00000000..6b034c6f
--- /dev/null
+++ b/src/assets/images/instance-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="26px" viewBox="0 0 24 24" width="26px" fill="currentColor">
+  <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path>
+</svg>
diff --git a/src/assets/javascripts/services.js b/src/assets/javascripts/services.js
index 80a1ac45..806624d7 100644
--- a/src/assets/javascripts/services.js
+++ b/src/assets/javascripts/services.js
@@ -422,7 +422,7 @@ function computeService(url, returnFrontend) {
 						} else {

 							for (const frontend in config.services[service].frontends) {

 								if (all(service, frontend, options, config, redirects).includes(utils.protocolHost(url))) {

-									if (returnFrontend) resolve([service, frontend, url.hostname])

+									if (returnFrontend) resolve([service, frontend, utils.protocolHost(url)])

 									else resolve(service)

 									return

 								}

@@ -520,7 +520,7 @@ function unifyPreferences(url, tabId) {
 					const frontendObject = config.services[service].frontends[frontend]

 					if ("cookies" in frontendObject.preferences) {

 						for (const cookie of frontendObject.preferences.cookies) {

-							utils.copyCookie(frontendObject, url, instancesList, cookie)

+							await utils.copyCookie(frontendObject, url, instancesList, cookie)

 						}

 					}

 					if ("localstorage" in frontendObject.preferences) {

diff --git a/src/assets/javascripts/utils.js b/src/assets/javascripts/utils.js
index 9ae9123f..62041690 100644
--- a/src/assets/javascripts/utils.js
+++ b/src/assets/javascripts/utils.js
@@ -424,17 +424,20 @@ function latency(service, frontend, document, location) {
 	latencyElement.addEventListener("click", async () => {
 		let reloadWindow = () => location.reload()
 		latencyElement.addEventListener("click", reloadWindow)
-		browser.storage.local.get(["redirects", "latency"], r => {
+		browser.storage.local.get("redirects", r => {
 			let redirects = r.redirects
-			let latency = r.latency
 			const oldHtml = latencyLabel.innerHTML
 			latencyLabel.innerHTML = "..."
 			testLatency(latencyLabel, redirects[frontend].clearnet, frontend).then(r => {
-				latency[frontend] = r
-				browser.storage.local.set({ latency })
-				latencyLabel.innerHTML = oldHtml
-				processDefaultCustomInstances(service, frontend, "clearnet", document)
-				latencyElement.removeEventListener("click", reloadWindow)
+				const frontendLatency = r
+				browser.storage.local.get("latency", r => {
+					let latency = r.latency
+					latency[frontend] = frontendLatency
+					browser.storage.local.set({ latency })
+					latencyLabel.innerHTML = oldHtml
+					processDefaultCustomInstances(service, frontend, "clearnet", document)
+					latencyElement.removeEventListener("click", reloadWindow)
+				})
 			})
 		})
 	})
diff --git a/src/config/config.json b/src/config/config.json
index ff4a869f..8110748f 100644
--- a/src/config/config.json
+++ b/src/config/config.json
@@ -22,8 +22,12 @@
 			"frontends": {

 				"invidious": {

 					"preferences": {

-						"cookies": ["PREFS"],

-						"localstorage": ["dark_mode"]

+						"cookies": [

+							"PREFS"

+						],

+						"localstorage": [

+							"dark_mode"

+						]

 					},

 					"name": "Invidious",

 					"embeddable": true,

@@ -59,7 +63,9 @@
 				},

 				"pipedMaterial": {

 					"preferences": {

-						"localstorage": ["PREFERENCES"]

+						"localstorage": [

+							"PREFERENCES"

+						]

 					},

 					"name": "Piped-Material",

 					"embeddable": false,

@@ -109,7 +115,9 @@
 			"frontends": {

 				"beatbump": {

 					"preferences": {

-						"localstorage": ["settings"],

+						"localstorage": [

+							"settings"

+						],

 						"indexeddb": "beatbump"

 					},

 					"name": "Beatbump",

@@ -117,14 +125,26 @@
 				},

 				"hyperpipe": {

 					"preferences": {

-						"localstorage": ["api", "authapi", "codec", "locale", "next", "pipedapi", "quality", "theme", "vol"],

+						"localstorage": [

+							"api",

+							"authapi",

+							"codec",

+							"locale",

+							"next",

+							"pipedapi",

+							"quality",

+							"theme",

+							"vol"

+						],

 						"indexeddb": "hyperpipedb"

 					},

 					"name": "HyperPipe",

 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}music\\.youtube\\.com(\\/.*|$)"],

+			"targets": [

+				"^https?:\\/{2}music\\.youtube\\.com(\\/.*|$)"

+			],

 			"name": "YT Music",

 			"options": {

 				"enabled": true,

@@ -139,24 +159,23 @@
 				"nitter": {

 					"preferences": {

 						"cookies": [

-							"theme",

-							"infiniteScroll",

-							"stickyProfile",

+							"autoplayGifs",

 							"bidiSupport",

-							"hideTweetStats",

 							"hideBanner",

 							"hidePins",

 							"hideReplies",

-							"squareAvatars",

-							"mp4Playback",

+							"hideTweetStats",

 							"hlsPlayback",

-							"proxyVideos",

+							"infiniteScroll",

+							"mp4Playback",

 							"muteVideos",

-							"autoplayGifs",

+							"proxyVideos",

 							"replaceInstagram",

 							"replaceReddit",

 							"replaceTwitter",

-							"replaceYouTube"

+							"replaceYouTube",

+							"squareAvatars",

+							"theme"

 						]

 					},

 					"name": "Nitter",

@@ -164,7 +183,12 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(www\\.|mobile\\.|)twitter\\.com", "^https?:\\/{2}(pbs\\.|video\\.|)twimg\\.com", "^https?:\\/{2}platform\\.twitter\\.com/embed", "^https?:\\/{2}t\\.co"],

+			"targets": [

+				"^https?:\\/{2}(www\\.|mobile\\.|)twitter\\.com",

+				"^https?:\\/{2}(pbs\\.|video\\.|)twimg\\.com",

+				"^https?:\\/{2}platform\\.twitter\\.com/embed",

+				"^https?:\\/{2}t\\.co"

+			],

 			"name": "Twitter",

 			"options": {

 				"enabled": true,

@@ -186,7 +210,9 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(www\\.)?instagram\\.com\\/p\\/"],

+			"targets": [

+				"^https?:\\/{2}(www\\.)?instagram\\.com\\/p\\/"

+			],

 			"name": "Instagram",

 			"options": {

 				"enabled": true

@@ -199,13 +225,18 @@
 			"frontends": {

 				"proxiTok": {

 					"preferences": {

-						"cookies": ["api-test_endpoints", "theme"]

+						"cookies": [

+							"api-test_endpoints",

+							"theme"

+						]

 					},

 					"name": "ProxiTok",

 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(www\\.|)tiktok\\.com.*"],

+			"targets": [

+				"^https?:\\/{2}(www\\.|)tiktok\\.com.*"

+			],

 			"name": "TikTok",

 			"options": {

 				"enabled": true

@@ -218,7 +249,20 @@
 			"frontends": {

 				"libreddit": {

 					"preferences": {

-						"cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"]

+						"cookies": [

+							"theme",

+							"front_page",

+							"layout",

+							"wide",

+							"post_sort",

+							"comment_sort",

+							"show_nsfw",

+							"autoplay_videos",

+							"use_hls",

+							"hide_hls_notification",

+							"subscriptions",

+							"filters"

+						]

 					},

 					"name": "Libreddit",

 					"instanceList": true

@@ -248,7 +292,10 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com", "^https?:\\/{2}(i\\.|preview\\.)redd\\.it"],

+			"targets": [

+				"^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com",

+				"^https?:\\/{2}(i\\.|preview\\.)redd\\.it"

+			],

 			"name": "Reddit",

 			"options": {

 				"enabled": true,

@@ -266,7 +313,9 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"],

+			"targets": [

+				"^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"

+			],

 			"name": "Imgur",

 			"options": {

 				"enabled": true,

@@ -280,13 +329,18 @@
 			"frontends": {

 				"wikiless": {

 					"preferences": {

-						"cookies": ["theme", "default_lang"]

+						"cookies": [

+							"theme",

+							"default_lang"

+						]

 					},

 					"name": "Wikiless",

 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org"],

+			"targets": [

+				"^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org"

+			],

 			"name": "Wikipedia",

 			"options": {

 				"enabled": false

@@ -334,13 +388,17 @@
 			"frontends": {

 				"quetre": {

 					"preferences": {

-						"localstorage": ["theme"]

+						"localstorage": [

+							"theme"

+						]

 					},

 					"name": "Quetre",

 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}([a-z]+\\.)*quora\\.com.*"],

+			"targets": [

+				"^https?:\\/{2}([a-z]+\\.)*quora\\.com.*"

+			],

 			"name": "Quora",

 			"options": {

 				"enabled": true

@@ -353,13 +411,17 @@
 			"frontends": {

 				"libremdb": {

 					"preferences": {

-						"localstorage": ["theme"]

+						"localstorage": [

+							"theme"

+						]

 					},

 					"name": "libremdb",

 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(?:www\\.|)imdb\\.com\\/title"],

+			"targets": [

+				"^https?:\\/{2}(?:www\\.|)imdb\\.com\\/title"

+			],

 			"name": "IMDb",

 			"options": {

 				"enabled": true

@@ -375,7 +437,9 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(www\\.|)reuters\\.com.*"],

+			"targets": [

+				"^https?:\\/{2}(www\\.|)reuters\\.com.*"

+			],

 			"name": "Reuters",

 			"options": {

 				"enabled": false

@@ -391,7 +455,9 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}(?:[a-zA-Z0-9]+\\.)?fandom\\.com(?=(?:\\/wiki)|(?:\\/?$))"],

+			"targets": [

+				"^https?:\\/{2}(?:[a-zA-Z0-9]+\\.)?fandom\\.com(?=(?:\\/wiki)|(?:\\/?$))"

+			],

 			"name": "Fandom",

 			"options": {

 				"enabled": true

@@ -420,8 +486,18 @@
 			"frontends": {

 				"librarian": {

 					"preferences": {

-						"cookies": ["nsfw", "theme"],

-						"localstorage": ["autoplay", "autoplayNextVid", "collapseComments", "plyr", "sb_categories", "showRelated"]

+						"cookies": [

+							"nsfw",

+							"theme"

+						],

+						"localstorage": [

+							"autoplay",

+							"autoplayNextVid",

+							"collapseComments",

+							"plyr",

+							"sb_categories",

+							"showRelated"

+						]

 					},

 					"name": "Librarian",

 					"embeddable": true,

@@ -433,7 +509,10 @@
 					"instanceList": false

 				}

 			},

-			"targets": ["^https?:\\/{2}odysee\\.com", "^https?:\\/{2}lbry\\.tv"],

+			"targets": [

+				"^https?:\\/{2}odysee\\.com",

+				"^https?:\\/{2}lbry\\.tv"

+			],

 			"name": "LBRY",

 			"options": {

 				"enabled": true,

@@ -506,13 +585,26 @@
 				},

 				"librex": {

 					"preferences": {

-						"cookies": ["bibliogram", "disable_frontends", " disable_special", "invidious", "libreddit", "nitter", "proxitok", "save", "theme", "wikiless"]

+						"cookies": [

+							"bibliogram",

+							"disable_frontends",

+							" disable_special",

+							"invidious",

+							"libreddit",

+							"nitter",

+							"proxitok",

+							"save",

+							"theme",

+							"wikiless"

+						]

 					},

 					"name": "LibreX",

 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}search\\.libredirect\\.invalid"],

+			"targets": [

+				"^https?:\\/{2}search\\.libredirect\\.invalid"

+			],

 			"name": "Search",

 			"options": {

 				"enabled": true,

@@ -526,14 +618,24 @@
 			"frontends": {

 				"simplyTranslate": {

 					"preferences": {

-						"cookies": ["from_lang", "to_lang", "tts_enabled", "use_text_fields"]

+						"cookies": [

+							"from_lang",

+							"to_lang",

+							"tts_enabled",

+							"use_text_fields"

+						]

 					},

 					"name": "SimplyTranslate",

 					"instanceList": true

 				},

 				"lingva": {

 					"preferences": {

-						"localstorage": ["isauto", "source", "target", "chakra-ui-color-mode"]

+						"localstorage": [

+							"isauto",

+							"source",

+							"target",

+							"chakra-ui-color-mode"

+						]

 					},

 					"name": "Lingva Translate",

 					"instanceList": true

@@ -543,7 +645,10 @@
 					"instanceList": true

 				}

 			},

-			"targets": ["^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", "^https?:\\/{2}translate\\.libredirect\\.invalid"],

+			"targets": [

+				"^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/",

+				"^https?:\\/{2}translate\\.libredirect\\.invalid"

+			],

 			"name": "Translate",

 			"options": {

 				"enabled": true,

@@ -565,7 +670,10 @@
 					"singleInstance": "https://www.openstreetmap.org"

 				}

 			},

-			"targets": ["^https?:\\/{2}maps\\.libredirect\\.invalid", "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"],

+			"targets": [

+				"^https?:\\/{2}maps\\.libredirect\\.invalid",

+				"^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"

+			],

 			"name": "Maps",

 			"options": {

 				"enabled": true,

@@ -582,7 +690,11 @@
 					"instanceList": "true"

 				}

 			},

-			"targets": ["^https?:\\/{2}send\\.libredirect\\.invalid", "^https?:\\/{2}send\\.firefox\\.com\\/?$", "^https?:\\/{2}sendfiles\\.online\\/?$"],

+			"targets": [

+				"^https?:\\/{2}send\\.libredirect\\.invalid",

+				"^https?:\\/{2}send\\.firefox\\.com\\/?$",

+				"^https?:\\/{2}sendfiles\\.online\\/?$"

+			],

 			"name": "Send Files",

 			"options": {

 				"enabled": true

diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index d252e580..dd8f1715 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -232,7 +232,6 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
 					}
 				}
 			case "redirectLink":
-				console.log(info.linkUrl)
 				const tmpUrl = new URL(info.linkUrl)
 				const newUrl = servicesHelper.redirect(tmpUrl, "main_frame", null, true)
 				if (newUrl) browser.tabs.create({ url: newUrl })
diff --git a/src/pages/popup/popup.ejs b/src/pages/popup/popup.ejs
index e862e0cb..e6cc6fca 100644
--- a/src/pages/popup/popup.ejs
+++ b/src/pages/popup/popup.ejs
@@ -8,6 +8,12 @@
   </head>
   <body dir="auto">
     <div class="current_site">
+      <div class="some-block" id="instance-div"><a class="title prevent">
+          <%- include('src/assets/images/instance-icon.svg', {services: services}) -%>
+          <h4 id="instance"></h4>
+        </a>
+        <span id="end"><input type="checkbox" id="instance-enabled"/></span>
+      </div>
       <%- include('src/pages/widgets/switches', {services: services}) -%>
       <div id="current_site_divider">
         <hr>
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html
index 2dcc12bc..6dc48478 100644
--- a/src/pages/popup/popup.html
+++ b/src/pages/popup/popup.html
@@ -8,6 +8,14 @@
   </head>
   <body dir="auto">
     <div class="current_site">
+      <div class="some-block" id="instance-div"><a class="title prevent">
+          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="26px" viewBox="0 0 24 24" width="26px" fill="currentColor">
+  <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path>
+</svg>
+          <h4 id="instance"></h4>
+        </a>
+        <span id="end"><input type="checkbox" id="instance-enabled"/></span>
+      </div>
       <div class="youtube some-block"><a class="title" href="https://youtube.com">
     <img src="../../assets/images/youtube-icon.png"/>
     <h4 data-localise="__MSG_youtube__">Youtube</h4></a>
@@ -78,7 +86,7 @@
     <h4 data-localise="__MSG_fandom__">Fandom</h4></a>
   <input class="fandom-enabled" type="checkbox"/>
 </div>
-<div class="peertube some-block"><a class="title" href="https://search.joinpeertube.org">
+<div class="peertube some-block"><a class="title" href="https://joinpeertube.org">
     <img src="../../assets/images/peertube-icon.svg"/>
     <h4 data-localise="__MSG_peertube__">PeerTube</h4></a>
   <input class="peertube-enabled" type="checkbox"/>
@@ -196,7 +204,7 @@
     <h4 data-localise="__MSG_fandom__">Fandom</h4></a>
   <input class="fandom-enabled" type="checkbox"/>
 </div>
-<div class="peertube some-block"><a class="title" href="https://search.joinpeertube.org">
+<div class="peertube some-block"><a class="title" href="https://joinpeertube.org">
     <img src="../../assets/images/peertube-icon.svg"/>
     <h4 data-localise="__MSG_peertube__">PeerTube</h4></a>
   <input class="peertube-enabled" type="checkbox"/>
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index a4b73093..78e50004 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -2,7 +2,6 @@
 window.browser = window.browser || window.chrome
 
 import utils from "../../assets/javascripts/utils.js"
-// import generalHelper from "../../assets/javascripts/general.js"
 import serviceHelper from "../../assets/javascripts/services.js"
 
 let config,
@@ -40,6 +39,7 @@ const currSite = document.getElementsByClassName("current_site")[0]
 
 function setDivs() {
 	return new Promise(resolve => {
+		divs.instance = document.getElementById("instance")
 		for (const service in config.services) {
 			divs[service] = {}
 			divs[service].toggle = {}
@@ -56,8 +56,9 @@ await setDivs()
 
 const currentSiteIsFrontend = document.getElementById("current_site_divider")
 
-browser.storage.local.get("options", r => {
+browser.storage.local.get(["options", "redirects"], r => {
 	browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+		document.getElementById("instance-div").classList.add("hide")
 		for (const service in config.services) {
 			if (!r.options.popupServices.includes(service)) allSites.getElementsByClassName(service)[0].classList.add("hide")
 			else allSites.getElementsByClassName(service)[0].classList.remove("hide")
@@ -80,10 +81,36 @@ browser.storage.local.get("options", r => {
 
 		let service = await serviceHelper.computeService(url, true)
 		let frontend
+		let instance
 		if (service) {
 			if (typeof service != "string") {
+				instance = service[2]
 				frontend = service[1]
 				service = service[0]
+				divs.instance.innerHTML = instance.replace(/https?:\/{2}/, "")
+				let tmp
+				let instanceNetwork
+				for (const network in config.networks) {
+					tmp = r.redirects[frontend][network].indexOf(instance)
+					if (tmp > -1) {
+						const instanceDiv = document.getElementById("instance-enabled")
+						tmp = r.options[frontend][network].enabled.indexOf(instance)
+						if (tmp > -1) instanceDiv.checked = true
+						else instanceDiv.checked = false
+						instanceNetwork = network
+						instanceDiv.addEventListener("change", () => {
+							browser.storage.local.get("options", r => {
+								// Although options would be avaliable in this context, it is fetched again to make sure it is up to date
+								let options = r.options
+								if (instanceDiv.checked) options[frontend][instanceNetwork].enabled.push(instance)
+								else options[frontend][instanceNetwork].enabled.splice(options[frontend][instanceNetwork].enabled.indexOf(instance), 1)
+								browser.storage.local.set({ options })
+							})
+						})
+						break
+					}
+				}
+				document.getElementById("instance-div").classList.remove("hide")
 			}
 			divs[service].current.classList.remove("hide")
 			divs[service].all.classList.add("hide")
diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css
index 0cb27912..3b409be8 100644
--- a/src/pages/popup/style.css
+++ b/src/pages/popup/style.css
@@ -22,3 +22,43 @@ body {
 .space {
 	height: 10px;
 }
+
+input {
+	height: 23px;
+	width: 46px;
+}
+
+#instance {
+	max-width: 110px;
+	max-height: 22px;
+	overflow-x: scroll;
+	white-space: nowrap;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+}
+
+#instance::-webkit-scrollbar {
+	display: none;
+}
+
+#instance::before {
+	background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+	position: absolute;
+	width: 5px;
+	height: 22px;
+	content: "";
+	display: block;
+	pointer-events: none;
+}
+
+#end::before {
+	background-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+	position: absolute;
+	width: 5px;
+	height: 22px;
+	content: "";
+	display: block;
+	pointer-events: none;
+	top: 13px;
+	left: 157.4px;
+}