Closes #36 - added option to persist Invidious prefs

assets/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))}`;
+    }
+  }
+);

background.js

@@ -26,7 +26,29 @@ const instagramDomains = [
   "help.instagram.com",
   "about.instagram.com",
 ];
-const instagramReservedPaths = /^\/(p|favicon.ico|developer|legal|about|explore|support|press|api|privacy|safety|admin|help|terms|contact|blog|igtv)\/?$/;
+const instagramReservedPaths = [
+  'about',
+  'explore',
+  'support',
+  'press',
+  'api',
+  'privacy',
+  'safety',
+  'admin',
+  'graphql',
+  'accounts',
+  'help',
+  'terms',
+  'contact',
+  'blog',
+  'igtv',
+  'u',
+  'p',
+  'fragment',
+  'imageproxy',
+  'videoproxy',
+  '.well-known'
+];
 const bibliogramBypassPaths = /\/(accounts\/|embeds?.js)/;
 const bibliogramInstances = [
   'https://bibliogram.art',
@@ -61,6 +83,7 @@ let osmInstance;
 let alwaysProxy;
 let onlyEmbeddedVideo;
 let videoQuality;
+let invidiousDarkMode;
 let whitelist;
 
 window.browser = window.browser || window.chrome;
@@ -78,6 +101,7 @@ browser.storage.sync.get(
     'alwaysProxy',
     'onlyEmbeddedVideo',
     'videoQuality',
+    'invidiousDarkMode',
     'whitelist'
   ],
   result => {
@@ -92,6 +116,7 @@ browser.storage.sync.get(
     alwaysProxy = result.alwaysProxy;
     onlyEmbeddedVideo = result.onlyEmbeddedVideo;
     videoQuality = result.videoQuality;
+    invidiousDarkMode = result.invidiousDarkMode;
     whitelist = result.whitelist ? result.whitelist.map(e => new RegExp(e)) : [];
   }
 );
@@ -130,6 +155,9 @@ browser.storage.onChanged.addListener(changes => {
   if ('videoQuality' in changes) {
     videoQuality = changes.videoQuality.newValue;
   }
+  if ('invidiousDarkMode' in changes) {
+    invidiousDarkMode = changes.invidiousDarkMode.newValue;
+  }
   if ('whitelist' in changes) {
     whitelist = changes.whitelist.newValue.map(e => new RegExp(e));
   }
@@ -189,6 +217,9 @@ function redirectYouTube(url, initiator, type) {
     if (onlyEmbeddedVideo && type !== 'sub_frame') {
       return null;
     }
+    if (invidiousDarkMode) {
+      url.searchParams.append('dark_mode', invidiousDarkMode);
+    }
     return `${invidiousInstance}${url.pathname}${url.search}`;
   }
 }
@@ -215,13 +246,13 @@ function redirectInstagram(url, initiator, type) {
     return null;
   }
   // Do not redirect /accounts, /embeds.js, or anything other than main_frame
-  if (url.pathname.match(bibliogramBypassPaths) || type !== 'main_frame') {
+  if (type !== 'main_frame' || url.pathname.match(bibliogramBypassPaths)) {
     return null;
   }
-  if (url.pathname === '/' || url.pathname.match(instagramReservedPaths)) {
+  if (url.pathname === '/' || instagramReservedPaths.includes(url.pathname.split('/')[1])) {
     return `${bibliogramInstance}${url.pathname}${url.search}`;
   } else {
-    // Redirect user profile requests to '/u/...'
+    // Likely a user profile, redirect to '/u/...'
     return `${bibliogramInstance}/u${url.pathname}${url.search}`;
   }
 }

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Privacy Redirect",
   "description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "manifest_version": 2,
   "background": {
     "scripts": [
@@ -41,7 +41,30 @@
         "*://video.twimg.com/*"
       ],
       "js": [
-        "content-script.js"
+        "assets/remove-twitter-sw.js"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "*://invidio.us/*",
+        "*://invidio.us/*",
+        "*://invidious.snopyta.org/*",
+        "*://invidiou.sh/*",
+        "*://yewtu.be/*",
+        "*://yt.maisputain.ovh/*",
+        "*://invidious.toot.koeln/*",
+        "*://invidious.ggc-project.de/*",
+        "*://invidious.toot.koeln/*",
+        "*://kgg2m7yk5aybusll.onion/*",
+        "*://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion/*",
+        "*://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion/*",
+        "*://qklhadlycap4cnod.onion/*",
+        "*://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion/*",
+        "*://mfqczy4mysscub2s.onio/*n"
+      ],
+      "js": [
+        "assets/persist-invidious-prefs.js"
       ],
       "run_at": "document_start"
     }

pages/options/options.html

@@ -137,6 +137,24 @@
       </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>
+
+    <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>
+
     <section class="options settings_block">
       <div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
         <h1>Proactively remove Twitter service worker</h1>

pages/options/options.js

@@ -12,6 +12,8 @@ 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 whitelist;
 
 window.browser = window.browser || window.chrome;
@@ -46,7 +48,9 @@ browser.storage.sync.get(
     'onlyEmbeddedVideo',
     'videoQuality',
     'removeTwitterSW',
-    'whitelist'
+    'whitelist',
+    'invidiousDarkMode',
+    'persistInvidiousPrefs'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
@@ -61,6 +65,8 @@ browser.storage.sync.get(
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
     videoQuality.value = result.videoQuality || '';
     removeTwitterSW.checked = !result.removeTwitterSW;
+    invidiousDarkMode.checked = result.invidiousDarkMode;
+    persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
     whitelist = result.whitelist || [];
     whitelist.forEach(prependWhitelistItem);
   }
@@ -199,3 +205,11 @@ videoQuality.addEventListener('change', event => {
 removeTwitterSW.addEventListener('change', event => {
   browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
 });
+
+invidiousDarkMode.addEventListener('change', event => {
+  browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
+});
+
+persistInvidiousPrefs.addEventListener('change', event => {
+  browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
+});

pages/styles.css

@@ -21,7 +21,7 @@ body {
 
 .popup {
   width: 300px;
-  height: auto;
+  min-height: auto;
   overflow: hidden;
   background-color: var(--dark-grey);
 }
@@ -145,7 +145,7 @@ input:checked+label:after {
 
 .settings_block {
   display: block;
-  padding: 5px 1em 20px 1em;
+  padding: 10px 1em 1em 1em;
   border-bottom: var(--dark-grey) solid 1px;
 }