FireController1847 FireController1847 - 1 year ago 75
CSS Question

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]
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.

Answer Source

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.