> ## 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 瀏覽器擴充功能範本

> 建立採用單檔元件、編譯期 runtime 與現成 popup、options 及 content script 串接的 Svelte 瀏覽器擴充功能。

<img src="https://mintcdn.com/extensionjs/VCnDd7fX2Nza24SE/images/examples/new-svelte/screenshot.png?fit=max&auto=format&n=VCnDd7fX2Nza24SE&q=85&s=5a9aa004e7ad9f03a9039c70a3c57ac2" alt="Svelte template preview" className="w-full rounded-xl border border-black/10 dark:border-white/10" width="2400" height="1800" data-path="images/examples/new-svelte/screenshot.png" />

## 建立專案

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create my-extension --template=svelte
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --template=svelte
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --template=svelte
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=svelte
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=svelte
  ```
</CodeGroup>

## 你會獲得什麼

編譯期 UI，搭配單檔 `.svelte` 元件與極小的 runtime 體積。對於每 KB 都很重要的 content script 與 popup 是合適選擇。

範本已包含在擴充功能情境中能順利搭配 HMR 撰寫 Svelte 所需的建置設定。

## 原始碼

在 GitHub 瀏覽完整原始碼：[extension-js/examples/svelte](https://github.com/extension-js/examples/tree/main/examples/svelte)。