Im trying to inject a css into my active tab
(https://developer.chrome.com/docs/devtools/css/) programatically using jquery .css() function in my chrome extension , But the color change in the css is not reflected in the web page .
When the submit button in popup.js is clicked , it sends the color code to content.js , the content script which is supposed to then inject the css into the selected tags .
manifest.json :
{
"manifest_version" :3 ,
"name" : "PageFontstyle Extension" ,
"version" :"1.0" ,
"description" : "changes font style on a specific page" ,
"icons" :{
"128" :"icon128.jpg" ,
"48" :"icon48.jpg" ,
"16" :"icon16.jpg"
} ,
"action" :{
"default_icon" :"icon16.jpg" ,
"default_popup" :"popup.html" ,
"default_title" :"PageFontStyle"
},
"background" :{
"service_worker" : "eventPage.js"
} ,
"content_scripts" :[{
"matches" : ["https://developer.chrome.com/*"],
"js" : ["content.js","jquery-3.7.0.min.js"]
}
],
"permissions" :[
"tabs",
"scripting",
"activeTab"
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<title>PageFontStyle</title>
<script src = "jquery-3.7.0.min.js"></script>
<script src="jscolor.min.js"></script>
<style>
body{
min-width :250px ;
min-height:150px ;
}
</style>
</head>
<form>
<body>
<input type = "text" id ="fontColor" data-jscolor="" />
<input type = "submit" id="btnChange" value="change"/>
</body>
</form>
<script src="popup.js"></script>
</html>
popup.js
$(function(){
var color = $('#fontColor').val() ;
$('#fontColor').on('change paste keyup',function(){
color = $(this).val() ;
}) ;
$('#btnChange').click(function() {
chrome.tabs.query({
active: true,
currentWindow: true
}, async function(tabs) {
await chrome.tabs.sendMessage(tabs[0].id, {
todo: "changeColor",
clickedColor: color
});
});
});
}) ;
content.js
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
if (request.todo == "changeColor"){
var addColor = "#" + request.clickedColor ;
$('#view').css('color',addColor) ;
}
}) ;
