# Плагин

В NocoBase **клиентский плагин** — это основной способ расширения и настройки функциональности фронтенда. Наследуя базовый класс `Plugin`, предоставляемый `@nocobase/client`, разработчики могут регистрировать логику, добавлять компоненты страниц, расширять меню или интегрировать сторонние функции на различных этапах жизненного цикла.

## Структура класса плагина

Базовая структура клиентского плагина выглядит следующим образом:

```ts
import { Plugin } from '@nocobase/client';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // Выполняется после добавления плагина
    console.log('Plugin added');
  }

  async beforeLoad() {
    // Выполняется перед загрузкой плагина
    console.log('Before plugin load');
  }

  async load() {
    // Выполняется при загрузке плагина, регистрирует маршруты, компоненты пользовательского интерфейса и т. д.
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;
```

## Описание жизненного цикла

Каждый плагин последовательно проходит следующие этапы жизненного цикла при обновлении браузера или инициализации приложения:

| Метод жизненного цикла | Время выполнения | Описание |
|----------------------|------------------|----------|
| **afterAdd()**       | Выполняется сразу после добавления плагина в менеджер плагинов | В этот момент экземпляр плагина уже создан, но не все плагины завершили инициализацию. Подходит для легковесной инициализации, например, для чтения конфигурации или привязки базовых событий. |
| **beforeLoad()**     | Выполняется перед методом `load()` всех плагинов | Вы можете получить доступ ко всем включенным экземплярам плагинов (`this.app.pm.get()`). Подходит для подготовительной логики, которая зависит от других плагинов. |
| **load()**           | Выполняется при загрузке плагина | Этот метод выполняется после завершения `beforeLoad()` всех плагинов. Подходит для регистрации фронтенд-маршрутов, компонентов пользовательского интерфейса и другой основной логики. |

## Порядок выполнения

При каждом обновлении браузера последовательно выполняются методы `afterAdd()` → `beforeLoad()` → `load()`.

## Контекст плагина и FlowEngine

Начиная с NocoBase 2.0, API расширений на стороне клиента в основном сосредоточены в **FlowEngine**. В классе плагина вы можете получить экземпляр движка через `this.engine`.

```ts
// Доступ к контексту движка в методе load()
async load() {
  const { app, router, apiClient } = this.engine.context;
  console.log('Current app:', app);
}
```

Подробнее см.:  
- [FlowEngine](/flow-engine)  
- [Контекст](./context.md)