How to get Firefox Greasemonkey script to use a local cascading stylesheet?
15,022
Solution 1
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.
Solution 2
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
Solution 3
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.
Related videos on Youtube
Comments
-
tiaga over 1 year
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.
-
Admin over 14 yearsany reason for not using GM_addStyle() ?
-
Admin over 14 yearsNo, 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).
-
-
tiaga about 14 yearsHow do you use a local stylesheet (i.e. in same directory as the GreaseMonkey script)?
-
Brock Adams over 11 yearsThis won't work. Firefox dropped support for E4X in version 16 or 17. (Current version is 18.)
-
Adam Katz over 6 yearsNowadays (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). -
user1132363 over 2 years"in the same directory" ... same as what? Greasemonkey plugin? My browser? My family photos?