website: Add docs for module WebUI

website/docs/guide/module-webui.md

@@ -0,0 +1,48 @@
+# Module WebUI
+
+In addition to executing boot scripts and modifying system files, KernelSU's modules also support displaying UI interfaces and interacting with users.
+
+The module can write HTML + CSS + Javascript pages through any web technology. KernelSU's manager will display these pages through WebView. It also provides some APIs for interacting with the system, such as executing shell commands.
+
+## webroot directory
+
+Web resource files should be placed in the `webroot` subdirectory of the module root directory, and there **MUST** be a file named `index.html`, which is the module page entry. The simplest module structure containing a web interface is as follows:
+
+```txt
+❯ tree .
+.
+|-- module.prop
+`-- webroot
+    `-- index.html
+```
+
+:::warning
+When installing the module, KernelSU will automatically set the permissions and SELinux context of this directory. If you don’t know what you are doing, please do not set the permissions of this directory yourself!
+:::
+
+If your page contains css and javascript, you need to place it in this directory as well.
+
+## Javascript API
+
+If it is just a display page, it is no different from a normal web page. More importantly, KernelSU provides a series of system API that allow you to implement the unique functions of the module.
+
+KernelSU provides a Javascript library and [publishes it on npm](https://www.npmjs.com/package/kernelsu), which you can use in the javascript code of your web pages.
+
+For example, you can execute a shell command to obtain a specific configuration or modify a property:
+
+```javascript
+import { exec } from 'kernelsu';
+
+const { errno, stdout } = exec("getprop ro.product.model");
+```
+
+For another example, you can make the web page display full screen, or display a toast.
+
+[API documentation](https://www.npmjs.com/package/kernelsu)
+
+If you find that the existing API does not meet your needs or is inconvenient to use, you are welcome to give us suggestions [here](https://github.com/tiann/KernelSU/issues)!
+
+## Some tips
+
+1. You can use `localStorage` normally to store some data, but it will be lost after the Manager App is uninstalled. If you need to save persistently, you can write data to some directory yourself.
+2. For simple pages, I recommend you use [parceljs](https://parceljs.org/) for packaging. It requires zero configuration and is very convenient to use. However, if you are a front-end master or have your own preferences, then just choose one you like!

website/docs/guide/module.md

@@ -4,6 +4,10 @@ KernelSU provides a module mechanism that achieves the effect of modifying the s
 
 The module mechanism of KernelSU is almost the same as that of Magisk. If you are familiar with Magisk module development, developing KernelSU modules is very similar. You can skip the introduction of modules below and only need to read [difference-with-magisk](difference-with-magisk.md).
 
+## WebUI
+
+KernelSU's modules support displaying interfaces and interacting with users, please refer to the [WebUI documentation](module-webui.md).
+
 ## Busybox
 
 KernelSU ships with a feature complete BusyBox binary (including full SELinux support). The executable is located at `/data/adb/ksu/bin/busybox`. KernelSU's BusyBox supports runtime toggle-able "ASH Standalone Shell Mode". What this standalone mode means is that when running in the `ash` shell of BusyBox, every single command will directly use the applet within BusyBox, regardless of what is set as `PATH`. For example, commands like `ls`, `rm`, `chmod` will **NOT** use what is in `PATH` (in the case of Android by default it will be `/system/bin/ls`, `/system/bin/rm`, and `/system/bin/chmod` respectively), but will instead directly call internal BusyBox applets. This makes sure that scripts always run in a predictable environment and always have the full suite of commands no matter which Android version it is running on. To force a command _not_ to use BusyBox, you have to call the executable with full paths.