Back to Details

umbraco-entry-point

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Entry Point

Umbraco 入口点

What is it?

什么是入口点？

Entry Points are extensions that execute JavaScript code when the Umbraco backoffice starts up. The Backoffice Entry Point runs after user authentication and is used for initialization logic, loading external libraries, registering UI extensions dynamically, or including global CSS. An optional 
onUnload
function handles cleanup.
Entry Points是在Umbraco后台启动时执行JavaScript代码的扩展。后台入口点会在用户认证后运行，可用于初始化逻辑、加载外部库、动态注册UI扩展或引入全局CSS。可选的
onUnload
函数用于处理清理操作。

Documentation

文档

Always fetch the latest docs before implementing:
在实现前请务必获取最新文档：

Workflow

工作流程

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What initialization is needed? Any external libraries? Cleanup required?
  3. Generate files - Create manifest + entry point based on latest docs
  4. Explain - Show what was created and how to test
  1. 获取文档 - 使用WebFetch访问上述URL
  2. 确认需求 - 需要哪些初始化操作？是否需要加载外部库？是否需要清理操作？
  3. 生成文件 - 根据最新文档创建清单文件 + 入口点文件
  4. 说明 - 展示创建的内容以及测试方法

Minimal Examples

最简示例

Manifest (umbraco-package.json)

清单文件（umbraco-package.json）

json
{
  "name": "My Package",
  "extensions": [
    {
      "type": "backofficeEntryPoint",
      "alias": "My.EntryPoint",
      "name": "My Entry Point",
      "js": "/App_Plugins/MyPackage/index.js"
    }
  ]
}
json
{
  "name": "My Package",
  "extensions": [
    {
      "type": "backofficeEntryPoint",
      "alias": "My.EntryPoint",
      "name": "My Entry Point",
      "js": "/App_Plugins/MyPackage/index.js"
    }
  ]
}

Implementation (index.ts)

实现代码（index.ts）

typescript
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';

export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
  console.log('My package initialized');

  // Register extensions dynamically
  extensionRegistry.register({
    type: 'dashboard',
    alias: 'My.Dashboard',
    name: 'My Dashboard',
    element: () => import('./dashboard.js'),
    meta: {
      label: 'My Dashboard',
      pathname: 'my-dashboard'
    }
  });
};

// Optional cleanup
export const onUnload = () => {
  console.log('My package unloaded');
};
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
typescript
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';

export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
  console.log('My package initialized');

  // 动态注册扩展
  extensionRegistry.register({
    type: 'dashboard',
    alias: 'My.Dashboard',
    name: 'My Dashboard',
    element: () => import('./dashboard.js'),
    meta: {
      label: 'My Dashboard',
      pathname: 'my-dashboard'
    }
  });
};

// 可选的清理操作
export const onUnload = () => {
  console.log('My package unloaded');
};
就是这样！请始终获取最新文档，保持示例简洁，生成完整可运行的代码。