Support for Google Chrome Extension (#512)

Support for Google Chrome Extension
2020-01-23 11:42:57 +05:30
parent 32d57814a9 8b7fd238d0
commit 5119505475
5 changed files with 97 additions and 27 deletions
--- a/README.md
+++ b/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) &nbsp;|&nbsp; ![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)) &nbsp;|&nbsp; [![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).**

--- a/functions/network.js
+++ b/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) {
--- a/functions/strategies/ChromeStrategy.js
+++ b/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;
--- a/functions/strategies/FirefoxStrategy.js
+++ b/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);
      }
    };

--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -470,27 +470,33 @@
          </a>
        </div>
        <div>
-          <button class="icon" disabled>
-            <svg
-              class="material-icons"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path
-                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"
-              />
-            </svg>
-            <span>Chrome (coming soon)</span>
-            <span
-              class="icon"
-              v-if="chromeExtInstalled"
-              v-tooltip="$t('installed')"
-            >
-              <i class="material-icons">done</i>
-            </span>
-          </button>
+          <a
+            href="https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <svg
+                class="material-icons"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  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"
+                />
+              </svg>
+              <span>Chrome</span>
+              <span
+                class="icon"
+                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()
    };
  },