Аддоны приложений

Приложения — веб-UI, открываемые из главного окна в отдельном изолированном BrowserWindow (без Node integration, без preload).

Манифест

Поле	Значение
`type`	`application`
`web`	HTML-файл входа
`web_type`	`application` (обязателен)
`web_contents`	Дополнительные ресурсы

URL запуска

Оболочка приложения загружает ваш HTML во iframe. Главный процесс формирует URL iframe:

http://localhost:{WEB_SERVER_PORT}/addon_static/{id}/?token={data.token}&bg={hex}&dataTheme={themeId}

Query-параметр	Описание
`token`	Токен доступа для установки (`data.token` в воркере). Проверяйте на приватных API-маршрутах.
`bg`	Цвет фона активной темы (`--bg`), hex в URL-кодировке (например `%230e0e10` для `#0e0e10`).
`dataTheme`	Значение атрибута `data-theme` на `<html>`: `light`, `dark`, id кастомной темы (`custom-…`) или встроенного пресета (`preset-…`).

Тот же статический маршрут, что у виджетов. Id окна: addon-app:{addonId}.

Читать эти query-параметры вручную не обязательно, если вы подключаете /data/styles.css — StreamKit+ автоматически встраивает bootstrap-скрипт (см. Темы ниже).

Стили как в основном приложении

StreamKit+ отдаёт собранную копию основной таблицы стилей UI через локальный веб-сервер. Подключите её в HTML приложения, чтобы кнопки, поля ввода, типографика и CSS-переменные темы совпадали с остальными окнами приложения.

Ресурс	URL
Полный CSS	`http://localhost:{WEB_SERVER_PORT}/data/styles.css`
Шрифты	`http://localhost:{WEB_SERVER_PORT}/data/fonts/…` (подключаются из CSS)

Добавьте в HTML-файл входа до собственных стилей аддона:

<link rel="stylesheet" href="http://localhost:3000/data/styles.css">

Динамический <link> или любое упоминание /data/styles.css в исходнике HTML (в том числе во inline-скриптах) тоже учитывается.

Укажите порт веб-сервера приложения, если он отличается (по умолчанию WEB_SERVER_PORT = 3000).

Примечания:

Разрешение аддона не требуется — маршрут обслуживает основное приложение, а не папка установки аддона.
/data/styles.css включает встроенные светлую/тёмную темы (в базовом бандле), все встроенные пресеты (preset-…) и сохранённые пользователем кастомные схемы. Файл пересобирается при изменении кастомных тем в Настройки → Интерфейс.
CSS-переменные темы совпадают с главным окном (--bg, --text, --btn-primary, …). Переопределения применяются по значению data-theme на <html> (как в основном приложении).
Собственные стили аддона можно подключать после таблицы стилей и переопределять правила при необходимости.

Темы

Когда StreamKit+ отдаёт HTML-страницу application-аддона со ссылкой на /data/styles.css, перед </head> вставляется небольшой inline bootstrap-скрипт. Он:

При загрузке — читает dataTheme и bg из URL iframe и применяет к document.documentElement (data-theme, background, color-scheme).
При смене темы — слушает postMessage от оболочки приложения (без перезагрузки iframe).
При смене URL — повторно читает query-параметры, если изменился location.search.

Копировать этот скрипт в аддон не нужно — достаточно подключить /data/styles.css, синхронизацию темы выполняет оболочка.

Значения `data-theme`

Значение	Смысл
`light`	Встроенная светлая тема
`dark`	Встроенная тёмная тема
`custom-…`	Id пользовательской схемы
`preset-…`	Id встроенного пресета (например `preset-twitch`)

Если в настройках выбрана тема Системная, dataTheme становится light или dark в зависимости от ОС.

Обновление на лету (`postMessage`)

При смене темы пользователем (или переключении ОС при выбранной Системной теме) оболочка отправляет в iframe:

{
  "type": "streamkit:theme",
  "dataTheme": "preset-twitch",
  "bg": "#0e0e10"
}

Встроенный bootstrap-скрипт применяет payload автоматически. Чтобы обработать смену темы в своём JS (опционально):

window.addEventListener('message', (event) => {
  const payload = event.data;
  if (!payload || payload.type !== 'streamkit:theme') return;
  console.log('Theme changed:', payload.dataTheme, payload.bg);
});

Ручная обработка темы (продвинутый вариант)

Если /data/styles.css не подключён, bootstrap-скрипт не вставляется и query-параметры темы не применяются автоматически. Их можно прочитать при загрузке:

const params = new URLSearchParams(location.search);
const dataTheme = params.get('dataTheme');
const bg = params.get('bg');
if (dataTheme) document.documentElement.setAttribute('data-theme', dataTheme);
if (bg) document.documentElement.style.background = bg;

Статическое приложение (без воркера)

Только WEB_CONTENT — HTML/JS/CSS в папке установки.

Полное приложение (с воркером)

Воркер предоставляет API-эндпоинты для страницы. Проверяйте query.token === data.token на приватных маршрутах (как у виджетов).

Типичные эндпоинты:

GET params — настройки для страницы
GET state — текущее состояние
POST … — действия пользователя

UI главного окна

Когда есть хотя бы один включённый аддон приложения с валидным web, в главном окне показывается раздел Приложения. Пользователь выбирает пункт; главный процесс открывает или фокусирует изолированное окно через IPC.

Список обновляется при установке/включении/отключении/удалении.

UI настроек

Настройки → Приложения: AddonsCategoryBlock с type="application" — тот же поток установки/включения/настроек, что и у других категорий.