> ## 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 浏览器扩展，包含单文件组件、编译时运行时以及现成的 popup、options 与 content script 接线。

<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` 组件和极小的运行时占用。对于每一 KB 都重要的 content script 与 popup 来说，这是一个不错的选择。

模板已包含在扩展上下文中以 HMR 友好的方式编写 Svelte 所需的构建配置。

## 源代码

在 GitHub 上浏览完整源码：[extension-js/examples/svelte](https://github.com/extension-js/examples/tree/main/examples/svelte)。