---
url: https://plugin.stripo.email/extensions/reference/core/Extension.md
---
# Extension

Main container class that bundles all extension components for the Stripo Email Editor.

```typescript
class Extension
```

## Description

The `Extension` class is the central container that holds all the components of your Stripo extension. It packages together blocks, controls, UI elements, external integrations, localization, and styles into a single deployable unit that can be loaded into the Stripo Email Editor.

Extensions are typically created using the [ExtensionBuilder](./ExtensionBuilder.md) class which provides a fluent API for configuration. Once built, the extension is registered with the editor to make its functionality available to users.

## Import

```typescript
import { Extension } from '@stripoinc/ui-editor-extensions';
```

## Constructor

The `Extension` class constructor accepts an options object with all extension components. However it's recommended to use [ExtensionBuilder](./ExtensionBuilder.md) for creating extensions.

```typescript
constructor(options: ExtensionOptions)
```

### ExtensionOptions

```typescript
interface ExtensionOptions {
  i18n: Record<string, Record<string, string>> | undefined;
  styles: string | undefined;
  previewStyles?: string;
  uiElements: ConstructorOfType<UIElement>[];
  generalPanelTabs: ConstructorOfType<GeneralPanelTab>[];
  modulesPanelTabs: ConstructorOfType<ModulesPanelTab>[];
  controls: ConstructorOfType<Control | BuiltInControl>[];
  contextActions: ConstructorOfType<ContextAction>[];
  blocks: ConstructorOfType<Block>[];
  uiElementTagRegistry: ConstructorOfType<UIElementTagRegistry> | undefined;
  settingsPanelRegistry: ConstructorOfType<SettingsPanelRegistry> | undefined;
  externalSmartElementsLibrary?: ConstructorOfType<ExternalSmartElementsLibrary>;
  externalImageLibrary?: ConstructorOfType<ExternalImageLibrary>;
  externalAiAssistant?: ConstructorOfType<ExternalAiAssistant>;
  externalDisplayConditionsLibrary?: ConstructorOfType<ExternalDisplayConditionsLibrary>;
  externalVideoLibrary?: ConstructorOfType<ExternalVideosLibrary>;
  blocksPanel?: ConstructorOfType<BlocksPanel>;
  iconsRegistry?: ConstructorOfType<IconsRegistry>;
  externalImageLibraryTab?: ConstructorOfType<ExternalImageLibraryTab>;
  externalMergeTagsLibrary?: ConstructorOfType<ExternalMergeTagsLibrary>;
}
```

## Methods

### getI18n()

Returns the internationalization configuration for the extension.

```typescript
public getI18n(): Record<string, Record<string, string>> | undefined
```

#### Returns

`Record<string, Record<string, string>> | undefined` - Localization strings organized by language code

***

### getStyles()

Returns the CSS styles that will be injected into the editor.

```typescript
public getStyles(): string | undefined
```

#### Returns

`string | undefined` - CSS styles as a string

***

### getPreviewStyles()

Returns the CSS styles specific to the email preview mode.

```typescript
public getPreviewStyles(): string | undefined
```

#### Returns

`string | undefined` - Preview-specific CSS styles

***

### getUiElements()

Returns all custom UI elements registered with the extension.

```typescript
public getUiElements(): ConstructorOfType<UIElement>[]
```

#### Returns

`ConstructorOfType<UIElement>[]` - Array of UI element constructors

***

### getUiElementTagRegistry()

Returns the registry for custom UI element tags.

```typescript
public getUiElementTagRegistry(): ConstructorOfType<UIElementTagRegistry> | undefined
```

#### Returns

`ConstructorOfType<UIElementTagRegistry> | undefined` - UI element tag registry constructor

***

### getControls()

Returns all controls (custom and built-in) registered with the extension.

```typescript
public getControls(): ConstructorOfType<Control | BuiltInControl>[]
```

#### Returns

`ConstructorOfType<Control | BuiltInControl>[]` - Array of control constructors

***

### getSettingsPanelRegistry()

Returns the registry for custom settings panels.

```typescript
public getSettingsPanelRegistry(): ConstructorOfType<SettingsPanelRegistry> | undefined
```

#### Returns

`ConstructorOfType<SettingsPanelRegistry> | undefined` - Settings panel registry constructor

***

### getContextActions()

Returns all context actions registered with the extension.

```typescript
public getContextActions(): ConstructorOfType<ContextAction>[]
```

#### Returns

`ConstructorOfType<ContextAction>[]` - Array of context action constructors

***

### getBlocks()

Returns all custom blocks registered with the extension.

```typescript
public getBlocks(): ConstructorOfType<Block>[]
```

#### Returns

`ConstructorOfType<Block>[]` - Array of block constructors

***

### getGeneralPanelTabs()

:::tip Version Availability
This method is available starting from v3.5.0
:::

Returns all custom general panel tabs registered with the extension.

```typescript
public getGeneralPanelTabs(): ConstructorOfType<GeneralPanelTab>[]
```

#### Returns

`ConstructorOfType<GeneralPanelTab>[]` - Array of general panel tab constructors

***

### getModulesPanelTabs()

::::tip Version Availability
This method is available starting from v3.7.0
::::

Returns all custom modules panel tabs registered with the extension.

```typescript
public getModulesPanelTabs(): ConstructorOfType<ModulesPanelTab>[]
```

#### Returns

`ConstructorOfType<ModulesPanelTab>[]` - Array of modules panel tab constructors

***

### getExternalSmartElementsLibrary()

Returns the external smart elements library integration if configured.

```typescript
public getExternalSmartElementsLibrary(): ConstructorOfType<ExternalSmartElementsLibrary> | undefined
```

#### Returns

`ConstructorOfType<ExternalSmartElementsLibrary> | undefined` - Smart elements library constructor

***

### getExternalImageLibrary()

Returns the external image library integration if configured.

```typescript
public getExternalImageLibrary(): ConstructorOfType<ExternalImageLibrary> | undefined
```

#### Returns

`ConstructorOfType<ExternalImageLibrary> | undefined` - Image library constructor

***

### getExternalImageLibraryTab()

:::tip Version Availability
This method is available starting from v3.2.0
:::

Returns the external image library tab if configured.

```typescript
public getExternalImageLibraryTab(): ConstructorOfType<ExternalImageLibraryTab> | undefined
```

#### Returns

`ConstructorOfType<ExternalImageLibraryTab> | undefined` - Image library tab constructor

***

### getExternalMergeTagsLibrary()

:::::tip Version Availability
This method is available starting from v3.11.0
:::::

Returns the external merge tags library integration if configured.

```typescript
public getExternalMergeTagsLibrary(): ConstructorOfType<ExternalMergeTagsLibrary> | undefined
```

#### Returns

`ConstructorOfType<ExternalMergeTagsLibrary> | undefined` - Merge tags library constructor

***

### getExternalAiAssistant()

Returns the external AI assistant integration if configured.

```typescript
public getExternalAiAssistant(): ConstructorOfType<ExternalAiAssistant> | undefined
```

#### Returns

`ConstructorOfType<ExternalAiAssistant> | undefined` - AI assistant constructor

***

### getExternalDisplayConditionsLibrary()

Returns the external display conditions library if configured.

```typescript
public getExternalDisplayConditionsLibrary(): ConstructorOfType<ExternalDisplayConditionsLibrary> | undefined
```

#### Returns

`ConstructorOfType<ExternalDisplayConditionsLibrary> | undefined` - Display conditions library constructor

***

### getExternalVideoLibrary()

Returns the external video library integration if configured.

```typescript
public getExternalVideoLibrary(): ConstructorOfType<ExternalVideosLibrary> | undefined
```

#### Returns

`ConstructorOfType<ExternalVideosLibrary> | undefined` - Video library constructor

***

### getBlocksPanel()

Returns the custom blocks panel configuration if provided.

```typescript
public getBlocksPanel(): ConstructorOfType<BlocksPanel> | undefined
```

#### Returns

`ConstructorOfType<BlocksPanel> | undefined` - Blocks panel constructor

***

### getIconsRegistry()

Returns the custom icons registry if configured.

```typescript
public getIconsRegistry(): ConstructorOfType<IconsRegistry> | undefined
```

#### Returns

`ConstructorOfType<IconsRegistry> | undefined` - Icons registry constructor

#### Usage Notes

* Allows registration of custom SVG icons for use in controls and UI elements
* Icons can be referenced by key throughout the extension
* Useful for maintaining consistent iconography across custom components

## Usage Example

While you can instantiate `Extension` directly, it's recommended to use `ExtensionBuilder`:

```typescript
import { ExtensionBuilder } from '@stripoinc/ui-editor-extensions';
import { MyCustomBlock } from './blocks/MyCustomBlock';
import { MyCustomControl } from './controls/MyCustomControl';

const extension = new ExtensionBuilder()
  .addBlock(MyCustomBlock)
  .addControl(MyCustomControl)
  .withLocalization({
    'en': {
      'my.block.title': 'My Custom Block'
    }
  })
  .addStyles(`
    .my-custom-control {
      padding: 20px;
      background: #f0f0f0;
    }
  `)
  .build();
```