chrome.tabs.query not passing message to content.js

Question

I am stuck in a basic program just when I started learning chrome extension. My program is to build an extension which has button to change the color of the webpage. Changing color should be action driven that is why I didn't use default css to change the color on page load. Below are my files. The problem that I have is chrome.tabs.query in background.js is not returning tabs array and I get "ID not referenced error" Any help is appreciated. I have searched n number of articles on google and StackOverflow but nothing is helping me

Files: manifest.json

    {
"manifest_version": 2,
"name": "Hello world",
"description": "Demo extension",
 "version": "1.0",

 "icons":
{
"16": "images/dog.png", 
"48": "images/dog.png",
"128": "images/dog.png"
},

"background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

"browser_action":
{
"default_icon": "images/dog.png",
"default_popup": "popup.html"
},

"content_scripts": [{
    "js": ["content.js"],
    "matches": ["<all_urls>"]
  }],

"permissions": ["tabs", "http://*/*","activeTab"]
}

background.js

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        switch(message.type) {
            case "setcolor":
                chrome.tabs.query({active: true, currentWindow: true}, function(tab){
                chrome.tabs.sendMessage(tab[0].id,{type: "setcolor",color: message.color})
                });
                break;
            default:
                console.error("Unrecognised message: ", message);
        }

popup.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p id="demo">Click below button to change color of page</p>

<button type="button" id = "red"> RED </button>
<script src = "myscript.js"></script>

</body>
</html>

myscript.js (or popup.js)

function color(colorval) {
    chrome.runtime.sendMessage({type: "setcolor",color: colorval})
}

document.getElementById('red').addEventListener('click', color('red'));

content.js

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        document.body.style.backgroundColor = message.color;
        }
);

1) `Tab tabs` describes the type in the documentation, it's not a valid JS syntax, 2) See also [Where to read console messages from background.js in a Chrome extension?](https://stackoverflow.com/a/10258029), 3) there's no need for background script here as you can do the same in the popup's script. — wOxxOm, May 26 '20 at 05:26
@wOxxOm I was using only tabs initially and still wont work. Was just playing around so included Tabs tab. It wont work anyway. I get same error “id not referenced”. I have edited the code in the question since thats how i am using function(tab). I know we can achieve through different methods but thisis a basic example where i want to establish communication between popup, background and content. The actual usage is different once I am able to solve this basic example. — Anand Tiwari, May 26 '20 at 10:38
addEventListener line is wrong, it should be addEventListener('click', () => color('red')); — wOxxOm, May 26 '20 at 12:23
@wOxxOm how do I upvote your answer. I mentioned you in the answer section so it reflects on your profile. Sorry as I am new to the forum — Anand Tiwari, May 26 '20 at 13:07

score 0 · Answer 1 · answered May 26 '20 at 01:09

0

Try removing Tab as the first argument from your callback.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
   // your message logic
});

answered May 26 '20 at 01:09

jasonandmonte

1,869
2
15
24

1

Sorry for the confusion. I was using it the way you suggested. I should have reviewed before posting. I just updated the code in the question. It is not working that way. I was playing with Tabs tab but actual code is function(tab) which is not working. Please let me know . – Anand Tiwari May 26 '20 at 10:37

score 0 · Answer 2 · answered May 26 '20 at 12:52

Thanks to @wOxxOm for solving this. I was using the below function in a wrong way.

Old code:

document.getElementById('red').addEventListener('click', color('red'));

New code:

document.getElementById('red').addEventListener('click', () => color('red'));

or

document.getElementById('red').addEventListener('click', fucntion() {color('red')});

chrome.tabs.query not passing message to content.js

2 Answers2