16

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?

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
prongs
  • 9,422
  • 21
  • 67
  • 105
  • We need the lines before and after aswell, it might be possible you missed a `}` in the prev class and it throws the error on the next line since you can't open a new class when the other isn't closed. – Niels Dec 31 '11 at 13:26
  • @Niels : not much code. I've updated the question with my full code. And line 13 is line 13 in `jquery-ui-1816custom.css` I just copied the file as it is. Can't be a code problem there. – prongs Dec 31 '11 at 13:29

1 Answers1

46

// @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.

Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • I am using FireFox v.21. I did what you mentioned here I called jquery ready() function and tried to alert *newCSS* . it did not show up anything – Volatil3 Aug 04 '13 at 12:32
  • GM has changed since this answer was first posted. Updated the answer to reflect that. – Brock Adams Aug 05 '13 at 02:38
  • 1
    Unfortunately injected `` doesn't work on sites which set `Content-Security-Policy` to a value which prohibits loading CSS from ajax.googleapis.com (or wherever the `` points to. – Adam Spiers Jun 28 '21 at 02:53