When phrase on web page is found, then mute all tabs. Chrome extension, Javascript

Question

I am trying to write Google extension. The problem is i want to mute/turn off sound in tab/all tabs when script find phrase.

Eg.: You click on random video on Youtube. When in descibtion is "License granted to YouTube", then mute this tab.

Also it doesnt work when visit a page for a first time i have to reload it. :( 4th day of learning programming.

//smh which turn off sound of all tabs - sometimes work
function turn_Off_Sound() {
    chrome.tabs.query({url: []}, function (tabs) {
      for (var i = 0; i < tabs.length; i++) {
        var mutedInfo = tabs[i].mutedInfo;
        if (mutedInfo) chrome.tabs.update(tabs[i].id, {"muted": true});
      }
  });
};

//trying to find a phrase
var xpathResult = document.evaluate("(//text()[contains(., 'License granted to YouTube')][1])", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var node = xpathResult.singleNodeValue;

//not found
if (node == null){
    alert("Not found.");
}else {
//found
    alert("I find it, give me a hug!");
    turn_Off_Sound(); //trying to mute tabs 
};

{
  "manifest_version": 2,
  "name": "Mute tabs when find a phrase",
  "version": "0.0.1",
  "content_scripts": [ {
    "js": [ "script.js" ],
    "matches": [ "*://*/*"],
    "run_at": "document_end"
 } ],
  "permissions": [
    "contextMenus",
    "tabs",
    "activeTab",
    "storage",
    "http://www.google.com/",
    "https://ajax.googleapis.com/"], 
    
  } 
}

<html>
  <head></head>
  <body>
    <h1>We're running a Chrome extension!</h1>
    <h1>License granted to YouTube</h1>
  </body>
</html>

1) Content scripts can't use chrome.tabs API so you'll need to declare a background script with onMessage listener and send a message from the content script when the text is found so the background script will mute the tabs, see the [documentation](https://developer.chrome.com/extensions/messaging). 2) Youtube is a SPA site, see [How to detect page navigation on YouTube and modify its appearance seamlessly?](https://stackoverflow.com/a/34100952) — wOxxOm, Apr 12 '21 at 10:58
Thank you for advice, gonna try more with these new informations. — Vojtěch Fíla, Apr 12 '21 at 11:02

score 0 · Answer 1 · answered Apr 13 '21 at 19:09

I did a reseach a managed to do this, but it starts so fast, that its find a word on previus page, before page loads. I was creating this for three days, if someone can make it work, even different way, i will appriciate it.

Also i found this today:

search.query(queryInfo: QueryInfo, callback: function);

so its possible to write it just in the background.js, but i dont know how to make it work...

//manidest.json
      { 
        "name": "Learning",
        "manifest_version": 2,
        "version": "2", 
        "description": "Mute tabs, when Licence is on page", 
        
        "permissions": [
            "tabs", 
            "storage",
            "activeTab",
            "search",
            "*://*/*"
        ],  
        "content_scripts": [{
            "js": ["contentScript.js"],      
            "matches": ["*://*/*"]
        }],
        "background": {
            "persistent": true,
            "scripts": ["background.js"]      
        } 
        
    } 
    

//contentScript.js

    //contentScript.js
    //wait until for url change
    chrome.runtime.onMessage.addListener(
        function(request, sender, sendResponse) {
            if (request.message === 'URL reloaded') {
                //text finder
                var xpathResult = document.evaluate("(//text()[contains(., 'Licence')])[1]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
                var node=xpathResult.singleNodeValue;            
                if (node==null){ //text not found
                    chrome.runtime.sendMessage({message: "Not found"}, (response) => {
                        alert(response.message);
                    });            
                }else{ //text found
                    chrome.runtime.sendMessage({message: "Found it"}, (response) => {
                        alert(response.message);
                    });
                };
            } 
        }
    );  

//background.js
          //React on url change
      chrome.tabs.onUpdated.addListener(
        function(tabId, changeInfo, tab) {
          if (changeInfo.url) {
            chrome.tabs.sendMessage( tabId, {
              message: 'URL reloaded',
              url: changeInfo.url
            })          
          }          
        }
      );

      //React, when is smh found by contentScript.js or not
      chrome.runtime.onMessage.addListener(
        (request, sender, sendResponse) => {
          //If text is found
          if (request.message === "Found it"){
            //turn off sound
            chrome.tabs.query({url: []}, function (tabs) {
              for (var i = 0; i < tabs.length; i++) {
                var mutedInfo = tabs[i].mutedInfo;
                if (mutedInfo) {
                  chrome.tabs.update(tabs[i].id, {"muted": true});
                }
              }
            });
            sendResponse({message: "I found it, turning off sound."});
            //If text not found
          }else if (request.message === "Not found"){  
            //turn on sound
            chrome.tabs.query({url: []}, function (tabs) {
              for (var i = 0; i < tabs.length; i++) {
                var mutedInfo = tabs[i].mutedInfo;
                if (mutedInfo) {
                  chrome.tabs.update(tabs[i].id, {"muted": false});
                }
              }
            });
            sendResponse({message: "Not found, turning on sound."});
          }
        }
      );

When phrase on web page is found, then mute all tabs. Chrome extension, Javascript

1 Answers1