There are a lot of jQuery plugins to add simple enhancements to DOM elements (such as form validation, adding tooltips to links, etc.). In contrast, the Mootools plugin scene is relatively baron which is a shame. The architecture of MooTools is quite different to jQuery and doesn’t perhaps encourage this kind of plugin to the same extent but, for the common case, plugins can be written in a relatively similar fashion.

As an example, here’s how you’d write a method you can call on any DOM Element (or DOM Elements collection) to set the colour to red. Useless, of course, but it illustrates the method simply.

    makered: function() {
        this.setStyle('color', 'red');
        return this;

And it’s as easy as that. To use this world changing functionality (make my links red!), just use the standard Mootools selector syntax. This example will set the colour of all anchor elements in the page to red.


Note that our makered() method must (or rather should) return this in order to maintain the Mootools method chaining functionality.

The following example illustrates the chaining. It calls our custom Element method (making all links red) and then fades them all out:


Extend away!