How to get Firefox Greasemonkey script to use a local cascading stylesheet?

What's the correct syntax to link to a CSS file in the same directory as a Greasemonkey JavaScript? I've tried the following but it doesn't work:

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'example.css';
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

If I can get this to work, it would be a lot easier than encasing CSS changes in JavaScript.

Umber Ferrule

Posted 2010-01-12T10:41:42.383

Reputation: 3 149

1any reason for not using GM_addStyle() ? – ukanth – 2010-01-12T10:59:04.187

No, just personal preference :) I just find making many changes can be a bit tedious. I also find it easier to spot mistakes in a CSS file (syntax highlighting helps). – Umber Ferrule – 2010-01-12T12:04:49.610

Answers

This is easy with the @resource directive. Like so:

// ==UserScript==
// @name            _Use external CSS file
// @resource        YOUR_CSS  YOUR_CSS_File.css
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==

var cssTxt  = GM_getResourceText ("YOUR_CSS");

GM_addStyle (cssTxt);

With no path/url information, @resource looks for "YOUR_CSS_File.css" in the same directory.

Brock Adams

Posted 2010-01-12T10:41:42.383

Reputation: 2 000

I'm still unable to get a local CSS file working. However, I came across this tip (which works) and is a lot closer to what I was after:

GM_addStyle((<><![CDATA[

body { color: white; background-color: black }
img { border: 0 }
.footer {width:875px;}

]]></>).toString());

Thanks to Erik Vold.

Umber Ferrule

Posted 2010-01-12T10:41:42.383

Reputation: 3 149

Nowadays (using ECMAscript 2015+), you can use back-ticks to include multi-line strings, complete with variable inclusion, e.g. var border = 0; GM_addStyle(\ img { border:${border} } `)` thanks to template literals (which are not supported in IE).

– Adam Katz – 2017-09-29T14:46:43.897

4This won't work. Firefox dropped support for E4X in version 16 or 17. (Current version is 18.) – Brock Adams – 2013-01-30T01:14:54.080

Try this!

function addStyleSheet(style){
  var getHead = document.getElementsByTagName("HEAD")[0];
  var cssNode = window.document.createElement( 'style' );
  var elementStyle= getHead.appendChild(cssNode)
  elementStyle.innerHTML = style;
  return elementStyle;
}


addStyleSheet('@import "example.css";');

Note: example.css must live in the same directory as your user script for this example to work.

Reference - > DiveIntoGreaseMonkey

ukanth

Posted 2010-01-12T10:41:42.383

Reputation: 9 930

You need to pass the style sheet to the addStyleSheet function or it will not work.

function addStyleSheet(style){
  var getHead = document.getElementsByTagName("HEAD")[0];
  var cssNode = window.document.createElement( 'style' );
  var elementStyle= getHead.appendChild(cssNode);
  elementStyle.innerHTML = style;
  return elementStyle;
}

addStyleSheet('@import "http://wherever.com/style.css";');

To use a local file, change the last line to:

addStyleSheet('@import "style.css";');

This would load style.css in the same directory as the script.

Chris

Posted 2010-01-12T10:41:42.383

Reputation: 1

1How do you use a local stylesheet (i.e. in same directory as the GreaseMonkey script)? – Umber Ferrule – 2010-05-06T13:43:42.397