Расширения для браузера

FAST Element — это современный фреймворк для создания веб-компонентов на JavaScript с высокой производительностью и гибкой архитектурой. Он предоставляет средства для определения пользовательских элементов, управления их состоянием и реактивными свойствами, а также интеграции с шаблонами и стилями.

В основе лежит концепция Web Components, но FAST Element расширяет стандартные возможности, упрощая работу с реактивностью и шаблонами.

Создание компонента

Компонент создается с помощью функции FASTElement.define, которая связывает класс компонента с шаблоном и стилями.

import { FASTElement, html, css } from "@microsoft/fast-element";

const template = html<MyComponent>`
  <div class="container">
    <h1>${x => x.title}</h1>
    <button @click="${x => x.increment()}">Нажми меня</button>
    <p>Счётчик: ${x => x.count}</p>
  </div>
`;

const styles = css`
  .container {
    font-family: Arial, sans-serif;
    padding: 16px;
    border: 1px solid #ccc;
  }
  button {
    margin-top: 8px;
  }
`;

class MyComponent extends FASTElement {
  count = 0;
  title = "Пример компонента";

  increment() {
    this.count++;
  }
}

FASTElement.define({
  name: "my-component",
  template,
  styles,
  elementClass: MyComponent
});

Ключевые моменты:

  • Свойства компонента автоматически становятся реактивными, если они объявлены в классе.
  • Привязка ${x => x.property} позволяет динамически обновлять DOM при изменении состояния.
  • Обработчики событий указываются через @event.

Реактивность и отслеживание изменений

FAST Element поддерживает реактивные свойства, которые автоматически обновляют шаблон при изменении значения. Для более сложной логики можно использовать геттеры и сеттеры:

class Counter extends FASTElement {
  _count = 0;

  get count() {
    return this._count;
  }

  set count(value) {
    this._count = value;
    this.$emit("count-changed", { detail: value });
  }
}

Особенности:

  • Можно вручную испускать события для уведомления других компонентов.
  • Изменение реактивного свойства автоматически вызывает перерисовку всех зависимых частей шаблона.

Шаблоны и директивы

Шаблоны создаются с помощью html и поддерживают директивы для управления отображением, условиями и списками:

import { repeat } from "@microsoft/fast-element";

const template = html<MyListComponent>`
  <ul>
    ${repeat(x => x.items, html`<li>${x => x}</li>`)}
  </ul>
`;

Доступные директивы:

  • repeat — итерация по массиву с динамическим обновлением.
  • when — условный рендеринг.
  • ref — получение ссылки на DOM-элемент внутри шаблона.

Стилизация

FAST Element позволяет использовать css для локальной стилизации компонентов. Стили изолированы по компоненту и не конфликтуют с глобальными стилями. Поддерживаются переменные CSS, медиа-запросы и псевдоклассы:

const styles = css`
  :host {
    display: block;
    padding: 10px;
  }

  button:hover {
    background-color: #eee;
  }
`;

:host — позволяет задавать стили для самого элемента, как контейнера.

События и коммуникация компонентов

Компоненты могут взаимодействовать через кастомные события. Используется метод $emit:

this.$emit("item-selected", { detail: this.itemId });
  • detail содержит данные события.
  • Подписка на событие происходит стандартным способом через addEventListener или через атрибут @event в шаблоне.

Использование слотов

FAST Element поддерживает слоты для вставки внешнего контента. Это позволяет создавать гибкие и переиспользуемые компоненты:

const template = html`
  <div class="wrapper">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
`;
  • Слот без имени принимает основной контент.
  • Именованные слоты позволяют распределять контент по различным областям компонента.

Расширения для браузера

FAST Element может использоваться при разработке расширений для браузеров благодаря лёгкости и модульности:

  • Компоненты можно внедрять в DOM страниц через content scripts.
  • Стили компонентов не конфликтуют с сайтом благодаря Shadow DOM.
  • Реактивность упрощает создание динамических интерфейсов для расширений.

Пример интеграции с расширением Chrome:

const container = document.createElement("div");
document.body.appendChild(container);

FASTElement.define({
  name: "popup-widget",
  template,
  styles,
  elementClass: PopupWidget
});

const widget = document.createElement("popup-widget");
container.appendChild(widget);
  • Встроенные компоненты могут реагировать на сообщения из background script через события.
  • Использование Shadow DOM защищает стили и структуру от вмешательства со стороны веб-страницы.

Интеграция с хранилищем расширения

Для расширений важно синхронизировать состояние с chrome.storage или localStorage. Можно обернуть методы доступа в реактивные свойства компонента:

class SettingsPanel extends FASTElement {
  theme = "light";

  connectedCallback() {
    super.connectedCallback();
    chrome.storage.sync.get(["theme"], ({ theme }) => {
      this.theme = theme || "light";
    });
  }

  saveTheme(theme) {
    this.theme = theme;
    chrome.storage.sync.set({ theme });
  }
}
  • Любое изменение theme автоматически обновит DOM через реактивность FAST Element.
  • Поддержка асинхронных операций упрощает интеграцию с API расширений.

Динамическая загрузка и оптимизация

FAST Element позволяет лениво загружать компоненты, что критично для расширений, чтобы не замедлять страницу:

import("./my-component.js").then(module => {
  document.body.appendChild(document.createElement("my-component"));
});
  • Минимизируется время первоначальной загрузки расширения.
  • Можно загружать компоненты только при необходимости, например, при открытии popup.

FAST Element сочетает лёгкость, производительность и реактивность, что делает его удобным инструментом для создания современных компонентов и интеграции в расширения браузеров. Его возможности охватывают шаблонизацию, управление состоянием, стилизацию, слоты и события, обеспечивая полную автономность компонентов без зависимости от крупных фреймворков.

Оглавление