Adición de jQuery UI al script de Greasemonkey falla con el archivo CSS externo

Question

Estoy intentando añadir jquery-ui para un script de Greasemonkey. mi código completo: 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'); 

y en el directorio actual que añadió JS y CSS directorio. Se lanza error diciendo 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 

La línea 13 es:

.ui-helper-hidden { display: none; } 

¿Cuál es el problema? ¿Cómo puedo agregar jquery-ui y usarlo en mi userscript?

Answer 1

// @require actualmente sólo funciona con archivos javascript. Ese error es tratar de analizar CSS como JS.

Uso // @resource de archivos CSS, así:

// ==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'); 

---

Sin embargo, jQuery-UI CSS hace un uso intensivo de las imágenes de fondo. Imágenes que se incluyen a través de rutas relativas.

Para obtener el máximo efecto de CSS jQuery-UI, ya no recomiendo agregarlo a través GM_addStyle().

Utilice una inyectada <link> como se muestra en this complete, jQuery-UI example userscript.