用户脚本和 jQuery-UI 的问题在于 jQUERY 使用带有大量背景图像的 CSS，所有背景图像都加载了相对路径。例如：
... url("images/ui-bg_dots-small_35_35414f_2x2.png") ...
出于安全原因，该相对路径很少适用于用户脚本。
这意味着要在用户脚本中使用 jQUI，您可以：
- 从服务器加载所需的 CSS。 （动态地，不使用
@resource)
or
- 使用动态 CSS 重写，如下所示这个旧答案.
我现在建议只使用其中之一标准主题（参见Gallery左侧栏中的选项卡），并使用Google 托管库。 Google 托管所有默认的 jQUI 主题，例如用户界面亮度, etc.
据我所知，没有人托管部分 jQUI 构建供公众使用。但是，既然你正在使用@require，无论如何，JS都会从你的本地机器加载（非常快），所以你不妨省去维护麻烦并使用标准jquery-ui.min.js file.
如果你真的想要自定义 jQUI 构建，或高度定制的 CSS 主题，您将需要拥有自己的服务器并从那里托管文件。
这是一个完整的 Greasemonkey/Tampermonkey 脚本，展示了如何以简单的方式使用 jQUI。诀窍是injectCSS 带有<link>节点以便所有托管的背景图像都能正确加载：
// ==UserScript==
// @name _Add stuff to a web page using jQuery UI.
// @include https://stackoverflow.com/questions/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js
// @grant GM_addStyle
// ==/UserScript==
/*--- For this to work well, we must also add-in the jQuery-UI CSS.
We add the CSS this way so that the embedded, relatively linked images load correctly.
(Use //ajax... so that https or http is selected as appropriate to avoid "mixed content".)
*/
$("head").append (
'<link '
+ 'href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le-frog/jquery-ui.min.css" '
+ 'rel="stylesheet" type="text/css">'
);
//--- Add our custom dialog using jQuery.
$("body").append ('<div id="gmOverlayDialog"><h1>Sample Dialog added using jQuery-UI</h1></div>');
//--- Activate the dialog.
$("#gmOverlayDialog").dialog ( {
modal: false,
title: "Draggable, sizeable dialog",
position: {
my: "top",
at: "top",
of: document
, collision: "none"
},
width: "auto",
minWidth: 400,
minHeight: 200,
zIndex: 3666
} )
.dialog ("widget").draggable ("option", "containment", "none");
//-- Fix crazy bug in FF! ...
$("#gmOverlayDialog").parent ().css ( {
position: "fixed",
top: 0,
left: "4em",
width: "75ex"
} );
对于较小的主题调整，您可以使用GM_addStyle() to set !important styles.
