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

以 Svelte 元件打造擴充功能 UI，同時讓 Extension.js 負責框架的串接工作。 Extension.js 會從專案的相依套件偵測 Svelte，並自動設定 .svelte 解析、loader 與 Svelte 的 client 別名。

什麼情況下適合使用 Svelte

你希望 popup、options、sidebar 或 new-tab UI 有較小的執行期。
你偏好以元件為主、語法精簡的撰寫方式。
你希望這個框架在擴充功能頁面與 content script UI 兩種情境都可用。

範本範例

`new-svelte`

當你想要以框架為主的擴充功能 UI 且只需最少設定時，使用 Svelte 範本。

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

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

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

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

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

Repository: extension-js/examples/newtab-svelte

`content-svelte`

透過 content script 把 Svelte 元件注入網頁中。

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

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

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

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

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

Repository: extension-js/examples/content-svelte

在既有擴充功能中使用

安裝 Svelte：

npm install svelte

pnpm add svelte

yarn add svelte

bun add svelte

deno add npm:svelte

如果要在既有專案中明確設定，也安裝 Svelte loader：

npm install -D svelte-loader typescript

pnpm add -D svelte-loader typescript

yarn add -D svelte-loader typescript

bun add -d svelte-loader typescript

deno add -D npm:svelte-loader npm:typescript

當選用的 svelte-loader 套件缺少時，建置錯誤會指出與內建工具鏈相符的確切版本。錯誤訊息中的安裝指令會依你專案實際使用的套件管理器來呈現。

開發行為

當 Extension.js 偵測到 Svelte 時，會：

啟用 .svelte 檔案解析。
在 JS 框架 pipeline 中設定 Svelte loader，並在開發階段啟用熱重載，讓修改過的元件不必整頁重新載入就能更新。
套用 Svelte client 別名（例如 svelte、svelte/store、svelte/reactivity）。

若專案缺少選用工具，Extension.js 不會替你安裝，而是以確切的安裝指令提出警告。之後請重新啟動。

使用範例

在擴充功能頁面中

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Svelte Extension</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="./main.ts"></script>
</html>

import {mount} from "svelte";
import App from "./App.svelte";

mount(App, {
  target: document.getElementById("app")!,
});

Extension.js 以 Svelte 5 為目標。Svelte 4 的 class API（new App(...) 與 app.$destroy()）在模板所安裝的版本上會拋出 component_api_invalid_new。

在 `content_script` 檔中

對於 content script，建立掛載節點，並在 default export 中回傳一個 cleanup 函式。這讓 Extension.js 在開發階段可以安全地重新掛載：

import {mount, unmount} from "svelte";
import App from "./App.svelte";

export default function main() {
  const target = document.createElement("div");
  target.id = "extension-root";
  document.body.appendChild(target);

  const app = mount(App, {target});

  return () => {
    unmount(app);
    target.remove();
  };
}

最佳實務

讓 Svelte 元件專注於 UI，把瀏覽器 API 的協調工作放進專屬模組。
在 content script 中，務必回傳 cleanup，讓重新掛載的行為可預期。
先在擴充功能頁面使用 Svelte，等到功能範圍清楚後再擴展到 content script UI。

下一步

進一步了解 TypeScript 支援。
在 Content scripts 中複習 content script 的契約。

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

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

什麼情況下適合使用 Svelte

範本範例

`new-svelte`

`content-svelte`

在既有擴充功能中使用

開發行為

使用範例

在擴充功能頁面中

在 `content_script` 檔中

最佳實務

下一步

影片導覽

模板示範

​什麼情況下適合使用 Svelte

​範本範例

​new-svelte

​content-svelte

​在既有擴充功能中使用

​開發行為

​使用範例

​在擴充功能頁面中

​在 content_script 檔中

​最佳實務

​下一步

​影片導覽

​模板示範

什麼情況下適合使用 Svelte

範本範例

`new-svelte`

`content-svelte`

在既有擴充功能中使用

開發行為

使用範例

在擴充功能頁面中

在 `content_script` 檔中

最佳實務

下一步

影片導覽

模板示範