Skip to main content
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

new-svelte template screenshot Use the Svelte starter when you want a framework-first extension UI with minimal setup. 
npx extension@latest create my-extension --template=new-svelte
Repository: extension-js/examples/new-svelte

​
content-svelte

content-svelte template screenshot Inject Svelte components into web pages through content scripts. 
npx extension@latest create my-extension --template=content-svelte
Repository: extension-js/examples/content-svelte

​
Usage with an existing extension

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

​
Development behavior

When Extension.js detects Svelte, it:
  • Enables .svelte file resolution.
  • Configures the Svelte loader in the JS framework pipeline.
  • 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