使用外部 CSS 文件将 jQuery UI 添加到 Greasemonkey 脚本失败

发布于 2024-12-23 17:20:58 字数 812 浏览 1 评论 0原文

我正在尝试将 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 并在我的用户脚本中使用它？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

轻拂→两袖风尘 2024-12-30 17:20:58

// @require 目前仅适用于 javascript 文件。该错误是由于尝试将 CSS 解析为 JS 造成的。

对 CSS 文件使用 // @resource，如下所示：

// ==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 大量使用背景图像。通过相对路径包含的图像。

为了获得 jQuery-UI CSS 的最大效果，我不再建议通过 GM_addStyle() 添加它。

使用注入的，如这个完整的 jQuery-UI 示例用户脚本.

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

回复收藏 0 原文

~没有更多了~