add icon toggle for enable - disable

Author: salvoravida

bin/createConfig.js

@@ -12,11 +12,15 @@ if (!fs.existsSync(extDir)) {
 if (!fs.existsSync(extDir + '/scripts')) {
    fs.mkdirSync(extDir + '/scripts');
 }
+if (!fs.existsSync(extDir + '/assets')) {
+   fs.mkdirSync(extDir + '/assets');
+}
 
 fs.writeFileSync(process.cwd() + '/localhostify-ext/config.js', chromeConfig);
-fs.copyFileSync(__dirname + '/../chrome-ext/icon_128.png', process.cwd() + '/localhostify-ext/icon_128.png');
 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');
+fs.copyFileSync(__dirname + '/../chrome-ext/assets/green.png', process.cwd() + '/localhostify-ext/assets/green.png');
+fs.copyFileSync(__dirname + '/../chrome-ext/assets/red.png', process.cwd() + '/localhostify-ext/assets/red.png');
 
 console.log("Localhostify: Chrome Ext created in localhostify-ext folder.");

chrome-ext/assets/green.png

@@ -1,13 +1,10 @@
 {
    "name": "Localhostify",
-   "version": "0.0.9",
+   "version": "0.1.0",
    "manifest_version": 2,
    "description": "Localhostify: External redirects interceptor",
    "author": "Salvatore Ravidà",
    "homepage_url": "https://github.com/salvoravida/localhostify",
-   "icons": {
-      "128": "icon_128.png"
-   },
    "background": {
       "scripts": ["config.js", "scripts/http.js"]
    },
@@ -19,5 +16,11 @@
          "run_at": "document_start"
       }
    ],
-   "permissions": ["tabs", "webRequest", "webRequestBlocking", "<all_urls>"]
+   "icons": {
+      "128": "assets/green.png"
+   },
+   "browser_action": {
+      "name": "Toggle Localhostify!"
+   },
+   "permissions": ["storage", "tabs", "webRequest", "webRequestBlocking", "<all_urls>"]
 }

chrome-ext/assets/red.png

@@ -16,7 +16,7 @@ function interceptor() {
                get: function () {
                   let replacedResponse = response;
 
-                 externalRedirects.forEach((rule) => {
+                  externalRedirects.forEach((rule) => {
                      if (new RegExp(rule.match).test(replacedResponse)) {
                         replacedResponse = replacedResponse.replace(rule.replace[0], rule.replace[1]);
                      }
@@ -65,13 +65,17 @@ function interceptor() {
    };
 }
 
-const interceptorScript = interceptor.toString();
-const config = 'window.__LOCALHOSTIFY__=' + JSON.stringify(window.__LOCALHOSTIFY__, 0, 2) + ';';
+chrome.storage.sync.get(['active'], function (data) {
+   if (data.active) {
+      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 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);
+      const parent = document.head || document.documentElement;
+      parent.appendChild(script);
+   }
+});

chrome-ext/icon_128.png

@@ -4,8 +4,33 @@
 
 const { externalRedirects } = window.__LOCALHOSTIFY__;
 
+let localhostifyEnabled = true;
+
+chrome.runtime.onInstalled.addListener(function () {
+   chrome.storage.sync.set({ active: localhostifyEnabled }, function () {
+      console.log('Active :', localhostifyEnabled);
+   });
+});
+
+function onIconClick(toggle) {
+   chrome.storage.sync.get(['active'], function (data) {
+      const active = toggle ? !data.active : data.active;
+      localhostifyEnabled = active;
+      chrome.browserAction.setIcon({ path: active ? 'assets/green.png' : 'assets/red.png' });
+      chrome.storage.sync.set({ active }, function () {
+         console.log('Active 1:', active);
+      });
+   });
+}
+
+chrome.browserAction.onClicked.addListener(() => onIconClick(true));
+
+onIconClick();
+
+//http intercept
 chrome.webRequest.onHeadersReceived.addListener(
    function (details) {
+      if (!localhostifyEnabled) return;
       const headers = details.responseHeaders;
 
       for (var i = 0, l = headers.length; i < l; ++i) {

chrome-ext/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "localhostify",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Easy HTTP reverse proxy - localhost:3001 -> prod.domain.com",
   "source": "src/index.js",
   "main": "./dist/index.js",
@@ -18,7 +18,8 @@
     "prettier": "2.4.1"
   },
   "scripts": {
-    "build": "microbundle -i src/index.js -o dist/index.js --no-pkg-main -f cjs --no-sourcemap --compress"
+    "build": "microbundle -i src/index.js -o dist/index.js --no-pkg-main -f cjs --no-sourcemap --compress",
+    "chrome-ext": "node ./bin/createConfig.js --chrome-ext"
   },
   "repository": {
     "type": "git",