Svelte for browser extensions

Build extension UIs with Svelte components while keeping Extension.js in charge of the framework wiring. Extension.js detects Svelte from your project dependencies and configures .svelte resolution, loader setup, and Svelte client aliases automatically.

When Svelte is a good fit

You want a smaller runtime for popup, options, sidebar, or new-tab UIs.
You prefer component-first authoring with concise syntax.
You want a framework option that works for both extension pages and content-script UI mounts.

Template examples

`new-svelte`

Use the Svelte starter when you want a framework-first extension UI with minimal setup.

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

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

Repository: extension-js/examples/new-svelte

`content-svelte`

Inject Svelte components into web pages through content scripts.

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

Usage with an existing extension

Install Svelte:

npm install svelte

pnpm add svelte

yarn add svelte

bun add svelte

deno add npm:svelte

For explicit setup in an existing project, install the Svelte loader too:

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

When the optional svelte-loader package is missing, the build error names the exact version that matches the bundled toolchain. The install command in the error is phrased for the package manager that your project uses.

Development behavior

When Extension.js detects Svelte, it:

Enables .svelte file resolution.
Configures the Svelte loader in the JS framework pipeline, with hot reload enabled in development so edited components update without a full page reload.
Applies Svelte client aliases (for example, svelte, svelte/store, and svelte/reactivity).

If your project lacks optional tooling, Extension.js installs what it needs and asks for a restart.

Usage examples

In an extension page

<!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")!,
});

In a `content_script` file

For content scripts, create a mount node and return a cleanup function from your default export. This lets Extension.js remount safely in development:

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();
  };
}

Best practices

Keep Svelte components focused on UI and move browser API orchestration to dedicated modules.
In content scripts, always return cleanup so remount behavior stays predictable.
Use Svelte for extension pages first, then expand to content-script UI once the feature boundary is clear.

Next steps

Learn more about TypeScript support.
Review the content-script contract in Content scripts.

Video walkthrough

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

Svelte for browser extensions

When Svelte is a good fit

Template examples

`new-svelte`

`content-svelte`

Usage with an existing extension

Development behavior

Usage examples

In an extension page

In a `content_script` file

Best practices

Next steps

Video walkthrough

​When Svelte is a good fit

​Template examples

​new-svelte

​content-svelte

​Usage with an existing extension

​Development behavior

​Usage examples

​In an extension page

​In a content_script file

​Best practices

​Next steps

​Video walkthrough

When Svelte is a good fit

Template examples

`new-svelte`

`content-svelte`

Usage with an existing extension

Development behavior

Usage examples

In an extension page

In a `content_script` file

Best practices

Next steps

Video walkthrough