Change css locally per domain.

Question

I want to add css to pages with a certain url in much the same way that greasemonkey adds javascript. I guess I could inject some css with a script but that isn't as clean.

Are there any browser plugins that let me do this? Doesn't necessarily need to be a Firefox one.

Answer 1

If you have access to jQuery you could do this pretty easily:

var css_href = "path to css";
var head = document.getElementsByTagName('head')[0]; 

$(document.createElement('link')) 
    .attr({ type: 'text/css', 
            href: css_href, 
            rel: 'stylesheet, 
            media: 'screen''}) 
    .appendTo(head); 

[Source]

This can also be done pretty easily with vanilla JS:

function addStyle(style) {
  var head = document.getElementsByTagName("HEA­D")[0];
  var ele = head.appendChild(window.document.c­reateElement( 'style' ));
  ele.innerHTML = style;
  return ele;
}

addStyle('@import "/URL/TO/STYLESHEET;"');

[Source] (Apparently from "Dive into greasemonkey" originally)

You might want to make sure your styles have !important declarations though.

Having said that, it should be easy to remove the existing stylesheets this way too and perhaps even iterate elements and remove inline styles.

Answer 2

There's the Stylish add-on for Firefox. It supports global, per-domain, and per-URL user stylesheets. It seems to work well for what I use it for, although I admittedly haven't played around with it very seriously.