I m working on extension that changes the background color of all divs on page to red but the control doesnot pass to the content script. Using the developers tools i m able to set breakpoints in background.js and popup.js but not in content.js so i used console.log but it is not executing plz help
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="change-btn">Change color of Divs</button>
</body>
</html>
popup.js
window.onload=init;
function init(){
var btn=document.getElementById("change-btn");
btn.onclick = function(){
chrome.runtime.sendMessage({type:"color-div" });
}
};
background.js
chrome.runtime.onMessage.addListener(function(request, sender, response){
if(request.type==="color-div"){
colordiv();
}
});
function colordiv(){
chrome.tabs.query({ active:true, currentWindow:true} , function(tab){
chrome.tabs.sendMessage( tab[0].id, {type: "colors-div", color: "#F00"});
});
};
content.js
chrome.runtime.onMessage.addListener(function(request, sender, response){
if(request.type==="colors-div"){
var divs= document.querySelectorAll("div");
if(divs.length===0)
alert("There r no divs on this page ");
else{
console.log("Before for loop");
for(var i=0; i<divs.length; i++)
{
divs[i].style.backgroundColor=request.color;
}
console.log("After for loop");
}
}
});
manifest.json
{
"name": "BrowserExtension",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Description ...",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_title": "That's the tool tip",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions":["tabs"]
}
