` 形式的 `component`，以及用 `localeMap` 替换 HTML 里的占位符：
```javascript
import { extend } from 'shoplazza-extension-ui';
extend({
type: 'spz',
extensionPoint: 'Checkout::Navigate::RenderBefore',
component: Promise.resolve(
"${i18n('greeting')} - ${i18n('promo.line')}
"
),
localeMap: {
'en-US': { greeting: 'Hello', promo: { line: 'Free returns within 30 days' } },
'zh-CN': { greeting: '你好', promo: { line: '30 天内免费退货' } },
},
id: __EXTENSION_ID__,
});
```
- `${i18n(...)}` 里的 key **必须带引号**：`${i18n('greeting')}` 会被替换，`${i18n(greeting)}` 渲染出来是 `undefined`。
- 嵌套 key 用点号打平，`promo: { line: … }` 要写成 `${i18n('promo.line')}`。
- 用哪一份文案取决于顾客的完整语言标记，也就是 `localeMap` 每一项的 key。
- HTML 写成普通引号字符串，不要写成模板字符串，否则 `${…}` 会被 JavaScript 先求值，轮不到 SDK 替换。
- 占位符 `{EXTENSION_POINT}` 会被替换成由扩展点名派生的 id，例如 `Checkout::Summary::RenderBefore` 对应 `Checkout-Summary-RenderBefore-ID`。
:::warning
**安全提示（XSS 风险）：** `component` 是**直接渲染的 HTML 字符串**，**不要把未转义的用户输入或外部 API 返回值拼接进去**，否则会导致 XSS 注入。任何动态内容先做 HTML 转义，或改用 `createElement` / `textContent` 等 DOM API 构造。
**多次调用同一扩展点：** 同一个 `extensionPoint` 可以被多次 `extend`，内容按调用顺序**追加**渲染，而不是覆盖。
:::
### HTML 模板
对于内容较复杂的扩展，推荐将 HTML 拆分到独立文件中管理。脚手架默认生成以下文件结构：
**`src/index.html`**（可选，组装入口）：
```html
import './style.html'
import './content.html'
import './script.html'
```
:::note
**`import './xxx.html'` 不是 ES Module 语法。** 它是 `shoplazza-cli` 在构建时识别的**文本拼接指令**：在打包阶段，CLI 会把 `import './xxx.html'` 这一行原地替换为 `./xxx.html` 文件的内容（按出现顺序内联），而不是运行时动态加载。
- 该语法**只能写在 `src/index.html` 顶层**作为组装入口；写在 `
```
也可以不使用 HTML 模板，直接在 `index.js` 中构造 HTML 字符串传入 `component`，适合内容简单或需要动态生成的场景。
:::caution 结账页性能预算
结账页性能直接影响转化率，扩展 JS / CSS 应尽量精简：单个扩展 gzip 后建议 `< 30KB`，避免引入大型依赖；优先用 `setTimeout` / `IntersectionObserver` 等被动方式而不是高频轮询。
:::