> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.
# 在浏览器扩展中使用 Svelte
> 用 Svelte 组件搭建扩展 UI。Extension.js 会从你的依赖中自动配置 .svelte 文件解析、loader 设置和别名。
用 Svelte 组件搭建扩展 UI，同时把框架接线交给 Extension.js 负责。
Extension.js 会从项目依赖中检测 Svelte，并自动配置 `.svelte` 解析、loader 设置以及 Svelte 客户端别名。
## 什么场景适合用 Svelte
* 你希望 popup、options、sidebar 或新标签页 UI 拥有更小的运行时。
* 你偏好以组件为先、语法简洁的写法。
* 你希望选择一个既能用于扩展页面、又能用于 content script UI 挂载的框架。
## 模板示例
### `new-svelte`
当你想要一个以框架为先、配置最少的扩展 UI 时，使用 Svelte 起步模板。
```bash npm theme={null}
npx extension@latest create my-extension --template=new-svelte
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=new-svelte
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=new-svelte
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-svelte
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-svelte
```
仓库：[extension-js/examples/new-svelte](https://github.com/extension-js/examples/tree/main/examples/new-svelte)
### `content-svelte`
通过 content script 把 Svelte 组件注入网页。
```bash npm theme={null}
npx extension@latest create my-extension --template=content-svelte
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=content-svelte
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=content-svelte
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-svelte
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-svelte
```
仓库：[extension-js/examples/content-svelte](https://github.com/extension-js/examples/tree/main/examples/content-svelte)
## 在现有扩展中使用
安装 Svelte：
如果想在现有项目中显式配置，再安装 Svelte 的 loader：
## 开发期行为
当 Extension.js 检测到 Svelte 时，会：
* 启用 `.svelte` 文件解析。
* 在 JS 框架管线中配置 Svelte loader。
* 应用 Svelte 客户端别名（例如 `svelte`、`svelte/store` 和 `svelte/reactivity`）。
如果项目缺少可选工具，Extension.js 会安装所需依赖并提示你重启。
## 用法示例
### 在扩展页面中
```html theme={null}
Svelte Extension
```
```ts theme={null}
import App from "./App.svelte";
new App({
target: document.getElementById("app")!,
});
```
### 在 `content_script` 文件中
对于 content script，创建一个挂载节点，并在默认导出中返回一个清理函数。这样 Extension.js 可以在开发期安全地重新挂载：
```ts theme={null}
import App from "./App.svelte";
export default function main() {
const target = document.createElement("div");
target.id = "extension-root";
document.body.appendChild(target);
const app = new App({ target });
return () => {
app.$destroy();
target.remove();
};
}
```
## 最佳实践
* 让 Svelte 组件专注于 UI，把浏览器 API 的编排放到专门的模块里。
* 在 content script 里始终返回清理函数，保证重新挂载行为可预期。
* 先在扩展页面里使用 Svelte，等功能边界清晰后，再扩展到 content script UI。
## 下一步
* 进一步了解 [TypeScript 支持](/docs/languages-and-frameworks/typescript)。
* 阅读 [Content scripts](/docs/implementation-guide/content-scripts) 中的 content script 契约。