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

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

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

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

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

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

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

Repository: extension-js/examples/content-svelte

在既有擴充功能中使用

安裝 Svelte：如果要在既有專案中明確設定，也安裝 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 App from "./App.svelte";

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

在 `content_script` 檔中

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

import App from "./App.svelte";

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

  const app = new App({ target });

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

最佳實務

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

下一步

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

在瀏覽器擴充功能中使用 Vue.js 在瀏覽器擴充功能中使用 CSS modules

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

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` 檔中

最佳實務

下一步