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? It 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 JavaScript:

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” by Mark Pilgrim 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.