Support for Google Chrome Extension (#512)

Support for Google Chrome Extension

README.md

@@ -220,11 +220,13 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/li
 
  - **[Proxy β](https://github.com/postwoman-io/postwoman-proxy)** - A simple proxy server created for Postwoman
  - **[CLI β](https://github.com/postwoman-io/postwoman-cli)** - A CLI solution for Postwoman
- - **[Browser Extensions](https://github.com/AndrewBastin/postwoman-firefox)** - Browser extensions that simplifies access to Postwoman
+ - **Browser Extensions** - Browser extensions that simplifies access to Postwoman
 
- > [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman)  |  ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome (coming soon)**
+   [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman) ([GitHub](https://github.com/AndrewBastin/postwoman-firefox))  |  [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome**](https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld) ([GitHub](https://github.com/AndrewBastin/postwoman-chrome))
 
-_Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**_
+   >**Extensions fixes `CORS` issues.**
+
+_Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**._
 
 **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).**
 

functions/network.js

@@ -1,8 +1,13 @@
 import AxiosStrategy from "./strategies/AxiosStrategy";
 import FirefoxStrategy from "./strategies/FirefoxStrategy";
-
+import ChromeStrategy, { hasChromeExtensionInstalled } from "./strategies/ChromeStrategy";
 
 const runAppropriateStrategy = (req, store) => {
+  // Chrome Provides a chrome object for scripts to access
+  // Check its availability to say whether you are in Google Chrome
+  if (window.chrome && hasChromeExtensionInstalled()) {
+      return ChromeStrategy(req, store);
+  }
   // The firefox plugin injects a function to send requests through it
   // If that is available, then we can use the FirefoxStrategy
   if (window.firefoxExtSendRequest) {

functions/strategies/ChromeStrategy.js

@@ -0,0 +1,56 @@
+const EXTENSION_ID = "amknoiejhlmhancpahfcfcfhllgkpbld";
+
+// Check if the Chrome Extension is present
+// The Chrome extension injects an empty span to help detection.
+// Also check for the presence of window.chrome object to confirm smooth operations
+export const hasChromeExtensionInstalled = () => {
+  return document.getElementById("chromePWExtensionDetect") !== null;
+}
+
+const chromeWithoutProxy = (req, _store) => new Promise((resolve, reject) => {
+  chrome.runtime.sendMessage(
+    EXTENSION_ID, {
+      messageType: "send-req",
+      data: {
+        config: req
+      }
+    }, (message) => {
+      if (message.data.error) {
+        reject(message.data.error);
+      } else {
+        resolve(message.data.response);
+      }
+    }
+  );
+});
+
+const chromeWithProxy = (req, { state }) => new Promise((resolve, reject) => {
+  chrome.runtime.sendMessage(
+    EXTENSION_ID, {
+      messageType: "send-req",
+      data: {
+        config: {
+          method: "post",
+          url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+          data: req
+        }
+      }
+    }, (message) => {
+      if (message.data.error) {
+        reject(error);
+      } else {
+        resolve(message.data.response.data);
+      }
+    }
+  )
+});
+
+const chromeStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return chromeWithProxy(req, store);
+  } else {
+    return chromeWithoutProxy(req, store);
+  }
+}
+
+export default chromeStrategy;

functions/strategies/FirefoxStrategy.js

@@ -6,7 +6,7 @@ const firefoxWithProxy = (req, { state }) =>
       if (event.detail.error) {
         reject(JSON.parse(event.detail.error));
       } else {
-        resolve(JSON.parse(event.detail.response));
+        resolve(JSON.parse(event.detail.response).data);
       }
     };
 

layouts/default.vue

@@ -470,27 +470,33 @@
           </a>
         </div>
         <div>
-          <button class="icon" disabled>
+          <a
-            <svg
+            href="https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld"
-              class="material-icons"
+            target="_blank"
-              xmlns="http://www.w3.org/2000/svg"
+            rel="noopener"
-              width="24"
+          >
-              height="24"
+            <button class="icon">
-              viewBox="0 0 24 24"
+              <svg
-            >
+                class="material-icons"
-              <path
+                xmlns="http://www.w3.org/2000/svg"
-                d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
+                width="24"
-              />
+                height="24"
-            </svg>
+                viewBox="0 0 24 24"
-            <span>Chrome (coming soon)</span>
+              >
-            <span
+                <path
-              class="icon"
+                  d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
-              v-if="chromeExtInstalled"
+                />
-              v-tooltip="$t('installed')"
+              </svg>
-            >
+              <span>Chrome</span>
-              <i class="material-icons">done</i>
+              <span
-            </span>
+                class="icon"
-          </button>
+                v-if="chromeExtInstalled"
+                v-tooltip="$t('installed')"
+              >
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
         </div>
       </div>
       <div slot="footer"></div>
@@ -612,6 +618,7 @@
 <script>
 import intializePwa from "../assets/js/pwa";
 import * as version from "../.postwoman/version.json";
+import { hasChromeExtensionInstalled } from "../functions/strategies/ChromeStrategy";
 
 export default {
   components: {
@@ -639,7 +646,7 @@ export default {
       showShortcuts: false,
       showSupport: false,
       firefoxExtInstalled: window.firefoxExtSendRequest,
-      chromeExtInstalled: false
+      chromeExtInstalled: window.chrome && hasChromeExtensionInstalled()
     };
   },