0

Per the question asked, is it possible for me to target the element of a specific website instead of my popup.html using JavaScript? The link in the manifest has been removed from this question.

My JS file

function myAlert(){
    alert('You have activated dark mode!');
         // Create new link Element
         var link = document.createElement('link');
         link.rel = 'stylesheet';
         link.type = 'text/css';
         link.href = 'css/dark-mode.css';
         document.getElementsByTagName('HEAD')[0].appendChild(link);
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('darkMode').addEventListener('click', myAlert);
});

My manifest file

{
"manifest_version": 3,
"name": "Dark Mode Extension",
"version": "1.0",
"action": {
  "default_popup": "popup.html"
},
"content_scripts": [
  {
    "matches": ["*://*.WEBSITEHERE.com/*"],
    "js": ["js/dark-mode.js"]
  }
],

"permissions": ["tabs", "activeTab", "storage", "notifications"]

}

The stylesheet is added to the popup.html and not the website when the button is pressed Picture of result

xAndrula
  • 27
  • 6
  • You can inject css in your content script. – Norio Yamamoto Feb 08 '23 at 07:14
  • Yes, and another solution is to use chrome.scripting.insertCSS and chrome.scripting.registerContentScripts, which is more performant. – wOxxOm Feb 08 '23 at 07:15
  • @NorioYamamoto Yeah, I did have that before I tried using JS. But I want to build an extension where you can switch between different dark mode styles. If I put the CSS file in content script, it toggles the CSS instantly – xAndrula Feb 08 '23 at 07:31

0 Answers0