wb-preview-url-modifier
Covers the PreviewUrlModifier extension point in Website Builder. Use when a user wants to inject custom query parameters into live preview URLs — e.g. signed tokens, tenant identifiers, feature flags — from their Webiny project. Handles the full registration pattern: implementing the interface, wiring via createFeature + RegisterFeature, and registering via webiny.config.tsx. Supports async modifier methods (e.g. remote token fetch).
来源信息
- 仓库
- webiny/webiny-js
- 最近来源活动
- 2026年7月24日 12:20
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 8,049
- 分支
- 682
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- wb-preview-url-modifier
- description
- Covers the PreviewUrlModifier extension point in Website Builder. Use when a user wants to inject custom query parameters into live preview URLs — e.g. signed tokens, tenant identifiers, feature flags — from their Webiny project. Handles the full registration pattern: implementing the interface, wiring via createFeature + RegisterFeature, and registering via webiny.config.tsx. Supports async modifier methods (e.g. remote token fetch).
# Website Builder: Preview URL Modifier
## TL;DR
`PreviewUrlModifier` is a DI extension point that lets project developers inject
custom query parameters into all Website Builder live preview URLs. Register one
implementation; it receives the full `URL` object and can mutate it however it
needs — including async operations like fetching a signed token from a remote API.
## Implement the Modifier
Import from `webiny/admin/website-builder`. The single required method is
`modify(url: URL): Promise<void>` — mutate `url.searchParams` in place, mark the
method `async` when you need to fetch remote values.
```ts
import { PreviewUrlModifier } from "webiny/admin/website-builder";
class MyPreviewUrlModifier implements PreviewUrlModifier.Interface {
async modify(url: URL) {
url.searchParams.set("my-param", "my-value");
}
}
export default PreviewUrlModifier.createImplementation({
implementation: MyPreviewUrlModifier,
dependencies: []
});
```
Async example — fetching a signed token:
```ts
class SignedTokenModifier implements PreviewUrlModifier.Interface {
async modify(url: URL) {
const token = await fetch("/api/preview-token").then(r => r.text());
url.searchParams.set("token", token);
}
}
export default PreviewUrlModifier.createImplementation({
implementation: SignedTokenModifier,
dependencies: []
});
```
## Register the Feature
```tsx
// extensions/previewUrlModifier/index.tsx
import React from "react";
import { createFeature, RegisterFeature } from "webiny/admin";
import MyPreviewUrlModifier from "./MyPreviewUrlModifier.js";
const PreviewUrlModifierFeature = createFeature({
name: "MyApp/PreviewUrlModifier",
register(container) {
container.register(MyPreviewUrlModifier);
}
});
export default () => <RegisterFeature feature={PreviewUrlModifierFeature} />;
```
```tsx
// webiny.config.tsx
<Admin.Extension src={"@/extensions/previewUrlModifier/index.tsx"} />
```
## Where It Applies
| Surface | Description |
| ---------------- | ---------------------------------------------------- |
| Editor iframe | The live-editing iframe in the page editor |
| Address bar link | The "copy preview link" button in the editor toolbar |
| Pages list | Preview icon links in the pages list table |
## Constraints
- **One modifier per project.** Only the first registered implementation is used.
- **Mutate in place.** Return value is ignored; mutate the `URL` object directly.
- **No `wb.*` collisions.** Params prefixed `wb.` are reserved for internal use.
## Related Skills
- `wb-custom-page-types` -- registering custom page types via PageType abstraction
- `wb-page-settings` -- extending page settings groups and fields
在 GitHub 查看