OSM redirects (experimental)

2020-02-23 16:19:32 +11:00 · 2020-02-23 16:19:32 +11:00 · 97ca48b1fe
parent a42ff6b335
commit 97ca48b1fe
5 changed files with 137 additions and 4 deletions
--- a/background.js
+++ b/background.js
@ -7,30 +7,40 @@ const twitterRegex = /((www|mobile)\.)?twitter\.com/;
 const bibliogramDefault = 'https://bibliogram.art';
 const instagramRegex = /((www|about|help)\.)?instagram\.com/;
 const instagramPathsRegex = /(\/a|\/admin|\/api|\/favicon.ico|\/static|\/imageproxy|\/p|\/u|\/developer|\/about|\/legal|\/explore|\/director)/;
+const osmDefault = 'https://openstreetmap.org';
+const googleMapsRegex = /(google).*(\/maps)/;
+const latLngZoomRegex = /@(-?\d[0-9.]*),(-?\d[0-9.]*),(\d{1,2})[.z]/;
+const dataLatLngRegex = /(!3d|!4d)(-?[0-9]{1,10}.[0-9]{1,10})/g;

 let nitterInstance;
 let invidiousInstance;
 let bibliogramInstance;
+let osmInstance;
 let disableNitter;
 let disableInvidious;
 let disableBibliogram;
+let disableOsm;

 chrome.storage.sync.get(
  [
    'nitterInstance',
    'invidiousInstance',
    'bibliogramInstance',
+    'osmInstance',
    'disableNitter',
    'disableInvidious',
    'disableBibliogram',
+    'disableOsm'
  ],
  result => {
    disableNitter = result.disableNitter;
    disableInvidious = result.disableInvidious;
    disableBibliogram = result.disableBibliogram;
+    disableOsm = result.disableOsm;
    nitterInstance = result.nitterInstance || nitterDefault;
    invidiousInstance = result.invidiousInstance || invidiousDefault;
    bibliogramInstance = result.bibliogramInstance || bibliogramDefault;
+    osmInstance = result.osmInstance || osmDefault;
  }
 );

@ -44,6 +54,9 @@ chrome.storage.onChanged.addListener(changes => {
  if ('bibliogramInstance' in changes) {
    bibliogramInstance = changes.bibliogramInstance.newValue || bibliogramDefault;
  }
+  if ('osmInstance' in changes) {
+    osmInstance = changes.osmInstance.newValue || osmDefault;
+  }
  if ('disableNitter' in changes) {
    disableNitter = changes.disableNitter.newValue;
  }
@ -53,8 +66,61 @@ chrome.storage.onChanged.addListener(changes => {
  if ('disableBibliogram' in changes) {
    disableBibliogram = changes.disableBibliogram.newValue;
  }
+  if ('disableOsm' in changes) {
+    disableOsm = changes.disableOsm.newValue;
+  }
 });

+// https://github.com/tankaru/ReplaceG2O
+function deg2rad(deg) {
+  return deg / 360 * 2 * Math.PI;
+}
+
+function rad2deg(rad) {
+  return rad / 2 / Math.PI * 360.0;
+}
+
+function getTileNumber(lat, lon, zoom) {
+  xtile = Math.round((lon + 180.0) / 360.0 * 2 ** zoom);
+  ytile = Math.round((1 - Math.log(Math.tan(deg2rad(lat)) + 1 / (Math.cos(deg2rad(lat)))) / Math.PI) / 2 * 2 ** zoom);
+  return [xtile, ytile];
+}
+
+function getLonLat(xtile, ytile, zoom) {
+  n = 2 ** zoom;
+  lon = xtile / n * 360.0 - 180.0;
+  lat = rad2deg(Math.atan(Math.sinh(Math.PI * (1 - 2 * ytile / n))));
+  return [lon, lat];
+}
+
+function LonLat_to_bbox(lat, lon, zoom) {
+  width = 600;
+  height = 450;
+  tile_size = 256;
+
+  [xtile, ytile] = getTileNumber(lat, lon, zoom);
+
+  xtile_s = (xtile * tile_size - width / 2) / tile_size;
+  ytile_s = (ytile * tile_size - height / 2) / tile_size;
+  xtile_e = (xtile * tile_size + width / 2) / tile_size;
+  ytile_e = (ytile * tile_size + height / 2) / tile_size;
+
+  [lon_s, lat_s] = getLonLat(xtile_s, ytile_s, zoom);
+  [lon_e, lat_e] = getLonLat(xtile_e, ytile_e, zoom);
+
+  return [lon_s, lat_s, lon_e, lat_e];
+}
+
+//make a bbox, 0.001 should be modified based on zoom value
+function bbox(lat, lon, zoom) {
+  return LonLat_to_bbox(lat, lon, zoom);
+
+}
+
+function zoom(satelliteZoom) {
+  return -1.4436 * Math.log(satelliteZoom) + 28.7;
+}
+
 function redirectYouTube(url) {
  if (url.host.split('.')[0] === 'studio') {
    // Avoid redirecting `studio.youtube.com`
@ -90,6 +156,34 @@ function redirectInstagram(url) {
  }
 }

+function redirectGoogleMaps(url, type) {
+  let query = '';
+  let lat = '';
+  let lon = '';
+  let zoom = '';
+  if (url.pathname.match(latLngZoomRegex)) {
+    [, lat, lon, zoom] = url.pathname.match(latLngZoomRegex);
+  }
+  if (type === 'main_frame') {
+    if (url.pathname.includes('data=')) {
+      const [mlat, mlon] = url.pathname.match(dataLatLngRegex);
+      return `${osmInstance}/?mlat=${mlat.replace('!3d', '')}&mlon=${mlon.replace('!4d', '')}#map=${zoom}/${lat}/${lon}`;
+    } else if (url.search.includes('q=')) {
+      query = encodeURI(url.searchParams.get('q'));
+    } else {
+      query = url.pathname.split('/')[3];
+    }
+    return `${osmInstance}/search?query=${query}#map=${zoom}/${lat}/${lon}`;
+  } else if (type === 'sub_frame' && url.pathname.match(latLngZoomRegex)) {
+    const [mapleft, mapbottom, mapright, maptop] = bbox(Number(lat), Number(lon), zoom(z));
+    if (url.pathname.includes('data=')) {
+      const [mlat, mlon] = url.pathname.match(dataLatLngRegex);
+      return `${osmInstance}/export/embed.html?bbox=${mapleft}%2C${mapbottom}'%2C'${mapright}'%2C'${maptop}'&amp;layer=mapnik&amp;marker=${mlat}%2C${mlon}'`;
+    }
+    return `${osmInstance}/export/embed.html?bbox=${mapleft}%2C${mapbottom}'%2C'${mapright}'%2C'${maptop}'&amp;layer=mapnik'`;
+  }
+}
+
 chrome.webRequest.onBeforeRequest.addListener(
  details => {
    const url = new URL(details.url);
@ -112,6 +206,12 @@ chrome.webRequest.onBeforeRequest.addListener(
          redirectUrl: redirectInstagram(url)
        };
      }
+    } else if (url.href.match(googleMapsRegex)) {
+      if (!disableOsm) {
+        redirect = {
+          redirectUrl: redirectGoogleMaps(url, details.type)
+        };
+      }
    }
    if (redirect && redirect.redirectUrl) {
      console.log(
--- a/manifest.json
+++ b/manifest.json
@ -1,7 +1,7 @@
 {
  "name": "Privacy Redirect",
  "description": "Redirects Twitter, YouTube & Instagram requests to privacy friendly alternatives - Nitter, Invidious, & Bibliogram.",
-  "version": "1.1.9",
+  "version": "1.1.10",
  "manifest_version": 2,
  "background": {
    "scripts": [
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@ -45,6 +45,15 @@
    </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>
+    </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">
@ -74,6 +83,11 @@
      <option value="https://bibliogram.snopyta.org">
      <option value="https://bibliogram.dsrev.ru">
    </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>

  <script src="./popup.js"></script>
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@ -3,9 +3,11 @@
 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');
+let disableOsm = document.querySelector('#disable-osm');
 let version = document.querySelector('#version');

 chrome.storage.sync.get(
@ -13,17 +15,21 @@ chrome.storage.sync.get(
    'nitterInstance',
    'invidiousInstance',
    'bibliogramInstance',
+    'osmInstance',
    'disableNitter',
    'disableInvidious',
-    'disableBibliogram'
+    '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;
+    disableOsm.checked = !result.disableOsm;
  }
 );

@ -71,6 +77,15 @@ let bibliogramInstanceChange = debounce(() => {
 }, 500);
 bibliogramInstance.addEventListener('input', bibliogramInstanceChange);

+let osmInstanceChange = debounce(() => {
+  if (osmInstance.checkValidity()) {
+    chrome.storage.sync.set({
+      osmInstance: osmInstance.value ? new URL(osmInstance.value).origin : ''
+    });
+  }
+}, 500);
+osmInstance.addEventListener('input', osmInstanceChange);
+
 disableNitter.addEventListener('change', event => {
  chrome.storage.sync.set({ disableNitter: !event.target.checked });
 });
@ -82,3 +97,7 @@ disableInvidious.addEventListener('change', event => {
 disableBibliogram.addEventListener('change', event => {
  chrome.storage.sync.set({ disableBibliogram: !event.target.checked });
 });
+
+disableOsm.addEventListener('change', event => {
+  chrome.storage.sync.set({ disableOsm: !event.target.checked });
+});
--- a/pages/styles.css
+++ b/pages/styles.css
@ -13,8 +13,8 @@ body {
  color: var(--text-secondary);
  margin: 0;
  max-width: 400px;
-  min-width: 240px;
-  background-color: var(--dark-grey)
+  min-width: 300px;
+  background-color: var(--dark-grey);
 }

 header {