Hinzufügen von jQuery UI zu Greasemonkey-Skript schlägt mit externer CSS-Datei fehl

Question

Ich versuche, jquery-ui zu einem Greasemonkey-Skript hinzuzufügen. mein vollständiger 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');

und im aktuellen Verzeichnis habe ich das JS- und CSS-Verzeichnis hinzugefügt. Es wird ein Fehler ausgegeben, der besagt 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

Zeile 13 lautet:

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

Was ist das Problem? Wie kann ich jquery-ui hinzufügen und in meinem Userscript verwenden?

Answer 1

// @require funktioniert derzeit nur mit Javascript-Dateien. Der Fehler kommt von dem Versuch, CSS als JS zu parsen.

Verwenden Sie // @resource für CSS-Dateien, etwa 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');

---

Allerdings macht jQuery-UI CSS viel Gebrauch von Hintergrundbildern. Bilder, die über relative Pfade eingebunden werden.

Um die maximale Wirkung von jQuery-UI CSS zu erzielen, empfehle ich nicht mehr, es über GM_addStyle() .

Verwenden Sie ein injiziertes <link> wie gezeigt in dieses vollständige jQuery-UI-Beispiel-Userskript .