> ## 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 runtime 上建立 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 runtime；範本已用標準的 `preact/compat` alias 設定好，大多數 React 函式庫仍可正常運作。當打包體積重要時，例如要注入別人頁面的 content script，這是合適的選擇。

## 原始碼

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