Is there a Chrome extension to swap out CSS?

4

1

I'm trying to completely replace the CSS for a domain with different CSS (i.e. swap out the CSS at gaming.SE for that of Stack Overflow). I'd ideally like an extension that lets me do this. I've used Personalized Web, which allows loading in CSS for a given domain, but it still loads the original CSS (you can specify CSS to ignore, but you have to do this rule by rule!

Does anyone know of a way of doing this?

fredley

Posted 2011-10-04T13:08:26.807

Reputation: 3 197

Question was closed 2014-08-10T18:11:21.230

Answers

5

Using the WebDeveloper extension, you can do exactly that!

Once installed, open the extension, hit the CSS tab and choose "edit css". you can then override every loaded CSS for that webpage.

Hope this helps!

-EDIT- For persistent changes, you can try Stylebot. They say "Stylebot is a Google Chrome extension that allows you to quickly create and save persistent custom CSS for sites".

Christophe Deliens

Posted 2011-10-04T13:08:26.807

Reputation: 159

Can you persist the changes you make though? – fredley – 2011-10-04T15:29:05.000

Nope as it's only meant for test purposes. Sorry, I didn't get the "persistent" aspect of your request :/ – Christophe Deliens – 2011-10-05T07:49:00.927

Sorry for the double post, but I don't know whether you'll get a notification or not for my edited post with improved answer -> you can try Stylebot (http://stylebot.me/about)

– Christophe Deliens – 2011-10-05T07:51:31.643

Again, stylebot allows you to add, but not remove from a page, so it's only as useful as Personalized Web... – fredley – 2011-10-05T08:02:16.157

2

With LiveStyle you have real time css reloading on save (SublimeText extension), you can associate remote css styles with local ones and even add extra css files to overwrite remote styles.

Edit: I settled on CSSInject extension - LiveStyle seems to reset css changes on refresh, so I'm keeping it only for live editing. If you need CSSInject to remove a style, add this code at line 49 in loadcss.js

for(var elem in document.getElementsByTagName("link") ) { 
   var node = document.getElementsByTagName("link")[elem];
   if(node.getAttribute("href") == "/path/to/css-style/to-remove.css") {       
     node && node.parentNode.removeChild(node);
  } 
}

Rice Dilla

Posted 2011-10-04T13:08:26.807

Reputation: 21

1

Sounds like you are looking for a usercss extension of some kind, try something like stylish https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe, or alternatively chrome stylist https://chrome.google.com/webstore/detail/pabfempgigicdjjlccdgnbmeggkbjdhd?hc=search&hcp=main

atomic1fire

Posted 2011-10-04T13:08:26.807

Reputation: 31

I tried these, but they don't allow you to remove css before applying. – fredley – 2011-10-10T08:55:05.597