更新

Question

我已经对此进行了相当多的研究，因为这是我的第一个Greasemonkey脚本：

// ==UserScript==
// @name           Codecademy Resizeable Code
// @description    Adds jQuery resizable to editor
// @namespace      http://chrisneetz.com
// @include        http://www.codecademy.com/courses/*
// ==/UserScript==

$('#editor').resizable({ alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer", handles: "n, s" });

我尝试过Greasemonkey的建议，但我不确定它是否是兼容性问题。 Third Party Libraries我把它包装在准备好的文档中并没有区别，但是当我使用Firebug控制台时，它运行正常。

Answer 1

更新

我现在建议只使用Google上托管的标准主题之一，忘记尝试从本地副本运行所有内容（@resource指令的目的和CSS重写，如下所示）。

请参阅this answer for a less maintenance-intensive approach to jQuery-UI loading。

旧答案（仍然有效）：

Firebug javascript在目标页面范围内执行 Greasemonkey javascript在受保护且具有特权的sandbox中执行。

这意味着如果页面加载库，如jQuery和jQuery-UI，Greasemonkey脚本通常不会看到它们。（有很多方法，但尽可能避免使用它们。）

在这个问题中，这个链接给出了答案。由于代码：$('#editor').resizable(...使用jQuery和jQuery-UI，因此您的脚本必须包含这些库 - 如下所示：

// ==UserScript==
// @name        Codecademy Resizeable Code
// @description Adds jQuery resizable to editor
// @namespace   http://chrisneetz.com
// @include     http://www.codecademy.com/courses/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
// @grant       GM_addStyle
// ==/UserScript==

$('#editor').resizable ( {
    alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer",
    handles:    "n, s"
} );

然而，jQuery-UI也大量使用自定义CSS。让这个CSS与Greasemonkey一起使用会更复杂一些。像这样更改脚本，使用CSS，再加上2个更好的图标集：

// ==UserScript==
// @name        Codecademy Resizeable Code
// @description Adds jQuery resizable to editor
// @namespace   http://chrisneetz.com
// @include     http://www.codecademy.com/courses/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
// @resource    jqUI_CSS  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
// @resource    IconSet1  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png
// @resource    IconSet2  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_454545_256x240.png
// @grant       GM_addStyle
// @grant       GM_getResourceURL
// @grant       GM_getResourceText
// ==/UserScript==

$('#editor').resizable ( {
    alsoResize: ".ace_scroller, .ace_editor, .ace_content, .ace_sb, .ace_print_margin_layer",
    handles:    "n, s"
} );

/*--- Process the jQuery-UI, base CSS, to work with Greasemonkey (we are not on a server)
    and then load the CSS.

    *** Kill the useless BG images:
        url(images/ui-bg_flat_0_aaaaaa_40x100.png)
        url(images/ui-bg_flat_75_ffffff_40x100.png)
        url(images/ui-bg_glass_55_fbf9ee_1x400.png)
        url(images/ui-bg_glass_65_ffffff_1x400.png)
        url(images/ui-bg_glass_75_dadada_1x400.png)
        url(images/ui-bg_glass_75_e6e6e6_1x400.png)
        url(images/ui-bg_glass_95_fef1ec_1x400.png)
        url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)

    *** Rewrite the icon images, that we use, to our local resources:
        url(images/ui-icons_222222_256x240.png)
        becomes
        url("' + GM_getResourceURL ("IconSet1") + '")
        etc.
*/
var iconSet1    = GM_getResourceURL ("IconSet1");
var iconSet2    = GM_getResourceURL ("IconSet2");
var jqUI_CssSrc = GM_getResourceText ("jqUI_CSS");
jqUI_CssSrc     = jqUI_CssSrc.replace (/url\(images\/ui\-bg_.*00\.png\)/g, "");
jqUI_CssSrc     = jqUI_CssSrc.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1);
jqUI_CssSrc     = jqUI_CssSrc.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2);

GM_addStyle (jqUI_CssSrc);

为什么我的jQuery-UI脚本不能在Greasemonkey中执行？它在Firebug控制台中运行

1 个答案:

更新

旧答案（仍然有效）：