6

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.

2
  • 1
    any reason for not using GM_addStyle() ? – ukanth Jan 12 '10 at 10:59
  • 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 Jan 12 '10 at 12:04
15

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.

1

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.

2
  • 4
    This won't work. Firefox dropped support for E4X in version 16 or 17. (Current version is 18.) – Brock Adams Jan 30 '13 at 1:14
  • 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 Sep 29 '17 at 14:46
1

Try this!

function addStyleSheet(style){
  var getHead = document.getElementsByTagName("HEAD")[0];
  var cssNode = window.document.c­reateElement( '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

0

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.

1
  • 1
    How do you use a local stylesheet (i.e. in same directory as the GreaseMonkey script)? – Umber Ferrule May 6 '10 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.