Merge pull request #198 from fattalion/add-simply-translate-support

Add SimplyTranslate support

src/_locales/en/messages.json

@@ -31,6 +31,10 @@
     "message": "Search Engine Instance",
     "description": "Label for Search Engine instance field option (options)."
   },
+  "simplyTranslateInstance": {
+    "message": "SimplyTranslate Instance",
+    "description": "Label for SimplyTranslate instance field option (options)."
+  },
   "disableNitter": {
     "message": "Nitter Redirects",
     "description": "Label for enable/disable Nitter redirects option (options & pop-up)."
@@ -55,6 +59,10 @@
     "message": "Search Engine Redirects",
     "description": "Label for enable/disable Search Engine redirects option (options & pop-up)."
   },
+  "disableSimplyTranslate": {
+    "message": "SimplyTranslate Redirects",
+    "description": "Label for enable/disable SimplyTranslate redirects option (options & pop-up)."
+  },
   "alwaysProxy": {
     "message": "Always proxy videos through Invidious",
     "description": "Label for 'Always proxy videos through Invidious' option (options)."

src/assets/javascripts/helpers/google-translate.js

@@ -0,0 +1,12 @@
+const targets = [
+  "translate.google.com"
+];
+
+const redirects = [
+  "https://translate.metalune.xyz"
+];
+
+export default {
+  targets,
+  redirects,
+}

src/pages/background/background.js

@@ -7,6 +7,7 @@ import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
 import mapsHelper from "../../assets/javascripts/helpers/google-maps.js";
 import redditHelper from "../../assets/javascripts/helpers/reddit.js";
 import searchHelper from "../../assets/javascripts/helpers/google-search.js";
+import googleTranslateHelper from "../../assets/javascripts/helpers/google-translate.js";
 
 const nitterInstances = twitterHelper.redirects;
 const twitterDomains = twitterHelper.targets;
@@ -29,6 +30,9 @@ const redditBypassPaths = redditHelper.bypassPaths;
 const redditDefault = redditHelper.redirects[0];
 const googleSearchRegex = searchHelper.targets;
 const searchEngineInstances = searchHelper.redirects;
+const simplyTranslateInstances = googleTranslateHelper.redirects;
+const simplyTranslateDefault = simplyTranslateInstances[0];
+const googleTranslateDomains = googleTranslateHelper.targets;
 
 let disableNitter;
 let disableInvidious;
@@ -36,12 +40,14 @@ let disableBibliogram;
 let disableOsm;
 let disableReddit;
 let disableSearchEngine;
+let disableSimplyTranslate;
 let nitterInstance;
 let invidiousInstance;
 let bibliogramInstance;
 let osmInstance;
 let redditInstance;
 let searchEngineInstance;
+let simplyTranslateInstance;
 let alwaysProxy;
 let onlyEmbeddedVideo;
 let videoQuality;
@@ -66,12 +72,14 @@ browser.storage.sync.get(
     "osmInstance",
     "redditInstance",
     "searchEngineInstance",
+    "simplyTranslateInstance",
     "disableNitter",
     "disableInvidious",
     "disableBibliogram",
     "disableOsm",
     "disableReddit",
     "disableSearchEngine",
+    "disableSimplyTranslate",
     "alwaysProxy",
     "onlyEmbeddedVideo",
     "videoQuality",
@@ -93,12 +101,14 @@ browser.storage.sync.get(
     osmInstance = result.osmInstance || osmDefault;
     redditInstance = result.redditInstance || redditDefault;
     searchEngineInstance = result.searchEngineInstance;
+    simplyTranslateInstance = result.simplyTranslateInstance || simplyTranslateDefault;
     disableNitter = result.disableNitter;
     disableInvidious = result.disableInvidious;
     disableBibliogram = result.disableBibliogram;
     disableOsm = result.disableOsm;
     disableReddit = result.disableReddit;
     disableSearchEngine = result.disableSearchEngine;
+    disableSimplyTranslate = result.disableSimplyTranslate;
     alwaysProxy = result.alwaysProxy;
     onlyEmbeddedVideo = result.onlyEmbeddedVideo;
     videoQuality = result.videoQuality;
@@ -138,6 +148,9 @@ browser.storage.onChanged.addListener((changes) => {
   if ("osmInstance" in changes) {
     osmInstance = changes.osmInstance.newValue || osmDefault;
   }
+  if ("simplyTranslateInstance" in changes) {
+    simplyTranslateInstance = changes.simplyTranslateInstance.newValue || simplyTranslateDefault;
+  }
   if ("redditInstance" in changes) {
     redditInstance = changes.redditInstance.newValue || redditDefault;
   }
@@ -162,6 +175,9 @@ browser.storage.onChanged.addListener((changes) => {
   if ("disableSearchEngine" in changes) {
     disableSearchEngine = changes.disableSearchEngine.newValue;
   }
+  if ("disableSimplyTranslate" in changes) {
+    disableSimplyTranslate = changes.disableSimplyTranslate.newValue;
+  }
   if ("alwaysProxy" in changes) {
     alwaysProxy = changes.alwaysProxy.newValue;
   }
@@ -469,6 +485,14 @@ function redirectSearchEngine(url, initiator) {
   return `${searchEngine.link}${searchEngine.q}?${search}`;
 }
 
+function redirectGoogleTranslate(url, initiator) {
+  if (disableSimplyTranslate || isException(url, initiator)) {
+    return null;
+  }
+
+  return `${simplyTranslateInstance}/${url.search}`;
+}
+
 browser.webRequest.onBeforeRequest.addListener(
   (details) => {
     const url = new URL(details.url);
@@ -506,6 +530,10 @@ browser.webRequest.onBeforeRequest.addListener(
       redirect = {
         redirectUrl: redirectSearchEngine(url, initiator),
       };
+    } else if (googleTranslateDomains.includes(url.host)) {
+      redirect = {
+        redirectUrl: redirectGoogleTranslate(url, initiator),
+      }
     }
     if (redirect && redirect.redirectUrl) {
       console.info(

src/pages/options/options.html

@@ -164,6 +164,25 @@
           </tbody>
         </table>
       </section>
+      <section class="settings-block">
+        <table class="option" aria-label="Toggle SimplyTranslate redirects">
+          <tbody>
+            <tr>
+              <td>
+                <h1 data-localise="__MSG_disableSimplyTranslate__" class="new-badge" data-new-badge>SimplyTranslate Redirects</h1>
+              </td>
+              <td>
+                <input
+                  aria-hidden="true"
+                  id="disable-simply-translate"
+                  type="checkbox"
+                />&nbsp;
+                <label for="disable-simply-translate" class="checkbox-label"></label>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
       <section class="settings-block">
         <h1 data-localise="__MSG_nitterInstance__">Nitter Instance</h1>
         <div class="autocomplete">
@@ -229,6 +248,16 @@
           />
         </div>
       </section>
+      <section class="settings-block">
+        <h1 data-localise="__MSG_simplyTranslateInstance__">SimplyTranslate Instance</h1>
+        <div class="autocomplete">
+          <input
+            id="simply-translate-instance"
+            type="url"
+            placeholder="https://translate.metalune.xyz"
+          />
+        </div>
+      </section>
       <section class="settings-block">
         <h1 data-localise="__MSG_theme__">Theme</h1>
         <select id="theme">

src/pages/options/options.js

@@ -7,6 +7,7 @@ import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
 import mapsHelper from "../../assets/javascripts/helpers/google-maps.js";
 import redditHelper from "../../assets/javascripts/helpers/reddit.js";
 import searchHelper from "../../assets/javascripts/helpers/google-search.js";
+import googleTranslateHelper from "../../assets/javascripts/helpers/google-translate.js";
 
 const nitterInstances = twitterHelper.redirects;
 const invidiousInstances = youtubeHelper.redirects;
@@ -14,6 +15,7 @@ const bibliogramInstances = instagramHelper.redirects;
 const osmInstances = mapsHelper.redirects;
 const redditInstances = redditHelper.redirects;
 const searchEngineInstances = searchHelper.redirects;
+const simplyTranslateInstances = googleTranslateHelper.redirects;
 const autocompletes = [
   { id: "nitter-instance", instances: nitterInstances },
   { id: "invidious-instance", instances: invidiousInstances },
@@ -24,6 +26,7 @@ const autocompletes = [
     id: "search-engine-instance",
     instances: searchEngineInstances.map((instance) => instance.link),
   },
+  { id: "simply-translate-instance", instances: simplyTranslateInstances },
 ];
 const domparser = new DOMParser();
 
@@ -33,12 +36,14 @@ let bibliogramInstance = document.getElementById("bibliogram-instance");
 let osmInstance = document.getElementById("osm-instance");
 let redditInstance = document.getElementById("reddit-instance");
 let searchEngineInstance = document.getElementById("search-engine-instance");
+let simplyTranslateInstance = document.getElementById("simply-translate-instance");
 let disableNitter = document.getElementById("disable-nitter");
 let disableInvidious = document.getElementById("disable-invidious");
 let disableBibliogram = document.getElementById("disable-bibliogram");
 let disableOsm = document.getElementById("disable-osm");
 let disableReddit = document.getElementById("disable-reddit");
 let disableSearchEngine = document.getElementById("disable-search-engine");
+let disableSimplyTranslate = document.getElementById("disable-simply-translate");
 let alwaysProxy = document.getElementById("always-proxy");
 let onlyEmbeddedVideo = document.getElementById("only-embed");
 let videoQuality = document.getElementById("video-quality");
@@ -90,12 +95,14 @@ browser.storage.sync.get(
     "osmInstance",
     "redditInstance",
     "searchEngineInstance",
+    "simplyTranslateInstance",
     "disableNitter",
     "disableInvidious",
     "disableBibliogram",
     "disableOsm",
     "disableReddit",
     "disableSearchEngine",
+    "disableSimplyTranslate",
     "alwaysProxy",
     "onlyEmbeddedVideo",
     "videoQuality",
@@ -123,12 +130,14 @@ browser.storage.sync.get(
     redditInstance.value = result.redditInstance || "";
     searchEngineInstance.value =
       (result.searchEngineInstance && result.searchEngineInstance.link) || "";
+    simplyTranslateInstance.value = result.simplyTranslateInstance || "";
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
     disableReddit.checked = !result.disableReddit;
     disableSearchEngine.checked = !result.disableSearchEngine;
+    disableSimplyTranslate.checked = !result.disableSimplyTranslate;
     alwaysProxy.checked = result.alwaysProxy;
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
     videoQuality.value = result.videoQuality || "";
@@ -303,6 +312,15 @@ const searchEngineInstanceChange = debounce(() => {
 }, 500);
 searchEngineInstance.addEventListener("input", searchEngineInstanceChange);
 
+const simplyTranslateInstanceChange = debounce(() => {
+  if (simplyTranslateInstance.checkValidity()) {
+    browser.storage.sync.set({
+      simplyTranslateInstance: parseURL(simplyTranslateInstance.value),
+    });
+  }
+}, 500);
+simplyTranslateInstance.addEventListener("input", simplyTranslateInstanceChange);
+
 disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });
@@ -327,6 +345,10 @@ disableSearchEngine.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
 });
 
+disableSimplyTranslate.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableSimplyTranslate: !event.target.checked });
+});
+
 alwaysProxy.addEventListener("change", (event) => {
   browser.storage.sync.set({ alwaysProxy: event.target.checked });
 });

src/pages/popup/popup.html

@@ -164,6 +164,32 @@
       </table>
     </section>
 
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle SimplyTranslate redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1
+                data-localise="__MSG_disableSimplyTranslate__"
+                class="new-badge"
+                data-new-badge
+              >
+                SimplyTranslate Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-simplyTranslate"
+                type="checkbox"
+              />&nbsp;
+              <label for="disable-simplyTranslate" class="checkbox-label"></label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
     <section class="settings-block"></section>
 
     <footer>

src/pages/popup/popup.js

@@ -6,6 +6,7 @@ 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 disableSimplyTranslate = document.querySelector("#disable-simplyTranslate");
 let version = document.querySelector("#version");
 
 window.browser = window.browser || window.chrome;
@@ -18,6 +19,7 @@ browser.storage.sync.get(
     "disableOsm",
     "disableReddit",
     "disableSearchEngine",
+    "disableSimplyTranslate",
     "theme",
   ],
   (result) => {
@@ -28,6 +30,7 @@ browser.storage.sync.get(
     disableOsm.checked = !result.disableOsm;
     disableReddit.checked = !result.disableReddit;
     disableSearchEngine.checked = !result.disableSearchEngine;
+    disableSimplyTranslate.checked = !result.disableSimplyTranslate;
   }
 );
 
@@ -57,6 +60,10 @@ disableSearchEngine.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
 });
 
+disableSimplyTranslate.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableSimplyTranslate: !event.target.checked });
+});
+
 document.querySelector("#more-options").addEventListener("click", () => {
   browser.runtime.openOptionsPage();
 });