Search code examples
javascriptjqueryjquery-uigreasemonkey

Why doesn't my jQuery-UI script execute in Greasemonkey? It runs in the Firebug console

I have tried quite a bit of research on this because this is my first Greasemonkey script:

// ==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" });

I have tried Greasemonkey's recommendations and I'm not sure if it's a compatibility issue or not. Third Party Libraries I have wrapped it in a document ready and it makes no difference, yet when I use the Firebug console, it works fine.

Solution

  • Update:

    I now recommend just using one of the standard themes hosted on Google and forget about trying to get everything running from local copies (The purpose of the @resource directive and the CSS re-writing as shown below).

    See this answer for a less maintenance-intensive approach to jQuery-UI loading.

    Old answer (still works):

    Firebug javascript executes in the target page scope.
    Greasemonkey javascript executes in a protected and privileged sandbox.

    That means that if the page loads libraries, like jQuery and jQuery-UI, the Greasemonkey script won't normally see them. (There are ways around that, but avoid them as much as possible.)

    That link, in the question, gave the answer. Since the code: $('#editor').resizable(... uses jQuery and jQuery-UI, your script must include those libraries -- like so:

    // ==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"
} );


    However, jQuery-UI also makes heavy use of custom CSS. Getting this CSS to work with Greasemonkey is a bit more involved. Change the script, like so, to use the CSS, plus 2 of the better icon sets:

    // ==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);