Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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.

share|improve this question
    
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
add comment

4 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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
3  
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
add comment

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.

share|improve this answer
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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