0

I am trying to create a chrome extension that should mute the sound of my online class platform but should not mute the polls. I want to have a button which when clicked should mute and unmute the tab sound.

This is my manifest.json

{
    "name":"ClassBunker",
    "version":"1.0",
    "manifest_version":2,
    "description": "A Class Bunker Tool",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
     "browser_action":{
       "default_popup":"popup.html",
       "default_title":"Bunk Class"
     }
     ,
     "permissions": [
         "contextMenus"
     ]

}

this is my popup.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
     <button>startBunk</button>
     <script src="popup.js"></script>
</body>
</html>

this is my popup.js

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector("button").addEventListener("click",onclick,false)

    function onclick(){
        chrome.tabs.query({currentWindow: true,active:true},
          function(tabs){
             chrome.tabs.sendMessage(tabs[0].id,"true")
          }    
        )
    }
},false)

and this is my content.js

let target = document.querySelector("#remote-media");  //id of the audio element i want to mute
chrome.runtime.onMessage.addListener( function(request){
    if(request == 'true'){
       target.muted = true;
         console.log("Muted");
    }
    else{
         target.muted = false;
        console.log("Unmuted");
    }
});

it's not working neither showing an error even console.log is not working. Also, I want to know the logic so that I can mute/unmute both. this logic is only to mute the tab.

  • 1
    Move `let target` line inside the listener function and reload the entire extension. If it works, the problem was that the element didn't exist at the time the content scripts are executed. Don't forget to reload the tab as well after reloading the extension (or [switch to executeScript](https://stackoverflow.com/a/4532567) instead of content_scripts in manifest.json) – wOxxOm Jan 16 '21 at 07:08
  • I tried that earlier also, but it's giving an error: cannot setAttribute of null. Actually the site is generating dynamic content HTML is also provided by the backend so I don't how to wait for all the content to load. – Karan Singh Jan 16 '21 at 12:07
  • 1
    Use MutationObserver in content script. – wOxxOm Jan 16 '21 at 12:08
  • can you please explain the code? I am a beginner in developing the chrome-extensions – Karan Singh Jan 16 '21 at 12:11

0 Answers0