I have a problem with connecting content.js to background.js so that after pressing the "switch" the action with background.js in content.js was triggered. I don't know if I should use popup.js additionally and how use it. I want to enable and disable the theme using "switch". I'm trying do this a few days.
My manifest.json:
{
"manifest_version": 3,
"name": "moonext",
"description": "Change UserAgent, Language, Background",
"version": "1.0",
"permissions": ["storage", "declarativeContent", "activeTab", "scripting"],
"action":{
"default_popup": "Popup.html",
"default_title": "moonext"
},
"icons": {
"16": "/images/moon.png",
"48": "/images/moontwo.png"
},
"content_scripts": [
{
"matches": ["https://synergia.librus.pl/*"],
"js": ["content.js"],
"css": ["main.css"],
"run_at": "document_end"
}
],
"background":{
"service_worker": "background.js"
}}
My content.js:
console.log("content.js is working");
var style = document.createElement('style');
style.innerHTML = `
// my styles
`;
document.head.appendChild(style);
My Popup.html (cut code):
<script src="popup.js" type="text/javascript"></script>
</head>
<body>
<div>
<h1>MOONEXT</h1>
<table>
<tr>
<td>
<p>Switch</p>
</td>
<td>
<label class="switch">
<input type="checkbox" id="switch1">
<span class="slider round">
</span>
</label>
</td>
</tr>
</table>
</div>
</div>
</body>
My background.js:
console.log("background.js is working");