Sound-Muter extension

The need.

Let me describe the need for this through an instance. Let's say you've multiple events to attend through online mode and these have collided at the same time. You've to focus on prioritizing one but be present for each. What will you do now? The answer is pretty simple for the particular timestamp mute one tab while listening to the other.

The birth of the idea.

Well, with the hopes that I could concentrate on my development while attending online classes. A few classes are uninteresting for me and I want to explore a development topic at the same time. So I would mute the Google meet tab and focus on hearing the other YouTube videos.

The usage of the browser extension.

An extension is easily accessible and it continues to run within the background and keep track of the tabs that have been selected to toggle with the extension. There was no usage of any external database just simple communication.

Code time. Best time.

Prerequisites

The knowledge of basic components required within a chrome extension is required. Please read the docs to get the basic idea for the code I am going to show you.

manifest.json

This file, in simple words, is responsible for stating the rules for the chrome extension you'll add to the browser.

{
    "name": "Mute Tab & Record",
    "version": "1.0",
    "description": "Mute individual tabs, keep the record of tabs and also availability to record the audio from the particular tab",
    "permissions": ["cookies", "contextMenus", "storage", "declarativeContent", "activeTab", "tabs"],
    "browser_action": {},
    "background": {
        "scripts": ["src/background.js"],
        "persistent": false
    },
    "content_scripts": [{
        "matches": [
          "https://*/*",
          "http://*/*"
        ],
        "js": ["src/content.js"],
        "run_at": "document_end"
      }],
      "icons": {
        "16": "icons/volume.png",
        "48": "icons/volume.png",
        "128": "icons/volume.png"

      },
    "manifest_version": 2
  }

Backbone of the code - background & content

The background is the script that will run as long as the extension is enabled and each time you're using the browser.

While the content is the script that only allows operations that are focused on the messaging with the browser.

In this code, there is continuous communication between the background and content. Let's describe how this communication takes place before jumping into code.

1. When the extension is clicked from a tab, a message from background to content is sent regarding the tab Id and a click count.

   Here, click count keeps track of whether to mute or unmute a tab.
   

    background.js
    let clickCount = 0, filePath;
    chrome.runtime.onInstalled.addListener(() => {
      chrome.browserAction.onClicked.addListener(tab => {
        chrome.tabs.sendMessage(tab.id, {message: "clicked", 
        tab: tab.id, count: clickCount++ });  
      });
    });
   

2. After the content receives the message from the background, it a chrome storage history is accessed. This history keeps the detail of whether the tab is mute or not state and the tab id.
   

    content.js
   
    chrome.runtime.onMessage.addListener((req, sender, 
    sendResponse) => {
      if (req.message === "clicked") {
        if (req.count === 0) chrome.storage.sync.set({ 
        history: [] });
        chrome.storage.sync.get(["history"], result => {
           if (!result.history.length) {
               result.history[0] = { isMute: true, tabId: 
               req.tab };   
               chrome.storage.sync.set({ history: 
               result.history });
           } else {
               if (tabIdExist(result.history, req.tab)) {
                   let arr = toggleMute(result.history, 
                   req.tab);
                   chrome.storage.sync.set({ history: arr 
                   });
               } else {
                   result.history.push({ isMute: true, 
                   tabId: req.tab });
                   chrome.storage.sync.set({ history: 
                   result.history });
               }
           }
   
           console.log(result.history);
           let detailsTab = 
           fetchParticularTab(result.history, req.tab);
           chrome.runtime.sendMessage(detailsTab);
           });
         }
    });
   

3. After this history is updated, the content sends a message to the background stating it is updated. Based on this data, for the recent tab you're on, if its state is mute, the code will run a script to unmute the tab and if its state is not mute, the code will run a script to mute the tab.
   

    background.js
    chrome.runtime.onMessage.addListener((req, sender, 
    sendResponse) => {
      if (req.isMute) filePath = "src/scripts/mute.js";
      if (!req.isMute) filePath = "src/scripts/unmute.js";
   
      chrome.tabs.executeScript(req.tabId, {
       file:  filePath
     });
    });  
   

4. Additional scripts and functions are trivial and can be accomplished if you've got the basic logic understanding and are capable of writing code in javascript.

Drawbacks & alternatives.

1. Problem: You require the information on the coverage of video for each tab even if it's muted.

   Alternative: An additional feature using javascript can be included to record the contents of the video even if it's muted.

2. Problem: Your presence has been called by the organizer of the call to speak. With the mute tab, you would be unaware of whether your name has been called.

   Alternative: As the recording of the message will be included, we can use it to alter the user when their name is used in the context along with a summarized context using a keyboard before the user's name came up within the online meeting which had been muted.

Conclusion

In conclusion, this extension can be useful in certain cases. With the additional features, it could be an amazing extension as a whole. What're your thoughts on it?

The entire codebase is present on my github profile. It includes the additional DOM scripts that mute and unmute a tab.