website: Add docs for module WebUI
This commit is contained in:
weishu
@@ -51,6 +51,7 @@ function sidebarGuide() {
|
||||
{ text: 'Intergrate for non-GKI devices', link: '/guide/how-to-integrate-for-non-gki'},
|
||||
{ text: 'Unofficially supported devices', link: '/guide/unofficially-support-devices.md' },
|
||||
{ text: 'Module Guide', link: '/guide/module.md' },
|
||||
{ text: 'Module WebUI', link: '/guide/module-webui.md' },
|
||||
{ text: 'App Profile', link: '/guide/app-profile.md' },
|
||||
{ text: 'Rescue from bootloop', link: '/guide/rescue-from-bootloop.md' },
|
||||
{ text: 'FAQ', link: '/guide/faq' },
|
||||
|
||||
@@ -51,6 +51,7 @@ function sidebarGuide() {
|
||||
{ text: '如何为非GKI设备集成 KernelSU', link: '/zh_CN/guide/how-to-integrate-for-non-gki'},
|
||||
{ text: '非官方支持设备', link: '/zh_CN/guide/unofficially-support-devices.md' },
|
||||
{ text: '模块开发指南', link: '/zh_CN/guide/module.md' },
|
||||
{ text: '模块 Web 界面', link: '/guide/module-webui.md' },
|
||||
{ text: 'App Profile', link: '/zh_CN/guide/app-profile.md' },
|
||||
{ text: '救砖', link: '/zh_CN/guide/rescue-from-bootloop.md' },
|
||||
{ text: '常见问题', link: '/zh_CN/guide/faq' },
|
||||
|
||||
48
website/docs/guide/module-webui.md
Normal file
48
website/docs/guide/module-webui.md
Normal file
@@ -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!
|
||||
@@ -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.
|
||||
|
||||
48
website/docs/zh_CN/guide/module-webui.md
Normal file
48
website/docs/zh_CN/guide/module-webui.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 模块 WebUI
|
||||
|
||||
KernelSU 的模块除了执行启动脚本和修改系统文件之外，还支持显示 UI 界面和与用户交互。
|
||||
|
||||
你可以通过任何 Web 技术编写 HTML + CSS + Javascript 页面，KernelSU 的管理器将通过WebView 显示这些页面。此外，KernelSU 还提供了一些用于与系统交互的 Javascript API，例如执行shell命令。
|
||||
|
||||
## WebUI 根目录
|
||||
|
||||
Web 资源文件应放置在模块根目录的 `webroot` 子目录中，并且其中**必须**有一个名为`index.html`的文件，该文件是模块页面入口。包含 Web 界面的最简单的模块结构如下：
|
||||
|
||||
````txt
|
||||
❯ tree .
|
||||
.
|
||||
|-- module.prop
|
||||
`-- webroot
|
||||
`--index.html
|
||||
````
|
||||
|
||||
:::warning
|
||||
安装模块时，KernelSU 会自动设置 `webroot` 目录的权限和 SELinux context，如果您不知道自己在做什么，请不要自行设置该目录的权限！
|
||||
:::
|
||||
|
||||
如果您的页面包含 css 和 javascript，您也需要将其放入此目录中。
|
||||
|
||||
## JavaScript API
|
||||
|
||||
如果只是一个显示页面，那它和普通网页没有什么区别。更重要的是，KernelSU 提供了一系列的系统API，可以让您实现模块特有的功能。
|
||||
|
||||
KernelSU 提供了一个 Javascript 库并[在 npm 上发布](https://www.npmjs.com/package/kernelsu)，您可以在网页的 javascript 代码中使用它。
|
||||
|
||||
例如，您可以执行 shell 命令来获取特定配置或修改属性：
|
||||
|
||||
```javascript
|
||||
import { exec } from 'kernelsu';
|
||||
|
||||
const { errno, stdout } = await exec("getprop ro.product.model");
|
||||
````
|
||||
|
||||
再比如，你可以让网页全屏显示，或者显示一个Toast。
|
||||
|
||||
[API文档](https://www.npmjs.com/package/kernelsu)
|
||||
|
||||
如果您发现现有的API不能满足您的需求或者使用不方便，欢迎[在这里](https://github.com/tiann/KernelSU/issues)给我们提出建议！
|
||||
|
||||
## 一些技巧
|
||||
|
||||
1. 您可以正常使用`localStorage`存储一些数据，但卸载管理器后，这些数据将会丢失。 如果需要持久保存，可以自己将数据写入某个目录。
|
||||
2. 对于简单的页面，我建议您使用[parceljs](https://parceljs.org/)进行打包。它零配置，使用非常方便。不过，如果你是前端高手或者有自己的喜好，那就选择你喜欢的吧！
|
||||
@@ -4,6 +4,10 @@ KernelSU 提供了一个模块机制，它可以在保持系统分区完整性
|
||||
|
||||
KernelSU 的模块运作机制与 Magisk 几乎是一样的，如果你熟悉 Magisk 模块的开发，那么开发 KernelSU 的模块大同小异，你可以跳过下面有关模块的介绍，只需要了解 [KernelSU 模块与 Magisk 模块的异同](difference-with-magisk.md)。
|
||||
|
||||
## 模块界面
|
||||
|
||||
KernelSU 的模块支持显示界面并与用户交互，请参阅 [WebUI 文档](module-webui.md)。
|
||||
|
||||
## Busybox
|
||||
|
||||
KernelSU 提供了一个功能完备的 BusyBox 二进制文件（包括完整的SELinux支持）。可执行文件位于 `/data/adb/ksu/bin/busybox`。
|
||||
|
||||
Reference in New Issue
Block a user