How can I make my chrome extension constantly listen for a keyword like Alexa?

Question

I have absolutely no javascript experience so please forgive my probably very awful code; I am painfully struggling through this project and have finally met a road block I cant seem to solve.

I want to use speechRecognition in my chrome extension to constantly listen for a keyword, in this case, "Spect." Once the keyword is recognized, a second speech recognition fires and captures the user's spoken question/prompt. Right now, the ListenerRecognition object runs for one cycle once the user changes tabs before stopping. I want to make it constantly run, listening for the keyword just like Alexa/Google Home does.

This is my content script:

    //speechRecognition.js

//initial recognition, listening for keyword "spect"
let ListenerRecognition = new webkitSpeechRecognition() || new SpeechRecognition();
//second recognition, will capture user's response
let recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 10;

grammar = "#JSGF V1.0; grammar activation; public <activation> = [spect];";

speechRecognitionList = new webkitSpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
ListenerRecognition.grammars = speechRecognitionList;

ListenerRecognition.continuous = false;
ListenerRecognition.lang = 'en-US';
ListenerRecognition.interimResults = false;
ListenerRecognition.maxAlternatives = 1;

recognition.onresult = function (event) {
  const transcript = event.results[0][0].transcript;
  chrome.runtime.sendMessage({ transcript: transcript });
  chrome.runtime.onMessage.addListener((message) => {
    if(message.TTSComplete == "TTS Complete"){
      recognition.stop();
      ListenerRecognition.start();
    }
  });
};

recognition.addEventListener("speechend", (event) => {
  var audio = new Audio(chrome.runtime.getURL("spectEnd.mp3"));
  audio.play();
});



ListenerRecognition.onresult = function (activationEvent) {
  const ListenerTranscript = activationEvent.results[0][0].transcript;
  chrome.runtime.sendMessage({ListenerTranscript: ListenerTranscript });
  if(activationEvent.results[0][0].transcript == "spect" || activationEvent.results[0][0].transcript == "expect")
  {
    var audio = new Audio(chrome.runtime.getURL("spectStart.mp3"));
    audio.play();
    ListenerRecognition.stop();
    recognition.start();
  };
};

ListenerRecognition.start();

Using a simple loop to restart the ListenerRecognition object every time it stops doesn't seem to work because the recognition thinks is already running.

On top of constantly listening, I realize that the ListenerRecognition will probably need to be implemented in a way that ensures it is only running once at a time; I'm thinking that everytime the user switches tabs, I need to stop it on the previous tab and restart it on the current tab.

There's also issues with the two speechRecognition objects being declared every time the user goes back to a tab, causing: Uncaught SyntaxError: Identifier 'ListenerRecognition' has already been declared

Any tips or recommendations would be very much appreciated!