From 375f4371c3c5e703b07ae3e3d677315134a035ce Mon Sep 17 00:00:00 2001 From: Hygna Date: Sun, 9 Oct 2022 13:11:05 +0100 Subject: [PATCH] Toggle current instance in popup Fixed bug where testing latency of multiple frontends at the same time wouldn't save all of the timings --- src/assets/images/instance-icon.svg | 3 + src/assets/javascripts/services.js | 4 +- src/assets/javascripts/utils.js | 17 ++- src/config/config.json | 192 ++++++++++++++++++++++------ src/pages/background/background.js | 1 - src/pages/popup/popup.ejs | 6 + src/pages/popup/popup.html | 12 +- src/pages/popup/popup.js | 31 ++++- src/pages/popup/style.css | 40 ++++++ 9 files changed, 252 insertions(+), 54 deletions(-) create mode 100644 src/assets/images/instance-icon.svg diff --git a/src/assets/images/instance-icon.svg b/src/assets/images/instance-icon.svg new file mode 100644 index 0000000..6b034c6 --- /dev/null +++ b/src/assets/images/instance-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/javascripts/services.js b/src/assets/javascripts/services.js index 80a1ac4..806624d 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 9ae9123..6204169 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 ff4a869..8110748 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 d252e58..dd8f171 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 e862e0c..e6cc6fc 100644 --- a/src/pages/popup/popup.ejs +++ b/src/pages/popup/popup.ejs @@ -8,6 +8,12 @@
+ <%- include('src/pages/widgets/switches', {services: services}) -%>
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html index 2dcc12b..6dc4847 100644 --- a/src/pages/popup/popup.html +++ b/src/pages/popup/popup.html @@ -8,6 +8,14 @@
+

Youtube

 @@ -78,7 +86,7 @@

Fandom

-
+

PeerTube

 @@ -196,7 +204,7 @@

Fandom

-
+

PeerTube

 diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index a4b7309..78e5000 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 0cb2791..3b409be 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; +}