Adding jQuery UI to Greasemonkey script fails with external CSS file

Question

I\'m trying to add jquery-ui to a Greasemonkey script. my full code: test.user.js:

// ==UserScript==
// @name           Test
// @namespace              


        

Answer 1

// @require currently only works with javascript files. That error is from trying to parse CSS as JS.

Use // @resource for CSS files, like so:

// ==UserScript==
// @name        Test
// @namespace   rajat.khandelwal
// @description Test script
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @require     js/jquery-1.6.2.min.js
// @require     js/jquery-ui-1.8.16.custom.min.js
// @resource    customCSS css/ui-darkness/jquery-ui-1.8.16.custom.css
// @grant       GM_addStyle
// @grant       GM_getResourceText
// ==/UserScript==

var newCSS = GM_getResourceText ("customCSS");
GM_addStyle (newCSS);

alert('hi');

---

However, jQuery-UI CSS makes heavy use of background images. Images that are included via relative paths.

To get the maximum effect of jQuery-UI CSS, I no longer recommend adding it via GM_addStyle().

Use an injected <link> as shown in this complete, jQuery-UI example userscript.