> ## 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 的 client 別名。
## 什麼情況下適合使用 Svelte
* 你希望 popup、options、sidebar 或 new-tab 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
```
Repository: [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
```
Repository: [extension-js/examples/content-svelte](https://github.com/extension-js/examples/tree/main/examples/content-svelte)
## 在既有擴充功能中使用
安裝 Svelte：
如果要在既有專案中明確設定，也安裝 Svelte loader：
## 開發行為
當 Extension.js 偵測到 Svelte 時，會：
* 啟用 `.svelte` 檔案解析。
* 在 JS 框架 pipeline 中設定 Svelte loader。
* 套用 Svelte client 別名（例如 `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，建立掛載節點，並在 default export 中回傳一個 cleanup 函式。這讓 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 中，務必回傳 cleanup，讓重新掛載的行為可預期。
* 先在擴充功能頁面使用 Svelte，等到功能範圍清楚後再擴展到 content script UI。
## 下一步
* 進一步了解 [TypeScript 支援](/docs/languages-and-frameworks/typescript)。
* 在 [Content scripts](/docs/implementation-guide/content-scripts) 中複習 content script 的契約。