26. April 2011 09:00
Today I'm going to explain how to use Firefox GreaseMonkey add-on, jQuery and jQuery plugins with GreaseMonkey. Since version 0.8 GreaseMonkey have such a nice meta-parameter as @require. Using this parameter you can easily include any type of objects in your scripts, for example, other scripts. I develop some jQuery plugins and want to test it in internet pages using GreaseMonkey. @require attribute helps me. Here is an example how to include your scripts into GreaseMonkey:
// @name Google rotator
// @namespace http://userscripts.ru/js/faviconize-google/
// @description Use this script to rotate google logo.
// @include http://www.google.*
// @include http://*google.*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @require http://127.0.0.1:8000/jQueryDivRotator/scripts/custom/jquery.divrotator.js
My jQuery plugin can rotate any element around the axis using mouse, I’ll write blog post about it later. To make it work I need a jQuery library and my plugin code. All this files includes in GreaseMonkey using two @require attributes. One great aspect – all file that included in @require attribute downloaded only once, when you install script. You can navigate to physical path of script and make sure in this. User scripts usually situated at C:\Documents and Settings\<user name>\Application Data\mozilla\Firefox\Profiles\<guid in format XXXXXX>.<profile name>\gm_scripts\<name of script> (for Win systems). Or you can run search by your system drive using mask <name of script>.user.js. As you can see in my example I use localhost path to locate my script. I write code in Aptana Studio and use Aptana’s built-in web server (you can use any other web-server for this purposes). GreaseMonkey easy download scripts and place their in folder mentioned above. Now you can modify file straight in this folder and this changes affect in your GreaseMonkey script immediately. That’s great I think. jQuery 1.4.* had some troubles with GreaseMonkey, but in 1.5 all works fine for me.
This is my GreaseMonkey script, that use jQuery and my jQuery plugin:
Rather simple, isn’t it? And the result