Добавление пользовательского интерфейса jQuery к сценарию Greasemonkey завершается неудачно с внешним файлом CSS

Question

Я пытаюсь добавить jquery-ui в скрипт Greasemonkey. мой полный код: 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');

и в текущем каталоге я добавил каталог JS и CSS. Выдает ошибку, говоря 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

Строка 13:

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

В чем проблема? Как я могу добавить jquery-ui и использовать его в своем скрипте?

Answer 1

// @require в настоящее время работает только с файлами JavaScript. Эта ошибка из-за попытки проанализировать CSS как JS.

Используйте // @resource для файлов CSS, например:

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

---

Тем не менее, jQuery-UI CSS интенсивно использует фоновые изображения. Изображения, которые включены через относительные пути.

Чтобы получить максимальный эффект CSS jQuery-UI, я больше не рекомендую добавлять его через GM_addStyle().

Используйте вставленный <link>, как показано в в этом полном примере jQuery-UI usercript .