createExtension()

Home > @backstage/frontend-plugin-api > createExtension

Creates a new extension definition for installation in a Backstage app.

Signature:

function createExtension<UOutput extends ExtensionDataRef, TInputs extends {
    [inputName in string]: ExtensionInput<ExtensionDataRef, {
        optional: boolean;
        singleton: boolean;
    }>;
}, TConfigSchema extends {
    [key: string]: (zImpl: typeof z) => z.ZodType;
}, UFactoryOutput extends ExtensionDataValue<any, any>, const TKind extends string | undefined = undefined, const TName extends string | undefined = undefined>(options: CreateExtensionOptions<TKind, TName, UOutput, TInputs, TConfigSchema, UFactoryOutput>): ExtensionDefinition<{
    config: string extends keyof TConfigSchema ? {} : {
        [key in keyof TConfigSchema]: z.infer<ReturnType<TConfigSchema[key]>>;
    };
    configInput: string extends keyof TConfigSchema ? {} : z.input<z.ZodObject<{
        [key in keyof TConfigSchema]: ReturnType<TConfigSchema[key]>;
    }>>;
    output: UOutput extends ExtensionDataRef<infer IData, infer IId, infer IConfig> ? ExtensionDataRef<IData, IId, IConfig> : never;
    inputs: TInputs;
    params: never;
    kind: string | undefined extends TKind ? undefined : TKind;
    name: string | undefined extends TName ? undefined : TName;
}>;

Parameters

Parameter	Type	Description
options	CreateExtensionOptions<TKind, TName, UOutput, TInputs, TConfigSchema, UFactoryOutput>

**Returns:**

ExtensionDefinition<{ config: string extends keyof TConfigSchema ? {} : { [key in keyof TConfigSchema]: z.infer<ReturnType<TConfigSchema[key]>>; }; configInput: string extends keyof TConfigSchema ? {} : z.input<z.ZodObject<{ [key in keyof TConfigSchema]: ReturnType<TConfigSchema[key]>; }>>; output: UOutput extends ExtensionDataRef<infer IData, infer IId, infer IConfig> ? ExtensionDataRef<IData, IId, IConfig> : never; inputs: TInputs; params: never; kind: string | undefined extends TKind ? undefined : TKind; name: string | undefined extends TName ? undefined : TName; }>

Remarks

This is a low-level function for creation of extensions with arbitrary inputs and outputs and is typically only intended to be used for advanced overrides or framework-level extensions. For most extension creation needs, it is recommended to use existing ExtensionBlueprints instead. You can find blueprints both in the @backstage/frontend-plugin-api package as well as other plugin libraries. There is also a list of commonly used blueprints in the frontend system documentation.

Extension definitions that are created with this function can be installed in a Backstage app via a FrontendPlugin or FrontendModule.

For more details on how extensions work, see the documentation for extensions.

Example

const myExtension = createExtension({
  name: 'example',
  attachTo: { id: 'app', input: 'root' },
  output: [coreExtensionData.reactElement],
  factory() {
    return [coreExtensionData.reactElement(<h1>Hello, world!</h1>)];
  },
});