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

​
什麼情況下適合使用 Svelte

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

​
範本範例

​
new-svelte

new-svelte template screenshot 當你想要以框架為主的擴充功能 UI 且只需最少設定時，使用 Svelte 範本。 
npx extension@latest create my-extension --template=new-svelte
Repository: extension-js/examples/new-svelte

​
content-svelte

content-svelte template screenshot 透過 content script 把 Svelte 元件注入網頁中。 
npx 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。

​
下一步