CODEWITHSUNDEEP
javascriptcssgoogle-chromegoogle-chrome-extension
FireController1847
FireController1847

Reputation: 1942

Replace CSS with local file

So I am currently making a google chrome extension, and what I am trying to do is copy one of my local CSS to the webpage, to replace it. This is what I have, but it's not copying them, but instead creating new files. How do I get this to copy my local file instead of create new ones?

function ChangeStyle(Style){
    var header =  document.getElementsByTagName("head")[0]
    var oringinal_link = document.getElementsByTagName("link")[0]
    oringinal_link.remove()
    if(Style === 1){
        $("head").prepend('<link rel="stylesheet" type="text/css" href="/default.css">')
    } else if(Style === 2){
        $("head").prepend('<link rel="stylesheet" type="text/css" href="/style1.css">')
    } else if(Style === 3){
        $("head").prepend('<link rel="stylesheet" type="text/css" href="/style2.css">')
    }
    console.log("[The Sustainer] Style " + Style + " has been loaded!")

This is my content.js file.

Upvotes: 0

Views: 541

Answers (1)

ze_iliasgr
ze_iliasgr

Reputation: 193

You have to include the css file you want to upload in the manifest file as web accesible.

{ ...,   
  "web_accessible_resources": ["default.css", "style1.css", "style2.css"],
...}

Loading the css file can be done only in your content script.

Upvotes: 1

Related Questions