Replace CSS with local file

Question

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.

I do not understand the question. What do you mean by "copy" and "creating new files"? — Xan, Jun 20 '16 at 09:40

score 1 · Accepted Answer · answered Jun 20 '16 at 12:32

1

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.

answered Jun 20 '16 at 12:32

ze_iliasgr

193
3
12

How would I be able to do that? >.< Sorry, I'm kind of new to creating extensions. – FireController1847 Jun 20 '16 at 18:11
You can find the manifest.json file in your working folder. Append the above line in the root element. – ze_iliasgr Jun 21 '16 at 09:09
Thanks so much! I would thumbs this up but I currently don't have enough rap :P – FireController1847 Jun 22 '16 at 19:17

Replace CSS with local file

1 Answers1