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 でホストされている標準テーマの 1 つを使用することをお勧めします。ローカル コピーからすべてを実行しようとすることは忘れてください (@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 に答える