在浏览器扩展中使用 Svelte

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

什么场景适合用 Svelte

你希望 popup、options、sidebar 或新标签页 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

仓库：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

仓库：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 框架管线中配置 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 {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，创建一个挂载节点，并在默认导出中返回一个清理函数。这样 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 里始终返回清理函数，保证重新挂载行为可预期。
先在扩展页面里使用 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` 文件中

最佳实践

下一步

视频演示

模板演示