add chrome-ext redirect interceptors - v.0.0.4

Author: salvoravida

.gitignore

@@ -27,3 +27,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 dist
+localhostify-ext

.localhostify.js

@@ -0,0 +1,28 @@
+module.exports = {
+   staging: {
+      port: 3001,
+      target: {
+         host: 'https://staging.domain.com',
+         matchUrl: '^\\/api.*',
+      },
+      externalRedirects: [
+         {
+            match: '/api/auth/callback',
+            replace: ['https://staging.domain.com', 'http://localhost:3001'],
+         },
+      ],
+   },
+   prod: {
+      port: 3002,
+      target: {
+         host: 'https://prod.domain.com',
+         matchUrl: '^\\/api.*',
+      },
+      externalRedirects: [
+         {
+            match: '/api/auth/callback',
+            replace: ['https://prod.domain.com', 'http://localhost:3002'],
+         },
+      ],
+   },
+};

.npmignore

@@ -5,3 +5,6 @@ node_modules/*
 src/
 .eslintignore
 .eslintrc.json
+.prettierrc
+localhostify-ext/*
+.localhostify.js

.prettierrc

@@ -0,0 +1,8 @@
+{
+   "semi": true,
+   "trailingComma": "all",
+   "singleQuote": true,
+   "printWidth": 120,
+   "tabWidth": 3,
+   "endOfLine": "lf"
+}

bin/createConfig.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+
+const config = require(process.cwd() + '/.localhostify.js');
+const externalRedirects = Object.values(config).reduce((all, v) => [...all, ...v.externalRedirects], []);
+const chromeConfig = '__LOCALHOSTIFY__ = ' + JSON.stringify({ externalRedirects }, 0, 3);
+
+const extDir = process.cwd() + '/localhostify-ext';
+
+if (!fs.existsSync(extDir)) {
+   fs.mkdirSync(extDir);
+}
+if (!fs.existsSync(extDir + '/scripts')) {
+   fs.mkdirSync(extDir + '/scripts');
+}
+
+fs.writeFileSync(process.cwd() + '/localhostify-ext/config.js', chromeConfig);
+fs.copyFileSync(__dirname + '/../chrome-ext/manifest.json', process.cwd() + '/localhostify-ext/manifest.json');
+fs.copyFileSync(__dirname + '/../chrome-ext/scripts/http.js', process.cwd() + '/localhostify-ext/scripts/http.js');
+fs.copyFileSync(__dirname + '/../chrome-ext/scripts/fetch.js', process.cwd() + '/localhostify-ext/scripts/fetch.js');
+
+console.log("Localhostify: Chrome Ext created in localhostify-ext folder.");

bin/localhostify.js

@@ -1,5 +1,8 @@
 #!/usr/bin/env node
+const env = process.argv[2];
 
-require('../dist/index');
-
-
+if (env === '--chrome-ext') {
+   require('./createConfig.js');
+} else {
+   require('../dist/index.js');
+}

chrome-ext/config.js

@@ -0,0 +1,4 @@
+__LOCALHOSTIFY__ = {
+   "externalRedirects": [
+   ]
+}

chrome-ext/manifest.json

@@ -0,0 +1,18 @@
+{
+   "name": "Localhostify",
+   "version": "0.0.1",
+   "manifest_version": 2,
+   "description": "Localhostify: External redirects interceptor",
+   "background": {
+      "scripts": ["config.js", "scripts/http.js"]
+   },
+   "content_scripts": [
+      {
+         "all_frames": true,
+         "js": ["config.js", "scripts/fetch.js"],
+         "matches": ["http://*/*", "https://*/*"],
+         "run_at": "document_start"
+      }
+   ],
+   "permissions": ["tabs", "webRequest", "webRequestBlocking", "<all_urls>"]
+}

chrome-ext/scripts/fetch.js

@@ -0,0 +1,75 @@
+/* handle custom redirects after fetch */
+
+function interceptor() {
+   const externalMatches = ['accounts.google.com'];
+   const needIntercept = (url) => externalMatches.some((d) => new RegExp(d).test(url));
+   const { externalRedirects } = window.__LOCALHOSTIFY__;
+
+   const onReadyStateChange = function () {
+      if (this.readyState === 4 && needIntercept(this.responseURL)) {
+         const { responseURL, responseType, response } = this;
+
+         if (responseType === '' || responseType === 'text') {
+            Object.defineProperty(this, 'responseText', {
+               get: function () {
+                  let replacedResponse = response;
+
+                 externalRedirects.forEach((rule) => {
+                     if (new RegExp(rule.match).test(replacedResponse)) {
+                        replacedResponse = replacedResponse.replace(rule.replace[0], rule.replace[1]);
+                     }
+                  });
+
+                  if (response !== replacedResponse) {
+                     console.log('Localhostify -> ', JSON.stringify({ responseURL, response, replacedResponse }, 0, 2));
+                  }
+                  return replacedResponse;
+               },
+            });
+         }
+      }
+   };
+
+   const XHR = XMLHttpRequest;
+   XMLHttpRequest = function () {
+      const xhr = new XHR();
+      xhr.requestURL;
+      xhr.addEventListener('readystatechange', onReadyStateChange.bind(xhr), false);
+      return xhr;
+   };
+
+   XMLHttpRequest.prototype = XHR.prototype;
+   Object.entries(XHR).map(([key, val]) => {
+      XMLHttpRequest[key] = val;
+   });
+
+   const open = XMLHttpRequest.prototype.open;
+   XMLHttpRequest.prototype.open = function (method) {
+      this.method = method;
+      open.apply(this, arguments);
+   };
+
+   const send = XMLHttpRequest.prototype.send;
+   XMLHttpRequest.prototype.send = function (data) {
+      this.requestData = data;
+      send.apply(this, arguments);
+   };
+
+   let setRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+   XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+      this.requestHeaders = this.requestHeaders || {};
+      this.requestHeaders[header] = value;
+      setRequestHeader.apply(this, arguments);
+   };
+}
+
+const interceptorScript = interceptor.toString();
+const config = 'window.__LOCALHOSTIFY__=' + JSON.stringify(window.__LOCALHOSTIFY__, 0, 2) + ';';
+
+const script = document.createElement('script');
+script.className = 'localhostify';
+script.type = 'text/javascript';
+script.appendChild(document.createTextNode(`${config} (${interceptorScript})()`));
+
+const parent = document.head || document.documentElement;
+parent.appendChild(script);

chrome-ext/scripts/http.js

@@ -0,0 +1,29 @@
+/* HTTP headers Location redirect */
+
+const { externalRedirects } = window.__LOCALHOSTIFY__;
+
+chrome.webRequest.onHeadersReceived.addListener(
+   function (details) {
+      const headers = details.responseHeaders;
+
+      for (var i = 0, l = headers.length; i < l; ++i) {
+         if (headers[i].name.toLowerCase() === 'location') {
+            const originalLocation = headers[i].value;
+
+            externalRedirects.forEach((rule) => {
+               if (new RegExp(rule.match).test(headers[i].value)) {
+                  headers[i].value = headers[i].value.replace(rule.replace[0], rule.replace[1]);
+               }
+            });
+
+            if (originalLocation !== headers[i].value) {
+               const { url, documentUrl } = details;
+               console.log('Localhostify -> ', { url, documentUrl, originalLocation, location: headers[i].value });
+            }
+         }
+      }
+      return { responseHeaders: headers };
+   },
+   { urls: ['<all_urls>'] },
+   ['responseHeaders', 'blocking'],
+);