How to make JQuery resizable & draggable work with Greasemonkey?

Question

[The following is self-answering post after resolving the problem by myself. I guess some people may find it useful.]

I try to use JQuery's resizable and draggable in Greasemonkey script, and

I get error in JS console "Component is not available (NS_ERROR_NOT_AVAILABLE)",
OR:
I get no errors in JS console, but draggable doesn't work.

How to solve this?

score 2 · Accepted Answer · edited May 23 '17 at 12:19

The reason is that some versions of JQuery and its plugins are not compatible with GreaseMonkey.

The following is the code snippet that is confirmed to be working with Firefox 7.0.1 + GreaseMonkey 0.9.11 (should probably work in Fx 3.0+ with GM 0.8+). It takes advantage of GreaseMonkey's 0.8+ @require and @resource commands. Files in @require and @resource are downloaded (once) when the user script is installed, and stored on disk in the same folder as the user script. When the set of dependencies is changed e.g. by the user playing with code, all dependencies are re-downloaded.

// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @require       http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js

$('#someid').draggable().resizable();

You may add the following after @requires to load JQuery UI CSS, but it is not necessary:

// @resource  jqueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css

// load JQuery UI CSS
var jqueryUICSS = GM_getResourceText("jqueryUICSS");
GM_addStyle(jqueryUICSS);

Some information about compatibility:

// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js //DRAGGABLE FAILS
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js //INCOMPATIBLE
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js //OK
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js //DRAGGABLE FAILS

// @require       http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js //OK
// @require       http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js //seems okay, but http://wiki.greasespot.net/Third-Party_Libraries says some other stuff is incompatible

// @resource  jqueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css //OK
// @resource  jqueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css //OK

Literature:

How to make JQuery resizable & draggable work with Greasemonkey?

1 Answers1