# 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.

```javascript
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](https://licia.liriliri.io/docs.html) 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](./UTIL_API.md) here.

```javascript
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](https://github.com/liriliri/eruda-plugin).