Feat/firefox strategy

README.md

@@ -218,8 +218,11 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/li
 
 📦 **Add-ons**: Official add-ons for Postwoman.
 
- - **[Postwoman Proxy β](https://github.com/postwoman-io/postwoman-proxy)** - A simple proxy server created for Postwoman
- - **[Postwoman CLI β](https://github.com/postwoman-io/postwoman-cli)** - A CLI solution for Postwoman
+ - **[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/postwoman-io/postwoman-cli)** - Browser extensions that simplifies access to Postwoman
+
+ [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_24x24.png) **Firefox**]()  |  ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_24x24.png) **Chrome (coming soon)**
 
 _Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**_
 

lang/en-US.js

@@ -245,5 +245,8 @@ export default {
   go_home: "Go Home",
   reload: "Reload",
   enter_curl: "Enter cURL",
-  empty: "Empty"
+  empty: "Empty",
+  extensions: "Extensions",
+  extensions_info1: "Browser extension that simplifies access to Postwoman",
+  extensions_info2: "Get Postwoman browser extension!"
 };

layouts/default.vue

@@ -293,6 +293,16 @@
                     <i class="material-icons">more_vert</i>
                   </button>
                   <template slot="popover">
+                    <div>
+                      <button
+                        class="icon"
+                        @click="showExtensions = true"
+                        v-close-popover
+                      >
+                        <i class="material-icons">extension</i>
+                        <span>{{ $t("extensions") }}</span>
+                      </button>
+                    </div>
                     <div>
                       <button
                         class="icon"
@@ -402,6 +412,66 @@
         <aside class="nav-second"></aside>
       </div>
     </div>
+    <modal v-if="showExtensions" @close="showExtensions = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("extensions") }}</h3>
+              <div>
+                <button class="icon" @click="showExtensions = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <p class="info">
+          {{ $t("extensions_info1") }}
+        </p>
+        <div>
+          <a
+            href="https://addons.mozilla.org/en-US/firefox/addon/postwoman"
+            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="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181 1.832-2.066 4.499-3.378 7.472-3.378 5.912 0 8.263 4.283 8.003 6.657z"
+                />
+              </svg>
+              <span>Firefox</span>
+            </button>
+          </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>
+          </button>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
     <modal v-if="showShortcuts" @close="showShortcuts = false">
       <div slot="header">
         <ul>
@@ -532,6 +602,7 @@ export default {
       // prompt.
       showInstallPrompt: null,
       version: {},
+      showExtensions: false,
       showShortcuts: false,
       showSupport: false
     };
@@ -591,6 +662,33 @@ export default {
           ]
         });
       }
+      let showExtensionsToast =
+        localStorage.getItem("showExtensionsToast") === "yes";
+      if (!showExtensionsToast) {
+        setTimeout(() => {
+          this.$toast.show(this.$t("extensions_info2"), {
+            icon: "extension",
+            duration: 5000,
+            theme: "toasted-primary",
+            action: [
+              {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  this.showExtensions = true;
+                  localStorage.setItem("showExtensionsToast", "yes");
+                  toastObject.goAway(0);
+                }
+              },
+              {
+                text: this.$t("no"),
+                onClick: (e, toastObject) => {
+                  toastObject.goAway(0);
+                }
+              }
+            ]
+          });
+        }, 10000);
+      }
     })();
 
     window.addEventListener("scroll", event => {