---
url: https://kernelsu.org/ru_RU/guide/module-webui.md
---
# Веб-интерфейс модуля

Помимо выполнения загрузочных скриптов и правки системных файлов, модули KernelSU могут показывать пользовательский интерфейс и напрямую взаимодействовать с пользователем.

Модуль может описать страницу на HTML + CSS + JavaScript, используя любые веб‑технологии. Менеджер KernelSU отображает такие страницы через WebView и предоставляет API для взаимодействия с системой, например для запуска shell-команд.

## Каталог `webroot`

Файлы веб-ресурсов должны располагаться в подкаталоге `webroot` в корне модуля, и там **ОБЯЗАТЕЛЬНО** должен находиться файл `index.html`, выступающий точкой входа. Самая простая структура модуля с веб-интерфейсом выглядит так:

```txt
❯ tree .
.
|-- module.prop
`-- webroot
    `-- index.html
```

::: warning
При установке модуля KernelSU автоматически задаёт права доступа и SELinux-контекст для этого каталога. Если вы не уверены, что делаете, не меняйте разрешения вручную!
:::

Если страница содержит CSS или JavaScript, их тоже нужно положить в этот каталог.

## JavaScript API

Если это только страница отображения, она работает как обычный веб-сайт. Но самое главное — KernelSU предоставляет набор системных API, позволяющих реализовать модуль‑специфичные функции.

KernelSU предлагает JavaScript-библиотеку, опубликованную в [npm](https://www.npmjs.com/package/kernelsu), которую можно использовать в коде страницы.

Например, можно выполнить shell-команду, чтобы получить конфигурацию или изменить свойство:

```JavaScript
import { exec } from 'kernelsu';

const { errno, stdout } = 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/) для сборки. Он не требует начальной настройки и очень прост. Но если вы опытный фронтенд‑разработчик или у вас есть собственные предпочтения, смело используйте любой другой инструмент!