React、Vue 等技術棧的擴充功能專案範本

用官方範本建立擴充功能，比從零打造資料夾結構與設定來得更快。

範本提供的能力

可用的專案結構： 從可運作的 manifest、scripts 和原始碼配置起步。
針對技術棧的設定： 依框架與執行環境需求挑選範本。
更快上手： 幾分鐘內就能從想法走到可執行的擴充功能。
一致的預設值： 減少不同專案與團隊成員之間的設定差異。

快速使用

npx extension@latest create my-extension --template=<slug>

pnpx extension@latest create my-extension --template=<slug>

yarn dlx extension@latest create my-extension --template=<slug>

bunx extension@latest create my-extension --template=<slug>

deno run -A npm:extension@latest create my-extension --template=<slug>

將 <slug> 替換成你想要的範本名稱。

可用的範本

每個範本都會建立一個最小可執行的擴充功能，並附上可用的 manifest.json。展開任一項即可看到它提供的內容、實際指令與導覽影片。

JavaScript

純 ES modules 起點，不需編譯步驟。範本已串接好 manifest.json、popup 與 content script 進入點，你可以直接執行 extension dev 並立刻開始迭代。當你希望以最小化的設定起步時，選擇這個範本。

npx extension@latest create my-extension --template=javascript

在 GitHub 瀏覽完整原始碼: extension-js/examples/javascript

TypeScript

在 sidebar 面板、content 與 background script 之間提供靜態型別，並已設定 chrome 與 browser API 的型別。在編譯期就能抓到 manifest、messaging 與權限相關的錯誤。省略 --template 時就會使用它。

npx extension@latest create my-extension --template=typescript

在 GitHub 瀏覽完整原始碼: extension-js/examples/typescript

Svelte

編譯期 UI，搭配單檔 .svelte 元件與極小的 runtime 體積。範本已包含在擴充功能情境中能順利搭配 HMR 撰寫 Svelte 所需的建置設定。

npx extension@latest create my-extension --template=svelte

在 GitHub 瀏覽完整原始碼: extension-js/examples/svelte

Vue

漸進式設定，搭配 .vue 單檔元件，會建立一個 sidebar 面板加上一個 content script。範本會處理 SFC 編譯與重新載入行為，讓你能專注在 UI。

npx extension@latest create my-extension --template=vue

在 GitHub 瀏覽完整原始碼: extension-js/examples/vue

Preact

與 React 相同的元件模型，但只需 3kB runtime；範本已用標準的 preact/compat alias 設定好，大多數 React 函式庫仍可正常運作。當打包體積重要時，這是合適的選擇。

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

在 GitHub 瀏覽完整原始碼: extension-js/examples/preact

React

以元件為核心的 UI 起點，完整相容 Manifest V3（MV3）。側邊欄面板與 content script 以 React 進入點出貨，並已串接好 hot module replacement（HMR）。修改元件後就能直接看到更新。

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

在 GitHub 瀏覽完整原始碼: extension-js/examples/react

運作方式

當你執行 create --template=<slug> 時，Extension.js 會抓取所選範本、建立專案檔案，並可選擇性地安裝相依套件。只有 javascript 範本內建於 CLI 中，所以它可以離線建立，完全不需要網路請求。省略 --template 時的預設範本是 typescript，它和其他名稱一樣會在建立時下載。當這次下載失敗時，create 會退回內建的 javascript 範本並給出網路錯誤。該目錄包含 6 個群組、大約 50 個範本：starters、sidebar、content scripts、new tab、toolbar action 與特殊資料夾。執行 extension create --help 可以看到全部名稱。不在目錄中的名稱會以 E_TEMPLATE_NOT_FOUND 失敗，而且什麼都不會建立。下載失敗則會回報為下載錯誤，所以網路問題絕不會看起來像打錯字。

可重現的專案建立

範本語料庫固定在 examples 儲存庫的某個不可變 commit 上。同一個範本建立兩次一定會產生相同的檔案，已出貨的 CLI 也絕不會追著一個會移動的分支跑。你可以指向另一份語料庫：

# A branch, tag, or commit SHA of extension-js/examples
EXTENSION_CREATE_TEMPLATE_REF=main extension create my-extension --template=react

# Override the archive URL entirely
EXTENSION_CREATE_TEMPLATE_URL=https://example.com/examples.zip extension create my-extension --template=react

EXTENSION_CREATE_TEMPLATE_REF 接受分支、tag 或 commit SHA。把它設為 main 就會恢復追隨浮動分支的行為。

從 URL 建立專案

--template 也接受用 GitHub URL 或 ZIP URL 取代目錄中的範本名稱：

extension create my-extension --template=https://github.com/extension-js/examples/tree/main/examples/content

從 4.1.19 起，範本 URL 與 EXTENSION_CREATE_TEMPLATE_URL 必須使用 https://。除非設定 EXTENSION_ALLOW_HTTP_TEMPLATE=true，否則 create 會拒絕 http://。

最佳實務

用範本快速建立你的專案結構。
從你已熟悉的技術棧範本開始。
選擇最符合專案需求的瀏覽器擴充功能情境。

後續步驟

了解瀏覽器執行器如何協助你驗證擴充功能行為。
了解 Extension.js 如何處理環境變數。

Introduction

Browser extension fundamentals

Getting started

範本

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

React、Vue 等技術棧的擴充功能專案範本

範本提供的能力

快速使用

可用的範本

運作方式

可重現的專案建立

從 URL 建立專案

更多範本

最佳實務

後續步驟

​範本提供的能力

​快速使用

​可用的範本

​運作方式

​可重現的專案建立

​從 URL 建立專案

​更多範本

​最佳實務

​後續步驟

範本提供的能力

快速使用

可用的範本

運作方式

可重現的專案建立

從 URL 建立專案

更多範本

最佳實務

後續步驟