PLUGIN.md

Writing a Plugin

It is possible to enhance Eruda with more features by writing plugins, which means, creating your own custom panels.

Creating a Plugin

Adding plugins is super easy for eruda. All you have to do is passing an object with a few methods implemented.

eruda.add({
    name: 'test',
    init($el) {
        $el.html('Hello, this is my first eruda plugin!');
        this._$el = $el;
    },
    show() {
        this._$el.show();
    },
    hide() {
        this._$el.hide();
    },
    destroy() {}
});

Basic Structure

name

Every plugin must have a unique name, which will be shown as the tab name on the top.

init

Called when plugin is added, and a document element used to display content is passed in.

The element is wrapped as a jQuery like object, provided by the licia utility library.

show

Called when switch to the panel. Usually all you need to do is to show the container element.

hide

Called when switch to other panel. You should at least hide the container element here.

destroy

Called when plugin is removed using eruda.remove('plugin name').

Worth Mentioning

Apart from passing an object, you can also pass in a function that returns an object. Eruda will automatically invoke the function and use the object it returns.

When writing plugins, you can use utilities exposed by Eruda, see docs here.

eruda.add(function (eruda) {
    // eruda.Tool implements those four methods.
    class Test extends eruda.Tool {
        constructor() {
            super()
            this.name = 'test';
            this.style = eruda.util.evalCss('.eruda-test { background: #000; }');
        }
        init($el) {
            super.init($el);
        }
        destroy() {
            super.destroy();
            eruda.util.evalCss.remove(this.style);
        }
    }

    return new Test();
});

There is also a tool for plugin initialization, check it out here.