docs: plugin

.vscode/settings.json

@@ -1,6 +1,9 @@
 {
   "cSpell.words": [
+    "Eruda",
     "callout",
+    "eval",
+    "licia",
     "unenumerable"
   ]
 }

README.md

@@ -26,10 +26,6 @@ Console for Mobile Browsers.
 
 ![Eruda](./doc/screenshot.jpg)
 
-## Why
-
-Logging things out on mobile browser is never an easy stuff. I used to include `window onerror alert` script inside pages to find out JavaScript errors, kind of stupid and inefficient. Desktop browser DevTools is great, and I wish there is a similar one on mobile side, which leads to the creation of Eruda.
-
 ## Demo
 
 ![Demo](./doc/qrcode.png)
@@ -107,8 +103,6 @@ eruda.init({
 
 ## Plugins
 
-It is possible to enhance Eruda with more features by writing plugins. Check source code of plugins below to learn how to write your own custom tool panels. Besides, [eruda-plugin](https://github.com/liriliri/eruda-plugin) is available for plugin initialization.
-
 * [eruda-fps](https://github.com/liriliri/eruda-fps): Display page fps info.
 * [eruda-features](https://github.com/liriliri/eruda-features): Browser feature detections.
 * [eruda-timing](https://github.com/liriliri/eruda-timing): Show performance and resource timing.
@@ -119,7 +113,7 @@ It is possible to enhance Eruda with more features by writing plugins. Check sou
 * [eruda-dom](https://github.com/liriliri/eruda-dom): Navigate dom tree.
 * [eruda-orientation](https://github.com/liriliri/eruda-orientation): Test orientation api.
 
-When writing plugins, you can use utilities exposed by Eruda, see [docs](doc/UTIL_API.md) here.
+If you want to create a plugin yourself, follow the guides [here](./doc/PLUGIN.md).
 
 ## Related Projects
 

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).
+

doc/README_CN.md

@@ -104,8 +104,6 @@ eruda.init({
 
 ## 插件
 
-你可以为 Eruda 编写插件来增强功能。关于怎么编写插件，请查看下边官方插件的源码。另外 [eruda-plugin](https://github.com/liriliri/eruda-plugin) 可以用来初始化一个新插件。
-
 * [eruda-fps](https://github.com/liriliri/eruda-fps)：展示页面的 fps 信息。
 * [eruda-features](https://github.com/liriliri/eruda-features)：浏览器特性检测。
 * [eruda-timing](https://github.com/liriliri/eruda-timing)：展示性能资源数据。
@@ -116,7 +114,7 @@ eruda.init({
 * [eruda-dom](https://github.com/liriliri/eruda-dom)：浏览 dom 树。
 * [eruda-orientation](https://github.com/liriliri/eruda-orientation)：测试重力感应接口。
 
-编写插件的时候，你可以使用 Eruda 提供的工具函数，相关文档请点击[这里](doc/UTIL_API.md)查看。
+如果你想要自己编写插件，可以查看这里的[教程](./PLUGIN.md)。
 
 ## 相关项目