在瀏覽器擴充功能中使用 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=newtab-react

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

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

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

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

Repository: extension-js/examples/newtab-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

deno run -A npm: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=newtab-react-router

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

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

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

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

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

在既有擴充功能中使用

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

安裝

安裝 React 執行期相依套件：

npm install react react-dom

pnpm add react react-dom

yarn add react react-dom

bun add react react-dom

deno add npm:react npm:react-dom

如果你使用 TypeScript，也安裝 React 的型別套件：

npm install -D @types/react @types/react-dom

pnpm add -D @types/react @types/react-dom

yarn add -D @types/react @types/react-dom

bun add -d @types/react @types/react-dom

deno add -D npm:@types/react npm:@types/react-dom

React 整合也會用到一些選用套件，例如 react-refresh 與 @rspack/plugin-react-refresh。兩者都會隨 extension-develop 一起作為相依套件出貨，所以一次正常的安裝就已經能解析到它們。當其中一個無法解析時，建置會無法啟動，錯誤訊息會指出要安裝哪些套件。錯誤中的安裝指令會依你專案使用的套件管理器來呈現。

設定

常見的 React 檔案命名：

JavaScript：*.jsx
TypeScript：*.tsx

開發行為

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

Extension.js 會使用 react-refresh 與 @rspack/plugin-react-refresh 提供 refresh 行為。
若這些 refresh 套件無法從你的專案或 extension-develop 解析到，建置會無法啟動，並印出對應的安裝指令。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 />);

下一步

當你需要一個側邊欄面板加上一個 content script 時，從 React 範本（--template=react）開始。
進一步了解 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

在瀏覽器擴充功能中使用 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` 檔中

下一步

影片導覽

模板示範