跳转到主要内容
用 Svelte 组件搭建扩展 UI，同时把框架接线交给 Extension.js 负责。 Extension.js 会从项目依赖中检测 Svelte，并自动配置 .svelte 解析、loader 设置以及 Svelte 客户端别名。

​
什么场景适合用 Svelte

  • 你希望 popup、options、sidebar 或新标签页 UI 拥有更小的运行时。
  • 你偏好以组件为先、语法简洁的写法。
  • 你希望选择一个既能用于扩展页面、又能用于 content script UI 挂载的框架。

​
模板示例

​
new-svelte

new-svelte template screenshot 当你想要一个以框架为先、配置最少的扩展 UI 时，使用 Svelte 起步模板。 
npx extension@latest create my-extension --template=new-svelte
仓库：extension-js/examples/new-svelte

​
content-svelte

content-svelte template screenshot 通过 content script 把 Svelte 组件注入网页。 
npx extension@latest create my-extension --template=content-svelte
仓库：extension-js/examples/content-svelte

​
在现有扩展中使用

安装 Svelte： 如果想在现有项目中显式配置，再安装 Svelte 的 loader：

​
开发期行为

当 Extension.js 检测到 Svelte 时，会：
  • 启用 .svelte 文件解析。
  • 在 JS 框架管线中配置 Svelte loader。
  • 应用 Svelte 客户端别名（例如 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，创建一个挂载节点，并在默认导出中返回一个清理函数。这样 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 里始终返回清理函数，保证重新挂载行为可预期。
  • 先在扩展页面里使用 Svelte，等功能边界清晰后，再扩展到 content script UI。

​
下一步