Why am I not able to target the DOM in the active tab in this extension?
What I have is
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "This extension is for Tets",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"background": {
"scripts": ["jquery.min.js", "popup.js"],
"persistent": false
},
"content_scripts": [{
"js": ["jquery.min.js", "popup.js"],
"matches": ["http://*/*", "https://*/*"]
}]
}
and in popup.html I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div style="padding:60px;">
<button class="btn btn-default" >Button</button>
</div>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
and finally I have
$("button").on("click", function(){
$('body').css('background','red')
console.log("Test");
});
This is actually targeting the body of popup.html
and applying the .css()
to there.