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

Posted

技术标签:

【中文标题】使用外部 CSS 文件将 jQuery UI 添加到 Greasemonkey 脚本失败【英文标题】:Adding jQuery UI to Greasemonkey script fails with external CSS file 【发布时间】:2012-01-31 01:54:51 【问题描述】:

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

【问题讨论】:

我们还需要之前和之后的行,您可能在上一个课程中错过了 并且它会在下一行引发错误,因为您无法打开新课程另一个没有关闭。 @Niels :代码不多。我已经用我的完整代码更新了这个问题。第 13 行是 jquery-ui-1816custom.css 中的第 13 行,我只是按原样复制了文件。那里不可能是代码问题。 【参考方案1】:

// @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()添加。

使用注入的<link>,如this complete, jQuery-UI example userscript所示。

【讨论】:

我使用的是 FireFox v.21。我做了你在这里提到的我调用 jquery ready() 函数并试图提醒 newCSS 。它没有显示任何内容 自此答案首次发布以来,GM 已更改。更新了答案以反映这一点。 不幸的是,注入 <link> 在将 Content-Security-Policy 设置为禁止从 ajax.googleapis.com(或 <link> 指向的任何地方加载 CSS 的值)的网站上不起作用。

以上是关于使用外部 CSS 文件将 jQuery UI 添加到 Greasemonkey 脚本失败的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 webpack 添加 jquery-ui css/图像

从后面的代码中添加一个外部 css 文件

jQuery UI:DatePicker 只有 CSS?

jQuery 将外部 css 文件附加到所有 HTML 页面

为啥 jquery 的 ui.css 文件的字体大小比正常大?

没有默认 CSS 的 jQuery 范围滑块