Closes #27 - added ability to whitelist sites

2020-04-26 00:43:43 +10:00 · 2020-04-26 00:43:43 +10:00 · 236712d4f6
parent 269739347f
commit 236712d4f6
5 changed files with 166 additions and 32 deletions
--- a/background.js
+++ b/background.js
@ -61,6 +61,7 @@ let osmInstance;
 let alwaysProxy;
 let onlyEmbeddedVideo;
 let videoQuality;
+let whitelist;

 window.browser = window.browser || window.chrome;

@ -76,7 +77,8 @@ browser.storage.sync.get(
    'disableOsm',
    'alwaysProxy',
    'onlyEmbeddedVideo',
-    'videoQuality'
+    'videoQuality',
+    'whitelist'
  ],
  result => {
    disableNitter = result.disableNitter;
@ -90,6 +92,8 @@ browser.storage.sync.get(
    alwaysProxy = result.alwaysProxy;
    onlyEmbeddedVideo = result.onlyEmbeddedVideo;
    videoQuality = result.videoQuality;
+    whitelist = result.whitelist.map(e => new RegExp(e));
+    console.log(whitelist);
  }
 );

@ -127,6 +131,10 @@ browser.storage.onChanged.addListener(changes => {
  if ('videoQuality' in changes) {
    videoQuality = changes.videoQuality.newValue;
  }
+  if ('whitelist' in changes) {
+    whitelist = changes.whitelist.newValue.map(e => new RegExp(e));
+    console.log(whitelist);
+  }
 });

 function addressToLatLng(address, callback) {
@ -155,8 +163,12 @@ function addressToLatLng(address, callback) {
  xmlhttp.send();
 }

+function isWhitelisted(initiator) {
+  return initiator && whitelist.some(regex => (regex.test(initiator.href)));
+}
+
 function redirectYouTube(url, initiator, type) {
-  if (disableInvidious) {
+  if (disableInvidious || isWhitelisted(initiator)) {
    return null;
  }
  if (initiator && (initiator.origin === invidiousInstance || youtubeDomains.includes(initiator.host))) {
@ -183,8 +195,8 @@ function redirectYouTube(url, initiator, type) {
  }
 }

-function redirectTwitter(url) {
-  if (disableNitter) {
+function redirectTwitter(url, initiator) {
+  if (disableNitter || isWhitelisted(initiator)) {
    return null;
  }
  if (url.host.split('.')[0] === 'pbs') {
@ -197,7 +209,7 @@ function redirectTwitter(url) {
 }

 function redirectInstagram(url, initiator, type) {
-  if (disableBibliogram) {
+  if (disableBibliogram || isWhitelisted(initiator)) {
    return null;
  }
  // Do not redirect Bibliogram view on Instagram links
@ -216,8 +228,8 @@ function redirectInstagram(url, initiator, type) {
  }
 }

-function redirectGoogleMaps(url) {
-  if (disableOsm) {
+function redirectGoogleMaps(url, initiator) {
+  if (disableOsm || isWhitelisted(initiator)) {
    return null;
  }
  let redirect;
@ -313,7 +325,7 @@ browser.webRequest.onBeforeRequest.addListener(
      };
    } else if (twitterDomains.includes(url.host)) {
      redirect = {
-        redirectUrl: redirectTwitter(url)
+        redirectUrl: redirectTwitter(url, initiator)
      };
    } else if (instagramDomains.includes(url.host)) {
      redirect = {
@ -321,7 +333,7 @@ browser.webRequest.onBeforeRequest.addListener(
      };
    } else if (url.href.match(googleMapsRegex)) {
      redirect = {
-        redirectUrl: redirectGoogleMaps(url)
+        redirectUrl: redirectGoogleMaps(url, initiator)
      };
    }
    if (redirect && redirect.redirectUrl) {
--- a/pages/options/options.html
+++ b/pages/options/options.html
@ -12,15 +12,9 @@
 <body>

  <div class="tab">
-    <button class="tablinks" id="generalTab">
-      General
-    </button>
-    <button class="tablinks" id="advancedTab">
-      Advanced
-    </button>
-    <button class="tablinks" id="whitelistTab">
-      Whitelist
-    </button>
+    <button class="tablinks" id="general-tab">General</button>
+    <button class="tablinks" id="advanced-tab">Advanced</button>
+    <button class="tablinks" id="whitelist-tab">Whitelist</button>
  </div>

  <div id="general" class="tabcontent">
@ -70,6 +64,14 @@
        <option value="https://nitter.nixnet.xyz">
        <option value="https://nitter.13ad.de">
        <option value="https://tw.openalgeria.org">
+        <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">
+        <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
      </datalist>
      <h1>Invidious Instance</h1>
      <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
@ -78,9 +80,16 @@
        <option value="https://invidious.snopyta.org">
        <option value="https://invidiou.sh">
        <option value="https://yewtu.be">
-        <option value="https://invidious.zapashcanon.fr">
+        <option value="https://yt.maisputain.ovh">
        <option value="https://invidious.toot.koeln">
        <option value="https://invidious.ggc-project.de">
+        <option value="https://invidious.toot.koeln">
+        <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">
@ -88,6 +97,8 @@
        <option value="https://bibliogram.art">
        <option value="https://bibliogram.snopyta.org">
        <option value="https://bibliogram.pussthecat.org">
+        <option value="https://insta.maisputain.ovh">
+        <option value="https://bibliogram.nixnet.services">
      </datalist>
      <h1>OpenStreetMap Instance</h1>
      <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
@ -137,7 +148,14 @@
  </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>
+    </section>
+    <ul id="whitelist-items"></ul>
  </div>

  <script src="./options.js"></script>
--- a/pages/options/options.js
+++ b/pages/options/options.js
@ -12,9 +12,26 @@ 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 whitelist;

 window.browser = window.browser || window.chrome;

+function prependWhitelistItem(item, index) {
+  const li = document.createElement('li');
+  li.appendChild(document.createTextNode(item.toString()));
+  const button = document.createElement('button');
+  button.appendChild(document.createTextNode('X'));
+  button.addEventListener('click', () => {
+    li.remove();
+    whitelist.splice(index, 1);
+    browser.storage.sync.set({
+      whitelist: whitelist
+    });
+  });
+  li.appendChild(button);
+  document.getElementById('whitelist-items').prepend(li);
+}
+
 browser.storage.sync.get(
  [
    'nitterInstance',
@ -28,7 +45,8 @@ browser.storage.sync.get(
    'alwaysProxy',
    'onlyEmbeddedVideo',
    'videoQuality',
-    'removeTwitterSW'
+    'removeTwitterSW',
+    'whitelist'
  ],
  result => {
    nitterInstance.value = result.nitterInstance || '';
@ -43,6 +61,8 @@ browser.storage.sync.get(
    onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
    videoQuality.value = result.videoQuality || '';
    removeTwitterSW.checked = !result.removeTwitterSW;
+    whitelist = result.whitelist || [];
+    whitelist.forEach(prependWhitelistItem);
  }
 );

@ -60,17 +80,40 @@ function openTab(tab, event) {
  event.currentTarget.className += ' active';
 }

-document.getElementById('generalTab').addEventListener(
+document.getElementById('general-tab').addEventListener(
  'click', openTab.bind(null, 'general')
 );
-document.getElementById('advancedTab').addEventListener(
+document.getElementById('advanced-tab').addEventListener(
  'click', openTab.bind(null, 'advanced')
 );
-document.getElementById('whitelistTab').addEventListener(
+document.getElementById('whitelist-tab').addEventListener(
  'click', openTab.bind(null, 'whitelist')
 );

-document.getElementById('generalTab').click();
+document.getElementById('general-tab').click();
+
+function addToWhitelist() {
+  const input = document.getElementById('new-whitelist-item');
+  if (input.value) {
+    try {
+      new RegExp(input.value);
+      const index = whitelist.push(input.value);
+      prependWhitelistItem(input.value, index);
+      browser.storage.sync.set({
+        whitelist: whitelist
+      });
+      input.value = '';
+    } catch (error) {
+      input.setCustomValidity('Invalid RegExp');
+    }
+  } else {
+    input.setCustomValidity('Invalid RegExp');
+  }
+}
+
+document.getElementById('add-to-whitelist').addEventListener(
+  'click', addToWhitelist
+);

 function debounce(func, wait, immediate) {
  let timeout;
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@ -64,6 +64,14 @@
      <option value="https://nitter.nixnet.xyz">
      <option value="https://nitter.13ad.de">
      <option value="https://tw.openalgeria.org">
+      <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">
+      <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
    </datalist>
    <h1>Invidious Instance</h1>
    <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
@ -72,16 +80,25 @@
      <option value="https://invidious.snopyta.org">
      <option value="https://invidiou.sh">
      <option value="https://yewtu.be">
-      <option value="https://invidious.zapashcanon.fr">
+      <option value="https://yt.maisputain.ovh">
      <option value="https://invidious.toot.koeln">
      <option value="https://invidious.ggc-project.de">
+      <option value="https://invidious.toot.koeln">
+      <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.dsrev.ru">
+      <option value="https://bibliogram.pussthecat.org">
+      <option value="https://insta.maisputain.ovh">
+      <option value="https://bibliogram.nixnet.services">
    </datalist>
    <h1>OpenStreetMap Instance</h1>
    <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
--- a/pages/styles.css
+++ b/pages/styles.css
@ -14,9 +14,9 @@ body {
  color: var(--text-secondary);
  margin: 0;
  background-color: var(--darker-grey);
-  max-width: 400px;
+  width: 400px;
  margin: auto;
-  min-height: 460px;
+  min-height: 572px;
 }

 .popup {
@ -95,7 +95,7 @@ footer a.button {

 /* Elements */

-input[type=url], select {
+input[type=url], input[type=text], select {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
@ -183,7 +183,7 @@ input:checked+label:after {
  transform: translateY(4px);
 }

-input[type="url"]:invalid {
+input:invalid {
  color: var(--danger);
  border-color: var(--danger);
  background-color: var(--danger-light);
@ -227,5 +227,49 @@ input[type="url"]:invalid {
  display: none;
  border: solid 1px var(--dark-grey);
  background-color: var(--dark-grey);
-  min-height: 403px;
+  min-height: 510px;
+}
+
+div.whitelist {
+  clear: left;
+}
+
+div.whitelist > input {
+  width: 240px;
+  float: left;
+}
+
+#add-to-whitelist {
+  width: 120px;
+  float: right;
+  border: var(--active) solid 1px;
+  background-color: var(--active);
+  color: var(--text-main);
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 25px;
+}
+
+ul {
+  padding: 0;
+  list-style-type: none;
+  color: var(--text-main);
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+li {
+  border-bottom: solid 0.5px var(--darker-grey);
+  padding: 20px 0px 20px 20px;
+}
+
+#whitelist-items button {
+  float: right;
+  margin-right: -5px;
+  border: var(--active) solid 1px;
+  background-color: var(--active);
+  color: var(--text-main);
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 50%;
 }