Use svelte store to change states

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": "eslint:recommended",
   "parser": "babel-eslint",
-  "parserOptions": {
-    "sourceType": "module"
+  "rules": {
+    "no-undef": 0
   }
 }

src/js/commander.js

@@ -2,6 +2,7 @@ import annyang from "./annyang";
 import { DEBUG, storage } from "./common";
 import NotificationManager from "./notification";
 import { updateBrowserAction } from "./browser_actions";
+import { activeListening } from './store';
 
 function getHost(url) {
   return new URL(url).host;
@@ -22,16 +23,24 @@ class Commander {
       annyang.addGrammars(grammars);
     }
 
-    this.notificationManager_ = new NotificationManager(this);
+    this.notificationManager_ = new NotificationManager();
     this.allPlugins_ = allPlugins;
     this.lastCommand_ = "";
     this.commandPriorities_ = {};
 
-    chrome.tabs.onActivated.addListener(activeInfo => {
+    activeListening.subscribe(value => {
+      if (value) {
+        this.startListeningToAllCommands();
+      } else {
+        this.clearNotifications();
+      }
+    });
+
+    chrome.tabs.onActivated.addListener(() => {
       this.notificationManager_.resendMessageIfAvailable();
     });
 
-    chrome.runtime.onMessage.addListener(async (request, sender) => {
+    chrome.runtime.onMessage.addListener(async (request) => {
       if (DEBUG) {
         console.log(`Received message: ${JSON.stringify(request)}`);
       }
@@ -48,7 +57,7 @@ class Commander {
           annyang.trigger(request.query);
           break;
         case "CLEAR_NOTIFICATION":
-          this.clearNotifications();
+          activeListening.set(false);
           break;
         case "TAB_LOADED":
           this.notificationManager_.resendMessageIfAvailable();
@@ -101,15 +110,21 @@ class Commander {
   }
 
   clearNotifications() {
+    chrome.tabs.query({ muted: true }, (tabs) => {
+      for (const tab of tabs) {
+        if (tab.mutedInfo.extensionId === chrome.runtime.id) {
+          chrome.tabs.update(tab.id, { muted: false });
+        }
+      }
+    });
     this.startListeningToTriggerCommands();
-    this.notificationManager_.clearMessage();
   }
 
   startListeningToAllCommands() {
-    this.notificationManager_.sendMessage({
-      type: "START_LISTENING",
-      title: "Listening",
-      content: "Hi, how can I help you?"
+    chrome.tabs.query({ audible: true }, (tabs) => {
+      for (const tab of tabs) {
+        chrome.tabs.update(tab.id, { muted: true });
+      }
     });
     updateBrowserAction(true);
     this.performActionWithDelay(() => {
@@ -243,11 +258,11 @@ class Commander {
     this.getActiveTab(activeTab => {
       if (!activeTab.url || activeTab.url.startsWith("chrome")) {
         // We can't use content script on chrome URLs, so need to create a new tab.
-        chrome.tabs.create({ url: "https://www.google.com" }, () =>
-          this.startListeningToAllCommands()
-        );
+        chrome.tabs.create({ url: "https://www.google.com" }, () => {
+          activeListening.set(true);
+        });
       } else {
-        this.startListeningToAllCommands();
+        activeListening.set(true);
       }
     });
   }
@@ -330,7 +345,7 @@ class Commander {
     this.performActionWithDelay(() => {
       chrome.storage.local.get(["autoOff"], result => {
         if (result.autoOff) {
-          commander.clearNotifications();
+          activeListening.set(false);
         }
       });
     })

src/js/notification.js

@@ -1,12 +1,23 @@
 import { DEBUG } from "./common";
 import { updateBrowserAction } from "./browser_actions";
+import { activeListening } from './store';
 
 const NOTIFICATION_TIMEOUT = 15000; 
 
 export default class NotificationManager {
-  constructor(commander) {
+  constructor() {
     this.lastData_ = undefined;
-    this.commander_ = commander;
+    activeListening.subscribe(value => {
+      if (value) {
+        this.sendMessage({
+          type: "START_LISTENING",
+          title: "Listening",
+          content: "Hi, how can I help you?"
+        });
+      } else {
+        this.clearMessage();
+      }
+    });
   }
 
   hasMessage() {
@@ -26,7 +37,7 @@ export default class NotificationManager {
     await this.innerSendMessage(request);
     setTimeout(() => {
       if (this.lastData_ === request) {
-        this.commander_.clearNotifications();
+        activeListening.set(false);
       }
     }, NOTIFICATION_TIMEOUT);
   }

src/js/plugins/extension.js

@@ -1,10 +1,11 @@
 import commander from "../commander";
+import { activeListening } from '../store';
 
 const commands = [
   {
     commands: ["bye", "bye bye", "goodbye", "good bye", "close"],
     callback: () => {
-      commander.clearNotifications();
+      activeListening.set(false);
     }
   },
   {

src/js/plugins/query.js

@@ -1,6 +1,7 @@
-import commander from "../commander";
 import cheerio from "cheerio";
 import axios from "axios";
+import commander from "../commander";
+import { activeListening } from '../store';
 
 /** ------- Search query ------- */
 const prependQueryPhrase = queries => {
@@ -272,7 +273,7 @@ const commands = [
             "https://www.google.com/search?gs_ivs=1&q=" +
             encodeURIComponent(query)
           );
-          commander.clearNotifications();
+          activeListening.set(false);
         } else {
           commander.openTabWithUrl(
             "https://www.google.com/search?q=" +

src/js/store.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const activeListening = writable(false);