I'm currently working on developing a chrome extension, and my goal is to have a small circle appear on the screen when the extension is active. I require CSS for this task, and my plan involves setting the background in the manifest file and triggering the content script upon clicking the icon. Right now, I have it set so that the tab URL change activates the feature, but I am still experimenting. Adding the necessary CSS to my content script has proven challenging. I researched and found mention of insertCSS(), but that seems to only accommodate single lines of code, whereas I have much more content to add. Any suggestions or ideas would be greatly appreciated. I've consulted the primary Google documentation and MDN as well.
//BACKGROUND
try {
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status == 'complete') {
chrome.scripting.executeScript({
files: ['content-script.js'],
target: {tabId: tab.id}
});
}
});
} catch (e) {
console.log(e);
}
//CONTENT-SCRIPT (in another file, wasn't sure how to add it to the question
if (typeof init === 'undefined') {
const init = function() {
const injectElement = document.createElement("button");
injectElement.className = 'button_attempt';
injectElement.innerHTML = "T";
document.body.appendChild(injectElement);
}
init();
}//CSS
@import url('https://fonts.googleapis.com/css2?family=Prociono&family=Sorts+Mill+Goudy&display=swap');
@font-face {
font-family: 'Goudy Bookletter 1911';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/goudybookletter1911/v13/sykt-z54laciWfKv-kX8krex0jDiD2HbY6IJshzW.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.button_attempt {
background-image: url(icon.png);
width: 2.5rem;
height: 2.5rem;
font-family: 'Goudy Bookletter 1911';
font-size: 1.25rem;
color: white;
background-color: #A485C7;
cursor: pointer;
border: 2px solid #D0B3F1;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
/*display: none;*/
transition: color 0.2s, background-color 0.2s ease-in-out;
}
.button_attempt:hover {
color: #A485C7;
background-color: white;
}//MANIFEST
{
"name" : "Practice",
"version" : "1.0.0",
"manifest_version" : 3,
"background" : {
"service_worker": "background.js"
},
"permissions" : ["scripting"],
"host_permissions": ["<all_urls>"]
}