I'm trying to add jquery-ui to a Greasemonkey script. my full code: test.user.js
:
// ==UserScript==
// @name Test
// @namespace rajat.khandelwal
// @description Test script
// @include *
// @require js/jquery-1.6.2.min.js
// @require js/jquery-ui-1.8.16.custom.min.js
// @require css/ui-darkness/jquery-ui-1.8.16.custom.css
// ==/UserScript==
alert('hi');
and In current directory I added JS and CSS directory. It throws error saying syntax error in css
Error: syntax error
Source File: file:///C:/Users/Rajat/AppData/Roaming/Mozilla/Firefox/Profiles/poxivdqy.default/gm_scripts/test/jquery-ui-1816custom.css
Line: 13
Line 13 is:
.ui-helper-hidden { display: none; }
What is the problem? How can I add jquery-ui and use it in my userscript?
// @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.