diff options
Diffstat (limited to 'src/pages')
24 files changed, 978 insertions, 625 deletions
diff --git a/src/pages/background/background.js b/src/pages/background/background.js index 741e9116..d19eed94 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -36,7 +36,7 @@ const redditBypassPaths = redditHelper.bypassPaths; const redditDefault = redditHelper.redirects[0]; const googleSearchRegex = searchHelper.targets; -const searchEngineInstances = searchHelper.redirects; +const searchInstances = searchHelper.redirects; const simplyTranslateInstances = googleTranslateHelper.redirects; const simplyTranslateDefault = simplyTranslateInstances[0]; const googleTranslateDomains = googleTranslateHelper.targets; @@ -50,7 +50,7 @@ let disableBibliogram; let disableOsm; let disableReddit; let disableScribe; -let disableSearchEngine; +let disableSearch; let disableSimplyTranslate; let disableWikipedia; let nitterInstance; @@ -59,12 +59,12 @@ let bibliogramInstance; let osmInstance; let scribeInstance; let redditInstance; -let searchEngineInstance; +let searchInstance; let simplyTranslateInstance; let wikipediaInstance; -let alwaysProxy; -let onlyEmbeddedVideo; -let videoQuality; +let invidiousAlwaysProxy; +let invidiousOnlyEmbeddedVideo; +let invidiousVideoQuality; let invidiousDarkMode; let invidiousVolume; let invidiousPlayerStyle; @@ -80,6 +80,7 @@ let scribeRandomPool; let exceptions; let redditFrontend; +let searchFrontend; window.browser = window.browser || window.chrome; @@ -91,7 +92,7 @@ browser.storage.sync.get( "osmInstance", "redditInstance", "scribeInstance", - "searchEngineInstance", + "searchInstance", "simplyTranslateInstance", "wikipediaInstance", "disableNitter", @@ -100,12 +101,12 @@ browser.storage.sync.get( "disableOsm", "disableReddit", "disableScribe", - "disableSearchEngine", + "disableSearch", "disableSimplyTranslate", "disableWikipedia", - "alwaysProxy", - "onlyEmbeddedVideo", - "videoQuality", + "invidiousAlwaysProxy", + "invidiousOnlyEmbeddedVideo", + "invidiousVideoQuality", "invidiousDarkMode", "invidiousVolume", "invidiousPlayerStyle", @@ -119,13 +120,15 @@ browser.storage.sync.get( "wikilessRandomPool", "exceptions", "redditFrontend", + "searchFrontend", ], (result) => { osmInstance = result.osmInstance || osmDefault; disableOsm = result.disableOsm; - searchEngineInstance = result.searchEngineInstance; - disableSearchEngine = result.disableSearchEngine; + searchInstance = result.searchInstance; + disableSearch = result.disableSearch; + searchFrontend = result.searchFrontend; simplyTranslateInstance = result.simplyTranslateInstance || simplyTranslateDefault; disableSimplyTranslate = result.disableSimplyTranslate; @@ -144,12 +147,12 @@ browser.storage.sync.get( : []; - onlyEmbeddedVideo = result.onlyEmbeddedVideo; + invidiousOnlyEmbeddedVideo = result.invidiousOnlyEmbeddedVideo; invidiousDarkMode = result.invidiousDarkMode; disableInvidious = result.disableInvidious; - alwaysProxy = result.alwaysProxy; + invidiousAlwaysProxy = result.invidiousAlwaysProxy; invidiousInstance = result.invidiousInstance; - videoQuality = result.videoQuality; + invidiousVideoQuality = result.invidiousVideoQuality; invidiousVolume = result.invidiousVolume; invidiousPlayerStyle = result.invidiousPlayerStyle; invidiousSubtitles = result.invidiousSubtitles || ""; @@ -186,107 +189,49 @@ browser.storage.sync.get( ); browser.storage.onChanged.addListener((changes) => { - if ("nitterInstance" in changes) - nitterInstance = changes.nitterInstance.newValue; - - if ("invidiousInstance" in changes) - invidiousInstance = changes.invidiousInstance.newValue; - - if ("bibliogramInstance" in changes) - bibliogramInstance = changes.bibliogramInstance.newValue; - - if ("osmInstance" in changes) - osmInstance = changes.osmInstance.newValue || osmDefault; - - if ("simplyTranslateInstance" in changes) - simplyTranslateInstance = changes.simplyTranslateInstance.newValue || simplyTranslateDefault; - - if ("wikipediaInstance" in changes) - wikipediaInstance = changes.wikipediaInstance.newValue || wikipediaDefault; - - if ("redditInstance" in changes) - redditInstance = changes.redditInstance.newValue || redditDefault; - - if ("redditFrontend" in changes) - redditFrontend = changes.redditFrontend.newValue - - if ("scribeInstance" in changes) - scribeInstance = changes.scribeInstance.newValue || scribeDefault; - - if ("searchEngineInstance" in changes) - searchEngineInstance = changes.searchEngineInstance.newValue; - - if ("disableNitter" in changes) - disableNitter = changes.disableNitter.newValue; - - if ("disableScribe" in changes) - disableScribe = changes.disableScribe.newValue; - - if ("disableInvidious" in changes) - disableInvidious = changes.disableInvidious.newValue; - - if ("disableBibliogram" in changes) - disableBibliogram = changes.disableBibliogram.newValue; - - if ("disableOsm" in changes) - disableOsm = changes.disableOsm.newValue; - - if ("disableReddit" in changes) - disableReddit = changes.disableReddit.newValue; - - if ("disableSearchEngine" in changes) - disableSearchEngine = changes.disableSearchEngine.newValue; - - if ("disableSimplyTranslate" in changes) - disableSimplyTranslate = changes.disableSimplyTranslate.newValue; - - if ("disableWikipedia" in changes) - disableWikipedia = changes.disableWikipedia.newValue; - - if ("alwaysProxy" in changes) - alwaysProxy = changes.alwaysProxy.newValue; - - if ("onlyEmbeddedVideo" in changes) - onlyEmbeddedVideo = changes.onlyEmbeddedVideo.newValue; - - if ("videoQuality" in changes) - videoQuality = changes.videoQuality.newValue; - - if ("invidiousDarkMode" in changes) - invidiousDarkMode = changes.invidiousDarkMode.newValue; - - if ("invidiousVolume" in changes) - invidiousVolume = changes.invidiousVolume.newValue; - - if ("invidiousPlayerStyle" in changes) - invidiousPlayerStyle = changes.invidiousPlayerStyle.newValue; - - if ("invidiousSubtitles" in changes) - invidiousSubtitles = changes.invidiousSubtitles.newValue; - - if ("invidiousAutoplay" in changes) - invidiousAutoplay = changes.invidiousAutoplay.newValue; - - if ("useFreeTube" in changes) - useFreeTube = changes.useFreeTube.newValue; - - if ("nitterRandomPool" in changes) - nitterRandomPool = changes.nitterRandomPool.newValue; - - if ("invidiousRandomPool" in changes) - invidiousRandomPool = changes.invidiousRandomPool.newValue; - - if ("bibliogramRandomPool" in changes) - bibliogramRandomPool = changes.bibliogramRandomPool.newValue; - - if ("scribeRandomPool" in changes) - scribeRandomPool = changes.scribeRandomPool.newValue; - - if ("exceptions" in changes) - exceptions = changes.exceptions.newValue.map((e) => { - return new RegExp(e); - }); - + if ("invidiousInstance" in changes) invidiousInstance = changes.invidiousInstance.newValue; + if ("disableInvidious" in changes) disableInvidious = changes.disableInvidious.newValue; + if ("invidiousAlwaysProxy" in changes) invidiousAlwaysProxy = changes.invidiousAlwaysProxy.newValue; + if ("invidiousOnlyEmbeddedVideo" in changes) invidiousOnlyEmbeddedVideo = changes.invidiousOnlyEmbeddedVideo.newValue; + if ("invidiousVideoQuality" in changes) invidiousVideoQuality = changes.invidiousVideoQuality.newValue; + if ("invidiousDarkMode" in changes) invidiousDarkMode = changes.invidiousDarkMode.newValue; + if ("invidiousVolume" in changes) invidiousVolume = changes.invidiousVolume.newValue; + if ("invidiousPlayerStyle" in changes) invidiousPlayerStyle = changes.invidiousPlayerStyle.newValue; + if ("invidiousSubtitles" in changes) invidiousSubtitles = changes.invidiousSubtitles.newValue; + if ("invidiousAutoplay" in changes) invidiousAutoplay = changes.invidiousAutoplay.newValue; + if ("useFreeTube" in changes) useFreeTube = changes.useFreeTube.newValue; + if ("invidiousRandomPool" in changes) invidiousRandomPool = changes.invidiousRandomPool.newValue; + + if ("nitterInstance" in changes) nitterInstance = changes.nitterInstance.newValue; + if ("disableNitter" in changes) disableNitter = changes.disableNitter.newValue; + if ("nitterRandomPool" in changes) nitterRandomPool = changes.nitterRandomPool.newValue; + + if ("bibliogramInstance" in changes) bibliogramInstance = changes.bibliogramInstance.newValue; + if ("disableBibliogram" in changes) disableBibliogram = changes.disableBibliogram.newValue; + if ("bibliogramRandomPool" in changes) bibliogramRandomPool = changes.bibliogramRandomPool.newValue; + + if ("redditInstance" in changes) redditInstance = changes.redditInstance.newValue || redditDefault; + if ("disableReddit" in changes) disableReddit = changes.disableReddit.newValue; + if ("redditFrontend" in changes) redditFrontend = changes.redditFrontend.newValue + + if ("searchInstance" in changes) searchInstance = changes.searchInstance.newValue; + if ("disableSearch" in changes) disableSearch = changes.disableSearch.newValue; + if ("searchFrontend" in changes) searchFrontend = changes.searchFrontend.newValue + + if ("simplyTranslateInstance" in changes) simplyTranslateInstance = changes.simplyTranslateInstance.newValue || simplyTranslateDefault; + if ("disableSimplyTranslate" in changes) disableSimplyTranslate = changes.disableSimplyTranslate.newValue; + + if ("osmInstance" in changes) osmInstance = changes.osmInstance.newValue || osmDefault; + if ("disableOsm" in changes) disableOsm = changes.disableOsm.newValue; + + if ("wikipediaInstance" in changes) wikipediaInstance = changes.wikipediaInstance.newValue || wikipediaDefault; + if ("disableWikipedia" in changes) disableWikipedia = changes.disableWikipedia.newValue; + + if ("scribeInstance" in changes) scribeInstance = changes.scribeInstance.newValue || scribeDefault; + if ("disableScribe" in changes) disableScribe = changes.disableScribe.newValue; + if ("scribeRandomPool" in changes) scribeRandomPool = changes.scribeRandomPool.newValue; + + if ("exceptions" in changes) exceptions = changes.exceptions.newValue.map((e) => new RegExp(e)); }); function isException(url, initiator) { @@ -320,18 +265,18 @@ function redirectYouTube(url, initiator, type) { // Avoid redirecting `studio.youtube.com` return null; } - if (onlyEmbeddedVideo && type !== "sub_frame") { + if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") { return null; } if (useFreeTube && type === "main_frame") { return `freetube://${url}`; } // Apply settings - if (alwaysProxy) { + if (invidiousAlwaysProxy) { url.searchParams.append("local", true); } - if (videoQuality) { - url.searchParams.append("quality", videoQuality); + if (invidiousVideoQuality) { + url.searchParams.append("quality", invidiousVideoQuality); } if (invidiousDarkMode) { url.searchParams.append("dark_mode", invidiousDarkMode); @@ -508,8 +453,6 @@ function redirectGoogleMaps(url, initiator) { } function redirectReddit(url, initiator, type) { - console.info("reddit is redirecting"); - console.log(redditFrontend) if (disableReddit || isException(url, initiator)) return null; @@ -570,19 +513,33 @@ function redirectMedium(url, initiator) { return `${scribeInstance || commonHelper.getRandomInstance(scribeRandomPool)}${url.pathname}${url.search}`; } -function redirectSearchEngine(url, initiator) { - if (disableSearchEngine || isException(url, initiator)) +function redirectSearch(url, initiator) { + if (disableSearch || isException(url, initiator)) { + console.log("disableSearch:", disableSearch) return null; + } + + let search; + let searchQ; + console.log("searchFrontend", searchFrontend); + if (searchFrontend == 'searx') { + search = searchInstance || commonHelper.getRandomInstance(searchInstances["searx"]); + searchQ = "/" + } + if (searchFrontend == 'whoogle') { + search = searchInstance || commonHelper.getRandomInstance(searchInstances["whoogle"]); + searchQ = "/search" + } - const searchEngine = searchEngineInstance || commonHelper.getRandomInstance(searchEngineInstances); - let search = ""; + let searchQuery = ""; url.search .slice(1) .split("&") .forEach(function (input) { - if (input.startsWith("q=")) search = input; + if (input.startsWith("q=")) searchQuery = input; }); - return `${searchEngine.link}${searchEngine.q}?${search}`; + console.info("It will direct to:", `${search}${searchQ}?${searchQuery}`) + return `${search}${searchQ}?${searchQuery}`; } function redirectGoogleTranslate(url, initiator) { @@ -634,24 +591,23 @@ browser.webRequest.onBeforeRequest.addListener( initiator = new URL(details.initiator); let newUrl; - if (youtubeDomains.includes(url.host)) - newUrl = redirectYouTube(url, initiator, details.type) - else if (twitterDomains.includes(url.host)) - newUrl = redirectTwitter(url, initiator); - else if (instagramDomains.includes(url.host)) - newUrl = redirectInstagram(url, initiator, details.type); - else if (url.href.match(googleMapsRegex)) - newUrl = redirectGoogleMaps(url, initiator); - else if (redditDomains.includes(url.host)) - newUrl = redirectReddit(url, initiator, details.type); - else if (mediumDomains.some((rx) => rx.test(url.host))) - newUrl = redirectMedium(url, initiator); - else if (url.href.match(googleSearchRegex)) - newUrl = redirectSearchEngine(url, initiator); - else if (googleTranslateDomains.includes(url.host)) - newUrl = redirectGoogleTranslate(url, initiator); - else if (url.host.match(wikipediaRegex)) - newUrl = redirectWikipedia(url, initiator); + if (youtubeDomains.includes(url.host)) newUrl = redirectYouTube(url, initiator, details.type) + + else if (twitterDomains.includes(url.host)) newUrl = redirectTwitter(url, initiator); + + else if (instagramDomains.includes(url.host)) newUrl = redirectInstagram(url, initiator, details.type); + + else if (url.href.match(googleMapsRegex)) newUrl = redirectGoogleMaps(url, initiator); + + else if (redditDomains.includes(url.host)) newUrl = redirectReddit(url, initiator, details.type); + + else if (mediumDomains.some((rx) => rx.test(url.host))) newUrl = redirectMedium(url, initiator); + + else if (googleSearchRegex.some((rx) => rx.test(url.href))) newUrl = redirectSearch(url, initiator); + + else if (googleTranslateDomains.includes(url.host)) newUrl = redirectGoogleTranslate(url, initiator); + + else if (url.host.match(wikipediaRegex)) newUrl = redirectWikipedia(url, initiator); if (newUrl) { console.info("Redirecting", url.href, "=>", newUrl); @@ -675,11 +631,12 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => { mightyList.push(...invidiousInstances); mightyList.push(...nitterInstances); mightyList.push(...bibliogramInstances); - mightyList.push(...redditInstances['libreddit']); - mightyList.push(...redditInstances['teddit']); - mightyList.push(redditInstances['desktop']); - mightyList.push(redditInstances['mobile']); - mightyList.push(...searchEngineInstances); + mightyList.push(...redditInstances.libreddit); + mightyList.push(...redditInstances.teddit); + mightyList.push(redditInstances.desktop); + mightyList.push(redditInstances.mobile); + mightyList.push(...searchInstances.searx); + mightyList.push(...searchInstances.whoogle); mightyList.push(...simplyTranslateInstances); mightyList.push(...scribeInstances); mightyList.push(...wikipediaInstances); @@ -706,7 +663,7 @@ browser.pageAction.onClicked.addListener((tab) => { else newUrl = 'https://reddit.com'; } - else if (searchEngineInstances.includes(protocolHost)) + else if (searchInstances.searx.includes(protocolHost) || searchInstances.whoogle.includes(protocolHost)) newUrl = 'https://google.com'; else if (simplyTranslateInstances.includes(protocolHost)) newUrl = 'https://translate.google.com'; @@ -724,36 +681,29 @@ browser.pageAction.onClicked.addListener((tab) => { browser.runtime.onInstalled.addListener((details) => { browser.storage.sync.get( [ - "disableSearchEngine", + "disableSearch", "disableSimplyTranslate", "disableWikipedia", - "redditFrontend" + "redditFrontend", + "searchFrontend", ], (result) => { - if (result.disableSearchEngine === undefined) - browser.storage.sync.set({ - disableSearchEngine: true, - }); - - if (result.disableSimplyTranslate === undefined) - browser.storage.sync.set({ - disableSimplyTranslate: true, - }); - - if (result.disableWikipedia === undefined) - browser.storage.sync.set({ - disableWikipedia: true, - }); - - if (result.redditFrontend === undefined) - browser.storage.sync.set({ - redditFrontend: 'libreddit' - }) + + if (result.disableSearch === undefined) browser.storage.sync.set({ disableSearch: true }); + + if (result.disableSimplyTranslate === undefined) browser.storage.sync.set({ disableSimplyTranslate: true }); + + if (result.disableWikipedia === undefined) browser.storage.sync.set({ disableWikipedia: true }); + + if (result.redditFrontend === undefined) browser.storage.sync.set({ redditFrontend: 'libreddit' }) + + if (result.searchFrontend === undefined) browser.storage.sync.set({ searchFrontend: 'searx' }) + } ); if (details.reason === "update") { browser.storage.sync.get( - ["whitelist", "exceptions", "invidiousInstance", "disableSearchEngine"], + ["whitelist", "exceptions", "invidiousInstance", "disableSearch"], (result) => { if (result.whitelist) { let whitelist = result.whitelist.map((e) => diff --git a/src/pages/options/general.html b/src/pages/options/general.html new file mode 100644 index 00000000..db0dedd2 --- /dev/null +++ b/src/pages/options/general.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options</title> +</head> + +<body class="option"> + + <section class="links"> + <a href="general.html" class="selected">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html" >Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + + <section class="option-block"> + <div class="some-block option-block"> + <h4>Theme</h4> + <select id="theme"> + <option value="">System</option> + <option value="light-theme">Light</option> + <option value="dark-theme">Dark</option> + </select> + </div> + <div class="buttons buttons-inline"> + <a class="button button-inline" id="update-instances"> + <span>Update Instances</span> + </a> + </div> + <hr> + <section class="settings-block"> + <p data-localise="__MSG_exceptionsDescriptionP1__"> + Enter a URL or Regular Expression to be excluded from redirects. + </p> + <p data-localise="__MSG_exceptionsDescriptionP2__"> + All requests for or initiating from a URL that matches your exception + will be excluded from redirects. + </p> + <p data-localise="__MSG_exceptionsDescriptionP3__"> + Note - Supports JavaScript regular expressions, excluding the + enclosing forward slashes. + </p> + </section> + <section class="settings-block"> + <table class="exceptions option"> + <tbody> + <tr> + <td> + <h1 data-localise="__MSG_addException__">Add Exception</h1> + </td> + </tr> + <tr> + <td> + <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" /> + </td> + <td> + <input type="radio" id="url" name="type" value="URL" checked /> + <label class="radio" for="url">URL</label> + <input type="radio" id="regExp" name="type" value="RegExp" /> + <label class="radio" for="regExp">RegExp</label> + </td> + <td> + <button id="add-to-exceptions"> + <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> + <line x1="256" y1="112" x2="256" y2="400" style=" + fill: none; + stroke: #fff; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " /> + <line x1="400" y1="256" x2="112" y2="256" style=" + fill: none; + stroke: #fff; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " /> + </svg> + </button> + </td> + </tr> + </tbody> + </table> + </section> + <ul id="exceptions-items"></ul> + </section> + + + <script type="module" src="./general.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/options.js b/src/pages/options/general.js index 5d6aed4e..e77f2aee 100644 --- a/src/pages/options/options.js +++ b/src/pages/options/general.js @@ -91,7 +91,7 @@ themeElement.addEventListener("change", (event) => { document.querySelector("#update-instances").addEventListener("click", () => { document.querySelector("#update-instances").innerHTML = '...'; - if (commonHelper.getInstances()) + if (commonHelper.updateInstances()) document.querySelector("#update-instances").innerHTML = 'Done!'; else document.querySelector("#update-instances").innerHTML = 'Failed Miserabely'; diff --git a/src/pages/options/instagram.html b/src/pages/options/instagram.html new file mode 100644 index 00000000..37c14e54 --- /dev/null +++ b/src/pages/options/instagram.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> +</head> + +<body class="option"> + + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html" class="selected">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h1>Enable</h1> + <input id="disable-bibliogram" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + + <section class="settings-block"> + <h4>Instance List</h4> + <div class="random-pool"> + <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea> + <ul id="bibliogram-random-pool-list"></ul> + </div> + </section> + + + </section> + <script type="module" src="./instagram.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/instagram.js b/src/pages/options/instagram.js index 7d2864e1..db31de1e 100644 --- a/src/pages/options/instagram.js +++ b/src/pages/options/instagram.js @@ -46,4 +46,13 @@ bibliogramRandomPoolElement.addEventListener("input", commonHelper.debounce(() = bibliogramRandomPool = commonHelper.filterList(bibliogramRandomPoolElement.value.split("\n")) commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool); browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPool }); -}, 50)); \ No newline at end of file +}, 50)); + + +browser.storage.onChanged.addListener((changes) => { + if ("bibliogramRandomPool" in changes) { + bibliogramRandomPool = changes.bibliogramRandomPool.newValue; + bibliogramRandomPoolElement.value = bibliogramRandomPool.join("\n"); + commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool); + } +}) \ No newline at end of file diff --git a/src/pages/options/maps.html b/src/pages/options/maps.html new file mode 100644 index 00000000..5074c44f --- /dev/null +++ b/src/pages/options/maps.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html" class="selected">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h1>Maps (OpenStreetMap)</h1> + <input id="disable-osm" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" /> + </div> + </div> + </section> + <script type="module" src="./maps.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/medium.html b/src/pages/options/medium.html new file mode 100644 index 00000000..a2343f2e --- /dev/null +++ b/src/pages/options/medium.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html" class="selected">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h1>Medium (Scribe)</h1> + <input id="disable-scribe" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="scribe-instance" type="url" name="scribe-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + <section class="settings-block"> + <h4>Instance List</h4> + <div class="random-pool"> + <textarea id="scribe-random-pool" type="text"></textarea> + <ul id="scribe-random-pool-list"></ul> + </div> + </section> + </section> + + <script type="module" src="./medium.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/medium.js b/src/pages/options/medium.js index 6fbc390d..bd86089f 100644 --- a/src/pages/options/medium.js +++ b/src/pages/options/medium.js @@ -50,4 +50,12 @@ scribeRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { scribeRandomPool = commonHelper.filterList(scribeRandomPoolElement.value.split("\n")) commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool); browser.storage.sync.set({ scribeRandomPool: scribeRandomPool }); -}, 50)); \ No newline at end of file +}, 50)); + +browser.storage.onChanged.addListener((changes) => { + if ("scribeRandomPool" in changes) { + scribeRandomPool = changes.scribeRandomPool.newValue; + scribeRandomPoolElement.value = scribeRandomPool.join("\n"); + commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool); + } +}) \ No newline at end of file diff --git a/src/pages/options/options.html b/src/pages/options/options.html deleted file mode 100644 index 04903e7f..00000000 --- a/src/pages/options/options.html +++ /dev/null @@ -1,370 +0,0 @@ -<!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title></title> - <link href="../stylesheets/styles.css" rel="stylesheet" /> - <title>LibRedirect Options</title> -</head> - -<body class="option"> - - <div class="option"> - - <section class="general"> - <div class="some-block option-block"> - <h4>Theme</h4> - <select id="theme"> - <option value="">System</option> - <option value="light-theme">Light</option> - <option value="dark-theme">Dark</option> - </select> - </div> - <div class="buttons buttons-inline"> - <a class="button button-inline" id="update-instances"> - <span>Update Instances</span> - </a> - </div> - <hr> - <section class="settings-block"> - <p data-localise="__MSG_exceptionsDescriptionP1__"> - Enter a URL or Regular Expression to be excluded from redirects. - </p> - <p data-localise="__MSG_exceptionsDescriptionP2__"> - All requests for or initiating from a URL that matches your exception - will be excluded from redirects. - </p> - <p data-localise="__MSG_exceptionsDescriptionP3__"> - Note - Supports JavaScript regular expressions, excluding the - enclosing forward slashes. - </p> - </section> - <section class="settings-block"> - <table class="exceptions option"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_addException__">Add Exception</h1> - </td> - </tr> - <tr> - <td> - <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" /> - </td> - <td> - <input type="radio" id="url" name="type" value="URL" checked /> - <label class="radio" for="url">URL</label> - <input type="radio" id="regExp" name="type" value="RegExp" /> - <label class="radio" for="regExp">RegExp</label> - </td> - <td> - <button id="add-to-exceptions"> - <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> - <line x1="256" y1="112" x2="256" y2="400" style=" - fill: none; - stroke: #fff; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 32px; - " /> - <line x1="400" y1="256" x2="112" y2="256" style=" - fill: none; - stroke: #fff; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 32px; - " /> - </svg> - </button> - </td> - </tr> - </tbody> - </table> - </section> - <ul id="exceptions-items"></ul> - </section> - - <section class="youtube"> - <div class="some-block option-block"> - <h1>Youtube (Invidious)</h1> - <input id="disable-invidious" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random Instance Pool</h4> - <div class="random-pool"> - <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea> - <ul id="invidious-random-pool-list"></ul> - </div> - </section> - - <div class="some-block option-block"> - <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> - <input id="use-freetube" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4> - <input id="always-proxy" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> - <input id="only-embed" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Video Quality</h4> - <select id="video-quality"> - <option value="">Default</option> - <option value="hd720">720p</option> - <option value="medium">480p</option> - <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> - </option> - </select> - </div> - - <div class="some-block option-block"> - <h4>Dark mode</h4> - <input id="invidious-dark-mode" type="checkbox" checked /> - </div> - - <div class="some-block"> - <h4>Volume: <span id="volume-value">50%</span></h4> - <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> - </div> - - <div class="some-block option-block"> - <h4>Player Style</h4> - <select id="invidious-player-style"> - <option value="">Invidious</option> - <option value="youtube">YouTube</option> - </select> - </div> - - <div class="some-block option-block"> - <h4>Subtitles - language codes</h4> - <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> - </div> - - <div class="some-block option-block"> - <h4>Automatically play video on load</h4> - <input id="invidious-autoplay" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Persist preferences (as cookie)</h4> - <input id="persist-invidious-prefs" type="checkbox" checked /> - </div> - - - </section> - - <section class="twitter"> - - <div class="some-block option-block"> - <h1>Twitter (Nitter)</h1> - <input id="disable-nitter" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="nitter-instance" type="url" name="nitter-instance" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random instance pool</h4> - <div class="random-pool"> - <textarea id="nitter-random-pool" type="text"></textarea> - <ul id="nitter-random-pool-list"></ul> - </div> - </section> - <div class="some-block option-block"> - <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4> - <input id="remove-twitter-sw" type="checkbox" checked /> - </div> - - </section> - - <section class="instagram"> - <div class="some-block option-block"> - <h1>Instagram (Bibliogram)</h1> - <input id="disable-bibliogram" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random instance pool</h4> - <div class="random-pool"> - <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea> - <ul id="bibliogram-random-pool-list"></ul> - </div> - </section> - - - </section> - - <section class="reddit"> - - <div class="some-block option-block"> - <h1>Reddit (LibReddit)</h1> - <input id="disable-reddit" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="reddit-instance" type="url" placeholder="https://libredd.it" /> - </div> - </div> - - <div class="some-block option-block"> - <h4>Frontend</h4> - <select id="reddit-frontend"> - <option value="libreddit">LibReddit</option> - <option value="teddit">Teddit</option> - </select> - </div> - - <section class="settings-block"> - <h4>LibReddit Random instance pool</h4> - <div class="random-pool"> - <textarea id="libreddit-random-pool" type="text"></textarea> - <ul id="libreddit-random-pool-list"></ul> - </div> - </section> - - <section class="settings-block"> - <h4>Teddit Random instance pool</h4> - <div class="random-pool"> - <textarea id="teddit-random-pool" type="text"></textarea> - <ul id="teddit-random-pool-list"></ul> - </div> - </section> - - </section> - - <section class="search"> - <div class="some-block option-block"> - <h1>Search</h1> - <input id="disable-searchEngine" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - - </section> - - <section class="translate"> - <div class="some-block option-block"> - <h1>Translate (SimplyTranslate)</h1> - <input id="disable-simplyTranslate" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" /> - </div> - </div> - - - </section> - - <section class="maps"> - <div class="some-block option-block"> - <h1>Maps (OpenStreetMap)</h1> - <input id="disable-osm" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" /> - </div> - </div> - - - </section> - - <section class="wikipedia"> - <div class="some-block option-block"> - <h1>Wikipedia (Wikiless)</h1> - <input id="disable-wikipedia" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random instance pool</h4> - <div class="random-pool"> - <textarea id="wikiless-random-pool" type="text"></textarea> - <ul id="wikiless-random-pool-list"></ul> - </div> - </section> - - </section> - - <section class="medium"> - <div class="some-block option-block"> - <h1>Medium (Scribe)</h1> - <input id="disable-scribe" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="scribe-instance" type="url" name="scribe-instance" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - <section class="settings-block"> - <h4>Random instance pool (comma-separated)</h4> - <div class="random-pool"> - <textarea id="scribe-random-pool" type="text"></textarea> - <ul id="scribe-random-pool-list"></ul> - </div> - </section> - </section> - - </div> - <script type="module" src="./options.js"></script> - <script type="module" src="./youtube.js"></script> - <script type="module" src="./twitter.js"></script> - <script type="module" src="./instagram.js"></script> - <script type="module" src="./reddit.js"></script> - <script type="module" src="./searchEngine.js"></script> - <script type="module" src="./translate.js"></script> - <script type="module" src="./maps.js"></script> - <script type="module" src="./wikipedia.js"></script> - <script type="module" src="./medium.js"></script> - <script src="../../assets/javascripts/localise.js"></script> -</body> - -</html> \ No newline at end of file diff --git a/src/pages/options/reddit.html b/src/pages/options/reddit.html new file mode 100644 index 00000000..b5af36f7 --- /dev/null +++ b/src/pages/options/reddit.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html" class="selected">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + + <section class="option-block"> + + <div class="some-block option-block"> + <h1>Reddit</h1> + <input id="disable-reddit" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="reddit-instance" type="url" placeholder="https://libredd.it" /> + </div> + </div> + + <div class="some-block option-block"> + <h4>Frontend</h4> + <select id="reddit-frontend"> + <option value="libreddit">LibReddit</option> + <option value="teddit">Teddit</option> + </select> + </div> + + <section class="settings-block"> + <h4>LibReddit Instance List</h4> + <div class="random-pool"> + <textarea id="libreddit-random-pool" type="text"></textarea> + <ul id="libreddit-random-pool-list"></ul> + </div> + </section> + + <section class="settings-block"> + <h4>Teddit Instance List</h4> + <div class="random-pool"> + <textarea id="teddit-random-pool" type="text"></textarea> + <ul id="teddit-random-pool-list"></ul> + </div> + </section> + + </section> + + <script type="module" src="./reddit.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/reddit.js b/src/pages/options/reddit.js index 59307096..6702c4de 100644 --- a/src/pages/options/reddit.js +++ b/src/pages/options/reddit.js @@ -39,10 +39,10 @@ browser.storage.sync.get( tedditRandomPoolElement.value = tedditRandomPool.join("\n"); commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool); - let id = "reddit-instance"; - let instances = redditInstances; - shared.autocompletes.push({ id: id, instances: instances }) - shared.autocomplete(document.getElementById(id), instances); + // let id = "reddit-instance"; + // let instances = redditInstances; + // shared.autocompletes.push({ id: id, instances: instances }) + // shared.autocomplete(document.getElementById(id), instances); } ) @@ -74,4 +74,18 @@ tedditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { tedditRandomPool = commonHelper.filterList(tedditRandomPoolElement.value.split("\n")) commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool); browser.storage.sync.set({ tedditRandomPool: tedditRandomPool }); -}, 50)); \ No newline at end of file +}, 50)); + +browser.storage.onChanged.addListener((changes) => { + if ("libredditRandomPool" in changes) { + libredditRandomPool = changes.libredditRandomPool.newValue; + libredditRandomPoolElement.value = libredditRandomPool.join("\n"); + commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool); + } + + if ("tedditRandomPool" in changes) { + tedditRandomPool = changes.tedditRandomPool.newValue; + tedditRandomPoolElement.value = tedditRandomPool.join("\n"); + commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool); + } +}) \ No newline at end of file diff --git a/src/pages/options/search.html b/src/pages/options/search.html new file mode 100644 index 00000000..6a5af775 --- /dev/null +++ b/src/pages/options/search.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html" class="selected">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h1>Search</h1> + <input id="disable-search" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <!-- <div class="autocomplete"> --> + <input id="search-instance" type="url" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + <!-- </div> --> + </div> + + <div class="some-block option-block"> + <h4>Frontend</h4> + <select id="search-frontend"> + <option value="searx">SearX</option> + <option value="whoogle">Whoogle</option> + </select> + </div> + + <section class="settings-block"> + <h4>SearX Instance List</h4> + <div class="random-pool"> + <textarea id="searx-random-pool" type="text"></textarea> + <ul id="searx-random-pool-list"></ul> + </div> + </section> + + <section class="settings-block"> + <h4>Whoogle Instance List</h4> + <div class="random-pool"> + <textarea id="whoogle-random-pool" type="text"></textarea> + <ul id="whoogle-random-pool-list"></ul> + </div> + </section> + + </section> + + + <script type="module" src="./search.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/search.js b/src/pages/options/search.js new file mode 100644 index 00000000..dc3246db --- /dev/null +++ b/src/pages/options/search.js @@ -0,0 +1,69 @@ +import searchHelper from "../../assets/javascripts/helpers/google-search.js"; +import commonHelper from "../../assets/javascripts/helpers/common.js"; +import shared from "./shared.js"; + +const searchInstances = searchHelper.redirects; +let searchInstanceElement = document.getElementById("search-instance"); +let disableSearchElement = document.getElementById("disable-search"); +let searchFrontendElement = document.getElementById("search-frontend"); + +let searxRandomPoolElement = document.getElementById("searx-random-pool"); +let searxRandomPoolListElement = document.getElementById("searx-random-pool-list"); + +let whoogleRandomPoolElement = document.getElementById("whoogle-random-pool"); +let whoogleRandomPoolListElement = document.getElementById("whoogle-random-pool-list"); + +let searxRandomPool +let whoogleRandomPool + +browser.storage.sync.get( + [ + "searchInstance", + "disableSearch", + "searchFrontend", + "searxRandomPool", + "whoogleRandomPool" + ], + (result) => { + searchInstanceElement.value = (result.searchInstance && result.searchInstance.link) || ""; + disableSearchElement.checked = !result.disableSearch; + searchFrontendElement.value = result.searchFrontend; + + searxRandomPool = result.searxRandomPool || commonHelper.filterInstances(searchInstances.searx) + searxRandomPoolElement.value = searxRandomPool.join("\n"); + commonHelper.updateListElement(searxRandomPoolListElement, searxRandomPool); + + whoogleRandomPool = result.whoogleRandomPool || commonHelper.filterInstances(searchInstances.whoogle) + whoogleRandomPoolElement.value = whoogleRandomPool.join("\n"); + commonHelper.updateListElement(whoogleRandomPoolListElement, whoogleRandomPool); + + // let id = "search-instance" + // let instances = searchInstances.map((instance) => instance.link) + // shared.autocompletes.push({ id: id, instances: instances }) + // shared.autocomplete(document.getElementById(id), instances); + } +) + +const searchInstanceChange = commonHelper.debounce(() => { + const instance = searchInstances.find( + (instance) => instance.link === searchInstanceElement.value + ); + if (instance || !searchInstanceElement.value) { + browser.storage.sync.set({ + searchInstance: instance || searchInstanceElement.value, + }); + } else { + searchInstanceElement.setCustomValidity("Must be an instance from the list"); + } +}, 500); +searchInstanceElement.addEventListener("input", searchInstanceChange); + +searchFrontendElement.addEventListener("change", (event) => { + const value = event.target.options[searchFrontendElement.selectedIndex].value; + console.info("Search Frontend:", value) + browser.storage.sync.set({ searchFrontend: value }) +}); + +disableSearchElement.addEventListener("change", (event) => { + browser.storage.sync.set({ disableSearch: !event.target.checked }); +}); diff --git a/src/pages/options/searchEngine.js b/src/pages/options/searchEngine.js deleted file mode 100644 index 856e51c4..00000000 --- a/src/pages/options/searchEngine.js +++ /dev/null @@ -1,42 +0,0 @@ -import searchHelper from "../../assets/javascripts/helpers/google-search.js"; -import commonHelper from "../../assets/javascripts/helpers/common.js"; -import shared from "./shared.js"; - -const searchEngineInstances = searchHelper.redirects; -let searchEngineInstanceElement = document.getElementById("searchEngine-instance"); -let disableSearchEngineElement = document.getElementById("disable-searchEngine"); - -browser.storage.sync.get( - [ - "searchEngineInstance", - "disableSearchEngine", - ], - (result) => { - searchEngineInstanceElement.value = (result.searchEngineInstance && result.searchEngineInstance.link) || ""; - - disableSearchEngineElement.checked = !result.disableSearchEngine; - - let id = "searchEngine-instance" - let instances = searchEngineInstances.map((instance) => instance.link) - shared.autocompletes.push({ id: id, instances: instances }) - shared.autocomplete(document.getElementById(id), instances); - } -) - -const searchEngineInstanceChange = commonHelper.debounce(() => { - const instance = searchEngineInstances.find( - (instance) => instance.link === searchEngineInstanceElement.value - ); - if (instance || !searchEngineInstanceElement.value) { - browser.storage.sync.set({ - searchEngineInstance: instance || searchEngineInstanceElement.value, - }); - } else { - searchEngineInstanceElement.setCustomValidity("Must be an instance from the list"); - } -}, 500); -searchEngineInstanceElement.addEventListener("input", searchEngineInstanceChange); - -disableSearchEngineElement.addEventListener("change", (event) => { - browser.storage.sync.set({ disableSearchEngine: !event.target.checked }); -}); diff --git a/src/pages/options/translate.html b/src/pages/options/translate.html new file mode 100644 index 00000000..18ffc333 --- /dev/null +++ b/src/pages/options/translate.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html" class="selected">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + <section class="option-block"> + <div class="some-block option-block"> + <h1>Translate (SimplyTranslate)</h1> + <input id="disable-simplyTranslate" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" /> + </div> + </div> + </section> + + + <script type="module" src="./translate.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/twitter.html b/src/pages/options/twitter.html new file mode 100644 index 00000000..87bc1c86 --- /dev/null +++ b/src/pages/options/twitter.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html" class="selected">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + <section class="option-block"> + + <div class="some-block option-block"> + <h1>Enable</h1> + <input id="disable-nitter" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="nitter-instance" type="url" name="nitter-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + + <section class="settings-block"> + <h4>Instance List</h4> + <div class="random-pool"> + <textarea id="nitter-random-pool" type="text"></textarea> + <ul id="nitter-random-pool-list"></ul> + </div> + </section> + <div class="some-block option-block"> + <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4> + <input id="remove-twitter-sw" type="checkbox" checked /> + </div> + + </section> + + <script type="module" src="./twitter.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/twitter.js b/src/pages/options/twitter.js index 3e9b2a4a..21ee66b7 100644 --- a/src/pages/options/twitter.js +++ b/src/pages/options/twitter.js @@ -23,11 +23,11 @@ browser.storage.sync.get( nitterInstanceElement.value = result.nitterInstance || ""; disableNitterElement.checked = !result.disableNitter; removeTwitterSWElement.checked = !result.removeTwitterSW; - + nitterRandomPool = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances) nitterRandomPoolElement.value = nitterRandomPool.join("\n"); commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool); - + let id = "nitter-instance" let instances = nitterRandomPool shared.autocompletes.push({ id: id, instances: instances }) @@ -56,3 +56,11 @@ nitterRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool); browser.storage.sync.set({ nitterRandomPool: nitterRandomPool }); }, 50)); + +browser.storage.onChanged.addListener((changes) => { + if ("nitterRandomPool" in changes) { + nitterRandomPool = changes.nitterRandomPool.newValue; + nitterRandomPoolElement.value = nitterRandomPool.join("\n"); + commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool); + } +}) \ No newline at end of file diff --git a/src/pages/options/wikipedia.html b/src/pages/options/wikipedia.html new file mode 100644 index 00000000..309b876f --- /dev/null +++ b/src/pages/options/wikipedia.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html" class="selected">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h1>Wikipedia (Wikiless)</h1> + <input id="disable-wikipedia" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" /> + </div> + </div> + + <section class="settings-block"> + <h4>Instance List</h4> + <div class="random-pool"> + <textarea id="wikiless-random-pool" type="text"></textarea> + <ul id="wikiless-random-pool-list"></ul> + </div> + </section> + </section> + + <script type="module" src="./wikipedia.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/wikipedia.js b/src/pages/options/wikipedia.js index 243c918e..8306d842 100644 --- a/src/pages/options/wikipedia.js +++ b/src/pages/options/wikipedia.js @@ -51,3 +51,13 @@ wikilessRandomPoolElement.addEventListener("input", commonHelper.debounce(() => browser.storage.sync.set({ wikilessRandomPool: wikilessRandomPool }); }, 50)); + +browser.storage.onChanged.addListener((changes) => { + if ("wikilessRandomPool" in changes) { + console.info("Wikiless updating"); + console.info(changes.wikilessRandomPool.newValue) + wikilessRandomPool = changes.wikilessRandomPool.newValue; + wikilessRandomPoolElement.value = wikilessRandomPool.join("\n"); + commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool); + } +}) \ No newline at end of file diff --git a/src/pages/options/youtube.html b/src/pages/options/youtube.html new file mode 100644 index 00000000..1eb4e125 --- /dev/null +++ b/src/pages/options/youtube.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + + <section class="links"> + <a href="general.html">General</a> + <a href="youtube.html" class="selected">Youtube</a> + <a href="twitter.html">Twitter</a> + <a href="instagram.html">Instagram</a> + <a href="reddit.html">Reddit</a> + <a href="search.html">Search</a> + <a href="translate.html">Translate</a> + <a href="maps.html">Maps</a> + <a href="wikipedia.html">Wikipedia</a> + <a href="medium.html">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h1>Enable</h1> + <input id="disable-invidious" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Instance</h4> + <!-- <div class="autocomplete"> --> + <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + <!-- </div> --> + </div> + + <section class="settings-block"> + <h4>Instance List</h4> + <div class="random-pool"> + <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" + type="text"></textarea> + <ul id="invidious-random-pool-list"></ul> + </div> + </section> + + <div class="some-block option-block"> + <h4>Player Style</h4> + <select id="invidious-player-style"> + <option value="">Invidious</option> + <option value="youtube">YouTube</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Dark mode</h4> + <input id="invidious-dark-mode" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4>Volume: <span id="volume-value">50%</span></h4> + <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> + <input id="use-freetube" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4> + <input id="always-proxy" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> + <input id="only-embed" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Video Quality</h4> + <select id="video-quality"> + <option value="">Default</option> + <option value="hd720">720p</option> + <option value="medium">480p</option> + <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> + </option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Subtitles - language codes</h4> + <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> + </div> + + <div class="some-block option-block"> + <h4>Automatically play video on load</h4> + <input id="invidious-autoplay" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Persist preferences (as cookie)</h4> + <input id="persist-invidious-prefs" type="checkbox" checked /> + </div> + + + </section> + + <script type="module" src="./youtube.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js index 60b31afa..8749a711 100644 --- a/src/pages/options/youtube.js +++ b/src/pages/options/youtube.js @@ -15,9 +15,9 @@ let invidiousAutoplayElement = document.getElementById("invidious-autoplay"); let invidiousRandomPoolElement = document.getElementById("invidious-random-pool"); let invidiousRandomPoolListElement = document.getElementById('invidious-random-pool-list'); let useFreeTubeElement = document.getElementById("use-freetube"); -let alwaysProxyElement = document.getElementById("always-proxy"); -let onlyEmbeddedVideoElement = document.getElementById("only-embed"); -let videoQualityElement = document.getElementById("video-quality"); +let invidiousAlwaysProxyElement = document.getElementById("always-proxy"); +let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed"); +let invidiousVideoQualityElement = document.getElementById("video-quality"); let invidiousRandomPool; @@ -33,9 +33,9 @@ browser.storage.sync.get( "invidiousAutoplay", "invidiousRandomPool", "useFreeTube", - "alwaysProxy", - "onlyEmbeddedVideo", - "videoQuality", + "invidiousAlwaysProxy", + "invidiousOnlyEmbeddedVideo", + "invidiousVideoQuality", ], (result) => { invidiousInstanceElement.value = result.invidiousInstance || ""; @@ -47,9 +47,9 @@ browser.storage.sync.get( invidiousPlayerStyleElement.value = result.invidiousPlayerStyle || ""; invidiousSubtitlesElement.value = result.invidiousSubtitles || ""; useFreeTubeElement.checked = result.useFreeTube; - onlyEmbeddedVideoElement.checked = result.onlyEmbeddedVideo; - alwaysProxyElement.checked = result.alwaysProxy; - videoQualityElement.value = result.videoQuality || ""; + invidiousOnlyEmbeddedVideoElement.checked = result.invidiousOnlyEmbeddedVideo; + invidiousAlwaysProxyElement.checked = result.invidiousAlwaysProxy; + invidiousVideoQualityElement.value = result.invidiousVideoQuality || ""; invidiousAutoplayElement.checked = result.invidiousAutoplay; invidiousRandomPool = result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances) @@ -118,19 +118,22 @@ useFreeTubeElement.addEventListener("change", (event) => { browser.storage.sync.set({ useFreeTube: event.target.checked }); }); -alwaysProxyElement.addEventListener("change", (event) => { - browser.storage.sync.set({ alwaysProxy: event.target.checked }); +invidiousAlwaysProxyElement.addEventListener("change", (event) => { + browser.storage.sync.set({ invidiousAlwaysProxy: event.target.checked }); }); -onlyEmbeddedVideoElement.addEventListener("change", (event) => { - browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked }); +invidiousOnlyEmbeddedVideoElement.addEventListener("change", (event) => { + browser.storage.sync.set({ invidiousOnlyEmbeddedVideo: event.target.checked }); }); -videoQualityElement.addEventListener("change", (event) => { - browser.storage.sync.set({ videoQuality: event.target.options[videoQualityElement.selectedIndex].value }); +invidiousVideoQualityElement.addEventListener("change", (event) => { + browser.storage.sync.set({ invidiousVideoQuality: event.target.options[invidiousVideoQualityElement.selectedIndex].value }); }); browser.storage.onChanged.addListener((changes) => { - if ("invidiousRandomPool" in changes) - invidiousRandomPool.value = changes.invidiousRandomPool.newValue; + if ("invidiousRandomPool" in changes) { + invidiousRandomPool = changes.invidiousRandomPool.newValue; + invidiousRandomPoolElement.value = invidiousRandomPool.join("\n"); + commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool); + } }) \ No newline at end of file diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html index adf45e6c..abb4259d 100644 --- a/src/pages/popup/popup.html +++ b/src/pages/popup/popup.html @@ -31,7 +31,7 @@ <div class="some-block"> <h4>Search</h4> - <input id="disable-searchEngine" type="checkbox" checked /> + <input id="disable-search" type="checkbox" checked /> </div> <div class="some-block"> diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 8ee09521..57dda80b 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -7,7 +7,7 @@ let disableInvidious = document.querySelector("#disable-invidious"); let disableBibliogram = document.querySelector("#disable-bibliogram"); let disableOsm = document.querySelector("#disable-osm"); let disableReddit = document.querySelector("#disable-reddit"); -let disableSearchEngine = document.querySelector("#disable-searchEngine"); +let disableSearch = document.querySelector("#disable-search"); let disableSimplyTranslate = document.querySelector("#disable-simplyTranslate"); let disableWikipedia = document.querySelector("#disable-wikipedia"); let disableScribe = document.querySelector("#disable-scribe"); @@ -21,7 +21,7 @@ browser.storage.sync.get( "disableBibliogram", "disableOsm", "disableReddit", - "disableSearchEngine", + "disableSearch", "disableSimplyTranslate", "disableWikipedia", "disableScribe", @@ -34,7 +34,7 @@ browser.storage.sync.get( disableBibliogram.checked = !result.disableBibliogram; disableOsm.checked = !result.disableOsm; disableReddit.checked = !result.disableReddit; - disableSearchEngine.checked = !result.disableSearchEngine; + disableSearch.checked = !result.disableSearch; disableSimplyTranslate.checked = !result.disableSimplyTranslate; disableWikipedia.checked = !result.disableWikipedia; disableScribe.checked = !result.disableScribe; @@ -61,8 +61,8 @@ disableReddit.addEventListener("change", (event) => { browser.storage.sync.set({ disableReddit: !event.target.checked }); }); -disableSearchEngine.addEventListener("change", (event) => { - browser.storage.sync.set({ disableSearchEngine: !event.target.checked }); +disableSearch.addEventListener("change", (event) => { + browser.storage.sync.set({ disableSearch: !event.target.checked }); }); disableSimplyTranslate.addEventListener("change", (event) => { @@ -80,7 +80,7 @@ disableScribe.addEventListener("change", (event) => { document.querySelector("#update-instances").addEventListener("click", () => { document.querySelector("#update-instances").innerHTML = '...'; - if (commonHelper.getInstances()) + if (commonHelper.updateInstances()) document.querySelector("#update-instances").innerHTML = 'Done!'; else document.querySelector("#update-instances").innerHTML = 'Failed Miserabely'; diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 22c4b17b..5ee137c5 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -226,8 +226,39 @@ li { color: var(--text); } -.option { - width: 100%; +section.option-block { + width: 50%; + margin: 0 50px; +} + +body.option { + display: flex; + align-items: flex-start; + padding: 40px; +} + + +section.links { + margin: 00px 0; +} + +section.links a { + display: flex; + align-items: center; + font-size: 30px; + text-decoration: none; + color: white; + margin: 20px 0; + font-weight: bold; + transition: 0.1s; +} + +section.links a:hover { + color: var(--active); +} + +section.links a.selected { + color: var(--active); } .option td { @@ -270,8 +301,6 @@ input[type="url"]:focus { /* \25BE */ - - hr { height: 2px; margin: 0 15px; |