docs: plugin

doc/PLUGIN.md

@@ -0,0 +1,79 @@
+# 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).
+