> ## 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.

# Preact 浏览器扩展模板

> 用与 React 兼容的 API、3kB 运行时脚手架生成一个 Preact 浏览器扩展，专为对体积敏感的 popup 与 content script 调优。

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

## 创建项目

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

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

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

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

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

## 你将得到什么

与 React 相同的组件模型，但只有 3kB 的运行时，并配置了标准的 `preact/compat` 别名，让大多数 React 库可以继续工作。当你关心打包体积时，这是一个不错的选择，尤其适用于注入到他人页面中的 content script。

## 源代码

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