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

Extension.js 會從專案的相依套件偵測 React，並自動設定 JSX/TSX 轉換、React 的模組別名，以及開發階段的 fast-refresh 支援。

什麼情況下適合使用 React

你正在打造 popup、options、sidebar、new tab 等內容豐富的 UI 介面。
你希望在擴充功能頁面與 content script UI 之間重複使用元件。
你已經在 web 專案中使用 React，並希望在擴充功能中採用相同的開發模型。

範本範例

`new-react`

以可立即執行的專案結構打造一個 React new-tab 體驗。

npx extension@latest create my-extension --template=new-react

pnpx extension@latest create my-extension --template=new-react

yarn dlx extension@latest create my-extension --template=new-react

bunx extension@latest create my-extension --template=new-react

bunx extension@latest create my-extension --template=new-react

Repository: extension-js/examples/new-react

`content-react`

以 content script 為主的設定，把 React UI 注入到既有頁面中。

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

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

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

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

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

Repository: extension-js/examples/content-react

`new-react-router`

以 React Router 在 React 擴充功能中加入 client-side 路由。

npx extension@latest create my-extension --template=new-react-router

pnpx extension@latest create my-extension --template=new-react-router

yarn dlx extension@latest create my-extension --template=new-react-router

bunx extension@latest create my-extension --template=new-react-router

bunx extension@latest create my-extension --template=new-react-router

Repository: extension-js/examples/new-react-router

在既有擴充功能中使用

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

安裝

安裝 React 執行期相依套件：如果你使用 TypeScript，也安裝 React 的型別套件：

設定

常見的 React 檔案命名：

JavaScript：*.jsx
TypeScript：*.tsx

開發行為

在開發模式下，Extension.js 偵測到 React 時會啟用 React refresh 整合。

Extension.js 會使用 react-refresh 與 @rspack/plugin-react-refresh 提供 refresh 行為。
若專案缺少選用的 refresh 相依套件，Extension.js 會自動安裝並提示重新啟動。
Extension.js 會套用 React 別名，讓 bundle 中只保留單一份 React/runtime 實例。

使用範例

在 new tab 擴充功能中

頁面入口範例：

<!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 React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

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

在 `content_script` 檔中

對於 content script，把 React 渲染到注入的根節點：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./content.css";

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

const root = ReactDOM.createRoot(rootDiv);
root.render(<App />);

下一步

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

影片導覽

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

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Debugging

Implementation guide

Community

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

什麼情況下適合使用 React

範本範例

`new-react`

`content-react`

`new-react-router`

在既有擴充功能中使用

安裝

設定

開發行為

使用範例

在 new tab 擴充功能中

在 `content_script` 檔中

下一步

影片導覽

​什麼情況下適合使用 React

​範本範例

​new-react

​content-react

​new-react-router

​在既有擴充功能中使用

​安裝

​設定

​開發行為

​使用範例

​在 new tab 擴充功能中

​在 content_script 檔中

​下一步

​影片導覽

什麼情況下適合使用 React

範本範例

`new-react`

`content-react`

`new-react-router`

在既有擴充功能中使用

安裝

設定

開發行為

使用範例

在 new tab 擴充功能中

在 `content_script` 檔中

下一步

影片導覽