Fix browser detection for the extension button.

Author: sebadoom

src/website/extension.js

@@ -1,34 +1,7 @@
 import { extensionButton, extensionButtonText } from './dom-elements.js';
+import { isChrome } from './utils.js';
 import strings from '../strings.js';
 
-// https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
-function isChrome() {
-  // please note,
-  // that IE11 now returns undefined again for window.chrome
-  // and new Opera 30 outputs true for window.chrome
-  // and new IE Edge outputs to true now for window.chrome
-  // and if not iOS Chrome check
-  // so use the below updated condition
-  const isChromium = window.chrome,
-        winNav = window.navigator,
-        vendorName = winNav.vendor,
-        isOpera = winNav.userAgent.indexOf("OPR") > -1,
-        isIEedge = winNav.userAgent.indexOf("Edge") > -1,
-        isIOSChrome = winNav.userAgent.match("CriOS");
-
-  if (isIOSChrome) {
-    return false;
-  } else if (isChromium !== null && 
-             isChromium !== undefined && 
-             vendorName === "Google Inc." && 
-             isOpera == false && 
-             isIEedge == false) {
-    return true;
-  } else {
-    return false;
-  }
-}
-
 function setInstalledText() {
   if (extensionButton.classList.contains('is-installed')) {
     extensionButtonText.firstChild.textContent =

src/website/index.js

@@ -6,6 +6,7 @@ import { setupJwtCounter } from './counter.js';
 import { setupSmoothScrolling } from './smooth-scrolling.js';
 import { setupHighlighting } from './highlighting.js';
 import { getParameterByName } from '../utils.js';
+import { isChrome, isFirefox } from './utils.js';
 import { 
   publicKeyTextArea, 
   codeElements, 
@@ -41,7 +42,7 @@ function parseLocationQuery() {
 }
 
 function pickEbookOrExtensionBanner() {
-  if(Math.random() >= 0.5) {
+  if((isChrome() || isFirefox()) && (Math.random() >= 0.5)) {
     extensionSection.style.display = 'block';
   } else {
     ebookSection.style.display = 'block';

src/website/utils.js

@@ -19,3 +19,13 @@ export function isInViewport(elem) {
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
   );
 };
+
+//From:
+// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+export function isChrome() {
+  return !!window.chrome && !!window.chrome.webstore;
+}
+
+export function isFirefox() {
+  return typeof InstallTrigger !== 'undefined';
+}

views/website/ebook.pug

@@ -1,5 +1,5 @@
 section.jtw-ebook-banner
   span
     strong Get the JWT Handbook for free!
-    | Spread the word and download it now.
+    |  Spread the word and download it now.
   a.btn.btn-download-ebook(href='https://auth0.com/e-books/jwt-handbook?utm_source=jwtio&utm_medium=sc&utm_campaign=rotating_banner', target='_blank') Download Ebook

views/website/extension.pug

@@ -1,7 +1,7 @@
 section.update-site
   span
     strong Love JWT.IO?
-    | Bring the debugger to your favorite browser with our new chrome extension.
+    | Bring the debugger to your favorite browser with our new browser extension.
   a#extension-button.extension-button
     svg(width='14px', height='13px', viewbox='24 11 14 13', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
       defs