2

我对此进行了大量研究，因为这是我的第一个 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 的建议，但我不确定这是否是兼容性问题。 第三方库 我已经将它包装在一个准备好的文档中，它没有任何区别，但是当我使用 Firebug 控制台时，它工作正常。

4

1 回答 1

4

更新：

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

有关jQuery-UI 加载的维护密集度较低的方法，请参阅此答案。

旧答案（仍然有效）：

Firebug javascript 在目标页面范围内执行。
Greasemonkey javascript 在受保护和特权的沙箱中执行。

这意味着如果页面加载库，如 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);
于 2012-07-18T00:17:12.793 回答