Executing code only if the browser is Google Chrome

Question

I used webkitSpeechRecognition for voice controlled navigation on my website. It works perfectly fine on Google Chrome, but on other browsers such as Edge and Opera the website will actually break.

How can I run the code responsible for firing this feature only if the website is displayed on a Chrome Browser ?

This is the code responsible for the feature:

SpeechRecognition.js

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

export const recognition = new SpeechRecognition();

recognition.start();

Main.js

  const history = useHistory();
  recognition.onresult = (event) => {
    const command = event.results[0][0].transcript;

    if (command.includes("navigate to") || command.includes("go to")) {
      if (command.includes("home") || command.includes("index")) {
        history.push("/home");
      } else if (command.includes("education") || command.includes("index")) {
        history.push("/education");
      } else if (command.includes("experience") || command.includes("index")) {
        history.push("/experience");
      } else if (command.includes("contact") || command.includes("index")) {
        history.push("/contact");
      } else if (command.includes("projects") || command.includes("index")) {
        history.push("/projects");
      } else if (command.includes("hobbies") || command.includes("index")) {
        history.push("/hobbies");
      }
    } else if (command.includes("go back")) {
      history.goBack();
    }
  };
  
  recognition.onend = () => {
    recognition.start();
  };

I tried surrounding the code with the following both in Main.js and SpeechRecognition.js:

  const isChromeBrowser = /Chrome/.test(navigator.userAgent)
  && /Google Inc/.test(navigator.userAgent);
  if (isChromeBrowser) { // Code Here ... }

This still doesn't fix the issue, opening the web app in Opera gives a blank page.

Can anyone help with this ?

Answer 1

From Mozilla docs

function getBrowserName(userAgent) {
  // The order matters here, and this may report false positives for unlisted browsers.

  if (userAgent.includes("Firefox")) {
    // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
    return "Mozilla Firefox";
  } else if (userAgent.includes("SamsungBrowser")) {
    // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
    return "Samsung Internet";
  } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
    // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
    return "Opera";
  } else if (userAgent.includes("Edge")) {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    return "Microsoft Edge (Legacy)";
  } else if (userAgent.includes("Edg")) {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
    return "Microsoft Edge (Chromium)";
  } else if (userAgent.includes("Chrome")) {
    // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
    return "Google Chrome or Chromium";
  } else if (userAgent.includes("Safari")) {
    // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
    return "Apple Safari";
  } else {
    return "unknown";
  }
}

const browserName = getBrowserName(navigator.userAgent);
console.log(`You are using: ${browserName}`);