Chrome Extensions: Extension not working - Content Script Communicating with Background Script

Question

I am working on a Chrome Extension which changes the Browser Action Icon to "red.png" or "green.png" (which are both saved in the same directory as all other files) when the browser app detects sound is being played from an <audio> html5 tag.

My logical thought process is: User opens page, script starts running on page which constantly (perhaps a setInterval()) checks for if the sound is running. If the sound is running, change the icon to "green.png", else, set it to "red.png".

The way I am checking if sound is being played is this:

 if (audio.duration > 0 && !audio.paused)

Where audio is a variable holding the <audio> element.

Here is my code:

    manifest.json file:

{
    "name": "Creative Sound Dedection",
    "description": "Creatively detects sound.",
    "version": "1.0",

    "permissions": [
        "activeTab"
    ],

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    
    "browser_action": {
        "default_icon": "red.png"
    },
    
    "content_scripts" : [
        {
            "matches" : [ "<all_urls>" ],
            "js" : [ "myscript.js" ]
        }
    ],
    
    "manifest_version": 2
}

---

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
    var playing = request.playing;

    if(playing == true)
    {
        chrome.browserAction.setIcon({path:"green.png"});
    }else{
        chrome.browserAction.setIcon({path:"red.png"});
    }
});

---

myscript.js

function isAudioPlaying(var audio)
{
    if (audio !== false && audio.duration > 0 && !audio.paused)
    {
        return true;
    }
    
    return false;
}

function getAudio()
{
    if(document.getElementById("myAudio")) return document.getElementById("myAudio");
    
    return false;
}

//if audio is playing: tell background that audio is playing, otherwise, tell it audio is not playing
function sendInfo()
{
    chrome.runtime.sendMessage({
        "playing": true
    });
}

document.addEventListener('DOMContentLoaded', function () {
    setInterval(sendInfo, 500);
});

I'm looking for help with why this isn't working and how to correct it, I'm very new to Chrome Extensions development as well as Javascript (although not necessarily new to programming).

Also if you can think of other ways (better) to accomplish the same task please let me know.

Any input would be greatly appreciated!

Answer 1

UPDATE:

Furthermore, the expression playing == true will always evaluate to false, since playing is a string. So:

// Change that:
var playing = request.playing;
if (playing == true) {...

// To this:
var playing = request.playing;
if (playing == "true") {...

---

setInterval(sendInfo(), 500); means:
"Every 500 milliseconds, execute the value returned by sendInfo()."

Since you want to say:
"Every 500 milliseconds, execute the function named sendInfo."

chagne the above to:
setInterval(sendInfo, 500);

---

BTW, chrome.extension.sendRequest/onRequest are obsolete and should be replaced with chrome.runtime.sendMessage/onMessage instead.
Besides being obsolete, the former does not properly load an event page (a.k.a. non-persistent background-page) before sending the message, so this might be the cause of your problem.