From 8bdaa8ae72d69a6fc22d7bec6ed5f55665343f41 Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Sun, 31 May 2020 10:26:15 +1000
Subject: Fixes #58 - No longer host YT JS assets

---
 pages/styles.css | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'pages/styles.css')

diff --git a/pages/styles.css b/pages/styles.css
index 17b5f7f7..c00add43 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -137,7 +137,7 @@ input[type=checkbox] {
 }
 
 .checkbox-label:after {
-  background: #fff;
+  background: var(--text-main);
   border-radius: 90px;
   content: '';
   height: 20px;
@@ -168,6 +168,7 @@ input:checked+label:after {
 .button {
   border: var(--active) solid 1px;
   color: var(--text-main);
+  stroke: var(--text-main);
   display: block;
   font-size: 12px;
   font-weight: bold;
@@ -186,7 +187,8 @@ input:checked+label:after {
 
 .button:hover {
   background-color: var(--active);
-  color: #fff;
+  color: var(--text-main);
+  stroke: var(--text-main);
 }
 
 .button:active {
@@ -237,7 +239,6 @@ input:invalid {
 .tabcontent {
   padding-top: 10px;
   display: none;
-  border: solid 1px var(--dark);
   background-color: var(--dark);
   min-height: 510px;
 }
@@ -286,6 +287,11 @@ li {
   border-radius: 50%;
 }
 
+.button svg {
+  height: 18px;
+  width: 18px;
+}
+
 @media (prefers-color-scheme: dark) {
 
   body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
@@ -321,6 +327,7 @@ li {
 
   a.button {
     color: var(--text-secondary);
+    stroke: var(--text-secondary);
   }
 
   button.tablinks {
@@ -333,4 +340,11 @@ li {
     opacity: 0.7;
   }
 
+  .tab button {
+    border-bottom: solid 1px var(--light);
+  }
+
+  button.tablinks.active {
+    border-bottom: solid 1px var(--lighter);
+  }
 }
-- 
cgit 1.4.1


From 0892d0c30ac973b2f01eb678af88f4dd0fc8531b Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Mon, 8 Jun 2020 11:50:12 +1000
Subject: Closes #64, closes #38 - Fix whitelist & Twitter `/home` exception

---
 README.md                   |  2 +-
 assets/remove-twitter-sw.js | 21 +++++++++++++++++++--
 background.js               | 25 +++++++++++++------------
 manifest.json               |  2 +-
 pages/styles.css            |  2 +-
 5 files changed, 35 insertions(+), 17 deletions(-)

(limited to 'pages/styles.css')

diff --git a/README.md b/README.md
index 2bb6c3a1..e5ee60f5 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Allows for setting custom [Nitter](https://github.com/zedeus/nitter/wiki/Instanc
 ## Build
 
 1.  `npm install --global web-ext`
-2.  `web-ext build`
+2.  `web-ext build --overwrite-dest`
 3.  See `web-ext-artifacts/` for outputs.
 
 ## License
diff --git a/assets/remove-twitter-sw.js b/assets/remove-twitter-sw.js
index 37200f1a..d1b30637 100644
--- a/assets/remove-twitter-sw.js
+++ b/assets/remove-twitter-sw.js
@@ -4,9 +4,23 @@ const nitterDefault = 'https://nitter.net';
 
 let disableNitter;
 let nitterInstance;
+let redirectBypassFlag;
+let whitelist;
 
 window.browser = window.browser || window.chrome;
 
+function isNotWhitelisted(url) {
+  return !whitelist.some(regex => (regex.test(url.href)));
+}
+
+function shouldRedirect(url) {
+  return !redirectBypassFlag &&
+    isNotWhitelisted(url) &&
+    !disableNitter &&
+    url.host !== nitterInstance &&
+    !url.pathname.includes('/home');
+}
+
 function redirectTwitter(url) {
   if (url.host.split('.')[0] === 'pbs') {
     return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
@@ -20,13 +34,16 @@ function redirectTwitter(url) {
 browser.storage.sync.get(
   ['nitterInstance', 'disableNitter', 'removeTwitterSW', 'redirectBypassFlag'],
   (result) => {
-    const redirectBypassFlag = result.redirectBypassFlag;
+    redirectBypassFlag = result.redirectBypassFlag;
     browser.storage.sync.set({
       redirectBypassFlag: false
     });
     if (!result.removeTwitterSW) {
       disableNitter = result.disableNitter;
       nitterInstance = result.nitterInstance || nitterDefault;
+      whitelist = result.whitelist ? result.whitelist.map(e => {
+        return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
+      }) : [];
       navigator.serviceWorker.getRegistrations().then(registrations => {
         for (let registration of registrations) {
           if (registration.scope === 'https://twitter.com/') {
@@ -36,7 +53,7 @@ browser.storage.sync.get(
         }
       });
       const url = new URL(window.location);
-      if (!redirectBypassFlag && !disableNitter && url.host !== nitterInstance && !url.pathname.includes('/home')) {
+      if (shouldRedirect()) {
         const redirect = redirectTwitter(url);
         console.info(
           'Redirecting', `"${url.href}"`, '=>', `"${redirect}"`
diff --git a/background.js b/background.js
index f3a50cf6..5810f42a 100644
--- a/background.js
+++ b/background.js
@@ -86,7 +86,6 @@ let onlyEmbeddedVideo;
 let videoQuality;
 let invidiousDarkMode;
 let whitelist;
-let redirectBypassFlag;
 
 window.browser = window.browser || window.chrome;
 
@@ -119,7 +118,9 @@ browser.storage.sync.get(
     onlyEmbeddedVideo = result.onlyEmbeddedVideo;
     videoQuality = result.videoQuality;
     invidiousDarkMode = result.invidiousDarkMode;
-    whitelist = result.whitelist ? result.whitelist.map(e => new RegExp(e)) : [];
+    whitelist = result.whitelist ? result.whitelist.map(e => {
+      return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
+    }) : [];
   }
 );
 
@@ -161,10 +162,9 @@ browser.storage.onChanged.addListener(changes => {
     invidiousDarkMode = changes.invidiousDarkMode.newValue;
   }
   if ('whitelist' in changes) {
-    whitelist = changes.whitelist.newValue.map(e => new RegExp(e));
-  }
-  if ('redirectBypassFlag' in changes) {
-    redirectBypassFlag = changes.redirectBypassFlag.newValue;
+    whitelist = changes.whitelist.newValue.map(e => {
+      return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
+    });
   }
 });
 
@@ -194,8 +194,9 @@ function addressToLatLng(address, callback) {
   xmlhttp.send();
 }
 
-function isWhitelisted(initiator) {
-  return initiator && whitelist.some(regex => (regex.test(initiator.href)));
+function isWhitelisted(url, initiator) {
+  return whitelist.some(regex => (regex.test(url.href))) ||
+    (initiator && whitelist.some(regex => (regex.test(initiator.href))));
 }
 
 function isFirefox() {
@@ -203,7 +204,7 @@ function isFirefox() {
 }
 
 function redirectYouTube(url, initiator, type) {
-  if (disableInvidious || isWhitelisted(initiator)) {
+  if (disableInvidious || isWhitelisted(url, initiator)) {
     return null;
   }
   if (initiator && (initiator.origin === invidiousInstance || youtubeDomains.includes(initiator.host))) {
@@ -234,7 +235,7 @@ function redirectYouTube(url, initiator, type) {
 }
 
 function redirectTwitter(url, initiator) {
-  if (disableNitter || isWhitelisted(initiator)) {
+  if (disableNitter || isWhitelisted(url, initiator)) {
     return null;
   }
   if (url.pathname.includes('/home')) {
@@ -258,7 +259,7 @@ function redirectTwitter(url, initiator) {
 }
 
 function redirectInstagram(url, initiator, type) {
-  if (disableBibliogram || isWhitelisted(initiator)) {
+  if (disableBibliogram || isWhitelisted(url, initiator)) {
     return null;
   }
   // Do not redirect Bibliogram view on Instagram links
@@ -278,7 +279,7 @@ function redirectInstagram(url, initiator, type) {
 }
 
 function redirectGoogleMaps(url, initiator) {
-  if (disableOsm || isWhitelisted(initiator)) {
+  if (disableOsm || isWhitelisted(url, initiator)) {
     return null;
   }
   let redirect;
diff --git a/manifest.json b/manifest.json
index 542c81cc..b34cfc77 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Privacy Redirect",
   "description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
-  "version": "1.1.33",
+  "version": "1.1.34",
   "manifest_version": 2,
   "background": {
     "scripts": [
diff --git a/pages/styles.css b/pages/styles.css
index c00add43..d9a7e5df 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -316,7 +316,7 @@ li {
 
 @media (prefers-color-scheme: light) {
 
-  body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
+  body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active, ul {
     background-color: var(--lighter);
     color: var(--text-secondary);
   }
-- 
cgit 1.4.1


From 745c5babcf9104924631185b2ea3f235c45d270a Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Sun, 12 Jul 2020 11:26:48 +1000
Subject: 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                                    |   7 +-
 _locales/en/messages.json                    |  98 +++++++
 _locales/fr/messages.json                    |  98 +++++++
 assets/images/Screen Shot Chrome 1.png       | Bin 0 -> 495422 bytes
 assets/images/Screen Shot Chrome 2.png       | Bin 0 -> 882289 bytes
 assets/images/Screen Shot Chrome 3.png       | Bin 0 -> 313416 bytes
 assets/images/Screen Shot Chrome 4.png       | Bin 0 -> 1264130 bytes
 assets/images/Screen Shot Chrome 5.png       | Bin 0 -> 320255 bytes
 assets/images/Screen Shot FF 1.png           | Bin 0 -> 696755 bytes
 assets/images/Screen Shot FF 2.png           | Bin 0 -> 3036251 bytes
 assets/images/Screen Shot FF 3.png           | Bin 0 -> 530328 bytes
 assets/images/Screen Shot FF 4.png           | Bin 0 -> 3646768 bytes
 assets/images/Screen Shot FF 5.png           | Bin 0 -> 542853 bytes
 assets/images/amo-badge.png                  | Bin 0 -> 2827 bytes
 assets/images/buy-me-a-coffee.png            | Bin 0 -> 5008 bytes
 assets/images/chevron-down.svg               |   3 +
 assets/images/chrome-badge.png               | Bin 0 -> 3762 bytes
 assets/images/icon128.png                    | Bin 0 -> 3197 bytes
 assets/images/icon16.png                     | Bin 0 -> 976 bytes
 assets/images/icon32.png                     | Bin 0 -> 1983 bytes
 assets/images/icon48.png                     | Bin 0 -> 1063 bytes
 assets/images/logo-small.png                 | Bin 0 -> 22050 bytes
 assets/images/logo.png                       | Bin 0 -> 39876 bytes
 assets/images/small-tile.png                 | Bin 0 -> 35583 bytes
 assets/javascript/localise.js                |  19 ++
 assets/javascript/persist-invidious-prefs.js |  30 +++
 assets/javascript/remove-twitter-sw.js       |  71 +++++
 assets/persist-invidious-prefs.js            |  30 ---
 assets/remove-twitter-sw.js                  |  65 -----
 background.js                                |  85 ++++--
 images/Screen Shot Chrome 1.png              | Bin 495422 -> 0 bytes
 images/Screen Shot Chrome 2.png              | Bin 882289 -> 0 bytes
 images/Screen Shot Chrome 3.png              | Bin 313416 -> 0 bytes
 images/Screen Shot Chrome 4.png              | Bin 1264130 -> 0 bytes
 images/Screen Shot Chrome 5.png              | Bin 320255 -> 0 bytes
 images/Screen Shot FF 1.png                  | Bin 696755 -> 0 bytes
 images/Screen Shot FF 2.png                  | Bin 3036251 -> 0 bytes
 images/Screen Shot FF 3.png                  | Bin 530328 -> 0 bytes
 images/Screen Shot FF 4.png                  | Bin 3646768 -> 0 bytes
 images/Screen Shot FF 5.png                  | Bin 542853 -> 0 bytes
 images/buy-me-a-coffee.png                   | Bin 5008 -> 0 bytes
 images/icon128.png                           | Bin 3197 -> 0 bytes
 images/icon16.png                            | Bin 976 -> 0 bytes
 images/icon32.png                            | Bin 1983 -> 0 bytes
 images/icon48.png                            | Bin 1063 -> 0 bytes
 images/logo.png                              | Bin 39876 -> 0 bytes
 images/small-tile.png                        | Bin 35583 -> 0 bytes
 manifest.json                                |  27 +-
 pages/options/options.html                   | 376 +++++++++++++++++----------
 pages/options/options.js                     | 225 ++++++++++++++--
 pages/popup/popup.html                       | 149 +++++------
 pages/popup/popup.js                         |  81 ------
 pages/styles.css                             | 149 ++++++++++-
 web-ext-config.js                            |   4 +-
 54 files changed, 1051 insertions(+), 466 deletions(-)
 create mode 100644 _locales/en/messages.json
 create mode 100644 _locales/fr/messages.json
 create mode 100644 assets/images/Screen Shot Chrome 1.png
 create mode 100644 assets/images/Screen Shot Chrome 2.png
 create mode 100644 assets/images/Screen Shot Chrome 3.png
 create mode 100644 assets/images/Screen Shot Chrome 4.png
 create mode 100644 assets/images/Screen Shot Chrome 5.png
 create mode 100644 assets/images/Screen Shot FF 1.png
 create mode 100644 assets/images/Screen Shot FF 2.png
 create mode 100644 assets/images/Screen Shot FF 3.png
 create mode 100644 assets/images/Screen Shot FF 4.png
 create mode 100644 assets/images/Screen Shot FF 5.png
 create mode 100644 assets/images/amo-badge.png
 create mode 100644 assets/images/buy-me-a-coffee.png
 create mode 100644 assets/images/chevron-down.svg
 create mode 100644 assets/images/chrome-badge.png
 create mode 100644 assets/images/icon128.png
 create mode 100644 assets/images/icon16.png
 create mode 100644 assets/images/icon32.png
 create mode 100644 assets/images/icon48.png
 create mode 100644 assets/images/logo-small.png
 create mode 100644 assets/images/logo.png
 create mode 100644 assets/images/small-tile.png
 create mode 100644 assets/javascript/localise.js
 create mode 100644 assets/javascript/persist-invidious-prefs.js
 create mode 100644 assets/javascript/remove-twitter-sw.js
 delete mode 100644 assets/persist-invidious-prefs.js
 delete mode 100644 assets/remove-twitter-sw.js
 delete mode 100644 images/Screen Shot Chrome 1.png
 delete mode 100644 images/Screen Shot Chrome 2.png
 delete mode 100644 images/Screen Shot Chrome 3.png
 delete mode 100644 images/Screen Shot Chrome 4.png
 delete mode 100644 images/Screen Shot Chrome 5.png
 delete mode 100644 images/Screen Shot FF 1.png
 delete mode 100644 images/Screen Shot FF 2.png
 delete mode 100644 images/Screen Shot FF 3.png
 delete mode 100644 images/Screen Shot FF 4.png
 delete mode 100644 images/Screen Shot FF 5.png
 delete mode 100644 images/buy-me-a-coffee.png
 delete mode 100644 images/icon128.png
 delete mode 100644 images/icon16.png
 delete mode 100644 images/icon32.png
 delete mode 100644 images/icon48.png
 delete mode 100644 images/logo.png
 delete mode 100644 images/small-tile.png

(limited to 'pages/styles.css')

diff --git a/README.md b/README.md
index e5ee60f5..29ccd7b6 100644
--- a/README.md
+++ b/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/).
 
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
new file mode 100644
index 00000000..2a34b8b7
--- /dev/null
+++ b/_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)."
+  }
+}
\ No newline at end of file
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
new file mode 100644
index 00000000..fe2eaaf6
--- /dev/null
+++ b/_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)."
+  }
+}
\ No newline at end of file
diff --git a/assets/images/Screen Shot Chrome 1.png b/assets/images/Screen Shot Chrome 1.png
new file mode 100644
index 00000000..65e18e2a
Binary files /dev/null and b/assets/images/Screen Shot Chrome 1.png differ
diff --git a/assets/images/Screen Shot Chrome 2.png b/assets/images/Screen Shot Chrome 2.png
new file mode 100644
index 00000000..7bb98a4a
Binary files /dev/null and b/assets/images/Screen Shot Chrome 2.png differ
diff --git a/assets/images/Screen Shot Chrome 3.png b/assets/images/Screen Shot Chrome 3.png
new file mode 100644
index 00000000..3a4fbd35
Binary files /dev/null and b/assets/images/Screen Shot Chrome 3.png differ
diff --git a/assets/images/Screen Shot Chrome 4.png b/assets/images/Screen Shot Chrome 4.png
new file mode 100644
index 00000000..8954e923
Binary files /dev/null and b/assets/images/Screen Shot Chrome 4.png differ
diff --git a/assets/images/Screen Shot Chrome 5.png b/assets/images/Screen Shot Chrome 5.png
new file mode 100644
index 00000000..bf0ffa08
Binary files /dev/null and b/assets/images/Screen Shot Chrome 5.png differ
diff --git a/assets/images/Screen Shot FF 1.png b/assets/images/Screen Shot FF 1.png
new file mode 100644
index 00000000..e4be8989
Binary files /dev/null and b/assets/images/Screen Shot FF 1.png differ
diff --git a/assets/images/Screen Shot FF 2.png b/assets/images/Screen Shot FF 2.png
new file mode 100644
index 00000000..018789a3
Binary files /dev/null and b/assets/images/Screen Shot FF 2.png differ
diff --git a/assets/images/Screen Shot FF 3.png b/assets/images/Screen Shot FF 3.png
new file mode 100644
index 00000000..90d28bda
Binary files /dev/null and b/assets/images/Screen Shot FF 3.png differ
diff --git a/assets/images/Screen Shot FF 4.png b/assets/images/Screen Shot FF 4.png
new file mode 100644
index 00000000..f83e8f29
Binary files /dev/null and b/assets/images/Screen Shot FF 4.png differ
diff --git a/assets/images/Screen Shot FF 5.png b/assets/images/Screen Shot FF 5.png
new file mode 100644
index 00000000..fc821639
Binary files /dev/null and b/assets/images/Screen Shot FF 5.png differ
diff --git a/assets/images/amo-badge.png b/assets/images/amo-badge.png
new file mode 100644
index 00000000..9cb49bba
Binary files /dev/null and b/assets/images/amo-badge.png differ
diff --git a/assets/images/buy-me-a-coffee.png b/assets/images/buy-me-a-coffee.png
new file mode 100644
index 00000000..1bb2ad61
Binary files /dev/null and b/assets/images/buy-me-a-coffee.png differ
diff --git a/assets/images/chevron-down.svg b/assets/images/chevron-down.svg
new file mode 100644
index 00000000..7679f267
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/assets/images/chrome-badge.png b/assets/images/chrome-badge.png
new file mode 100644
index 00000000..4e48b8a6
Binary files /dev/null and b/assets/images/chrome-badge.png differ
diff --git a/assets/images/icon128.png b/assets/images/icon128.png
new file mode 100644
index 00000000..ccd689cc
Binary files /dev/null and b/assets/images/icon128.png differ
diff --git a/assets/images/icon16.png b/assets/images/icon16.png
new file mode 100644
index 00000000..1c510cb7
Binary files /dev/null and b/assets/images/icon16.png differ
diff --git a/assets/images/icon32.png b/assets/images/icon32.png
new file mode 100644
index 00000000..d001aab6
Binary files /dev/null and b/assets/images/icon32.png differ
diff --git a/assets/images/icon48.png b/assets/images/icon48.png
new file mode 100644
index 00000000..4ddd22eb
Binary files /dev/null and b/assets/images/icon48.png differ
diff --git a/assets/images/logo-small.png b/assets/images/logo-small.png
new file mode 100644
index 00000000..09e50d18
Binary files /dev/null and b/assets/images/logo-small.png differ
diff --git a/assets/images/logo.png b/assets/images/logo.png
new file mode 100644
index 00000000..ecb3e381
Binary files /dev/null and b/assets/images/logo.png differ
diff --git a/assets/images/small-tile.png b/assets/images/small-tile.png
new file mode 100644
index 00000000..a3ed077b
Binary files /dev/null and b/assets/images/small-tile.png differ
diff --git a/assets/javascript/localise.js b/assets/javascript/localise.js
new file mode 100644
index 00000000..e408025d
--- /dev/null
+++ b/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();
\ No newline at end of file
diff --git a/assets/javascript/persist-invidious-prefs.js b/assets/javascript/persist-invidious-prefs.js
new file mode 100644
index 00000000..4c13a310
--- /dev/null
+++ b/assets/javascript/persist-invidious-prefs.js
@@ -0,0 +1,30 @@
+'use strict';
+
+window.browser = window.browser || window.chrome;
+
+function getCookie() {
+  let ca = document.cookie.split(';');
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+    if (c.indexOf('PREFS=') == 0) {
+      return JSON.parse(
+        decodeURIComponent(c.substring('PREFS='.length, c.length))
+      )
+    };
+  }
+  return {};
+}
+
+browser.storage.sync.get(
+  ['alwaysProxy', 'videoQuality', 'invidiousDarkMode', 'persistInvidiousPrefs'],
+  (result) => {
+    if (result.persistInvidiousPrefs) {
+      const prefs = getCookie();
+      prefs.local = result.alwaysProxy;
+      prefs.quality = result.videoQuality;
+      prefs.dark_mode = result.invidiousDarkMode;
+      document.cookie = `PREFS=${encodeURIComponent(JSON.stringify(prefs))}`;
+    }
+  }
+);
\ No newline at end of file
diff --git a/assets/javascript/remove-twitter-sw.js b/assets/javascript/remove-twitter-sw.js
new file mode 100644
index 00000000..d9d3ce3e
--- /dev/null
+++ b/assets/javascript/remove-twitter-sw.js
@@ -0,0 +1,71 @@
+'use strict';
+
+const nitterDefault = 'https://nitter.net';
+
+let disableNitter;
+let nitterInstance;
+let redirectBypassFlag;
+let exceptions;
+
+window.browser = window.browser || window.chrome;
+
+function isNotException(url) {
+  return !exceptions.some(regex => (regex.test(url.href)));
+}
+
+function shouldRedirect(url) {
+  return !redirectBypassFlag &&
+    isNotException(url) &&
+    !disableNitter &&
+    url.host !== nitterInstance &&
+    !url.pathname.includes('/home');
+}
+
+function redirectTwitter(url) {
+  if (url.host.split('.')[0] === 'pbs') {
+    return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
+  } else if (url.host.split('.')[0] === 'video') {
+    return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
+  } else {
+    return `${nitterInstance}${url.pathname}${url.search}`;
+  };
+}
+
+browser.storage.sync.get(
+  [
+    'nitterInstance',
+    'disableNitter',
+    'removeTwitterSW',
+    'redirectBypassFlag',
+    'exceptions'
+  ],
+  (result) => {
+    redirectBypassFlag = result.redirectBypassFlag;
+    browser.storage.sync.set({
+      redirectBypassFlag: false
+    });
+    if (!result.removeTwitterSW) {
+      disableNitter = result.disableNitter;
+      nitterInstance = result.nitterInstance || nitterDefault;
+      exceptions = result.exceptions ? result.exceptions.map(e => {
+        return new RegExp(e);
+      }) : [];
+      navigator.serviceWorker.getRegistrations().then(registrations => {
+        for (let registration of registrations) {
+          if (registration.scope === 'https://twitter.com/') {
+            registration.unregister();
+            console.log('Unregistered Twitter SW', registration);
+          }
+        }
+      });
+      const url = new URL(window.location);
+      if (shouldRedirect()) {
+        const redirect = redirectTwitter(url);
+        console.info(
+          'Redirecting', `"${url.href}"`, '=>', `"${redirect}"`
+        );
+        window.location = redirect;
+      }
+    }
+  }
+);
diff --git a/assets/persist-invidious-prefs.js b/assets/persist-invidious-prefs.js
deleted file mode 100644
index 4c13a310..00000000
--- a/assets/persist-invidious-prefs.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-window.browser = window.browser || window.chrome;
-
-function getCookie() {
-  let ca = document.cookie.split(';');
-  for (let i = 0; i < ca.length; i++) {
-    let c = ca[i];
-    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
-    if (c.indexOf('PREFS=') == 0) {
-      return JSON.parse(
-        decodeURIComponent(c.substring('PREFS='.length, c.length))
-      )
-    };
-  }
-  return {};
-}
-
-browser.storage.sync.get(
-  ['alwaysProxy', 'videoQuality', 'invidiousDarkMode', 'persistInvidiousPrefs'],
-  (result) => {
-    if (result.persistInvidiousPrefs) {
-      const prefs = getCookie();
-      prefs.local = result.alwaysProxy;
-      prefs.quality = result.videoQuality;
-      prefs.dark_mode = result.invidiousDarkMode;
-      document.cookie = `PREFS=${encodeURIComponent(JSON.stringify(prefs))}`;
-    }
-  }
-);
\ No newline at end of file
diff --git a/assets/remove-twitter-sw.js b/assets/remove-twitter-sw.js
deleted file mode 100644
index d1b30637..00000000
--- a/assets/remove-twitter-sw.js
+++ /dev/null
@@ -1,65 +0,0 @@
-'use strict';
-
-const nitterDefault = 'https://nitter.net';
-
-let disableNitter;
-let nitterInstance;
-let redirectBypassFlag;
-let whitelist;
-
-window.browser = window.browser || window.chrome;
-
-function isNotWhitelisted(url) {
-  return !whitelist.some(regex => (regex.test(url.href)));
-}
-
-function shouldRedirect(url) {
-  return !redirectBypassFlag &&
-    isNotWhitelisted(url) &&
-    !disableNitter &&
-    url.host !== nitterInstance &&
-    !url.pathname.includes('/home');
-}
-
-function redirectTwitter(url) {
-  if (url.host.split('.')[0] === 'pbs') {
-    return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
-  } else if (url.host.split('.')[0] === 'video') {
-    return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
-  } else {
-    return `${nitterInstance}${url.pathname}${url.search}`;
-  };
-}
-
-browser.storage.sync.get(
-  ['nitterInstance', 'disableNitter', 'removeTwitterSW', 'redirectBypassFlag'],
-  (result) => {
-    redirectBypassFlag = result.redirectBypassFlag;
-    browser.storage.sync.set({
-      redirectBypassFlag: false
-    });
-    if (!result.removeTwitterSW) {
-      disableNitter = result.disableNitter;
-      nitterInstance = result.nitterInstance || nitterDefault;
-      whitelist = result.whitelist ? result.whitelist.map(e => {
-        return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
-      }) : [];
-      navigator.serviceWorker.getRegistrations().then(registrations => {
-        for (let registration of registrations) {
-          if (registration.scope === 'https://twitter.com/') {
-            registration.unregister();
-            console.log('Unregistered Twitter SW', registration);
-          }
-        }
-      });
-      const url = new URL(window.location);
-      if (shouldRedirect()) {
-        const redirect = redirectTwitter(url);
-        console.info(
-          'Redirecting', `"${url.href}"`, '=>', `"${redirect}"`
-        );
-        window.location = redirect;
-      }
-    }
-  }
-);
diff --git a/background.js b/background.js
index 5810f42a..021ccbb0 100644
--- a/background.js
+++ b/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
+            });
+          }
+        }
+      );
     }
   }
 );
diff --git a/images/Screen Shot Chrome 1.png b/images/Screen Shot Chrome 1.png
deleted file mode 100644
index 65e18e2a..00000000
Binary files a/images/Screen Shot Chrome 1.png and /dev/null differ
diff --git a/images/Screen Shot Chrome 2.png b/images/Screen Shot Chrome 2.png
deleted file mode 100644
index 7bb98a4a..00000000
Binary files a/images/Screen Shot Chrome 2.png and /dev/null differ
diff --git a/images/Screen Shot Chrome 3.png b/images/Screen Shot Chrome 3.png
deleted file mode 100644
index 3a4fbd35..00000000
Binary files a/images/Screen Shot Chrome 3.png and /dev/null differ
diff --git a/images/Screen Shot Chrome 4.png b/images/Screen Shot Chrome 4.png
deleted file mode 100644
index 8954e923..00000000
Binary files a/images/Screen Shot Chrome 4.png and /dev/null differ
diff --git a/images/Screen Shot Chrome 5.png b/images/Screen Shot Chrome 5.png
deleted file mode 100644
index bf0ffa08..00000000
Binary files a/images/Screen Shot Chrome 5.png and /dev/null differ
diff --git a/images/Screen Shot FF 1.png b/images/Screen Shot FF 1.png
deleted file mode 100644
index e4be8989..00000000
Binary files a/images/Screen Shot FF 1.png and /dev/null differ
diff --git a/images/Screen Shot FF 2.png b/images/Screen Shot FF 2.png
deleted file mode 100644
index 018789a3..00000000
Binary files a/images/Screen Shot FF 2.png and /dev/null differ
diff --git a/images/Screen Shot FF 3.png b/images/Screen Shot FF 3.png
deleted file mode 100644
index 90d28bda..00000000
Binary files a/images/Screen Shot FF 3.png and /dev/null differ
diff --git a/images/Screen Shot FF 4.png b/images/Screen Shot FF 4.png
deleted file mode 100644
index f83e8f29..00000000
Binary files a/images/Screen Shot FF 4.png and /dev/null differ
diff --git a/images/Screen Shot FF 5.png b/images/Screen Shot FF 5.png
deleted file mode 100644
index fc821639..00000000
Binary files a/images/Screen Shot FF 5.png and /dev/null differ
diff --git a/images/buy-me-a-coffee.png b/images/buy-me-a-coffee.png
deleted file mode 100644
index 1bb2ad61..00000000
Binary files a/images/buy-me-a-coffee.png and /dev/null differ
diff --git a/images/icon128.png b/images/icon128.png
deleted file mode 100644
index ccd689cc..00000000
Binary files a/images/icon128.png and /dev/null differ
diff --git a/images/icon16.png b/images/icon16.png
deleted file mode 100644
index 1c510cb7..00000000
Binary files a/images/icon16.png and /dev/null differ
diff --git a/images/icon32.png b/images/icon32.png
deleted file mode 100644
index d001aab6..00000000
Binary files a/images/icon32.png and /dev/null differ
diff --git a/images/icon48.png b/images/icon48.png
deleted file mode 100644
index 4ddd22eb..00000000
Binary files a/images/icon48.png and /dev/null differ
diff --git a/images/logo.png b/images/logo.png
deleted file mode 100644
index ecb3e381..00000000
Binary files a/images/logo.png and /dev/null differ
diff --git a/images/small-tile.png b/images/small-tile.png
deleted file mode 100644
index a3ed077b..00000000
Binary files a/images/small-tile.png and /dev/null differ
diff --git a/manifest.json b/manifest.json
index b34cfc77..5329a289 100644
--- a/manifest.json
+++ b/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"
     }
diff --git a/pages/options/options.html b/pages/options/options.html
index 317f8145..ca6429f1 100644
--- a/pages/options/options.html
+++ b/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>
-      </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>
+    <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 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>
+    <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">
-      <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">
+      <h1 data-localize="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
+      <div class="autocomplete">
+        <input id="bibliogram-instance" type="url" placeholder="https://bibliogram.art">
+      </div>
     </section>
+    <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>
+    </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>
+    <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="whitelist-items"></ul>
+    <ul id="exceptions-items"></ul>
   </div>
 
   <script src="./options.js"></script>
-
+  <script src="../../assets/javascript/localise.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/pages/options/options.js b/pages/options/options.js
index 5e25a495..19f9bba7 100644
--- a/pages/options/options.js
+++ b/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'));
+  li.appendChild(button);
+  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', () => {
-    li.remove();
-    whitelist.splice(index, 1);
+    exceptions.splice(index, 1);
     browser.storage.sync.set({
-      whitelist: whitelist
+      exceptions: exceptions
     });
+    li.remove();
   });
-  li.appendChild(button);
-  document.getElementById('whitelist-items').prepend(li);
 }
 
 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);
+})
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 45a88052..1ce7eb01 100644
--- a/pages/popup/popup.html
+++ b/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>
\ No newline at end of file
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 66842c75..2e8ec491 100644
--- a/pages/popup/popup.js
+++ b/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 });
 });
diff --git a/pages/styles.css b/pages/styles.css
index d9a7e5df..dd88a65c 100644
--- a/pages/styles.css
+++ b/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);
+  }
 }
diff --git a/web-ext-config.js b/web-ext-config.js
index 96c7c87c..bfaa024d 100644
--- a/web-ext-config.js
+++ b/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'
   ],
 };
-- 
cgit 1.4.1


From e87216121e53123f029a96d7e890948a0e4b6faf Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Wed, 15 Jul 2020 19:04:52 +1000
Subject: Deploy extension to MS Edge.

---
 README.md                      |   6 +++-
 assets/images/amo-badge.png    | Bin 2827 -> 0 bytes
 assets/images/badge-amo.png    | Bin 0 -> 2827 bytes
 assets/images/badge-chrome.png | Bin 0 -> 3762 bytes
 assets/images/badge-ms.png     | Bin 0 -> 11166 bytes
 assets/images/chrome-badge.png | Bin 3762 -> 0 bytes
 assets/images/logo-store.png   | Bin 0 -> 141478 bytes
 assets/images/logo-tile.png    | Bin 0 -> 35583 bytes
 assets/images/small-tile.png   | Bin 35583 -> 0 bytes
 pages/styles.css               |  78 ++++++++++++++++++++++++-----------------
 web-ext-config.js              |   3 +-
 11 files changed, 51 insertions(+), 36 deletions(-)
 delete mode 100644 assets/images/amo-badge.png
 create mode 100644 assets/images/badge-amo.png
 create mode 100644 assets/images/badge-chrome.png
 create mode 100644 assets/images/badge-ms.png
 delete mode 100644 assets/images/chrome-badge.png
 create mode 100644 assets/images/logo-store.png
 create mode 100644 assets/images/logo-tile.png
 delete mode 100644 assets/images/small-tile.png

(limited to 'pages/styles.css')

diff --git a/README.md b/README.md
index 29ccd7b6..5a13e17d 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 [![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)
 
-[![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)
+[![Firefox Add-on](assets/images/badge-amo.png)](https://addons.mozilla.org/en-US/firefox/addon/privacy-redirect/) [![Chrome Extension](assets/images/badge-chrome.png)](https://chrome.google.com/webstore/detail/privacy-redirect/pmcmeagblkinmogikoikkdjiligflglb) [![Edge Extension](assets/images/badge-ms.png)](https://microsoftedge.microsoft.com/addons/detail/privacy-redirect/elnabkhcgpajchapppkhiaifkgikgihj)
 
 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/).
 
@@ -17,3 +17,7 @@ Allows for setting custom [Nitter](https://github.com/zedeus/nitter/wiki/Instanc
 ## License
 
 Code released under [the MIT license](LICENSE.txt).
+
+## Privacy Policy
+
+See the [Project Wiki](https://github.com/SimonBrazell/privacy-redirect/wiki/Privacy-Policy).
diff --git a/assets/images/amo-badge.png b/assets/images/amo-badge.png
deleted file mode 100644
index 9cb49bba..00000000
Binary files a/assets/images/amo-badge.png and /dev/null differ
diff --git a/assets/images/badge-amo.png b/assets/images/badge-amo.png
new file mode 100644
index 00000000..9cb49bba
Binary files /dev/null and b/assets/images/badge-amo.png differ
diff --git a/assets/images/badge-chrome.png b/assets/images/badge-chrome.png
new file mode 100644
index 00000000..4e48b8a6
Binary files /dev/null and b/assets/images/badge-chrome.png differ
diff --git a/assets/images/badge-ms.png b/assets/images/badge-ms.png
new file mode 100644
index 00000000..96fa0586
Binary files /dev/null and b/assets/images/badge-ms.png differ
diff --git a/assets/images/chrome-badge.png b/assets/images/chrome-badge.png
deleted file mode 100644
index 4e48b8a6..00000000
Binary files a/assets/images/chrome-badge.png and /dev/null differ
diff --git a/assets/images/logo-store.png b/assets/images/logo-store.png
new file mode 100644
index 00000000..d7bd51d6
Binary files /dev/null and b/assets/images/logo-store.png differ
diff --git a/assets/images/logo-tile.png b/assets/images/logo-tile.png
new file mode 100644
index 00000000..a3ed077b
Binary files /dev/null and b/assets/images/logo-tile.png differ
diff --git a/assets/images/small-tile.png b/assets/images/small-tile.png
deleted file mode 100644
index a3ed077b..00000000
Binary files a/assets/images/small-tile.png and /dev/null differ
diff --git a/pages/styles.css b/pages/styles.css
index dd88a65c..29667d71 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -1,20 +1,20 @@
 :root {
-  --text-main: #FFF;
+  --text-main: #fff;
   --text-secondary: #000;
-  --dark: #3C4043;
-  --darker: #292A2D;
-  --light: #E3E7EA;
-  --lighter: #FFF;
-  --active: #FF5B56;
+  --dark: #3c4043;
+  --darker: #292a2d;
+  --light: #e3e7ea;
+  --lighter: #fff;
+  --active: #ff5b56;
   --space: 5px;
   --danger: #f04141;
-  --danger-light: #F9D0D5;
+  --danger-light: #f9d0d5;
 }
 
 body {
   color: var(--text-secondary);
   margin: 0;
-  width: 400px;
+  max-width: 400px;
   margin: auto;
   min-height: 572px;
   font-family: Sans-Serif;
@@ -45,7 +45,7 @@ header .logo-container {
   width: 100%;
   margin: var(--space) 0 var(--space) 0;
   display: flex;
-  align-items:center;
+  align-items: center;
 }
 
 header .logo-container img {
@@ -106,29 +106,29 @@ footer a.button {
   margin: var(--space);
 }
 
-/* Elements */
-
-input[type=url], input[type=text], select {
+input[type="url"],
+input[type="text"],
+select {
   width: 100%;
   box-sizing: border-box;
   margin-bottom: var(--space);
 }
 
-input[type=url] {
+input[type="url"] {
   padding: 1px 2px;
 }
 
-input[type=checkbox] {
+input[type="checkbox"] {
   opacity: 0;
 }
 
-input[type=radio] {
+input[type="radio"] {
   appearance: radio;
   -moz-appearance: radio;
   -webkit-appearance: radio;
 }
 
-input[type=radio]:checked+label {
+input[type="radio"]:checked + label {
   background: transparent;
 }
 
@@ -150,19 +150,20 @@ input[type=radio]:checked+label {
 .checkbox-label:after {
   background: var(--text-main);
   border-radius: 90px;
-  content: '';
+  content: "";
   height: 20px;
   left: var(--space);
   position: absolute;
   top: var(--space);
-  transition: 0.3s; /* Acts on transform below */
+  transition: 0.3s;
   width: 20px;
 }
-input:checked+label {
+
+input:checked + label {
   background: var(--active);
 }
-/* position  when active*/
-input:checked+label:after {
+
+input:checked + label:after {
   left: calc(100% - var(--space));
   transform: translateX(-100%);
 }
@@ -325,7 +326,7 @@ li {
   border-bottom: none;
   border-top: none;
   z-index: 99;
-  top: 100%;
+  top: 85%;
   left: 0;
   right: 0;
   overflow: auto;
@@ -356,17 +357,17 @@ li {
   vertical-align: middle;
 }
 
-input[type=range] {
+input[type="range"] {
   -webkit-appearance: none;
   margin: 18px 0;
   width: 100%;
 }
 
-input[type=range]:focus {
+input[type="range"]:focus {
   outline: none;
 }
 
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
@@ -376,7 +377,7 @@ input[type=range]::-webkit-slider-runnable-track {
   border: 0.2px solid #010101;
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   border: 1px solid #000000;
   height: 36px;
@@ -388,11 +389,11 @@ input[type=range]::-webkit-slider-thumb {
   margin-top: -14px;
 }
 
-input[type=range]:focus::-webkit-slider-runnable-track {
+input[type="range"]:focus::-webkit-slider-runnable-track {
   background: var(--light);
 }
 
-input[type=range]::-moz-range-track {
+input[type="range"]::-moz-range-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
@@ -402,7 +403,7 @@ input[type=range]::-moz-range-track {
   border: 0.2px solid #010101;
 }
 
-input[type=range]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb {
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   border: 1px solid #000000;
   height: 36px;
@@ -413,8 +414,13 @@ input[type=range]::-moz-range-thumb {
 }
 
 @media (prefers-color-scheme: dark) {
-
-  body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
+  body.popup,
+  header,
+  h1,
+  input,
+  select,
+  div.tabcontent,
+  button.tablinks.active {
     background-color: var(--dark);
     color: var(--text-main);
   }
@@ -434,8 +440,14 @@ input[type=range]::-moz-range-thumb {
 }
 
 @media (prefers-color-scheme: light) {
-
-  body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active, ul {
+  body.popup,
+  header,
+  h1,
+  input,
+  select,
+  div.tabcontent,
+  button.tablinks.active,
+  ul {
     background-color: var(--lighter);
     color: var(--text-secondary);
   }
diff --git a/web-ext-config.js b/web-ext-config.js
index 04186a75..1fd87f6d 100644
--- a/web-ext-config.js
+++ b/web-ext-config.js
@@ -1,9 +1,8 @@
 module.exports = {
   ignoreFiles: [
     'assets/images/Screen Shot*.png',
-    'assets/images/small-tile.png',
     'assets/images/buy-me-a-coffee.png',
     'assets/images/logo*.png',
-    'assets/images/*-badge.png'
+    'assets/images/badge*.png'
   ],
 };
-- 
cgit 1.4.1


From 7ba890045e03808321904f0278015744ef16d377 Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Thu, 16 Jul 2020 09:59:14 +1000
Subject: Closes #74 - Option to manually override theme.

---
 manifest.json              |  23 +-
 pages/options/options.html | 722 +++++++++++++++++++++++++++------------------
 pages/options/options.js   | 341 +++++++++++----------
 pages/popup/popup.html     | 261 +++++++++-------
 pages/popup/popup.js       |  34 ++-
 pages/styles.css           | 182 +++++-------
 6 files changed, 888 insertions(+), 675 deletions(-)

(limited to 'pages/styles.css')

diff --git a/manifest.json b/manifest.json
index 41f04696..1e408456 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,12 +1,10 @@
 {
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDescription__",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "manifest_version": 2,
   "background": {
-    "scripts": [
-      "background.js"
-    ],
+    "scripts": ["background.js"],
     "persistent": true
   },
   "default_locale": "en",
@@ -16,12 +14,7 @@
     "48": "assets/images/icon48.png",
     "128": "assets/images/icon128.png"
   },
-  "permissions": [
-    "storage",
-    "webRequest",
-    "webRequestBlocking",
-    "<all_urls>"
-  ],
+  "permissions": ["storage", "webRequest", "webRequestBlocking", "<all_urls>"],
   "browser_action": {
     "default_title": "Privacy Redirect",
     "default_popup": "pages/popup/popup.html",
@@ -41,9 +34,7 @@
         "*://pbs.twimg.com/*",
         "*://video.twimg.com/*"
       ],
-      "js": [
-        "assets/javascript/remove-twitter-sw.js"
-      ],
+      "js": ["assets/javascript/remove-twitter-sw.js"],
       "run_at": "document_start"
     },
     {
@@ -64,9 +55,7 @@
         "*://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion/*",
         "*://mfqczy4mysscub2s.onio/*n"
       ],
-      "js": [
-        "assets/javascript/persist-invidious-prefs.js"
-      ],
+      "js": ["assets/javascript/persist-invidious-prefs.js"],
       "run_at": "document_start"
     }
   ],
@@ -79,4 +68,4 @@
       "id": "{b7f9d2cd-d772-4302-8c3f-eb941af36f76}"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/pages/options/options.html b/pages/options/options.html
index e254765d..f5947bc9 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -1,286 +1,450 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title>
+    <link href="../styles.css" rel="stylesheet" />
+    <title>Privacy Redirect Options</title>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link href="../styles.css" rel="stylesheet">
-  <title>Privacy Redirect Options</title>
-</head>
+  <body>
+    <div class="tab">
+      <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>
 
-<body>
+    <div id="general" class="tabcontent">
+      <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="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="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="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="settings-block">
+        <h1 data-localize="__MSG_theme__">Theme</h1>
+        <select id="theme">
+          <option value="">System</option>
+          <option value="light-theme">Light</option>
+          <option value="dark-theme">Dark</option>
+        </select>
+      </section>
+    </div>
 
-  <div class="tab">
-    <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="advanced" class="tabcontent">
+      <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="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="settings-block">
+        <h1 data-localize="__MSG_videoQuality__">Invidious Video Quality</h1>
+        <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
+          >
+        </select>
+      </section>
+      <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="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="settings-block">
+        <h1 data-localize="__MSG_invidiousPlayerStyle__">
+          Invidious Player Style
+        </h1>
+        <select id="invidious-player-style">
+          <option value="">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="general" class="tabcontent">
-    <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="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="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>
-    <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>
-    </sections>
-  </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>
+      <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>
 
-  <div id="advanced" class="tabcontent">
-    <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="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="settings-block">
-      <h1 data-localize="__MSG_videoQuality__">Invidious Video Quality</h1>
-      <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>
-      </select>
-    </section>
-    <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="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="settings-block">
-      <h1 data-localize="__MSG_invidiousPlayerStyle__">Invidious Player Style</h1>
-      <select id="invidious-player-style">
-        <option value="">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="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>
-    <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>
\ No newline at end of file
+    <script src="./options.js"></script>
+    <script src="../../assets/javascript/localise.js"></script>
+  </body>
+</html>
diff --git a/pages/options/options.js b/pages/options/options.js
index 19f9bba7..352db45a 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -1,95 +1,93 @@
-'use strict';
+"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'
+  "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'
+  "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'
+  "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 }
+  { 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');
-let osmInstance = document.getElementById('osm-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 alwaysProxy = document.getElementById('always-proxy');
-let onlyEmbeddedVideo = document.getElementById('only-embed');
-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 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 nitterInstance = document.getElementById("nitter-instance");
+let invidiousInstance = document.getElementById("invidious-instance");
+let bibliogramInstance = document.getElementById("bibliogram-instance");
+let osmInstance = document.getElementById("osm-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 alwaysProxy = document.getElementById("always-proxy");
+let onlyEmbeddedVideo = document.getElementById("only-embed");
+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 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 theme = document.getElementById("theme");
 let exceptions;
 
 window.browser = window.browser || window.chrome;
 
 function prependExceptionsItem(item, index) {
-  const li = document.createElement('li');
+  const li = document.createElement("li");
   li.appendChild(document.createTextNode(item.toString()));
-  const button = document.createElement('button');
+  const button = document.createElement("button");
   li.appendChild(button);
-  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'>
+  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', () => {
+  button.addEventListener("click", () => {
     exceptions.splice(index, 1);
     browser.storage.sync.set({
-      exceptions: exceptions
+      exceptions: exceptions,
     });
     li.remove();
   });
@@ -97,108 +95,112 @@ function prependExceptionsItem(item, index) {
 
 browser.storage.sync.get(
   [
-    'nitterInstance',
-    'invidiousInstance',
-    'bibliogramInstance',
-    'osmInstance',
-    'disableNitter',
-    'disableInvidious',
-    'disableBibliogram',
-    'disableOsm',
-    'alwaysProxy',
-    'onlyEmbeddedVideo',
-    'videoQuality',
-    'removeTwitterSW',
-    'invidiousDarkMode',
-    'persistInvidiousPrefs',
-    'invidiousVolume',
-    'invidiousPlayerStyle',
-    'invidiousSubtitles',
-    'invidiousAutoplay',
-    'exceptions'
+    "nitterInstance",
+    "invidiousInstance",
+    "bibliogramInstance",
+    "osmInstance",
+    "disableNitter",
+    "disableInvidious",
+    "disableBibliogram",
+    "disableOsm",
+    "alwaysProxy",
+    "onlyEmbeddedVideo",
+    "videoQuality",
+    "removeTwitterSW",
+    "invidiousDarkMode",
+    "persistInvidiousPrefs",
+    "invidiousVolume",
+    "invidiousPlayerStyle",
+    "invidiousSubtitles",
+    "invidiousAutoplay",
+    "exceptions",
+    "theme",
   ],
-  result => {
-    nitterInstance.value = result.nitterInstance || '';
-    invidiousInstance.value = result.invidiousInstance || '';
-    bibliogramInstance.value = result.bibliogramInstance || '';
-    osmInstance.value = result.osmInstance || '';
+  (result) => {
+    theme.value = result.theme || "";
+    if (result.theme) document.body.classList.add(result.theme);
+    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;
     disableOsm.checked = !result.disableOsm;
     alwaysProxy.checked = result.alwaysProxy;
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
-    videoQuality.value = result.videoQuality || '';
+    videoQuality.value = result.videoQuality || "";
     removeTwitterSW.checked = !result.removeTwitterSW;
     invidiousDarkMode.checked = result.invidiousDarkMode;
     persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
     exceptions = result.exceptions || [];
     exceptions.forEach(prependExceptionsItem);
     invidiousVolume.value = result.invidiousVolume;
-    invidiousPlayerStyle.value = result.invidiousPlayerStyle;
-    invidiousSubtitles.value = result.invidiousSubtitles || '';
+    invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
+    invidiousSubtitles.value = result.invidiousSubtitles || "";
     invidiousAutoplay.checked = !result.invidiousAutoplay;
   }
 );
 
 function openTab(tab, event) {
   let i, tabcontent, tablinks;
-  tabcontent = document.getElementsByClassName('tabcontent');
+  tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = 'none';
+    tabcontent[i].style.display = "none";
   }
-  tablinks = document.getElementsByClassName('tablinks');
+  tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(' active', '');
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
-  document.getElementById(tab).style.display = 'block';
-  event.currentTarget.className += ' active';
+  document.getElementById(tab).style.display = "block";
+  event.currentTarget.className += " active";
 }
 
-document.getElementById('general-tab').addEventListener(
-  'click', openTab.bind(null, 'general')
-);
-document.getElementById('advanced-tab').addEventListener(
-  'click', openTab.bind(null, 'advanced')
-);
-document.getElementById('exceptions-tab').addEventListener(
-  'click', openTab.bind(null, 'exceptions')
-);
+document
+  .getElementById("general-tab")
+  .addEventListener("click", openTab.bind(null, "general"));
+document
+  .getElementById("advanced-tab")
+  .addEventListener("click", openTab.bind(null, "advanced"));
+document
+  .getElementById("exceptions-tab")
+  .addEventListener("click", openTab.bind(null, "exceptions"));
 
-document.getElementById('general-tab').click();
+document.getElementById("general-tab").click();
 
 function addToExceptions() {
-  const input = document.getElementById('new-exceptions-item');
+  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);
-      if (type === 'URL') {
-        value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+      if (type === "URL") {
+        value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
       }
       exceptions.push(value);
       browser.storage.sync.set({
-        exceptions: exceptions
+        exceptions: exceptions,
       });
       prependExceptionsItem(value, exceptions.indexOf(value));
-      input.value = '';
+      input.value = "";
     } catch (error) {
-      input.setCustomValidity('Invalid RegExp');
+      input.setCustomValidity("Invalid RegExp");
     }
   } else {
-    input.setCustomValidity('Invalid RegExp');
+    input.setCustomValidity("Invalid RegExp");
   }
 }
 
-document.getElementById('add-to-exceptions').addEventListener(
-  'click', addToExceptions
-);
+document
+  .getElementById("add-to-exceptions")
+  .addEventListener("click", addToExceptions);
 
 function debounce(func, wait, immediate) {
   let timeout;
   return () => {
-    let context = this, args = arguments;
+    let context = this,
+      args = arguments;
     let later = () => {
       timeout = null;
       if (!immediate) func.apply(context, args);
@@ -208,132 +210,152 @@ function debounce(func, wait, immediate) {
     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}`
+        return `${url.protocol}//${url.username}:${url.password}@${url.host}`;
       } else {
         return url.origin;
       }
     } catch (error) {
       console.log(error);
-      return '';
+      return "";
     }
   } else {
-    return '';
+    return "";
   }
 }
 
 let nitterInstanceChange = debounce(() => {
   if (nitterInstance.checkValidity()) {
     browser.storage.sync.set({
-      nitterInstance: parseURL(nitterInstance.value)
+      nitterInstance: parseURL(nitterInstance.value),
     });
   }
 }, 500);
-nitterInstance.addEventListener('input', nitterInstanceChange);
+nitterInstance.addEventListener("input", nitterInstanceChange);
 
 let invidiousInstanceChange = debounce(() => {
   if (invidiousInstance.checkValidity()) {
     browser.storage.sync.set({
-      invidiousInstance: parseURL(invidiousInstance.value)
+      invidiousInstance: parseURL(invidiousInstance.value),
     });
   }
 }, 500);
-invidiousInstance.addEventListener('input', invidiousInstanceChange);
+invidiousInstance.addEventListener("input", invidiousInstanceChange);
 
 let bibliogramInstanceChange = debounce(() => {
   if (bibliogramInstance.checkValidity()) {
     browser.storage.sync.set({
-      bibliogramInstance: parseURL(bibliogramInstance.value)
+      bibliogramInstance: parseURL(bibliogramInstance.value),
     });
   }
 }, 500);
-bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
+bibliogramInstance.addEventListener("input", bibliogramInstanceChange);
 
 let osmInstanceChange = debounce(() => {
   if (osmInstance.checkValidity()) {
     browser.storage.sync.set({
-      osmInstance: parseURL(osmInstance.value)
+      osmInstance: parseURL(osmInstance.value),
     });
   }
 }, 500);
-osmInstance.addEventListener('input', osmInstanceChange);
+osmInstance.addEventListener("input", osmInstanceChange);
 
-disableNitter.addEventListener('change', event => {
+disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });
 
-disableInvidious.addEventListener('change', event => {
+disableInvidious.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableInvidious: !event.target.checked });
 });
 
-disableBibliogram.addEventListener('change', event => {
+disableBibliogram.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableBibliogram: !event.target.checked });
 });
 
-disableOsm.addEventListener('change', event => {
+disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
-alwaysProxy.addEventListener('change', event => {
+alwaysProxy.addEventListener("change", (event) => {
   browser.storage.sync.set({ alwaysProxy: event.target.checked });
 });
 
-onlyEmbeddedVideo.addEventListener('change', event => {
+onlyEmbeddedVideo.addEventListener("change", (event) => {
   browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
 });
 
-videoQuality.addEventListener('change', event => {
+videoQuality.addEventListener("change", (event) => {
   browser.storage.sync.set({
-    videoQuality: event.target.options[videoQuality.selectedIndex].value
+    videoQuality: event.target.options[videoQuality.selectedIndex].value,
   });
 });
 
-removeTwitterSW.addEventListener('change', event => {
+removeTwitterSW.addEventListener("change", (event) => {
   browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
 });
 
-invidiousDarkMode.addEventListener('change', event => {
+invidiousDarkMode.addEventListener("change", (event) => {
   browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
 });
 
-persistInvidiousPrefs.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
+      invidiousVolume: invidiousVolume.value,
     });
   }
 }, 500);
-invidiousVolume.addEventListener('input', invidiousVolumeChange);
+invidiousVolume.addEventListener("input", invidiousVolumeChange);
 
-invidiousPlayerStyle.addEventListener('change', event => {
+invidiousPlayerStyle.addEventListener("change", (event) => {
   browser.storage.sync.set({
-    invidiousPlayerStyle: event.target.options[invidiousPlayerStyle.selectedIndex].value
+    invidiousPlayerStyle:
+      event.target.options[invidiousPlayerStyle.selectedIndex].value,
   });
 });
 
 let invidiousSubtitlesChange = debounce(() => {
   if (invidiousInstance.checkValidity()) {
     browser.storage.sync.set({
-      invidiousSubtitles: invidiousSubtitles.value
+      invidiousSubtitles: invidiousSubtitles.value,
     });
   }
 }, 500);
-invidiousSubtitles.addEventListener('input', invidiousSubtitlesChange);
+invidiousSubtitles.addEventListener("input", invidiousSubtitlesChange);
 
-invidiousAutoplay.addEventListener('change', event => {
+invidiousAutoplay.addEventListener("change", (event) => {
   browser.storage.sync.set({ invidiousAutoplay: !event.target.checked });
 });
 
+theme.addEventListener("change", (event) => {
+  const value = event.target.options[theme.selectedIndex].value;
+  switch (value) {
+    case "dark-theme":
+      document.body.classList.add("dark-theme");
+      document.body.classList.remove("light-theme");
+      break;
+    case "light-theme":
+      document.body.classList.add("light-theme");
+      document.body.classList.remove("dark-theme");
+      break;
+    default:
+      document.body.classList.remove("light-theme");
+      document.body.classList.remove("dark-theme");
+  }
+  browser.storage.sync.set({
+    theme: value,
+  });
+});
 
 function autocomplete(input, list) {
   let currentFocus;
@@ -342,7 +364,9 @@ function autocomplete(input, list) {
   });
   input.addEventListener("input", (e) => {
     const val = e.target.value;
-    if (!val) { return false; }
+    if (!val) {
+      return false;
+    }
     currentFocus = -1;
     showOptions(e);
   });
@@ -363,7 +387,10 @@ function autocomplete(input, list) {
     }
   });
   function showOptions(e) {
-    let a, b, i, val = e.target.value;
+    let a,
+      b,
+      i,
+      val = e.target.value;
     closeAllLists();
     a = document.createElement("div");
     a.setAttribute("id", e.target.id + "autocomplete-list");
@@ -377,7 +404,7 @@ function autocomplete(input, list) {
         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'));
+          input.dispatchEvent(new Event("input"));
           closeAllLists();
         });
         a.appendChild(b);
@@ -388,7 +415,7 @@ function autocomplete(input, list) {
     if (!x) return false;
     removeActive(x);
     if (currentFocus >= x.length) currentFocus = 0;
-    if (currentFocus < 0) currentFocus = (x.length - 1);
+    if (currentFocus < 0) currentFocus = x.length - 1;
     x[currentFocus].classList.add("autocomplete-active");
   }
   function removeActive(x) {
@@ -405,7 +432,7 @@ function autocomplete(input, list) {
     }
   }
   document.addEventListener("click", (e) => {
-    if (!autocompletes.find(element => element.id === e.target.id)) {
+    if (!autocompletes.find((element) => element.id === e.target.id)) {
       closeAllLists(e.target);
     }
   });
@@ -413,4 +440,4 @@ function autocomplete(input, list) {
 
 autocompletes.forEach((value) => {
   autocomplete(document.getElementById(value.id), value.instances);
-})
+});
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 1ce7eb01..9fa324a0 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -1,111 +1,168 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title>
+    <link href="../styles.css" rel="stylesheet" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link href="../styles.css" rel="stylesheet">
-</head>
+  <body class="popup">
+    <header class="popup">
+      <div class="logo-container">
+        <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>
 
-<body class="popup">
-  <header>
-    <div class="logo-container">
-      <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="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 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 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 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">
-    <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"></section>
 
-  <section class="settings-block">
-  </section>
+    <footer>
+      <a class="button" id="more-options">
+        <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;
+            "
+          />
+          <polyline
+            points="336 64 448 64 448 176"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+          <line
+            x1="224"
+            y1="288"
+            x2="440"
+            y2="72"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+        </svg>
+      </a>
+    </footer>
 
-  <footer>
-    <a class="button" id="more-options">
-      <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' />
-        <polyline points='336 64 448 64 448 176'
-          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-        <line x1='224' y1='288' x2='440' y2='72'
-          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-      </svg>
-    </a>
-  </footer>
-
-  <script src="./popup.js"></script>
-  <script src="../../assets/javascript/localise.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script src="./popup.js"></script>
+    <script src="../../assets/javascript/localise.js"></script>
+  </body>
+</html>
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 2e8ec491..ece04384 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -1,21 +1,23 @@
-'use strict';
+"use strict";
 
-let disableNitter = document.querySelector('#disable-nitter');
-let disableInvidious = document.querySelector('#disable-invidious');
-let disableBibliogram = document.querySelector('#disable-bibliogram');
-let disableOsm = document.querySelector('#disable-osm');
-let version = document.querySelector('#version');
+let disableNitter = document.querySelector("#disable-nitter");
+let disableInvidious = document.querySelector("#disable-invidious");
+let disableBibliogram = document.querySelector("#disable-bibliogram");
+let disableOsm = document.querySelector("#disable-osm");
+let version = document.querySelector("#version");
 
 window.browser = window.browser || window.chrome;
 
 browser.storage.sync.get(
   [
-    'disableNitter',
-    'disableInvidious',
-    'disableBibliogram',
-    'disableOsm'
+    "disableNitter",
+    "disableInvidious",
+    "disableBibliogram",
+    "disableOsm",
+    "theme",
   ],
-  result => {
+  (result) => {
+    document.body.classList.add(result.theme);
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
@@ -25,22 +27,22 @@ browser.storage.sync.get(
 
 version.textContent = browser.runtime.getManifest().version;
 
-disableNitter.addEventListener('change', event => {
+disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });
 
-disableInvidious.addEventListener('change', event => {
+disableInvidious.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableInvidious: !event.target.checked });
 });
 
-disableBibliogram.addEventListener('change', event => {
+disableBibliogram.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableBibliogram: !event.target.checked });
 });
 
-disableOsm.addEventListener('change', event => {
+disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
-document.querySelector('#more-options').addEventListener('click', () => {
+document.querySelector("#more-options").addEventListener("click", () => {
   browser.runtime.openOptionsPage();
 });
diff --git a/pages/styles.css b/pages/styles.css
index 29667d71..300dadbf 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -1,31 +1,41 @@
-:root {
-  --text-main: #fff;
-  --text-secondary: #000;
-  --dark: #3c4043;
-  --darker: #292a2d;
-  --light: #e3e7ea;
-  --lighter: #fff;
+body {
+  --text: #fff;
+  --bg-main: #3c4043;
+  --bg-secondary: #292a2d;
   --active: #ff5b56;
   --space: 5px;
   --danger: #f04141;
   --danger-light: #f9d0d5;
+  --dark-grey: #767676;
+  --light-grey: #c3c3c3;
+}
+
+body.light-theme {
+  --text: #000;
+  --bg-main: #e3e7ea;
+  --bg-secondary: #fff;
+}
+
+.light-theme.popup,
+.light-theme .popup {
+  background-color: var(--bg-secondary);
 }
 
 body {
-  color: var(--text-secondary);
   margin: 0;
   max-width: 400px;
   margin: auto;
   min-height: 572px;
   font-family: Sans-Serif;
-  background-color: var(--darker);
+  background-color: var(--bg-secondary);
+  color: var(--text);
 }
 
 .popup {
   width: 300px;
   min-height: auto;
   overflow: hidden;
-  background-color: var(--dark);
+  background-color: var(--bg-main);
 }
 
 input {
@@ -35,8 +45,8 @@ input {
 }
 
 header {
-  background-color: var(--lighter);
-  color: var(--text-secondary);
+  background-color: var(--bg-main);
+  color: var(--text);
   display: flex;
   padding: var(--space);
 }
@@ -95,7 +105,7 @@ h3 {
 
 h1,
 h2 {
-  color: var(--text-main);
+  color: var(--text);
 }
 
 footer {
@@ -112,6 +122,9 @@ select {
   width: 100%;
   box-sizing: border-box;
   margin-bottom: var(--space);
+  background-color: var(--bg-main);
+  border-style: inset;
+  color: var(--text);
 }
 
 input[type="url"] {
@@ -136,7 +149,7 @@ input[type="radio"]:checked + label {
   margin-left: 5px;
   background: grey;
   border-radius: 25px;
-  color: var(--text-main);
+  color: var(--text);
   cursor: pointer;
   display: block;
   float: right;
@@ -148,7 +161,7 @@ input[type="radio"]:checked + label {
 }
 
 .checkbox-label:after {
-  background: var(--text-main);
+  background: white;
   border-radius: 90px;
   content: "";
   height: 20px;
@@ -179,8 +192,8 @@ input:checked + label:after {
 
 .button {
   border: var(--active) solid 1px;
-  color: var(--text-main);
-  stroke: var(--text-main);
+  color: var(--text);
+  stroke: var(--text);
   display: block;
   font-size: 12px;
   font-weight: bold;
@@ -199,13 +212,13 @@ input:checked + label:after {
 
 .button:hover {
   background-color: var(--active);
-  color: var(--text-main);
-  stroke: var(--text-main);
+  color: var(--text);
+  stroke: var(--text);
 }
 
 .button:active {
   background-color: var(--active);
-  box-shadow: 0 var(--space) var(--dark);
+  box-shadow: 0 var(--space) var(--bg-main);
   transform: translateY(4px);
 }
 
@@ -221,13 +234,13 @@ input:invalid {
 
 .tab {
   overflow: hidden;
-  background-color: var(--darker);
+  background-color: var(--bg-secondary);
 }
 
 .tab button {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  color: var(--text-main);
+  color: var(--text);
   background-color: inherit;
   float: left;
   border: none;
@@ -235,7 +248,7 @@ input:invalid {
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
-  border: solid 1px var(--dark);
+  border: solid 1px var(--bg-main);
   width: 33.333%;
   font-size: 14px;
 }
@@ -245,13 +258,13 @@ input:invalid {
 }
 
 .tab button.active {
-  background-color: var(--dark);
+  background-color: var(--bg-main);
 }
 
 .tabcontent {
   padding-top: 10px;
   display: none;
-  background-color: var(--dark);
+  background-color: var(--bg-main);
   min-height: 510px;
 }
 
@@ -268,7 +281,7 @@ div.exceptions > input {
   float: right;
   border: var(--active) solid 1px;
   background-color: var(--active);
-  color: var(--text-main);
+  color: var(--text);
   font-weight: bold;
   cursor: pointer;
   border-radius: 50%;
@@ -284,12 +297,12 @@ div.exceptions > input {
 ul {
   padding: 0;
   list-style-type: none;
-  color: var(--text-main);
+  color: var(--text);
   margin: 20px 20px 0 20px;
 }
 
 li {
-  border-bottom: solid 0.5px var(--darker);
+  border-bottom: solid 0.5px var(--bg-secondary);
   padding: 20px 0px 20px 20px;
 }
 
@@ -298,7 +311,7 @@ li {
   margin-right: -5px;
   border: var(--active) solid 1px;
   background-color: var(--active);
-  color: var(--text-main);
+  color: var(--text);
   font-weight: bold;
   cursor: pointer;
   border-radius: 50%;
@@ -322,22 +335,25 @@ li {
 
 .autocomplete-items {
   position: absolute;
-  border: 1px solid var(--dark);
+  border: 1px solid var(--bg-main);
   border-bottom: none;
   border-top: none;
   z-index: 99;
   top: 85%;
   left: 0;
   right: 0;
-  overflow: auto;
+  overflow-y: auto;
   max-height: 175px;
+  color: var(--text);
+  overflow-x: hidden;
+  max-width: 380px;
 }
 
 .autocomplete-items div {
   padding: 10px;
   cursor: pointer;
-  background-color: var(--darker);
-  border-bottom: 1px solid var(--dark);
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--bg-main);
 }
 
 .autocomplete-items div:hover {
@@ -346,7 +362,7 @@ li {
 
 .autocomplete-active {
   background-color: var(--active);
-  color: var(--lighter);
+  color: var(--text);
 }
 
 .option {
@@ -371,15 +387,15 @@ 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-color: var(--dark-grey), var(--light-grey);
+  background: var(--bg-main);
   border-radius: 1.3px;
-  border: 0.2px solid #010101;
+  border: 0.2px inset var(--dark-grey);
 }
 
 input[type="range"]::-webkit-slider-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
+  border-color: var(--active);
+  border: 1px solid var(--dark-grey);
   height: 36px;
   width: 16px;
   border-radius: 3px;
@@ -390,22 +406,22 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]:focus::-webkit-slider-runnable-track {
-  background: var(--light);
+  background: var(--bg-main);
 }
 
 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-color: var(--dark-grey), var(--light-grey);
+  background: var(--bg-main);
   border-radius: 1.3px;
-  border: 0.2px solid #010101;
+  border: 0.2px inset var(--dark-grey);
 }
 
 input[type="range"]::-moz-range-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
+  border-color: var(--active);
+  border: 1px solid var(--dark-grey);
   height: 36px;
   width: 16px;
   border-radius: 3px;
@@ -413,73 +429,31 @@ input[type="range"]::-moz-range-thumb {
   cursor: pointer;
 }
 
-@media (prefers-color-scheme: dark) {
-  body.popup,
-  header,
-  h1,
-  input,
-  select,
-  div.tabcontent,
-  button.tablinks.active {
-    background-color: var(--dark);
-    color: var(--text-main);
-  }
-
-  body {
-    background-color: var(--darker);
-  }
-
-  a.button {
-    color: var(--text-main);
-  }
+::placeholder {
+  color: var(--text);
+  opacity: 0.7;
+}
 
-  ::placeholder {
-    color: var(--text-main);
-    opacity: 0.7;
-  }
+*:focus {
+  outline: var(--active) solid 2px;
 }
 
 @media (prefers-color-scheme: light) {
-  body.popup,
-  header,
-  h1,
-  input,
-  select,
-  div.tabcontent,
-  button.tablinks.active,
-  ul {
-    background-color: var(--lighter);
-    color: var(--text-secondary);
-  }
-
   body {
-    background-color: var(--light);
-  }
-
-  a.button {
-    color: var(--text-secondary);
-    stroke: var(--text-secondary);
-  }
-
-  button.tablinks {
-    background-color: var(--light);
-    color: var(--text-secondary);
-  }
-
-  ::placeholder {
-    color: var(--text-secondary);
-    opacity: 0.7;
-  }
-
-  .tab button {
-    border-bottom: solid 1px var(--light);
+    --text: #000;
+    --text-secondary: #fff;
+    --bg-main: #e3e7ea;
+    --bg-secondary: #fff;
   }
 
-  button.tablinks.active {
-    border-bottom: solid 1px var(--lighter);
+  body.dark-theme {
+    --text: #fff;
+    --text-secondary: #000;
+    --bg-main: #3c4043;
+    --bg-secondary: #292a2d;
   }
 
-  .autocomplete-items div {
-    background-color: var(--light);
+  .popup {
+    background-color: var(--bg-secondary);
   }
 }
-- 
cgit 1.4.1


From ae6f4f6a6cd9fbd5fe583f52782e94641c752706 Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Tue, 1 Sep 2020 17:26:23 +1000
Subject: Randomise instances when empty (#48)

---
 assets/javascript/remove-twitter-sw.js | 68 ++++++++++++++++---------
 background.js                          | 91 ++++++++++++++++++++++------------
 manifest.json                          |  2 +-
 pages/options/options.html             | 17 ++++---
 pages/options/options.js               | 14 ++++--
 pages/styles.css                       |  4 ++
 6 files changed, 125 insertions(+), 71 deletions(-)

(limited to 'pages/styles.css')

diff --git a/assets/javascript/remove-twitter-sw.js b/assets/javascript/remove-twitter-sw.js
index d9d3ce3e..222a7283 100644
--- a/assets/javascript/remove-twitter-sw.js
+++ b/assets/javascript/remove-twitter-sw.js
@@ -1,6 +1,20 @@
-'use strict';
+"use strict";
 
-const nitterDefault = 'https://nitter.net';
+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",
+  "https://nitter.tedomum.net",
+  "https://nitter.cattube.org",
+  "https://nitter.fdn.fr",
+  "https://nitter.1d4.us",
+  "https://nitter.kavin.rocks",
+];
 
 let disableNitter;
 let nitterInstance;
@@ -9,61 +23,67 @@ let exceptions;
 
 window.browser = window.browser || window.chrome;
 
+function getRandomInstance() {
+  return nitterInstances[~~(nitterInstances.length * Math.random())];
+}
+
 function isNotException(url) {
-  return !exceptions.some(regex => (regex.test(url.href)));
+  return !exceptions.some((regex) => regex.test(url.href));
 }
 
 function shouldRedirect(url) {
-  return !redirectBypassFlag &&
+  return (
+    !redirectBypassFlag &&
     isNotException(url) &&
     !disableNitter &&
     url.host !== nitterInstance &&
-    !url.pathname.includes('/home');
+    !url.pathname.includes("/home")
+  );
 }
 
 function redirectTwitter(url) {
-  if (url.host.split('.')[0] === 'pbs') {
+  if (url.host.split(".")[0] === "pbs") {
     return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
-  } else if (url.host.split('.')[0] === 'video') {
+  } else if (url.host.split(".")[0] === "video") {
     return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
   } else {
     return `${nitterInstance}${url.pathname}${url.search}`;
-  };
+  }
 }
 
 browser.storage.sync.get(
   [
-    'nitterInstance',
-    'disableNitter',
-    'removeTwitterSW',
-    'redirectBypassFlag',
-    'exceptions'
+    "nitterInstance",
+    "disableNitter",
+    "removeTwitterSW",
+    "redirectBypassFlag",
+    "exceptions",
   ],
   (result) => {
     redirectBypassFlag = result.redirectBypassFlag;
     browser.storage.sync.set({
-      redirectBypassFlag: false
+      redirectBypassFlag: false,
     });
     if (!result.removeTwitterSW) {
       disableNitter = result.disableNitter;
-      nitterInstance = result.nitterInstance || nitterDefault;
-      exceptions = result.exceptions ? result.exceptions.map(e => {
-        return new RegExp(e);
-      }) : [];
-      navigator.serviceWorker.getRegistrations().then(registrations => {
+      nitterInstance = result.nitterInstance || getRandomInstance();
+      exceptions = result.exceptions
+        ? result.exceptions.map((e) => {
+            return new RegExp(e);
+          })
+        : [];
+      navigator.serviceWorker.getRegistrations().then((registrations) => {
         for (let registration of registrations) {
-          if (registration.scope === 'https://twitter.com/') {
+          if (registration.scope === "https://twitter.com/") {
             registration.unregister();
-            console.log('Unregistered Twitter SW', registration);
+            console.log("Unregistered Twitter SW", registration);
           }
         }
       });
       const url = new URL(window.location);
       if (shouldRedirect()) {
         const redirect = redirectTwitter(url);
-        console.info(
-          'Redirecting', `"${url.href}"`, '=>', `"${redirect}"`
-        );
+        console.info("Redirecting", `"${url.href}"`, "=>", `"${redirect}"`);
         window.location = redirect;
       }
     }
diff --git a/background.js b/background.js
index ffe1857e..3f5145cd 100644
--- a/background.js
+++ b/background.js
@@ -1,6 +1,5 @@
 "use strict";
 
-const invidiousDefault = "https://invidious.snopyta.org";
 const youtubeDomains = [
   "m.youtube.com",
   "youtube.com",
@@ -22,7 +21,6 @@ const invidiousInstances = [
   "https://invidious.fdn.fr",
   "https://invidious.toot.koeln",
 ];
-const nitterDefault = "https://nitter.net";
 const twitterDomains = [
   "twitter.com",
   "www.twitter.com",
@@ -30,7 +28,20 @@ const twitterDomains = [
   "pbs.twimg.com",
   "video.twimg.com",
 ];
-const bibliogramDefault = "https://bibliogram.art";
+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.tedomum.net",
+  "https://nitter.cattube.org",
+  "https://nitter.fdn.fr",
+  "https://nitter.1d4.us",
+  "https://nitter.kavin.rocks",
+];
 const instagramDomains = [
   "instagram.com",
   "www.instagram.com",
@@ -64,6 +75,13 @@ const bibliogramBypassPaths = /\/(accounts\/|embeds?.js)/;
 const bibliogramInstances = [
   "https://bibliogram.art",
   "https://bibliogram.snopyta.org",
+  "https://bibliogram.pussthecat.org",
+  "https://bibliogram.nixnet.services",
+  "https://bg.endl.site",
+  "https://bibliogram.13ad.de	",
+  "https://bibliogram.stemy.me	",
+  "https://bibliogram.hamster.dance",
+  "https://bibliogram.ggc-project.de",
 ];
 const osmDefault = "https://openstreetmap.org";
 const googleMapsRegex = /https?:\/\/(((www|maps)\.)?(google\.).*(\/maps)|maps\.(google\.).*)/;
@@ -128,9 +146,9 @@ browser.storage.sync.get(
     disableInvidious = result.disableInvidious;
     disableBibliogram = result.disableBibliogram;
     disableOsm = result.disableOsm;
-    nitterInstance = result.nitterInstance || nitterDefault;
-    invidiousInstance = result.invidiousInstance || invidiousDefault;
-    bibliogramInstance = result.bibliogramInstance || bibliogramDefault;
+    nitterInstance = result.nitterInstance;
+    invidiousInstance = result.invidiousInstance;
+    bibliogramInstance = result.bibliogramInstance;
     osmInstance = result.osmInstance || osmDefault;
     alwaysProxy = result.alwaysProxy;
     onlyEmbeddedVideo = result.onlyEmbeddedVideo;
@@ -150,14 +168,13 @@ browser.storage.sync.get(
 
 browser.storage.onChanged.addListener((changes) => {
   if ("nitterInstance" in changes) {
-    nitterInstance = changes.nitterInstance.newValue || nitterDefault;
+    nitterInstance = changes.nitterInstance.newValue;
   }
   if ("invidiousInstance" in changes) {
-    invidiousInstance = changes.invidiousInstance.newValue || invidiousDefault;
+    invidiousInstance = changes.invidiousInstance.newValue;
   }
   if ("bibliogramInstance" in changes) {
-    bibliogramInstance =
-      changes.bibliogramInstance.newValue || bibliogramDefault;
+    bibliogramInstance = changes.bibliogramInstance.newValue;
   }
   if ("osmInstance" in changes) {
     osmInstance = changes.osmInstance.newValue || osmDefault;
@@ -205,6 +222,10 @@ browser.storage.onChanged.addListener((changes) => {
   }
 });
 
+function getRandomInstance(instanceList) {
+  return instanceList[~~(instanceList.length * Math.random())];
+}
+
 function addressToLatLng(address, callback) {
   const xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = () => {
@@ -248,6 +269,7 @@ function redirectYouTube(url, initiator, type) {
   if (
     initiator &&
     (initiator.origin === invidiousInstance ||
+      invidiousInstances.includes(initiator.origin) ||
       youtubeDomains.includes(initiator.host))
   ) {
     return null;
@@ -284,7 +306,9 @@ function redirectYouTube(url, initiator, type) {
   }
   url.searchParams.append("autoplay", invidiousAutoplay ? 1 : 0);
 
-  return `${invidiousInstance}${url.pathname}${url.search}`;
+  return `${invidiousInstance || getRandomInstance(invidiousInstances)}${
+    url.pathname
+  }${url.search}`;
 }
 
 function redirectTwitter(url, initiator) {
@@ -298,6 +322,7 @@ function redirectTwitter(url, initiator) {
     isFirefox() &&
     initiator &&
     (initiator.origin === nitterInstance ||
+      nitterInstances.includes(initiator.origin) ||
       twitterDomains.includes(initiator.host))
   ) {
     browser.storage.sync.set({
@@ -306,15 +331,21 @@ function redirectTwitter(url, initiator) {
     return null;
   }
   if (url.host.split(".")[0] === "pbs") {
-    return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
+    return `${
+      nitterInstance || getRandomInstance(nitterInstances)
+    }/pic/${encodeURIComponent(url.href)}`;
   } else if (url.host.split(".")[0] === "video") {
-    return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
+    return `${
+      nitterInstance || getRandomInstance(nitterInstances)
+    }/gif/${encodeURIComponent(url.href)}`;
   } else if (url.pathname.includes("tweets")) {
-    return `${nitterInstance}${url.pathname.replace("/tweets", "")}${
-      url.search
-    }`;
+    return `${
+      nitterInstance || getRandomInstance(nitterInstances)
+    }${url.pathname.replace("/tweets", "")}${url.search}`;
   } else {
-    return `${nitterInstance}${url.pathname}${url.search}`;
+    return `${nitterInstance || getRandomInstance(nitterInstances)}${
+      url.pathname
+    }${url.search}`;
   }
 }
 
@@ -326,6 +357,7 @@ function redirectInstagram(url, initiator, type) {
   if (
     initiator &&
     (initiator.origin === bibliogramInstance ||
+      bibliogramInstances.includes(initiator.origin) ||
       instagramDomains.includes(initiator.host))
   ) {
     return null;
@@ -338,10 +370,14 @@ function redirectInstagram(url, initiator, type) {
     url.pathname === "/" ||
     instagramReservedPaths.includes(url.pathname.split("/")[1])
   ) {
-    return `${bibliogramInstance}${url.pathname}${url.search}`;
+    return `${bibliogramInstance || getRandomInstance(bibliogramInstances)}${
+      url.pathname
+    }${url.search}`;
   } else {
     // Likely a user profile, redirect to '/u/...'
-    return `${bibliogramInstance}/u${url.pathname}${url.search}`;
+    return `${bibliogramInstance || getRandomInstance(bibliogramInstances)}/u${
+      url.pathname
+    }${url.search}`;
   }
 }
 
@@ -482,14 +518,7 @@ browser.webRequest.onBeforeRequest.addListener(
 );
 
 browser.runtime.onInstalled.addListener((details) => {
-  if (details.reason === "install") {
-    browser.storage.sync.set({
-      bibliogramInstance:
-        bibliogramInstances[~~(bibliogramInstances.length * Math.random())],
-      invidiousInstance:
-        invidiousInstances[~~(invidiousInstances.length * Math.random())],
-    });
-  } else if (details.reason === "update") {
+  if (details.reason === "update") {
     browser.storage.sync.get(
       ["whitelist", "exceptions", "invidiousInstance"],
       (result) => {
@@ -502,13 +531,9 @@ browser.runtime.onInstalled.addListener((details) => {
             whitelist: null,
           });
         }
-        if (
-          result.invidiousInstance === "https://invidio.us" ||
-          result.invidiousInstance === null
-        ) {
+        if (result.invidiousInstance === "https://invidio.us") {
           browser.storage.sync.set({
-            invidiousInstance:
-              invidiousInstances[~~(invidiousInstances.length * Math.random())],
+            invidiousInstance: null,
           });
         }
       }
diff --git a/manifest.json b/manifest.json
index 88be6e84..ea0756b3 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDescription__",
-  "version": "1.1.40",
+  "version": "1.1.41",
   "manifest_version": 2,
   "background": {
     "scripts": ["background.js"],
diff --git a/pages/options/options.html b/pages/options/options.html
index 8e074037..6641e5c4 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -127,7 +127,7 @@
             id="nitter-instance"
             type="url"
             name="nitter-instance"
-            placeholder="https://nitter.net"
+            placeholder="Random instance (none selected)"
           />
         </div>
       </section>
@@ -137,7 +137,7 @@
           <input
             id="invidious-instance"
             type="url"
-            placeholder="https://invidious.snopyta.org"
+            placeholder="Random instance (none selected)"
           />
         </div>
       </section>
@@ -147,7 +147,7 @@
           <input
             id="bibliogram-instance"
             type="url"
-            placeholder="https://bibliogram.art"
+            placeholder="Random instance (none selected)"
           />
         </div>
       </section>
@@ -228,9 +228,8 @@
           <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 value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+          </option>
         </select>
       </section>
       <section class="settings-block">
@@ -257,7 +256,9 @@
         </table>
       </section>
       <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousVolume__">Invidious Volume</h1>
+        <h1 data-localise="__MSG_invidiousVolume__">
+          Invidious Volume
+        </h1>
         <input
           id="invidious-volume"
           name="invidious-volume"
@@ -265,7 +266,7 @@
           min="0"
           max="100"
           step="1"
-        />
+        /><span id="volume-value"></span>
       </section>
       <section class="settings-block">
         <h1 data-localise="__MSG_invidiousPlayerStyle__">
diff --git a/pages/options/options.js b/pages/options/options.js
index 89ef315f..8149be7b 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -140,6 +140,9 @@ browser.storage.sync.get(
     exceptions = result.exceptions || [];
     exceptions.forEach(prependExceptionsItem);
     invidiousVolume.value = result.invidiousVolume;
+    document.querySelector("#volume-value").textContent = result.invidiousVolume
+      ? `${result.invidiousVolume}%`
+      : " - ";
     invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
     invidiousSubtitles.value = result.invidiousSubtitles || "";
     invidiousAutoplay.checked = result.invidiousAutoplay;
@@ -313,11 +316,12 @@ persistInvidiousPrefs.addEventListener("change", (event) => {
 });
 
 let invidiousVolumeChange = debounce(() => {
-  if (invidiousInstance.checkValidity()) {
-    browser.storage.sync.set({
-      invidiousVolume: invidiousVolume.value,
-    });
-  }
+  document.querySelector(
+    "#volume-value"
+  ).textContent = `${invidiousVolume.value}%`;
+  browser.storage.sync.set({
+    invidiousVolume: invidiousVolume.value,
+  });
 }, 500);
 invidiousVolume.addEventListener("input", invidiousVolumeChange);
 
diff --git a/pages/styles.css b/pages/styles.css
index 300dadbf..dd58676b 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -457,3 +457,7 @@ input[type="range"]::-moz-range-thumb {
     background-color: var(--bg-secondary);
   }
 }
+
+#volume-value {
+  float: right;
+}
-- 
cgit 1.4.1