在瀏覽器擴充功能中使用 Preact

在維持類 React 開發體驗與本機快速迭代的同時，推出更小的擴充功能 UI bundle。 Extension.js 會從相依套件偵測 Preact，並自動設定 JSX/TSX 轉換與 React 相容別名。你的 React 匯入會透過這些別名對應到 Preact。在開發階段，編輯會透過 live reload 生效：受影響的介面會重新載入，而不是就地熱抽換元件。

什麼情況下適合使用 Preact

你希望 popup、sidebar、new tab 介面的 UI bundle 更小。
你喜歡 React 風格的元件，但想要更輕量的執行期。
你正在針對較低階裝置最佳化擴充功能的啟動時間與 UI 反應速度。

範本範例

`new-preact`

以 Preact 推出更輕量的 new-tab UI，並保有與 React 相容的開發體感。

npx extension@latest create my-extension --template=newtab-preact

pnpx extension@latest create my-extension --template=newtab-preact

yarn dlx extension@latest create my-extension --template=newtab-preact

bunx extension@latest create my-extension --template=newtab-preact

deno run -A npm:extension@latest create my-extension --template=newtab-preact

Repository: extension-js/examples/newtab-preact

`content-preact`

透過 content script 把精巧的 Preact UI 注入頁面內容。

npx extension@latest create my-extension --template=content-preact

pnpx extension@latest create my-extension --template=content-preact

yarn dlx extension@latest create my-extension --template=content-preact

bunx extension@latest create my-extension --template=content-preact

deno run -A npm:extension@latest create my-extension --template=content-preact

Repository: extension-js/examples/content-preact

在既有擴充功能中使用

依下列步驟把 Preact 加入既有擴充功能。

安裝

安裝所需相依套件：

npm install preact

pnpm add preact

yarn add preact

bun add preact

deno add npm:preact

Preact 內建自己的 TypeScript 型別，因此你不需要另外安裝 @types/preact。你只需要加入 preact 這一個套件。Extension.js 會從你的專案解析 preact/compat、preact/test-utils 與 JSX runtime，並依找到的內容建立別名對應表，因此不需要再安裝其他套件。

設定

Extension.js 會期待 Preact 檔案採用下列副檔名：

未啟用 TypeScript 時：*.jsx
啟用 TypeScript 時：*.tsx

開發行為

當 Extension.js 偵測到 Preact 時，會設定：

相容別名（例如 react → preact/compat）。
為 Preact 調整過的 JSX 處理方式。
開發階段的 live reload：檔案變更時，受影響的介面會重新載入並重新掛載。

與 React 不同，Preact 目前還沒有 fast refresh（保留狀態的熱更新）。上游的 @rspack/plugin-preact-refresh 執行期與 Extension.js 內建的 Rspack 版本不相容，因此 Extension.js 選擇停用它，而不是讓 dev 模式壞掉。你的應用程式在每次編輯後仍會更新，只是元件狀態不會在編輯之間保留。等上游外掛修好之後，fast refresh 就會回來。

疑難排解

編輯後元件狀態被重設： 這是目前的預期行為，因為 Preact 使用的是 live reload，而不是 fast refresh（見上文）。
未偵測到 Preact 整合： 確認 preact 已出現在 dependencies 或 devDependencies 中。

使用範例

在 new tab 擴充功能中

在 new tab 擴充功能中使用 Preact，請在 HTML 中以 <script> 引入：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this extension.</noscript>
    <div id="root"></div>
  </body>
  <script src="./index.tsx"></script>
</html>

import { h, render } from "preact";
import App from "./App";

const root = document.getElementById("root");

render(<App />, root);

export default function App() {
  return <h1>Hello, Preact Extension!</h1>;
}

在 `content_script` 檔中

對於 content script，建立 HTML 元素並把 Preact 渲染進去：

import { h, render } from "preact";
import App from "./App";
import "./content.css";

const rootDiv = document.createElement("div");
rootDiv.id = "extension-root";
document.body.appendChild(rootDiv);

render(<App />, rootDiv);

下一步

進一步了解 TypeScript 支援。
探索 Extension.js 如何處理 Sass modules。

Introduction

Browser extension fundamentals

Getting started

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

在瀏覽器擴充功能中使用 Preact

什麼情況下適合使用 Preact

範本範例

`new-preact`

`content-preact`

在既有擴充功能中使用

安裝

設定

開發行為

疑難排解

使用範例

在 new tab 擴充功能中

在 `content_script` 檔中

下一步

影片導覽

模板示範

​什麼情況下適合使用 Preact

​範本範例

​new-preact

​content-preact

​在既有擴充功能中使用

​安裝

​設定

​開發行為

​疑難排解

​使用範例

​在 new tab 擴充功能中

​在 content_script 檔中

​下一步

​影片導覽

​模板示範

什麼情況下適合使用 Preact

範本範例

`new-preact`

`content-preact`

在既有擴充功能中使用

安裝

設定

開發行為

疑難排解

使用範例

在 new tab 擴充功能中

在 `content_script` 檔中

下一步

影片導覽

模板示範