wxt-dev · aklinker1 · Jun 4, 2025 · Apr 27, 2025 · Apr 28, 2025 · May 4, 2025
diff --git a/examples/svelte-state-rune/README.md b/examples/svelte-state-rune/README.md
@@ -0,0 +1,20 @@
+---
+name: Svelte State Rune
+description: A uses a state rune with WXT's storage to enable clean subscriptions in Svelte (and TS) as well as persisting state.
+---
+
+```sh
+npm install
+npm run dev
+```
+
+Demonstrates how the browser.storage API allows different parts of the extension share state and reflect activity on the current page.
+
+- The page fires a "counter:updated" event every second.
+- The Content Script handles these events by pushing the event payload into session storage.
+- The CounterState class watches the store and updates its reactive state property on change
+- App.svelte reflects the value of `counterState.state`
+
+Open dev tools or the extension service worker logs, click the extension's action icon and watch the events being fired by the active page update the counter.
+
+When closing and re-opening the Popup, the state is persisted.
diff --git a/examples/svelte-state-rune/index.html b/examples/svelte-state-rune/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Emit events</h1>
+
+    <script>
+      let counter = 0;
+      setInterval(() => {
+        document.dispatchEvent(
+          new CustomEvent("counter:updated", {
+            detail: {
+              counter: counter++,
+            },
+          })
+        );
+      }, 1000);
+    </script>
+  </body>
+</html>
diff --git a/examples/svelte-state-rune/package.json b/examples/svelte-state-rune/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "svelte-state-rune",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "postinstall": "wxt prepare"
+  },
+  "devDependencies": {
+    "@tsconfig/svelte": "^5.0.4",
+    "@wxt-dev/module-svelte": "^2.0.3",
+    "svelte": "^5.28.2",
+    "svelte-check": "^4.1.6",
+    "tslib": "^2.7.0",
+    "typescript": "^5.8.2",
+    "vite": "6.3.3",
+    "wxt": "^0.20.5"
+  }
+}
diff --git a/examples/svelte-state-rune/public/icon/128.png b/examples/svelte-state-rune/public/icon/128.png
diff --git a/examples/svelte-state-rune/public/icon/16.png b/examples/svelte-state-rune/public/icon/16.png
diff --git a/examples/svelte-state-rune/public/icon/32.png b/examples/svelte-state-rune/public/icon/32.png
diff --git a/examples/svelte-state-rune/public/icon/48.png b/examples/svelte-state-rune/public/icon/48.png
diff --git a/examples/svelte-state-rune/public/icon/96.png b/examples/svelte-state-rune/public/icon/96.png
diff --git a/examples/svelte-state-rune/public/wxt.svg b/examples/svelte-state-rune/public/wxt.svg
diff --git a/examples/svelte-state-rune/src/assets/svelte.svg b/examples/svelte-state-rune/src/assets/svelte.svg
diff --git a/examples/svelte-state-rune/src/entrypoints/background.ts b/examples/svelte-state-rune/src/entrypoints/background.ts
@@ -0,0 +1,7 @@
+export default defineBackground(() => {
+  // Set the access level so `browser.storage.session` is defined and availble
+  // in content scripts: https://developer.chrome.com/docs/extensions/reference/api/storage#storage_areas
+  void browser.storage.session.setAccessLevel?.({
+    accessLevel: "TRUSTED_AND_UNTRUSTED_CONTEXTS",
+  });
+});
diff --git a/examples/svelte-state-rune/src/entrypoints/content.ts b/examples/svelte-state-rune/src/entrypoints/content.ts
@@ -0,0 +1,11 @@
+import { counterStore } from "@/lib/counter-store";
+
+export default defineContentScript({
+  matches: ["http://localhost/*"],
+
+  main() {
+    document.addEventListener("counter:updated", (event) => {
+      void counterStore.setValue(event.detail);
+    });
+  },
+});
diff --git a/examples/svelte-state-rune/src/entrypoints/popup/App.svelte b/examples/svelte-state-rune/src/entrypoints/popup/App.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import svelteLogo from "../../assets/svelte.svg";
+  import { counterState } from "@/lib/counter-state.svelte";
+</script>
+
+<main class="app">
+  <div>
+    <a href="https://wxt.dev" target="_blank" rel="noreferrer">
+      <img src="/wxt.svg" class="logo" alt="WXT Logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>WXT + Svelte</h1>
+
+  <div class="card">
+    <p>{counterState.state.counter}</p>
+  </div>
+
+  <p class="read-the-docs">Click on the WXT and Svelte logos to learn more</p>
+</main>
diff --git a/examples/svelte-state-rune/src/entrypoints/popup/app.css b/examples/svelte-state-rune/src/entrypoints/popup/app.css
@@ -0,0 +1,53 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+
+  &:hover {
+    filter: drop-shadow(0 0 2em #54bc4ae0);
+  }
+
+  &.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.card {
+  font-size: 2rem;
+}
diff --git a/examples/svelte-state-rune/src/entrypoints/popup/index.html b/examples/svelte-state-rune/src/entrypoints/popup/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/examples/svelte-state-rune/src/entrypoints/popup/main.ts b/examples/svelte-state-rune/src/entrypoints/popup/main.ts
@@ -0,0 +1,10 @@
+import { mount } from "svelte";
+
+import "./app.css";
+import App from "./App.svelte";
+
+const app = mount(App, {
+  target: document.getElementById("app")!,
+});
+
+export default app;
diff --git a/examples/svelte-state-rune/src/lib/counter-state.svelte.ts b/examples/svelte-state-rune/src/lib/counter-state.svelte.ts
@@ -0,0 +1,16 @@
+import { counterStore } from "./counter-store.ts";
+
+class CounterState {
+  state = $state(counterStore.fallback);
+
+  constructor() {
+    counterStore.getValue().then(this.updateCounter);
+    counterStore.watch(this.updateCounter);
+  }
+
+  updateCounter = (newState: { counter: number } | null) => {
+    this.state = newState ?? counterStore.fallback;
+  };
+}
+
+export const counterState = new CounterState();
diff --git a/examples/svelte-state-rune/src/lib/counter-store.ts b/examples/svelte-state-rune/src/lib/counter-store.ts
@@ -0,0 +1,6 @@
+export const counterStore = storage.defineItem<{ counter: number }>(
+  "session:counter",
+  {
+    fallback: { counter: 0 }
+  }
+);
diff --git a/examples/svelte-state-rune/src/typings/example.d.ts b/examples/svelte-state-rune/src/typings/example.d.ts
@@ -0,0 +1,3 @@
+export type CounterEvent = CustomEvent<{
+  counter: number;
+}>;
diff --git a/examples/svelte-state-rune/src/typings/globals.ts b/examples/svelte-state-rune/src/typings/globals.ts
@@ -0,0 +1,7 @@
+import type { CounterEvent } from "./example.d.ts";
+
+declare global {
+  interface DocumentEventMap {
+    "counter:updated": CounterEvent;
+  }
+}
diff --git a/examples/svelte-state-rune/tsconfig.json b/examples/svelte-state-rune/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./.wxt/tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  }
+}
diff --git a/examples/svelte-state-rune/wxt-env.d.ts b/examples/svelte-state-rune/wxt-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="svelte" />
diff --git a/examples/svelte-state-rune/wxt.config.ts b/examples/svelte-state-rune/wxt.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from "wxt";
+
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+  srcDir: "src",
+  modules: ["@wxt-dev/module-svelte"],
+  manifest: {
+    permissions: ["storage"],
+  },
+  webExt: {
+    startUrls: ["http://localhost:3000"],
+  },
+});
diff --git a/metadata.json b/metadata.json
@@ -297,6 +297,24 @@
         "storage"
       ]
     },
+    {
+      "name": "Svelte State Rune",
+      "description": "A uses a state rune with WXT's storage to enable clean subscriptions in Svelte (and TS) as well as persisting state.",
+      "searchText": "Svelte State Rune|A uses a state rune with WXT's storage to enable clean subscriptions in Svelte (and TS) as well as persisting state.|@wxt-dev/module-svelte|svelte|vite|storage|browser.storage.session.setAccessLevel|browser.storage.session",
+      "url": "https://github.com/wxt-dev/examples/tree/main/examples/svelte-state-rune",
+      "apis": [
+        "browser.storage.session.setAccessLevel",
+        "browser.storage.session"
+      ],
+      "packages": [
+        "@wxt-dev/module-svelte",
+        "svelte",
+        "vite"
+      ],
+      "permissions": [
+        "storage"
+      ]
+    },
     {
       "name": "TailwindCSS",
       "description": "Add TailwindCSS to your extension.",