Improve exceptions (whitelist), i18n (fr), etc.

- Closes #69
- Closes #70
- Fixes #71
- Closes #72 - added fr l10n
- Fixes #73
- Implement additional Invidious params (#66)

README.md

@@ -1,9 +1,8 @@
-# ![privacy-redirect](images/icon32.png) Privacy Redirect
+# ![privacy-redirect](assets/images/logo-small.png)
 
-[![Donate](https://liberapay.com/assets/widgets/donate.svg)](https://liberapay.com/SimonBrazell/donate) [![Buy me a coffee](images/buy-me-a-coffee.png)](https://www.buymeacoffee.com/SimonBrazell)
+[![Donate](https://liberapay.com/assets/widgets/donate.svg)](https://liberapay.com/SimonBrazell/donate) [![Buy me a coffee](assets/images/buy-me-a-coffee.png)](https://www.buymeacoffee.com/SimonBrazell)
 
--  [Chrome Extension](https://chrome.google.com/webstore/detail/privacy-redirect/pmcmeagblkinmogikoikkdjiligflglb)
--  [Firefox Add-on](https://addons.mozilla.org/en-US/firefox/addon/privacy-redirect/)
+[![Firefox Add-on](assets/images/amo-badge.png)](https://addons.mozilla.org/en-US/firefox/addon/privacy-redirect/) [![Chrome Extension](assets/images/chrome-badge.png)](https://chrome.google.com/webstore/detail/privacy-redirect/pmcmeagblkinmogikoikkdjiligflglb)
 
 A web extension that redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives - [Nitter](https://github.com/zedeus/nitter), [Invidious](https://github.com/omarroth/invidious), [Bibliogram](https://github.com/cloudrac3r/bibliogram) & [OpenStreetMap](https://www.openstreetmap.org/).
 

_locales/en/messages.json

@@ -0,0 +1,98 @@
+{
+  "extensionName": {
+    "message": "Privacy Redirect",
+    "description": "Name of the extension."
+  },
+  "extensionDescription": {
+    "message": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
+    "description": "Description of the extension."
+  },
+  "nitterInstance": {
+    "message": "Nitter Instance",
+    "description": "Label for Nitter instance field option (options)."
+  },
+  "invidiousInstance": {
+    "message": "Invidious Instance",
+    "description": "Label for Invidious instance field option (options)."
+  },
+  "bibliogramInstance": {
+    "message": "Bibliogram Instance",
+    "description": "Label for Bibliogram instance field option (options)."
+  },
+  "osmInstance": {
+    "message": "OpenStreetMap Instance",
+    "description": "Label for OSM instance field option (options)."
+  },
+  "disableNitter": {
+    "message": "Nitter Redirects",
+    "description": "Label for enable/disable Nitter redirects option (options & pop-up)."
+  },
+  "disableInvidious": {
+    "message": "Invidious Redirects",
+    "description": "Label for enable/disable Invidious redirects option (options & pop-up)."
+  },
+  "disableBibliogram": {
+    "message": "Bibliogram Redirects",
+    "description": "Label for enable/disable Bibliogram redirects option (options & pop-up)."
+  },
+  "disableOsm": {
+    "message": "OpenStreetMap Redirects",
+    "description": "Label for enable/disable OSM redirects option (options & pop-up)."
+  },
+  "alwaysProxy": {
+    "message": "Always proxy videos through Invidious",
+    "description": "Label for 'Always proxy videos through Invidious' option (options)."
+  },
+  "onlyEmbeddedVideo": {
+    "message": "Only redirect embedded video to Invidious",
+    "description": "Label for 'Only redirect embedded video to Invidious' option (options)."
+  },
+  "videoQuality": {
+    "message": "Invidious Video Quality",
+    "description": "Label for 'Invidious Video Quality' option (options)."
+  },
+  "removeTwitterSW": {
+    "message": "Proactively remove Twitter service worker",
+    "description": "Label for 'Proactively remove Twitter service worker' option (options)."
+  },
+  "invidiousDarkMode": {
+    "message": "Invidious dark mode always on",
+    "description": "Label for 'Invidious dark mode always on' option (options)."
+  },
+  "persistInvidiousPrefs": {
+    "message": "Persist Invidious preferences (as cookie)",
+    "description": "Label for 'Persist Invidious preferences (as cookie)' option (options)."
+  },
+  "generalTab": {
+    "message": "General",
+    "description": "General tab (options)."
+  },
+  "advancedTab": {
+    "message": "Advanced",
+    "description": "Advanced tab (options)."
+  },
+  "exceptionsTab": {
+    "message": "Exceptions",
+    "description": "Exceptions tab (options)."
+  },
+  "exceptionsDescription": {
+    "message": "<p>Enter a URL or Regular Expression to be excluded from redirects.</p><p>All requests for or initiating from a URL that matches the exception will be excluded from redirects.</p><p><b>Note -</b> Supports JavaScript regular expressions, excluding the enclosing forward slashes.</p>",
+    "description": "A description of the 'Exceptions' feature (options)."
+  },
+  "addException": {
+    "message": "Add Exception",
+    "description": "'Add Exceptions' button (options)."
+  },
+  "moreOptions": {
+    "message": "More Options",
+    "description": "More Options button (pop-up)."
+  },
+  "privacy": {
+    "message": "Privacy",
+    "description": "Extension title - Privacy (pop-up)."
+  },
+  "redirect": {
+    "message": "Redirect",
+    "description": "Extension title - Redirect (pop-up)."
+  }
+}

_locales/fr/messages.json

@@ -0,0 +1,98 @@
+{
+  "extensionName": {
+    "message": "Privacy Redirect",
+    "description": "Nom du module complémentaire."
+  },
+  "extensionDescription": {
+    "message": "Redirige les requêtes les demandes Twitter, YouTube, Instagram et Google Maps vers des alternatives respectueuses de la vie privée. pour Twitter, YouTube, Instagram et Google Maps vers des alternatives respectueuses de la vie privée.",
+    "description": "Description du module complémentaire."
+  },
+  "nitterInstance": {
+    "message": "Instance de Nitter",
+    "description": "Étiquette pour l'option de champ d'instance Nitter (options)."
+  },
+  "invidiousInstance": {
+    "message": "Instance de Invidious",
+    "description": "Étiquette pour l'option de champ d'instance Invidious (options)."
+  },
+  "bibliogramInstance": {
+    "message": "Instance de Bibliogram",
+    "description": "Étiquette pour l'option de champ d'instance Bibliogram (options)."
+  },
+  "osmInstance": {
+    "message": "Instance de OpenStreetMap",
+    "description": "Étiquette pour l'option de champ d'instance OpenStreetMap (options)."
+  },
+  "disableNitter": {
+    "message": "Redirection vers Nitter",
+    "description": "Étiquette pour activer / désactiver l'option de redirection vers Nitter (options et pop-up)."
+  },
+  "disableInvidious": {
+    "message": "Redirection vers Invidious",
+    "description": "Étiquette pour activer / désactiver l'option de redirection vers Invidious (options et pop-up)."
+  },
+  "disableBibliogram": {
+    "message": "Redirection vers Bibliogram",
+    "description": "Étiquette pour activer / désactiver l'option de redirection vers Bibliogram (options et pop-up)."
+  },
+  "disableOsm": {
+    "message": "Redirection vers OpenStreetMap",
+    "description": "Étiquette pour activer / désactiver l'option de redirection vers OpenStreetMap (options et pop-up)."
+  },
+  "alwaysProxy": {
+    "message": "Toujours transiter par proxy les vidéos via Invidious",
+    "description": "Libellé pour l'option 'Toujours transiter par proxy les vidéos via Invidious' (options)."
+  },
+  "onlyEmbeddedVideo": {
+    "message": "Rediriger uniquement les vidéos intégrées vers Invidious",
+    "description": "Libellé pour l'option 'Rediriger uniquement les vidéos intégrées vers Invidious' (options)."
+  },
+  "videoQuality": {
+    "message": "Qualité des vidéos Invidious",
+    "description": "Libellé pour l'option 'Qualité des vidéos Invidious' (options)."
+  },
+  "removeTwitterSW": {
+    "message": "Supprimer proactivement le service Twitter",
+    "description": "Libellé pour l'option 'Supprimer proactivement le service Twitter' (options)."
+  },
+  "invidiousDarkMode": {
+    "message": "Mode sombre toujours activé pour Invidious",
+    "description": "Libellé pour l'option 'Mode sombre toujours activé pour Invidious' (options)."
+  },
+  "persistInvidiousPrefs": {
+    "message": "Conserver les préférences malveillantes (sous forme de cookie)",
+    "description": "Libellé pour 'Conserver les préférences malveillantes (sous forme de cookie)' option (options)."
+  },
+  "generalTab": {
+    "message": "Général",
+    "description": "Onglet général (options)."
+  },
+  "advancedTab": {
+    "message": "Avancé",
+    "description": "Onglet avancé (options)."
+  },
+  "exceptionsTab": {
+    "message": "Exceptions",
+    "description": "Onglet des Exceptions dans les options."
+  },
+  "exceptionsDescription": {
+    "message": "<p>Entrez une adresse URL ou une expression régulière qui sera exclue des redirections.</p><p>All requests for or initiating from a URL that matches the exception will be excluded from redirects.</p><p><b>Note -</b> Supports JavaScript regular expressions, excluding the enclosing forward slashes.</p>",
+    "description": "Description pour la rubrique 'Exceptions' dans les options."
+  },
+  "addException": {
+    "message": "Ajoutez une exception",
+    "description": "boutton 'Ajoutez une exception' dans les options."
+  },
+  "moreOptions": {
+    "message": "Options supplémentaires",
+    "description": "Boutton des options supplémentaires (pop-up)."
+  },
+  "privacy": {
+    "message": "Vie privée",
+    "description": "Titre du module complémentaire - Vie privée (pop-up)."
+  },
+  "redirect": {
+    "message": "Redirection",
+    "description": "Titre du module complémentaire - Redirection (pop-up)."
+  }
+}

assets/images/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+  <polyline points='112 184 256 328 400 184' style='fill:none;stroke:#FF5B56;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/>
+</svg>

assets/javascript/localise.js

@@ -0,0 +1,19 @@
+window.browser = window.browser || window.chrome;
+
+function localizeHtmlPage() {
+  // Localize using __MSG_***__ data tags
+  var data = document.querySelectorAll('[data-localize]');
+
+  for (var i in data) if (data.hasOwnProperty(i)) {
+    var obj = data[i];
+    var tag = obj.getAttribute('data-localize').toString();
+
+    var msg = tag.replace(/__MSG_(\w+)__/g, function (_match, v1) {
+      return v1 ? browser.i18n.getMessage(v1) : null;
+    });
+
+    if (msg && msg !== tag) obj.innerHTML = msg;
+  }
+}
+
+localizeHtmlPage();

assets/javascript/remove-twitter-sw.js

@@ -5,17 +5,17 @@ const nitterDefault = 'https://nitter.net';
 let disableNitter;
 let nitterInstance;
 let redirectBypassFlag;
-let whitelist;
+let exceptions;
 
 window.browser = window.browser || window.chrome;
 
-function isNotWhitelisted(url) {
-  return !whitelist.some(regex => (regex.test(url.href)));
+function isNotException(url) {
+  return !exceptions.some(regex => (regex.test(url.href)));
 }
 
 function shouldRedirect(url) {
   return !redirectBypassFlag &&
-    isNotWhitelisted(url) &&
+    isNotException(url) &&
     !disableNitter &&
     url.host !== nitterInstance &&
     !url.pathname.includes('/home');
@@ -32,7 +32,13 @@ function redirectTwitter(url) {
 }
 
 browser.storage.sync.get(
-  ['nitterInstance', 'disableNitter', 'removeTwitterSW', 'redirectBypassFlag'],
+  [
+    'nitterInstance',
+    'disableNitter',
+    'removeTwitterSW',
+    'redirectBypassFlag',
+    'exceptions'
+  ],
   (result) => {
     redirectBypassFlag = result.redirectBypassFlag;
     browser.storage.sync.set({
@@ -41,8 +47,8 @@ browser.storage.sync.get(
     if (!result.removeTwitterSW) {
       disableNitter = result.disableNitter;
       nitterInstance = result.nitterInstance || nitterDefault;
-      whitelist = result.whitelist ? result.whitelist.map(e => {
-        return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
+      exceptions = result.exceptions ? result.exceptions.map(e => {
+        return new RegExp(e);
       }) : [];
       navigator.serviceWorker.getRegistrations().then(registrations => {
         for (let registration of registrations) {

background.js

@@ -85,7 +85,11 @@ let alwaysProxy;
 let onlyEmbeddedVideo;
 let videoQuality;
 let invidiousDarkMode;
-let whitelist;
+let invidiousVolume;
+let invidiousPlayerStyle;
+let invidiousSubtitles;
+let invidiousAutoplay;
+let exceptions;
 
 window.browser = window.browser || window.chrome;
 
@@ -103,7 +107,11 @@ browser.storage.sync.get(
     'onlyEmbeddedVideo',
     'videoQuality',
     'invidiousDarkMode',
-    'whitelist'
+    'invidiousVolume',
+    'invidiousPlayerStyle',
+    'invidiousSubtitles',
+    'invidiousAutoplay',
+    'exceptions'
   ],
   result => {
     disableNitter = result.disableNitter;
@@ -118,9 +126,13 @@ browser.storage.sync.get(
     onlyEmbeddedVideo = result.onlyEmbeddedVideo;
     videoQuality = result.videoQuality;
     invidiousDarkMode = result.invidiousDarkMode;
-    whitelist = result.whitelist ? result.whitelist.map(e => {
-      return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
+    exceptions = result.exceptions ? result.exceptions.map(e => {
+      return new RegExp(e);
     }) : [];
+    invidiousVolume = result.invidiousVolume;
+    invidiousPlayerStyle = result.invidiousPlayerStyle;
+    invidiousSubtitles = result.invidiousSubtitles || '';
+    invidiousAutoplay = !result.invidiousAutoplay;
   }
 );
 
@@ -161,9 +173,21 @@ browser.storage.onChanged.addListener(changes => {
   if ('invidiousDarkMode' in changes) {
     invidiousDarkMode = changes.invidiousDarkMode.newValue;
   }
-  if ('whitelist' in changes) {
-    whitelist = changes.whitelist.newValue.map(e => {
-      return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
+  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 ('exceptions' in changes) {
+    exceptions = changes.exceptions.newValue.map(e => {
+      return new RegExp(e);
     });
   }
 });
@@ -194,9 +218,9 @@ function addressToLatLng(address, callback) {
   xmlhttp.send();
 }
 
-function isWhitelisted(url, initiator) {
-  return whitelist.some(regex => (regex.test(url.href))) ||
-    (initiator && whitelist.some(regex => (regex.test(initiator.href))));
+function isException(url, initiator) {
+  return exceptions.some(regex => (regex.test(url.href))) ||
+    (initiator && exceptions.some(regex => (regex.test(initiator.href))));
 }
 
 function isFirefox() {
@@ -204,7 +228,7 @@ function isFirefox() {
 }
 
 function redirectYouTube(url, initiator, type) {
-  if (disableInvidious || isWhitelisted(url, initiator)) {
+  if (disableInvidious || isException(url, initiator)) {
     return null;
   }
   if (initiator && (initiator.origin === invidiousInstance || youtubeDomains.includes(initiator.host))) {
@@ -231,11 +255,24 @@ function redirectYouTube(url, initiator, type) {
   if (invidiousDarkMode) {
     url.searchParams.append('dark_mode', invidiousDarkMode);
   }
+  if (invidiousVolume) {
+    url.searchParams.append('volume', invidiousVolume);
+  }
+  if (invidiousPlayerStyle) {
+    url.searchParams.append('player_style', invidiousPlayerStyle);
+  }
+  if (invidiousSubtitles) {
+    url.searchParams.append('subtitles', invidiousSubtitles);
+  }
+  if (invidiousAutoplay) {
+    url.searchParams.append('autoplay', invidiousAutoplay);
+  }
+
   return `${invidiousInstance}${url.pathname}${url.search}`;
 }
 
 function redirectTwitter(url, initiator) {
-  if (disableNitter || isWhitelisted(url, initiator)) {
+  if (disableNitter || isException(url, initiator)) {
     return null;
   }
   if (url.pathname.includes('/home')) {
@@ -259,7 +296,7 @@ function redirectTwitter(url, initiator) {
 }
 
 function redirectInstagram(url, initiator, type) {
-  if (disableBibliogram || isWhitelisted(url, initiator)) {
+  if (disableBibliogram || isException(url, initiator)) {
     return null;
   }
   // Do not redirect Bibliogram view on Instagram links
@@ -279,7 +316,7 @@ function redirectInstagram(url, initiator, type) {
 }
 
 function redirectGoogleMaps(url, initiator) {
-  if (disableOsm || isWhitelisted(url, initiator)) {
+  if (disableOsm || isException(url, initiator)) {
     return null;
   }
   let redirect;
@@ -363,10 +400,10 @@ browser.webRequest.onBeforeRequest.addListener(
   details => {
     const url = new URL(details.url);
     let initiator;
-    if (details.initiator) {
-      initiator = new URL(details.initiator);
-    } else if (details.originUrl) {
+    if (details.originUrl) {
       initiator = new URL(details.originUrl);
+    } else if (details.initiator) {
+      initiator = new URL(details.initiator);
     }
     let redirect;
     if (youtubeDomains.includes(url.host)) {
@@ -406,6 +443,20 @@ browser.runtime.onInstalled.addListener(
       browser.storage.sync.set({
         bibliogramInstance: bibliogramInstances[~~(bibliogramInstances.length * Math.random())]
       });
+    } else if (details.reason === 'update') {
+      browser.storage.sync.get(['whitelist', 'exceptions'],
+        result => {
+          if (result.whitelist) {
+            let whitelist = result.whitelist.map(
+              e => e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
+            );
+            browser.storage.sync.set({
+              exceptions: result.exceptions.concat(whitelist),
+              whitelist: null
+            });
+          }
+        }
+      );
     }
   }
 );

manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "Privacy Redirect",
-  "description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
-  "version": "1.1.34",
+  "name": "__MSG_extensionName__",
+  "description": "__MSG_extensionDescription__",
+  "version": "1.1.35",
   "manifest_version": 2,
   "background": {
     "scripts": [
@@ -9,11 +9,12 @@
     ],
     "persistent": true
   },
+  "default_locale": "en",
   "icons": {
-    "16": "images/icon16.png",
-    "32": "images/icon32.png",
-    "48": "images/icon48.png",
-    "128": "images/icon128.png"
+    "16": "assets/images/icon16.png",
+    "32": "assets/images/icon32.png",
+    "48": "assets/images/icon48.png",
+    "128": "assets/images/icon128.png"
   },
   "permissions": [
     "storage",
@@ -25,10 +26,10 @@
     "default_title": "Privacy Redirect",
     "default_popup": "pages/popup/popup.html",
     "default_icon": {
-      "16": "images/icon16.png",
-      "32": "images/icon32.png",
-      "48": "images/icon48.png",
-      "128": "images/icon128.png"
+      "16": "assets/images/icon16.png",
+      "32": "assets/images/icon32.png",
+      "48": "assets/images/icon48.png",
+      "128": "assets/images/icon128.png"
     }
   },
   "content_scripts": [
@@ -41,7 +42,7 @@
         "*://video.twimg.com/*"
       ],
       "js": [
-        "assets/remove-twitter-sw.js"
+        "assets/javascript/remove-twitter-sw.js"
       ],
       "run_at": "document_start"
     },
@@ -64,7 +65,7 @@
         "*://mfqczy4mysscub2s.onio/*n"
       ],
       "js": [
-        "assets/persist-invidious-prefs.js"
+        "assets/javascript/persist-invidious-prefs.js"
       ],
       "run_at": "document_start"
     }

pages/options/options.html

@@ -12,124 +12,136 @@
 <body>
 
   <div class="tab">
-    <button class="tablinks" id="general-tab">General</button>
-    <button class="tablinks" id="advanced-tab">Advanced</button>
-    <button class="tablinks" id="whitelist-tab">Whitelist</button>
+    <button class="tablinks" id="general-tab" data-localize="__MSG_generalTab__">General</button>
+    <button class="tablinks" id="advanced-tab" data-localize="__MSG_advancedTab__">Advanced</button>
+    <button class="tablinks" id="exceptions-tab" data-localize="__MSG_exceptionsTab__">Exceptions</button>
   </div>
 
   <div id="general" class="tabcontent">
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
-        <h1>Nitter Redirects</h1>
-        <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
-        <label for="disable-nitter" class="checkbox-label">
-        </label>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Nitter redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
+              <label for="disable-nitter" class="checkbox-label"></label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Invidious redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
+              <label for="disable-invidious" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Bibliogram redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
+              <label for="disable-bibliogram" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle OpenStreetMap redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
+              <label for="disable-osm" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_nitterInstance__">Nitter Instance</h1>
+      <div class="autocomplete">
+        <input id="nitter-instance" type="url" name="nitter-instance" placeholder="https://nitter.net">
       </div>
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
-        <h1>Invidious Redirects</h1>
-        <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
-        <label for="disable-invidious" class="checkbox-label">
-        </label>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_invidiousInstance__">Invidious Instance</h1>
+      <div class="autocomplete">
+        <input id="invidious-instance" type="url" placeholder="https://invidio.us">
       </div>
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects">
-        <h1>Bibliogram Redirects</h1>
-        <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
-        <label for="disable-bibliogram" class="checkbox-label">
-        </label>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
+      <div class="autocomplete">
+        <input id="bibliogram-instance" type="url" placeholder="https://bibliogram.art">
       </div>
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects">
-        <h1>OpenStreetMap Redirects</h1>
-        <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
-        <label for="disable-osm" class="checkbox-label">
-        </label>
+    <sections class="settings-block">
+      <h1 data-localize="__MSG_osmInstance__">OpenStreetMap Instance</h1>
+      <div class="autocomplete">
+        <input id="osm-instance" type="url" placeholder="https://openstreetmap.org">
       </div>
-    </section>
-
-    <section class="options settings_block">
-      <h1>Nitter Instance</h1>
-      <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
-      <datalist id="nitter-instance-list">
-        <option value="https://nitter.net">
-        <option value="https://nitter.snopyta.org">
-        <option value="https://nitter.42l.fr">
-        <option value="https://nitter.nixnet.services">
-        <option value="https://nitter.13ad.de">
-        <option value="https://nitter.pussthecat.org">
-        <option value="https://nitter.mastodont.cat">
-        <option value="https://nitter.dark.fail">
-        <option value="https://nitter.tedomum.net">
-        <option value="https://t.maisputain.ovh">
-        <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
-        <option value="http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion">
-      </datalist>
-      <h1>Invidious Instance</h1>
-      <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
-      <datalist id="invidious-instances-list">
-        <option value="https://invidio.us">
-        <option value="https://invidious.snopyta.org">
-        <option value="https://invidious.fdn.fr">
-        <option value="https://invidious.13ad.de">
-        <option value="https://watch.nettohikari.com">
-        <option value="https://yewtu.be">
-        <option value="https://yt.maisputain.ovh">
-        <option value="https://invidious.toot.koeln">
-        <option value="https://invidious.ggc-project.de">
-        <option value="http://kgg2m7yk5aybusll.onion">
-        <option value="http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion">
-        <option value="http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion">
-        <option value="http://qklhadlycap4cnod.onion">
-        <option value="http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion">
-        <option value="http://mfqczy4mysscub2s.onion">
-      </datalist>
-      <h1>Bibliogram Instance</h1>
-      <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
-      <datalist id="bibliogram-instance-list">
-        <option value="https://bibliogram.art">
-        <option value="https://bibliogram.snopyta.org">
-        <option value="https://bibliogram.pussthecat.org">
-        <option value="https://bibliogram.nixnet.services">
-        <option value="https://bibliogram.hamster.dance">
-        <option value="https://insta.maisputain.ovh">
-        <option value="https://bibliogram.ggc-project.de">
-      </datalist>
-      <h1>OpenStreetMap Instance</h1>
-      <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
-      <datalist id="osm-instance-list">
-        <option value="https://openstreetmap.org">
-      </datalist>
-    </section>
+    </sections>
   </div>
 
   <div id="advanced" class="tabcontent">
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Always proxy videos through Invidious">
-        <h1>Always proxy videos through Invidious</h1>
-        <input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp;
-        <label for="always-proxy" class="checkbox-label">
-        </label>
-      </div>
+    <section class="settings-block">
+      <table class="option" aria-label="Always proxy videos through Invidious">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_alwaysProxy__">Always proxy videos through Invidious</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp;
+              <label for="always-proxy" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
-        <h1>Only redirect embedded video to Invidious</h1>
-        <input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp;
-        <label for="only-embed" class="checkbox-label">
-        </label>
-      </div>
+    <section class="settings-block">
+      <table class="option" aria-label="Only redirect embedded video to Invidious">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp;
+              <label for="only-embed" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </section>
-
-    <section class="options settings_block">
-      <h1>Invidious Video Quality</h1>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_videoQuality__">Invidious Video Quality</h1>
       <select id="video-quality">
         <option value="">Default</option>
         <option value="hd720">720p</option>
@@ -137,48 +149,138 @@
         <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
       </select>
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Invidious dark mode aways on">
-        <h1>Invidious dark mode always on</h1>
-        <input aria-hidden="true" id="invidious-dark-mode" type="checkbox" checked>&nbsp;
-        <label for="invidious-dark-mode" class="checkbox-label">
-        </label>
-      </div>
+    <section class="settings-block">
+      <table class="option" aria-label="Invidious dark mode aways on">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_invidiousDarkMode__">Invidious dark mode always on</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="invidious-dark-mode" type="checkbox" checked>&nbsp;
+              <label for="invidious-dark-mode" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Persist Invidious preferences">
-        <h1>Persist Invidious preferences (as cookie)</h1>
-        <input aria-hidden="true" id="persist-invidious-prefs" type="checkbox" checked>&nbsp;
-        <label for="persist-invidious-prefs" class="checkbox-label">
-        </label>
-      </div>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_invidiousVolume__">Invidious Volume</h1>
+      <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1">
     </section>
-
-    <section class="options settings_block">
-      <div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
-        <h1>Proactively remove Twitter service worker</h1>
-        <input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
-        <label for="remove-twitter-sw" class="checkbox-label">
-        </label>
-      </div>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_invidiousPlayerStyle__">Invidious Player Style</h1>
+      <select id="invidious-player-style">
+        <option value="invidious">Invidious</option>
+        <option value="youtube">YouTube</option>
+      </select>
+    </section>
+    <section class="settings-block">
+      <h1 data-localize="__MSG_invidiousSubtitles__">Invidious Subtitles - language codes (comma-separated)</h1>
+      <input id="invidious-subtitles" name="invidious-subtitles" type="text">
+    </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Invidious automatically play video on load">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_invidiousAutoplay__">Invidious automatically play video on load</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="invidious-autoplay" type="checkbox" checked>&nbsp;
+              <label for="invidious-autoplay" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Persist Invidious preferences">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_persistInvidiousPrefs__">Persist Invidious preferences (as cookie)</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="persist-invidious-prefs" type="checkbox" checked>&nbsp;
+              <label for="persist-invidious-prefs" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Proactively remove Twitter service worker">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h1>
+            </td>
+            <td>
+              <input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
+              <label for="remove-twitter-sw" class="checkbox-label">
+              </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </section>
   </div>
 
-  <div id="whitelist" class="tabcontent">
-    <section class="options settings_block">
-      <h1>Whitelisted Sites</h1>
-      <div class="whitelist">
-        <input id="new-whitelist-item" type="text" placeholder="URL (RegExp accepted)">
-        <button id="add-to-whitelist">Add to Whitelist</button>
-      </div>
+  <div id="exceptions" class="tabcontent">
+    <section class="settings-block" data-localize="__MSG_exceptionsDescription__">
+      <p>
+        Enter a URL or Regular Expression to be excluded from redirects.
+      </p>
+      <p>
+        All requests for or initiating from a URL that matches your exception
+        will be excluded from redirects.
+      </p>
+      <p>
+        <b>Note -</b> Supports JavaScript regular expressions, excluding
+        the enclosing forward slashes.
+      </p>
     </section>
-    <ul id="whitelist-items"></ul>
+    <section class="settings-block">
+      <table class="exceptions option">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__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>
   </div>
 
   <script src="./options.js"></script>
-
+  <script src="../../assets/javascript/localise.js"></script>
 </body>
 
-</html>
+</html>

pages/options/options.js

@@ -1,5 +1,55 @@
 'use strict';
 
+const nitterInstances = [
+  'https://nitter.net',
+  'https://nitter.snopyta.org',
+  'https://nitter.42l.fr',
+  'https://nitter.nixnet.services',
+  'https://nitter.13ad.de',
+  'https://nitter.pussthecat.org',
+  'https://nitter.mastodont.cat',
+  'https://nitter.dark.fail',
+  'https://nitter.tedomum.net',
+  'https://t.maisputain.ovh',
+  'http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion',
+  'http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion'
+];
+const invidiousInstances = [
+  'https://invidio.us',
+  'https://invidious.snopyta.org',
+  'https://invidious.fdn.fr',
+  'https://invidious.13ad.de',
+  'https://watch.nettohikari.com',
+  'https://yewtu.be',
+  'https://yt.maisputain.ovh',
+  'https://invidious.toot.koeln',
+  'https://invidious.ggc-project.de',
+  'http://kgg2m7yk5aybusll.onion',
+  'http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion',
+  'http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion',
+  'http://qklhadlycap4cnod.onion',
+  'http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion',
+  'http://mfqczy4mysscub2s.onion'
+];
+const bibliogramInstances = [
+  'https://bibliogram.art',
+  'https://bibliogram.snopyta.org',
+  'https://bibliogram.pussthecat.org',
+  'https://bibliogram.nixnet.services',
+  'https://bibliogram.hamster.dance',
+  'https://insta.maisputain.ovh',
+  'https://bibliogram.ggc-project.de'
+];
+const osmInstances = [
+  'https://openstreetmap.org'
+];
+const autocompletes = [
+  { id: 'nitter-instance', instances: nitterInstances },
+  { id: 'invidious-instance', instances: invidiousInstances },
+  { id: 'bibliogram-instance', instances: bibliogramInstances },
+  { id: 'osm-instance', instances: osmInstances }
+];
+
 let nitterInstance = document.getElementById('nitter-instance');
 let invidiousInstance = document.getElementById('invidious-instance');
 let bibliogramInstance = document.getElementById('bibliogram-instance');
@@ -14,24 +64,35 @@ let videoQuality = document.getElementById('video-quality');
 let removeTwitterSW = document.getElementById('remove-twitter-sw');
 let invidiousDarkMode = document.getElementById('invidious-dark-mode');
 let persistInvidiousPrefs = document.getElementById('persist-invidious-prefs');
-let whitelist;
+let invidiousVolume = document.getElementById('invidious-volume');
+let invidiousPlayerStyle = document.getElementById('invidious-player-style');
+let invidiousSubtitles = document.getElementById('invidious-subtitles');
+let invidiousAutoplay = document.getElementById('invidious-autoplay');
+let exceptions;
 
 window.browser = window.browser || window.chrome;
 
-function prependWhitelistItem(item, index) {
+function prependExceptionsItem(item, index) {
   const li = document.createElement('li');
   li.appendChild(document.createTextNode(item.toString()));
   const button = document.createElement('button');
-  button.appendChild(document.createTextNode('X'));
-  button.addEventListener('click', () => {
-    li.remove();
-    whitelist.splice(index, 1);
-    browser.storage.sync.set({
-      whitelist: whitelist
-    });
-  });
   li.appendChild(button);
-  document.getElementById('whitelist-items').prepend(li);
+  document.getElementById('exceptions-items').prepend(li);
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+      <line x1='368' y1='368' x2='144' y2='144'
+        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+      <line x1='368' y1='144' x2='144' y2='368'
+        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+    </svg>`;
+  button.innerHTML = svg;
+  button.addEventListener('click', () => {
+    exceptions.splice(index, 1);
+    browser.storage.sync.set({
+      exceptions: exceptions
+    });
+    li.remove();
+  });
 }
 
 browser.storage.sync.get(
@@ -48,9 +109,13 @@ browser.storage.sync.get(
     'onlyEmbeddedVideo',
     'videoQuality',
     'removeTwitterSW',
-    'whitelist',
     'invidiousDarkMode',
-    'persistInvidiousPrefs'
+    'persistInvidiousPrefs',
+    'invidiousVolume',
+    'invidiousPlayerStyle',
+    'invidiousSubtitles',
+    'invidiousAutoplay',
+    'exceptions'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
@@ -67,8 +132,12 @@ browser.storage.sync.get(
     removeTwitterSW.checked = !result.removeTwitterSW;
     invidiousDarkMode.checked = result.invidiousDarkMode;
     persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
-    whitelist = result.whitelist || [];
-    whitelist.forEach(prependWhitelistItem);
+    exceptions = result.exceptions || [];
+    exceptions.forEach(prependExceptionsItem);
+    invidiousVolume.value = result.invidiousVolume;
+    invidiousPlayerStyle.value = result.invidiousPlayerStyle;
+    invidiousSubtitles.value = result.invidiousSubtitles || '';
+    invidiousAutoplay.checked = !result.invidiousAutoplay;
   }
 );
 
@@ -92,22 +161,27 @@ document.getElementById('general-tab').addEventListener(
 document.getElementById('advanced-tab').addEventListener(
   'click', openTab.bind(null, 'advanced')
 );
-document.getElementById('whitelist-tab').addEventListener(
-  'click', openTab.bind(null, 'whitelist')
+document.getElementById('exceptions-tab').addEventListener(
+  'click', openTab.bind(null, 'exceptions')
 );
 
 document.getElementById('general-tab').click();
 
-function addToWhitelist() {
-  const input = document.getElementById('new-whitelist-item');
+function addToExceptions() {
+  const input = document.getElementById('new-exceptions-item');
+  const type = document.querySelector('input[name="type"]:checked').value;
   if (input.value) {
     try {
+      let value = input.value;
       new RegExp(input.value);
-      const index = whitelist.push(input.value);
-      prependWhitelistItem(input.value, index);
+      if (type === 'URL') {
+        value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+      }
+      exceptions.push(value);
       browser.storage.sync.set({
-        whitelist: whitelist
+        exceptions: exceptions
       });
+      prependExceptionsItem(value, exceptions.indexOf(value));
       input.value = '';
     } catch (error) {
       input.setCustomValidity('Invalid RegExp');
@@ -117,8 +191,8 @@ function addToWhitelist() {
   }
 }
 
-document.getElementById('add-to-whitelist').addEventListener(
-  'click', addToWhitelist
+document.getElementById('add-to-exceptions').addEventListener(
+  'click', addToExceptions
 );
 
 function debounce(func, wait, immediate) {
@@ -231,3 +305,112 @@ invidiousDarkMode.addEventListener('change', event => {
 persistInvidiousPrefs.addEventListener('change', event => {
   browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
 });
+
+let invidiousVolumeChange = debounce(() => {
+  if (invidiousInstance.checkValidity()) {
+    browser.storage.sync.set({
+      invidiousVolume: invidiousVolume.value
+    });
+  }
+}, 500);
+invidiousVolume.addEventListener('input', invidiousVolumeChange);
+
+invidiousPlayerStyle.addEventListener('change', event => {
+  browser.storage.sync.set({
+    invidiousPlayerStyle: event.target.options[invidiousPlayerStyle.selectedIndex].value
+  });
+});
+
+let invidiousSubtitlesChange = debounce(() => {
+  if (invidiousInstance.checkValidity()) {
+    browser.storage.sync.set({
+      invidiousSubtitles: invidiousSubtitles.value
+    });
+  }
+}, 500);
+invidiousSubtitles.addEventListener('input', invidiousSubtitlesChange);
+
+invidiousAutoplay.addEventListener('change', event => {
+  browser.storage.sync.set({ invidiousAutoplay: !event.target.checked });
+});
+
+
+function autocomplete(input, list) {
+  let currentFocus;
+  input.addEventListener("focus", (e) => {
+    showOptions(e);
+  });
+  input.addEventListener("input", (e) => {
+    const val = e.target.value;
+    if (!val) { return false; }
+    currentFocus = -1;
+    showOptions(e);
+  });
+  input.addEventListener("keydown", function (e) {
+    let x = document.getElementById(this.id + "autocomplete-list");
+    if (x) x = x.getElementsByTagName("div");
+    if (e.keyCode == 40) {
+      currentFocus++;
+      addActive(x);
+    } else if (e.keyCode == 38) {
+      currentFocus--;
+      addActive(x);
+    } else if (e.keyCode == 13) {
+      e.preventDefault();
+      if (currentFocus > -1) {
+        if (x) x[currentFocus].click();
+      }
+    }
+  });
+  function showOptions(e) {
+    let a, b, i, val = e.target.value;
+    closeAllLists();
+    a = document.createElement("div");
+    a.setAttribute("id", e.target.id + "autocomplete-list");
+    a.setAttribute("class", "autocomplete-items");
+    e.target.parentNode.appendChild(a);
+    for (i = 0; i < list.length; i++) {
+      if (list[i].toLowerCase().indexOf(val.toLowerCase()) > -1) {
+        b = document.createElement("div");
+        b.innerHTML = "<strong>" + list[i].substr(0, val.length) + "</strong>";
+        b.innerHTML += list[i].substr(val.length);
+        b.innerHTML += "<input type='hidden' value='" + list[i] + "'>";
+        b.addEventListener("click", function (e) {
+          input.value = e.target.getElementsByTagName("input")[0].value;
+          input.dispatchEvent(new Event('input'));
+          closeAllLists();
+        });
+        a.appendChild(b);
+      }
+    }
+  }
+  function addActive(x) {
+    if (!x) return false;
+    removeActive(x);
+    if (currentFocus >= x.length) currentFocus = 0;
+    if (currentFocus < 0) currentFocus = (x.length - 1);
+    x[currentFocus].classList.add("autocomplete-active");
+  }
+  function removeActive(x) {
+    for (let i = 0; i < x.length; i++) {
+      x[i].classList.remove("autocomplete-active");
+    }
+  }
+  function closeAllLists(elmnt) {
+    let x = document.getElementsByClassName("autocomplete-items");
+    for (let i = 0; i < x.length; i++) {
+      if (elmnt != x[i] && elmnt != input) {
+        x[i].parentNode.removeChild(x[i]);
+      }
+    }
+  }
+  document.addEventListener("click", (e) => {
+    if (!autocompletes.find(element => element.id === e.target.id)) {
+      closeAllLists(e.target);
+    }
+  });
+}
+
+autocompletes.forEach((value) => {
+  autocomplete(document.getElementById(value.id), value.instances);
+})

pages/popup/popup.html

@@ -11,107 +11,88 @@
 <body class="popup">
   <header>
     <div class="logo-container">
-      <img src="../../images/icon128.png" alt="Privacy Redirect logo">
-      <h1><span class="privacy">Privacy</span><br>Redirect</h1>
+      <img src="../../assets/images/icon128.png" alt="Privacy Redirect logo">
+      <h1><span data-localize="__MSG_privacy__" class="privacy">Privacy</span><br><span
+          data-localize="__MSG_redirect__">Redirect</span></h1>
     </div>
     <div class="version">
       <span>Version:&nbsp;<span id="version"></span></span>
     </div>
   </header>
 
-  <section class="options settings_block">
-    <div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
-      <h1>Nitter Redirects</h1>
-      <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
-      <label for="disable-nitter" class="checkbox-label">
-      </label>
-    </div>
+  <section class="settings-block">
+    <table class="option" aria-label="Toggle Nitter redirects">
+      <tbody>
+        <tr>
+          <td>
+            <h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
+          </td>
+          <td>
+            <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
+            <label for="disable-nitter" class="checkbox-label"></label>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
-  <section class="options settings_block">
-    <div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
-      <h1>Invidious Redirects</h1>
-      <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
-      <label for="disable-invidious" class="checkbox-label">
-      </label>
-    </div>
+  <section class="settings-block">
+    <table class="option" aria-label="Toggle Invidious redirects">
+      <tbody>
+        <tr>
+          <td>
+            <h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1>
+          </td>
+          <td>
+            <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
+            <label for="disable-invidious" class="checkbox-label">
+            </label>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
-  <section class="options settings_block">
-    <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects">
-      <h1>Bibliogram Redirects</h1>
-      <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
-      <label for="disable-bibliogram" class="checkbox-label">
-      </label>
-    </div>
+  <section class="settings-block">
+    <table class="option" aria-label="Toggle Bibliogram redirects">
+      <tbody>
+        <tr>
+          <td>
+            <h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1>
+          </td>
+          <td>
+            <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
+            <label for="disable-bibliogram" class="checkbox-label">
+            </label>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
-  <section class="options settings_block">
-    <div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects">
-      <h1>OpenStreetMap Redirects</h1>
-      <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
-      <label for="disable-osm" class="checkbox-label">
-      </label>
-    </div>
+  <section class="settings-block">
+    <table class="option" aria-label="Toggle OpenStreetMap redirects">
+      <tbody>
+        <tr>
+          <td>
+            <h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1>
+          </td>
+          <td>
+            <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
+            <label for="disable-osm" class="checkbox-label">
+            </label>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
-  <section class="options settings_block">
-    <h1>Nitter Instance</h1>
-    <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
-    <datalist id="nitter-instance-list">
-      <option value="https://nitter.net">
-      <option value="https://nitter.snopyta.org">
-      <option value="https://nitter.42l.fr">
-      <option value="https://nitter.nixnet.services">
-      <option value="https://nitter.13ad.de">
-      <option value="https://nitter.pussthecat.org">
-      <option value="https://nitter.mastodont.cat">
-      <option value="https://nitter.dark.fail">
-      <option value="https://nitter.tedomum.net">
-      <option value="https://t.maisputain.ovh">
-      <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
-      <option value="http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion">
-    </datalist>
-    <h1>Invidious Instance</h1>
-    <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
-    <datalist id="invidious-instances-list">
-      <option value="https://invidio.us">
-      <option value="https://invidious.snopyta.org">
-      <option value="https://invidious.fdn.fr">
-      <option value="https://invidious.13ad.de">
-      <option value="https://watch.nettohikari.com">
-      <option value="https://yewtu.be">
-      <option value="https://yt.maisputain.ovh">
-      <option value="https://invidious.toot.koeln">
-      <option value="https://invidious.ggc-project.de">
-      <option value="http://kgg2m7yk5aybusll.onion">
-      <option value="http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion">
-      <option value="http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion">
-      <option value="http://qklhadlycap4cnod.onion">
-      <option value="http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion">
-      <option value="http://mfqczy4mysscub2s.onion">
-    </datalist>
-    <h1>Bibliogram Instance</h1>
-    <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
-    <datalist id="bibliogram-instance-list">
-      <option value="https://bibliogram.art">
-      <option value="https://bibliogram.snopyta.org">
-      <option value="https://bibliogram.pussthecat.org">
-      <option value="https://bibliogram.nixnet.services">
-      <option value="https://bibliogram.hamster.dance">
-      <option value="https://insta.maisputain.ovh">
-      <option value="https://bibliogram.ggc-project.de">
-    </datalist>
-    <h1>OpenStreetMap Instance</h1>
-    <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
-    <datalist id="osm-instance-list">
-      <option value="https://openstreetmap.org">
-    </datalist>
+  <section class="settings-block">
   </section>
 
   <footer>
     <a class="button" id="more-options">
-      <span>More Options&nbsp;</span>
+      <span data-localize="__MSG_moreOptions__">More Options&nbsp;</span>
       <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
         <path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48'
           style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
@@ -124,7 +105,7 @@
   </footer>
 
   <script src="./popup.js"></script>
-
+  <script src="../../assets/javascript/localise.js"></script>
 </body>
 
 </html>

pages/popup/popup.js

@@ -1,9 +1,5 @@
 'use strict';
 
-let nitterInstance = document.querySelector('#nitter-instance');
-let invidiousInstance = document.querySelector('#invidious-instance');
-let bibliogramInstance = document.querySelector('#bibliogram-instance');
-let osmInstance = document.querySelector('#osm-instance');
 let disableNitter = document.querySelector('#disable-nitter');
 let disableInvidious = document.querySelector('#disable-invidious');
 let disableBibliogram = document.querySelector('#disable-bibliogram');
@@ -14,20 +10,12 @@ window.browser = window.browser || window.chrome;
 
 browser.storage.sync.get(
   [
-    'nitterInstance',
-    'invidiousInstance',
-    'bibliogramInstance',
-    'osmInstance',
     'disableNitter',
     'disableInvidious',
     'disableBibliogram',
     'disableOsm'
   ],
   result => {
-    nitterInstance.value = result.nitterInstance || '';
-    invidiousInstance.value = result.invidiousInstance || '';
-    bibliogramInstance.value = result.bibliogramInstance || '';
-    osmInstance.value = result.osmInstance || '';
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
@@ -37,75 +25,6 @@ browser.storage.sync.get(
 
 version.textContent = browser.runtime.getManifest().version;
 
-function debounce(func, wait, immediate) {
-  let timeout;
-  return () => {
-    let context = this, args = arguments;
-    let later = () => {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    let callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-};
-
-function parseURL(urlString) {
-  if (urlString) {
-    try {
-      const url = new URL(urlString);
-      if (url.username && url.password) {
-        return `${url.protocol}//${url.username}:${url.password}@${url.host}`
-      } else {
-        return url.origin;
-      }
-    } catch (error) {
-      console.log(error);
-      return '';
-    }
-  } else {
-    return '';
-  }
-}
-
-let nitterInstanceChange = debounce(() => {
-  if (nitterInstance.checkValidity()) {
-    browser.storage.sync.set({
-      nitterInstance: parseURL(nitterInstance.value)
-    });
-  }
-}, 500);
-nitterInstance.addEventListener('input', nitterInstanceChange);
-
-let invidiousInstanceChange = debounce(() => {
-  if (invidiousInstance.checkValidity()) {
-    browser.storage.sync.set({
-      invidiousInstance: parseURL(invidiousInstance.value)
-    });
-  }
-}, 500);
-invidiousInstance.addEventListener('input', invidiousInstanceChange);
-
-let bibliogramInstanceChange = debounce(() => {
-  if (bibliogramInstance.checkValidity()) {
-    browser.storage.sync.set({
-      bibliogramInstance: parseURL(bibliogramInstance.value)
-    });
-  }
-}, 500);
-bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
-
-let osmInstanceChange = debounce(() => {
-  if (osmInstance.checkValidity()) {
-    browser.storage.sync.set({
-      osmInstance: parseURL(osmInstance.value)
-    });
-  }
-}, 500);
-osmInstance.addEventListener('input', osmInstanceChange);
-
 disableNitter.addEventListener('change', event => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });

pages/styles.css

@@ -75,7 +75,7 @@ header .version {
 
 h1 {
   font-size: 14px;
-  margin: var(--space) auto;
+  margin: 7px auto;
 }
 
 i {
@@ -122,7 +122,18 @@ input[type=checkbox] {
   opacity: 0;
 }
 
+input[type=radio] {
+  appearance: radio;
+  -moz-appearance: radio;
+  -webkit-appearance: radio;
+}
+
+input[type=radio]:checked+label {
+  background: transparent;
+}
+
 .checkbox-label {
+  margin-left: 5px;
   background: grey;
   border-radius: 25px;
   color: var(--text-main);
@@ -156,12 +167,12 @@ input:checked+label:after {
   transform: translateX(-100%);
 }
 
-.settings_block {
+.settings-block {
   display: block;
-  padding: 10px 1em 1em 1em;
+  padding: 5px 10px 5px 10px;
 }
 
-.settings_block h1 {
+.settings-block h1 {
   float: left;
 }
 
@@ -243,32 +254,37 @@ input:invalid {
   min-height: 510px;
 }
 
-div.whitelist {
+div.exceptions {
   clear: left;
 }
 
-div.whitelist > input {
+div.exceptions > input {
   width: 240px;
   float: left;
 }
 
-#add-to-whitelist {
-  width: 120px;
+#add-to-exceptions {
   float: right;
   border: var(--active) solid 1px;
   background-color: var(--active);
   color: var(--text-main);
   font-weight: bold;
   cursor: pointer;
-  border-radius: 25px;
+  border-radius: 50%;
+  padding: 1px 1px 0px 1px;
+  margin-right: 5px;
+}
+
+#add-to-exceptions svg {
+  height: 20px;
+  width: 20px;
 }
 
 ul {
   padding: 0;
   list-style-type: none;
   color: var(--text-main);
-  margin-right: 20px;
-  margin-left: 20px;
+  margin: 20px 20px 0 20px;
 }
 
 li {
@@ -276,7 +292,7 @@ li {
   padding: 20px 0px 20px 20px;
 }
 
-#whitelist-items button {
+#exceptions-items button {
   float: right;
   margin-right: -5px;
   border: var(--active) solid 1px;
@@ -285,6 +301,7 @@ li {
   font-weight: bold;
   cursor: pointer;
   border-radius: 50%;
+  padding: 2px 2px 0px 2px;
 }
 
 .button svg {
@@ -292,6 +309,109 @@ li {
   width: 18px;
 }
 
+.autocomplete {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.autocomplete input {
+  background: url(../assets/images/chevron-down.svg) right no-repeat;
+}
+
+.autocomplete-items {
+  position: absolute;
+  border: 1px solid var(--dark);
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  top: 100%;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  max-height: 175px;
+}
+
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: var(--darker);
+  border-bottom: 1px solid var(--dark);
+}
+
+.autocomplete-items div:hover {
+  background-color: var(--active);
+}
+
+.autocomplete-active {
+  background-color: var(--active);
+  color: var(--lighter);
+}
+
+.option {
+  width: 100%;
+}
+
+.option td {
+  vertical-align: middle;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+  margin: 18px 0;
+  width: 100%;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: var(--light);
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 36px;
+  width: 16px;
+  border-radius: 3px;
+  background: var(--active);
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -14px;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: var(--light);
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: var(--light);
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 36px;
+  width: 16px;
+  border-radius: 3px;
+  background: var(--active);
+  cursor: pointer;
+}
+
 @media (prefers-color-scheme: dark) {
 
   body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
@@ -311,7 +431,6 @@ li {
     color: var(--text-main);
     opacity: 0.7;
   }
-
 }
 
 @media (prefers-color-scheme: light) {
@@ -347,4 +466,8 @@ li {
   button.tablinks.active {
     border-bottom: solid 1px var(--lighter);
   }
+
+  .autocomplete-items div {
+    background-color: var(--light);
+  }
 }

web-ext-config.js

@@ -2,6 +2,8 @@ module.exports = {
   ignoreFiles: [
     'images/Screen*.png',
     'images/small-tile.png',
-    'buy-me-a-coffee.png'
+    'buy-me-a-coffee.png',
+    'logo*.png',
+    '*-badge.png'
   ],
 };