Thêm giao diện người dùng jQuery vào tập lệnh Greasemonkey không thành công với tệp CSS bên ngoài

Question

Tôi đang cố thêm jquery-ui vào tập lệnh Greasemonkey. mã đầy đủ của tôi: 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'); 

và trong thư mục hiện tại tôi đã thêm JS và thư mục CSS. Nó ném lỗi nói 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 

dòng 13 là:

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

vấn đề là gì? Làm thế nào tôi có thể thêm jquery-ui và sử dụng nó trong usercript của tôi?

Answer 1

// @require hiện chỉ hoạt động với các tệp javascript. Lỗi đó là từ việc phân tích cú pháp CSS thành JS.

Sử dụng // @resource cho các tập tin CSS, như vậy:

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

---

Tuy nhiên, jQuery-UI CSS tận dụng nặng của ảnh nền. Hình ảnh được bao gồm thông qua đường dẫn tương đối.

Để có được hiệu ứng tối đa của CSS jQuery-UI, tôi không còn khuyên bạn nên thêm nó qua GM_addStyle().

Sử dụng một số được tiêm <link> như được hiển thị trong this complete, jQuery-UI example userscript.