chore(release): v0.10.3

BREAKING CHANGE: No longer discover icons with extensions other than `.png`. If you previously used `.jpg`, `.jpeg`, `.bmp`, or `.svg`, you'll need to convert your icons to `.png` files or manually add them to the manifest inside your `wxt.config.ts` file.

.github/workflows/publish-docs.yml

@@ -0,0 +1,27 @@
+name: Publish Docs
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Docker Image Tag
+        required: true
+        default: latest
+
+jobs:
+  publish:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: docker/login-action@v3
+        with:
+          registry: https://${{ secrets.DOCKER_REGISTRY_HOSTNAME }}
+          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
+          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+      - run: pnpm docs:build
+      - run: docker build docs/.vitepress -t ${{ secrets.DOCKER_REGISTRY_HOSTNAME }}/wxt/docs:${{ github.event.inputs.tag || 'latest' }}
+      - run: docker push ${{ secrets.DOCKER_REGISTRY_HOSTNAME }}/wxt/docs:${{ github.event.inputs.tag || 'latest' }}
+      - run: curl -X POST -i ${{ secrets.UPDATE_DOCS_WEBHOOK }}

.github/workflows/sync-releases.yml

@@ -0,0 +1,22 @@
+name: Sync Releases
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - CHANGELOG.md
+
+jobs:
+  sync:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: pnpm
+      - run: pnpm sync-releases all --token ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,154 @@
 # Changelog
 
+## v0.10.3
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.10.2...v0.10.3)
+
+### 🩹 Fixes
+
+- **auto-imports:** Don't add imports to `node_module` dependencies ([#247](https://github.com/wxt-dev/wxt/pull/247))
+
+### 📖 Documentation
+
+- Fix typo ([317b1b6](https://github.com/wxt-dev/wxt/commit/317b1b6))
+
+### 🏡 Chore
+
+- Trigger docs upgrade via webhook ([742b996](https://github.com/wxt-dev/wxt/commit/742b996))
+- Use `normalize-path` instead of `vite.normalizePath` ([#244](https://github.com/wxt-dev/wxt/pull/244))
+- Use `defu` for merging some config objects ([#243](https://github.com/wxt-dev/wxt/pull/243))
+
+### 🤖 CI
+
+- Publish docs on push to main ([1611c1d](https://github.com/wxt-dev/wxt/commit/1611c1d))
+- Only print response headers from docs webhook ([97cbda3](https://github.com/wxt-dev/wxt/commit/97cbda3))
+
+## v0.10.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.10.1...v0.10.2)
+
+### 🩹 Fixes
+
+- Apply `mode` option to build steps correctly ([82ed821](https://github.com/wxt-dev/wxt/commit/82ed821))
+
+### 🏡 Chore
+
+- Upgrade templates to v0.10 ([#239](https://github.com/wxt-dev/wxt/pull/239))
+
+## v0.10.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.10.0...v0.10.1)
+
+### 🩹 Fixes
+
+- Remove WXT global to remove unused modules from production builds ([3da3e07](https://github.com/wxt-dev/wxt/commit/3da3e07))
+
+## v0.10.0
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.9.2...v0.10.0)
+
+### 🚀 Enhancements
+
+- List `bun` as an experimental option in `wxt init` ([#233](https://github.com/wxt-dev/wxt/pull/233))
+- ⚠️  Allow plural directory and only png's for manifest icons ([#237](https://github.com/wxt-dev/wxt/pull/237))
+- Add `wxt/storage` API ([#234](https://github.com/wxt-dev/wxt/pull/234))
+
+### 🩹 Fixes
+
+- Don't use `bun` to load entrypoint config ([#232](https://github.com/wxt-dev/wxt/pull/232))
+
+### 📖 Documentation
+
+- Update main README links ([207b750](https://github.com/wxt-dev/wxt/commit/207b750))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️ No longer discover icons with extensions other than `.png`. If you previously used `.jpg`, `.jpeg`, `.bmp`, or `.svg`, you'll need to convert your icons to `.png` files or manually add them to the manifest inside your `wxt.config.ts` file ([#237](https://github.com/wxt-dev/wxt/pull/237))
+
+### ❤️ Contributors
+
+- Nenad Novaković ([@dvlden](https://github.com/dvlden))
+
+## v0.9.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.9.1...v0.9.2)
+
+### 🚀 Enhancements
+
+- Experimental option to exclude `webextension-polyfill` ([#231](https://github.com/wxt-dev/wxt/pull/231))
+
+### 🤖 CI
+
+- Fix sync-release workflow ([d1b5230](https://github.com/wxt-dev/wxt/commit/d1b5230))
+
+## v0.9.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.9.0...v0.9.1)
+
+### 🚀 Enhancements
+
+- Add `alias` config for customizing path aliases ([#216](https://github.com/wxt-dev/wxt/pull/216))
+
+### 🩹 Fixes
+
+- Move `webextension-polyfill` from peer to regular dependencies ([609ae2a](https://github.com/wxt-dev/wxt/commit/609ae2a))
+- Generate valid manifest for Firefox MV3 ([#229](https://github.com/wxt-dev/wxt/pull/229))
+
+### 📖 Documentation
+
+- Add examples ([c81dfff](https://github.com/wxt-dev/wxt/commit/c81dfff))
+- Improve the "Used By" section on homepage ([#220](https://github.com/wxt-dev/wxt/pull/220))
+- Add UltraWideo to homepage ([#193](https://github.com/wxt-dev/wxt/pull/193))
+- Add StayFree to homepage ([#221](https://github.com/wxt-dev/wxt/pull/221))
+- Update feature comparison ([67ffa44](https://github.com/wxt-dev/wxt/commit/67ffa44))
+
+### 🏡 Chore
+
+- Remove whitespace from genearted `.wxt` files ([#211](https://github.com/wxt-dev/wxt/pull/211))
+- Upgrade templates to `wxt@^0.9.0` ([#214](https://github.com/wxt-dev/wxt/pull/214))
+- Update Vite dependency range to `^4.0.0 || ^5.0.0-0` ([f1e8084](https://github.com/wxt-dev/wxt/commit/f1e8084be89e512dde441b9197a99183c497f67d))
+
+### 🤖 CI
+
+- Automatically sync GitHub releases with `CHANGELOG.md` on push ([#218](https://github.com/wxt-dev/wxt/pull/218))
+
+### ❤️ Contributors
+
+- Aaron Klinker ([@aaronklinker-st](http://github.com/aaronklinker-st))
+
+## v0.9.0
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.7...v0.9.0)
+
+### 🩹 Fixes
+
+- ⚠️  Remove `lib` from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209))
+
+### 📖 Documentation
+
+- Fix heading ([345406f](https://github.com/wxt-dev/wxt/commit/345406f))
+- Add demo video ([#208](https://github.com/wxt-dev/wxt/pull/208))
+
+### 🏡 Chore
+
+- Fix Svelte and React template READMEs ([#207](https://github.com/wxt-dev/wxt/pull/207))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️  Removed [`"WebWorker"` types](https://www.typescriptlang.org/tsconfig/lib.html) from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209)). These types are useful for MV3 projects using a service worker. To add them back to your project, add the following to your project's TSConfig:
+   ```diff
+   {
+     "extends": "./.wxt/tsconfig.json",
+   + "compilerOptions": {
+   +   "lib": ["ESNext", "DOM", "WebWorker"]
+   + }
+   }
+   ```
+
+### ❤️ Contributors
+
+- yyyanghj ([@yyyanghj](https://github.com/yyyanghj))
+
 ## v0.8.7
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.6...v0.8.7)
@@ -60,7 +209,7 @@
 
 ### ❤️ Contributors
 
-- Nenad Novaković
+- Nenad Novaković ([@dvlden](https://github.com/dvlden))
 
 ## v0.8.4
 
@@ -125,7 +274,7 @@
 
 ### ❤️ Contributors
 
-- 渣渣120 <WOSHIZHAZHA120@qq.com>
+- 渣渣120 [@WOSHIZHAZHA120](https://github.com/WOSHIZHAZHA120)
 
 ## v0.7.5
 

CONTRIBUTING.md

@@ -86,7 +86,7 @@ Note that templates are hardcoded to a specific version of `wxt` from NPM, they
 
 ```diff
   "devDependencies": {
-    "typescript": "^5.1.6",
+    "typescript": "^5.3.2",
     "vite-plugin-solid": "^2.7.0",
 -   "wxt": "^0.8.0"
 +   "wxt": "../.."

README.md

@@ -4,18 +4,14 @@
 </h1>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/wxt" target="_blank">
-    <img alt="npm" src="https://img.shields.io/npm/v/wxt?labelColor=black&color=%234fa048">
-  </a>
+  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/wxt?labelColor=black&color=%234fa048"></a>
   <span> </span>
-  <img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048">
+  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048"></a>
   <span> </span>
-  <img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048">
+  <a href="https://github.com/wxt-dev/wxt/blob/main/LICENSE" target="_blank"><img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048"></a>
   <!-- Hide code coverage while it's broken -->
   <!-- <span> </span>
-  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank">
-    <img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048">
-  </a> -->
+  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a> -->
 </p>
 
 <p align="center">
@@ -31,13 +27,17 @@
   &bull;
   <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
   &bull;
-  <a href="https://wxt.dev/entrypoints/background.html" target="_blank">Entrypoints</a>
-  &bull;
   <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
+  &bull;
+  <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
 </p>
 
 ![Example CLI Output](./docs/assets/cli-output.png)
 
+## Demo
+
+https://github.com/wxt-dev/wxt/assets/10101283/07359e53-f491-43b6-8e8f-fae94aec8063
+
 ## Quick Start
 
 Bootstrap a new project:

demo/src/entrypoints/background.ts

@@ -1,3 +1,5 @@
+import messages from 'public/_locales/en/messages.json';
+
 export default defineBackground(() => {
   console.log(browser.runtime.id);
   logId();
@@ -6,6 +8,7 @@ export default defineBackground(() => {
     chrome: __IS_CHROME__,
     firefox: __IS_FIREFOX__,
     manifestVersion: __MANIFEST_VERSION__,
+    messages,
   });
 
   // @ts-expect-error: should only accept entrypoints or public assets
@@ -20,5 +23,11 @@ export default defineBackground(() => {
   browser.i18n.getMessage('bye', ['Aaron']);
   browser.i18n.getMessage('@@extension_id');
 
-  console.log('WXT MODE:', import.meta.env.MODE);
+  console.log('WXT MODE:', {
+    MODE: import.meta.env.MODE,
+    DEV: import.meta.env.DEV,
+    PROD: import.meta.env.PROD,
+  });
+
+  storage.setItem('session:startTime', Date.now());
 });

demo/src/entrypoints/example-tsx.content.tsx

@@ -6,7 +6,11 @@ export default defineContentScript({
     console.log(browser.runtime.id);
     logId();
 
-    console.log('WXT MODE:', import.meta.env.MODE);
+    console.log('WXT MODE:', {
+      MODE: import.meta.env.MODE,
+      DEV: import.meta.env.DEV,
+      PROD: import.meta.env.PROD,
+    });
 
     const n = (Math.random() * 100).toFixed(1);
     ctx.setInterval(() => {

demo/src/entrypoints/options/main.ts

@@ -4,4 +4,8 @@ console.log(browser.runtime.id);
 logId();
 console.log(2);
 
-console.log('WXT MODE:', import.meta.env.MODE);
+console.log('WXT MODE:', {
+  MODE: import.meta.env.MODE,
+  DEV: import.meta.env.DEV,
+  PROD: import.meta.env.PROD,
+});

demo/wxt.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'wxt';
 export default defineConfig({
   srcDir: 'src',
   manifest: {
+    permissions: ['storage'],
     default_locale: 'en',
     web_accessible_resources: [
       {
@@ -11,4 +12,7 @@ export default defineConfig({
       },
     ],
   },
+  alias: {
+    public: 'src/public',
+  },
 });

docs/.vitepress/Dockerfile

@@ -0,0 +1,2 @@
+FROM lipanski/docker-static-website:latest
+COPY dist .

docs/.vitepress/components/UsingWxtSection.vue

@@ -8,14 +8,22 @@ import useListExtensionDetails, {
 const chromeExtensionIds = [
   'ocfdgncpifmegplaglcnglhioflaimkd', // GitHub: Better Line Counts
   'mgmdkjcljneegjfajchedjpdhbadklcf', // Anime Skip Player
+  'bfbnagnphiehemkdgmmficmjfddgfhpl', // UltraWideo
+  'elfaihghhjjoknimpccccmkioofjjfkf', // StayFree - Website Blocker & Web Analytics
 ];
 
 const { data } = useListExtensionDetails(chromeExtensionIds);
-const sortedExtensions = computed(() =>
-  !data.value
-    ? undefined
-    : [...data.value].sort((l, r) => r.weeklyActiveUsers - l.weeklyActiveUsers),
-);
+const sortedExtensions = computed(() => {
+  if (!data.value?.length) return [];
+
+  return [...data.value]
+    .map((item) => ({
+      ...item,
+      // Sort based on the user count weighted by the rating
+      sortKey: ((item.rating ?? 5) / 5) * item.weeklyActiveUsers,
+    }))
+    .sort((l, r) => r.sortKey - l.sortKey);
+});
 
 function getStoreUrl(extension: ChromeExtension) {
   const url = new URL(extension.storeUrl);
@@ -27,32 +35,41 @@ function getStoreUrl(extension: ChromeExtension) {
 <template>
   <section class="vp-doc">
     <div class="container">
-      <h2>Who's Using WXT?</h2>
+      <h2 id="whos-using-wxt">Who's Using WXT?</h2>
       <p>
         Battle tested and ready for production. Explore chrome extensions made
         with WXT.
       </p>
       <ul>
-        <li v-for="extension of sortedExtensions">
+        <li
+          v-for="extension of sortedExtensions"
+          :key="extension.id"
+          class="relative"
+        >
           <img
             :src="extension.iconUrl"
             :alt="`${extension.name} icon`"
             referrerpolicy="no-referrer"
           />
-          <div>
+          <div class="relative">
             <a
               :href="getStoreUrl(extension)"
               target="_blank"
               :title="extension.name"
+              class="extension-name"
               >{{ extension.name }}</a
             >
             <p class="description" :title="extension.shortDescription">
               {{ extension.shortDescription }}
             </p>
-            <p class="user-count">
-              {{ extension.weeklyActiveUsers.toLocaleString() }} users
-            </p>
           </div>
+          <p class="user-count">
+            <span>{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
+            ><template v-if="extension.rating != null"
+              >,
+              <span>{{ extension.rating }} stars</span>
+            </template>
+          </p>
         </li>
       </ul>
       <p class="centered pr">
@@ -121,7 +138,8 @@ li {
   background-color: var(--vp-c-bg-soft);
   border-radius: 12px;
   flex: 1;
-  gap: 16px;
+  gap: 24px;
+  align-items: center;
 }
 
 .centered {
@@ -136,9 +154,10 @@ li .description {
 }
 li .user-count {
   opacity: 70%;
-  text-align: right;
-  width: 100%;
   font-size: small;
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
 }
 
 li a {
@@ -157,8 +176,6 @@ li a:hover {
 
 li div {
   flex: 1;
-  display: flex;
-  flex-direction: column;
 }
 
 li .description {
@@ -167,10 +184,18 @@ li .description {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  flex-grow: 1;
+  margin-bottom: 16px;
+}
+
+li .extension-name {
+  font-size: large;
 }
 
 .pr {
   opacity: 70%;
 }
+
+.relative {
+  position: relative;
+}
 </style>

docs/.vitepress/composables/useListExtensionDetails.ts

@@ -7,6 +7,7 @@ export interface ChromeExtension {
   weeklyActiveUsers: number;
   shortDescription: string;
   storeUrl: string;
+  rating: number | undefined;
 }
 
 const operationName = 'WxtDocsUsedBy';
@@ -18,6 +19,7 @@ const query = `query ${operationName}($ids:[String!]!) {
     weeklyActiveUsers
     shortDescription
     storeUrl
+    rating
   }
 }`;
 

docs/.vitepress/config.ts

@@ -71,6 +71,7 @@ export default defineConfig({
     nav: [
       { text: 'Guide', link: '/guide/installation.md' },
       { text: 'Entrypoints', link: '/entrypoints/background.md' },
+      { text: 'Examples', link: '/examples.md' },
       { text: 'API', link: '/api/cli.md' },
     ],
 
@@ -89,6 +90,7 @@ export default defineConfig({
             { text: 'Auto-imports', link: '/guide/auto-imports.md' },
             { text: 'Manifest.json', link: '/guide/manifest.md' },
             { text: 'Extension APIs', link: '/guide/extension-apis.md' },
+            { text: 'Storage', link: '/guide/storage.md' },
             { text: 'Remote Code', link: '/guide/remote-code.md' },
             { text: 'Development', link: '/guide/development.md' },
             { text: 'Testing', link: '/guide/testing.md' },

docs/entrypoints/content-scripts.md

@@ -293,7 +293,7 @@ Because the overlay UI type results in a 0px by 0px container being added to the
 
 > TODO: Add visualization of the different alignments.
 
-## UI
+## IFrame
 
 WXT provides a utility function, `createContentScriptIframe` to simplify mounting a UI from a content script. It creates an iframe to an unlisted HTML page. Unlike `createContentScriptUi`, this API support HMR.
 

docs/examples.md

@@ -0,0 +1,27 @@
+# Examples
+
+Simple walkthroughs to accomplish common tasks or patterns with WXT.
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+const examples = ref()
+onMounted(async () => {
+    const res = await fetch("https://raw.githubusercontent.com/wxt-dev/wxt-examples/main/examples.json");
+    examples.value = await res.json();
+})
+
+</script>
+
+<ul>
+    <li v-if="examples == null">
+        Loading...
+    </li>
+    <template v-else>
+        <li v-for="example of examples">
+        <a :href="example.url" target="_blank">{{ example.name }}</a>
+        </li>
+    </template>
+</ul>
+
+> Full code available at [`wxt-dev/wxt-examples`](https://github.com/wxt-dev/wxt-examples)

docs/guide/compare.md

@@ -27,9 +27,9 @@ Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework),
 | Reload Content Scripts on Change                     |             ✅              |       🟡 Reloads entire extension        |
 | Reload Background on Change                          | 🟡 Reloads entire extension |       🟡 Reloads entire extension        |
 | <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |
-| Storage                                              |             ❌              |                    ✅                    |
-| Messaging                                            |             ❌              |                    ✅                    |
-| Content Script UI                                    |             ❌              |                    ✅                    |
+| Storage                                              |             ✅              |                    ✅                    |
+| Messaging                                            |       🟡 Coming soon        |                    ✅                    |
+| Content Script UI                                    |             ✅              |                    ✅                    |
 
 ## Dev Mode
 

docs/guide/manifest.md

@@ -2,7 +2,7 @@
 
 The manifest.json is generated at build-time based on files in your `entrypoints` directory and your `wxt.config.ts`.
 
-## Confiuration
+## Configuration
 
 While entrypoints are generated and added to the manifest at build-time, you can customize or add to your `manifest.json` in the config file.
 

docs/guide/storage.md

@@ -0,0 +1,36 @@
+# Storage API
+
+WXT's storage API is powered by `unstorage`. See [their docs](https://unstorage.unjs.io/usage#usage-1) for more details.
+
+## Overview
+
+:::code-group
+
+```ts [native]
+const { installDate } = await browser.storage.local.get('installDate');
+await browser.storage.local.set({ key: 'value' });
+```
+
+```ts [wxt/browser]
+const installDate = await storage.get('local:installDate');
+await storage.setItem('key', 'value');
+```
+
+:::
+
+Use the `"local:"`, `"session:"`, `"sync:"`, and `"managed:"` prefixes to specify which storage area to use.
+
+## Customization
+
+WXT also provides a driver for `unstorage`. To customize the `storage` object's setup, like removing the prefixes and using a single storage area, you can create your own storage:
+
+```ts
+// storage.ts
+export default createStorage({
+  driver: webExtensionDriver({ storageArea: 'local' }),
+});
+```
+
+:::note
+`wxt/browser` re-exports all of `unstorage`, which is where `createStorage` comes from.
+:::

docs/index.md

@@ -76,8 +76,9 @@ features:
     <p>
       WXT's simplifies the chrome extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
     </p>
-    <div style="margin: auto; width: 100%; max-width: 700px; text-align: center">
-      <img src="./assets/cli-output.png" alt="Screenshot of WXT's build output" />
+    <div style="margin: auto; width: 100%; max-width: 900px; text-align: center">
+      <video src="https://github.com/wxt-dev/wxt/assets/10101283/b32e6766-ec11-45a4-9677-226ee4718e1c" controls></video>
+      <br />
       <small>
         And who doesn't appreciate a beautiful CLI?
       </small>

docs/typedoc.json

@@ -4,6 +4,7 @@
     "../src/client",
     "../src/browser.ts",
     "../src/sandbox",
+    "../src/storage.ts",
     "../src/testing"
   ],
   "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],

e2e/tests/auto-imports.test.ts

@@ -18,13 +18,24 @@ describe('Auto Imports', () => {
           declare global {
             const ContentScriptContext: typeof import('wxt/client')['ContentScriptContext']
             const browser: typeof import('wxt/browser')['browser']
+            const builtinDrivers: typeof import('wxt/storage')['builtinDrivers']
             const createContentScriptIframe: typeof import('wxt/client')['createContentScriptIframe']
             const createContentScriptUi: typeof import('wxt/client')['createContentScriptUi']
+            const createStorage: typeof import('wxt/storage')['createStorage']
             const defineBackground: typeof import('wxt/client')['defineBackground']
             const defineConfig: typeof import('wxt')['defineConfig']
             const defineContentScript: typeof import('wxt/client')['defineContentScript']
+            const defineDriver: typeof import('wxt/storage')['defineDriver']
             const defineUnlistedScript: typeof import('wxt/sandbox')['defineUnlistedScript']
             const fakeBrowser: typeof import('wxt/testing')['fakeBrowser']
+            const joinKeys: typeof import('wxt/storage')['joinKeys']
+            const normalizeBaseKey: typeof import('wxt/storage')['normalizeBaseKey']
+            const normalizeKey: typeof import('wxt/storage')['normalizeKey']
+            const prefixStorage: typeof import('wxt/storage')['prefixStorage']
+            const restoreSnapshot: typeof import('wxt/storage')['restoreSnapshot']
+            const snapshot: typeof import('wxt/storage')['snapshot']
+            const storage: typeof import('wxt/storage')['storage']
+            const webExtensionDriver: typeof import('wxt/storage')['webExtensionDriver']
           }
           "
         `);

e2e/tests/manifest-content.test.ts

@@ -104,26 +104,64 @@ describe('Manifest Content', () => {
       })
     `;
 
-    it('should include a background script for mv2', async () => {
+    it.each(['chrome', 'safari'])(
+      'should include scripts and persistent for %s mv2',
+      async (browser) => {
+        const project = new TestProject();
+        project.addFile('entrypoints/background.ts', backgroundContent);
+
+        await project.build({ browser, manifestVersion: 2 });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv2/manifest.json`,
+        );
+
+        expect(manifest.background).toEqual({
+          persistent: true,
+          scripts: ['background.js'],
+        });
+      },
+    );
+
+    it.each(['chrome', 'safari'])(
+      'should include a service worker and type for %s mv3',
+      async (browser) => {
+        const project = new TestProject();
+        project.addFile('entrypoints/background.ts', backgroundContent);
+
+        await project.build({ browser, manifestVersion: 3 });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv3/manifest.json`,
+        );
+
+        expect(manifest.background).toEqual({
+          type: 'module',
+          service_worker: 'background.js',
+        });
+      },
+    );
+
+    it('should include a background script and type for firefox mv3', async () => {
       const project = new TestProject();
       project.addFile('entrypoints/background.ts', backgroundContent);
 
-      await project.build();
-      const manifest = await project.getOutputManifest();
+      await project.build({ browser: 'firefox', manifestVersion: 3 });
+      const manifest = await project.getOutputManifest(
+        '.output/firefox-mv3/manifest.json',
+      );
 
       expect(manifest.background).toEqual({
         type: 'module',
-        service_worker: 'background.js',
+        scripts: ['background.js'],
       });
     });
 
-    it('should include a options_ui and browser_style for firefox', async () => {
+    it('should include a background script and persistent for firefox mv2', async () => {
       const project = new TestProject();
       project.addFile('entrypoints/background.ts', backgroundContent);
 
-      await project.build({ manifestVersion: 2 });
+      await project.build({ browser: 'firefox', manifestVersion: 2 });
       const manifest = await project.getOutputManifest(
-        '.output/chrome-mv2/manifest.json',
+        '.output/firefox-mv2/manifest.json',
       );
 
       expect(manifest.background).toEqual({
@@ -137,22 +175,22 @@ describe('Manifest Content', () => {
     it('should auto-discover icons with the correct name', async () => {
       const project = new TestProject();
       project.addFile('public/icon-16.png');
-      project.addFile('public/icon/32.jpeg');
-      project.addFile('public/icon@48w.jpg');
-      project.addFile('public/icon-64x64.gif');
-      project.addFile('public/icon@96.bmp');
-      project.addFile('public/icon/128x128.ico');
+      project.addFile('public/icon/32.png');
+      project.addFile('public/icon@48w.png');
+      project.addFile('public/icon-64x64.png');
+      project.addFile('public/icon@96.png');
+      project.addFile('public/icons/128x128.png');
 
       await project.build();
       const manifest = await project.getOutputManifest();
 
       expect(manifest.icons).toEqual({
         '16': 'icon-16.png',
-        '32': 'icon/32.jpeg',
-        '48': 'icon@48w.jpg',
-        '64': 'icon-64x64.gif',
-        '96': 'icon@96.bmp',
-        '128': 'icon/128x128.ico',
+        '32': 'icon/32.png',
+        '48': 'icon@48w.png',
+        '64': 'icon-64x64.png',
+        '96': 'icon@96.png',
+        '128': 'icons/128x128.png',
       });
     });
 
@@ -320,7 +358,7 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/content/index.ts',
         `import "./style.css";
-        
+
         export default defineContentScript({
           matches: ["https://*.google.com/*"],
 
@@ -346,7 +384,7 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/content/index.ts',
         `import "./style.css";
-        
+
         export default defineContentScript({
           matches: ["https://*.google.com/*"],
           cssInjectionMode: "manifest",
@@ -373,7 +411,7 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/content/index.ts',
         `import "./style.css";
-        
+
         export default defineContentScript({
           matches: ["https://*.google.com/*"],
           cssInjectionMode: "manual",
@@ -400,7 +438,7 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/content/index.ts',
         `import "./style.css";
-        
+
         export default defineContentScript({
           matches: ["https://*.google.com/*"],
           cssInjectionMode: "ui",
@@ -429,7 +467,7 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/content/index.ts',
         `import "./style.css";
-        
+
         export default defineContentScript({
           matches: ["https://*.google.com/*"],
           cssInjectionMode: "ui",
@@ -459,7 +497,7 @@ describe('Manifest Content', () => {
     project.addFile(
       'entrypoints/content/index.ts',
       `import "./style.css";
-      
+
       export default defineContentScript({
         matches: ["https://*.google.com/*"],
         cssInjectionMode: "ui",
@@ -489,7 +527,7 @@ describe('Manifest Content', () => {
     project.addFile(
       'wxt.config.ts',
       `import { defineConfig } from 'wxt';
-      
+
       export default defineConfig({
         transformManifest(manifest) {
           manifest.author = "Custom Author"

e2e/tests/typescript-project.test.ts

@@ -120,7 +120,7 @@ describe('TypeScript Project', () => {
           /**
            * The extension or app ID; you might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.
       Note: You can't use this message in a manifest file.
-           * 
+           *
            * \\"<browser.runtime.id>\\"
            */
           getMessage(
@@ -130,7 +130,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * 
-           * 
+           *
            * \\"<browser.i18n.getUiLocale()>\\"
            */
           getMessage(
@@ -140,7 +140,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * The text direction for the current locale, either \\"ltr\\" for left-to-right languages such as English or \\"rtl\\" for right-to-left languages such as Japanese.
-           * 
+           *
            * \\"<ltr|rtl>\\"
            */
           getMessage(
@@ -150,7 +150,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * If the @@bidi_dir is \\"ltr\\", then this is \\"rtl\\"; otherwise, it's \\"ltr\\".
-           * 
+           *
            * \\"<rtl|ltr>\\"
            */
           getMessage(
@@ -160,7 +160,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * If the @@bidi_dir is \\"ltr\\", then this is \\"left\\"; otherwise, it's \\"right\\".
-           * 
+           *
            * \\"<left|right>\\"
            */
           getMessage(
@@ -170,7 +170,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * If the @@bidi_dir is \\"ltr\\", then this is \\"right\\"; otherwise, it's \\"left\\".
-           * 
+           *
            * \\"<right|left>\\"
            */
           getMessage(
@@ -180,7 +180,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * Ask for the user's name
-           * 
+           *
            * \\"What's your name?\\"
            */
           getMessage(
@@ -190,7 +190,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * Greet the user
-           * 
+           *
            * \\"Hello, $USER$\\"
            */
           getMessage(
@@ -200,7 +200,7 @@ describe('TypeScript Project', () => {
           ): string;
           /**
            * Say goodbye to the user
-           * 
+           *
            * \\"Goodbye, $USER$. Come back to $OUR_SITE$ soon!\\"
            */
           getMessage(
@@ -252,7 +252,6 @@ describe('TypeScript Project', () => {
           \\"forceConsistentCasingInFileNames\\": true,
           \\"resolveJsonModule\\": true,
           \\"strict\\": true,
-          \\"lib\\": [\\"DOM\\", \\"WebWorker\\"],
           \\"skipLibCheck\\": true,
           \\"paths\\": {
             \\"@\\": [\\"..\\"],
@@ -296,7 +295,6 @@ describe('TypeScript Project', () => {
           \\"forceConsistentCasingInFileNames\\": true,
           \\"resolveJsonModule\\": true,
           \\"strict\\": true,
-          \\"lib\\": [\\"DOM\\", \\"WebWorker\\"],
           \\"skipLibCheck\\": true,
           \\"paths\\": {
             \\"@\\": [\\"../src\\"],
@@ -317,4 +315,53 @@ describe('TypeScript Project', () => {
       }"
     `);
   });
+
+  it('should add additional path aliases listed in the alias config, preventing defaults from being overridden', async () => {
+    const project = new TestProject();
+    project.setConfigFileConfig({
+      srcDir: 'src',
+      alias: {
+        example: 'example',
+        '@': 'ignored-path',
+      },
+    });
+
+    await project.build();
+
+    const output = await project.serializeFile('.wxt/tsconfig.json');
+    expect(output).toMatchInlineSnapshot(`
+      ".wxt/tsconfig.json
+      ----------------------------------------
+      {
+        \\"compilerOptions\\": {
+          \\"target\\": \\"ESNext\\",
+          \\"module\\": \\"ESNext\\",
+          \\"moduleResolution\\": \\"Bundler\\",
+          \\"noEmit\\": true,
+          \\"esModuleInterop\\": true,
+          \\"forceConsistentCasingInFileNames\\": true,
+          \\"resolveJsonModule\\": true,
+          \\"strict\\": true,
+          \\"skipLibCheck\\": true,
+          \\"paths\\": {
+            \\"example\\": [\\"../example\\"],
+            \\"example/*\\": [\\"../example/*\\"],
+            \\"@\\": [\\"../src\\"],
+            \\"@/*\\": [\\"../src/*\\"],
+            \\"~\\": [\\"../src\\"],
+            \\"~/*\\": [\\"../src/*\\"],
+            \\"@@\\": [\\"..\\"],
+            \\"@@/*\\": [\\"../*\\"],
+            \\"~~\\": [\\"..\\"],
+            \\"~~/*\\": [\\"../*\\"]
+          }
+        },
+        \\"include\\": [
+          \\"../**/*\\",
+          \\"./wxt.d.ts\\"
+        ],
+        \\"exclude\\": [\\"../.output\\"]
+      }"
+    `);
+  });
 });

e2e/tests/user-config.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { TestProject } from '../utils';
+import { InlineConfig } from '~/types';
 
 describe('User Config', () => {
   // Root directory is tested with all tests.
@@ -85,4 +86,24 @@ describe('User Config', () => {
       {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"example_customization\\":[\\"production\\",\\"chrome\\",\\"3\\",\\"build\\"]}"
     `);
   });
+
+  it('should exclude the polyfill when the experimental setting is set to false', async () => {
+    const buildBackground = async (config?: InlineConfig) => {
+      const background = `export default defineBackground(() => console.log(browser.runtime.id));`;
+      const projectWithPolyfill = new TestProject();
+      projectWithPolyfill.addFile('entrypoints/background.ts', background);
+      await projectWithPolyfill.build(config);
+      return await projectWithPolyfill.serializeFile(
+        '.output/chrome-mv3/background.js',
+      );
+    };
+
+    const withPolyfill = await buildBackground();
+    const withoutPolyfill = await buildBackground({
+      experimental: {
+        includeBrowserPolyfill: false,
+      },
+    });
+    expect(withoutPolyfill).not.toBe(withPolyfill);
+  });
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.10.3",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -56,6 +56,11 @@
       "require": "./dist/testing.cjs",
       "import": "./dist/testing.js",
       "types": "./dist/testing.d.ts"
+    },
+    "./storage": {
+      "require": "./dist/storage.cjs",
+      "import": "./dist/storage.js",
+      "types": "./dist/storage.d.ts"
     }
   },
   "scripts": {
@@ -76,13 +81,14 @@
   },
   "dependencies": {
     "@types/webextension-polyfill": "^0.10.5",
-    "@webext-core/fake-browser": "^1.2.2",
+    "@webext-core/fake-browser": "^1.3.1",
     "@webext-core/isolated-element": "^1.0.4",
     "@webext-core/match-patterns": "^1.0.2",
     "async-mutex": "^0.4.0",
     "c12": "^1.5.1",
     "cac": "^6.7.14",
     "consola": "^3.2.3",
+    "defu": "^6.1.3",
     "esbuild": "^0.19.5",
     "fast-glob": "^3.3.1",
     "filesize": "^10.0.8",
@@ -95,12 +101,14 @@
     "json5": "^2.2.3",
     "linkedom": "^0.16.1",
     "minimatch": "^9.0.3",
+    "normalize-path": "^3.0.0",
     "ora": "^7.0.1",
     "picocolors": "^1.0.0",
     "prompts": "^2.4.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "unimport": "^3.4.0",
-    "vite": "^4.5.0",
+    "unstorage": "^1.9.0",
+    "vite": "^4.0.0 || ^5.0.0-0",
     "web-ext-run": "^0.1.0",
     "webextension-polyfill": "^0.10.0",
     "zip-dir": "^2.0.0"
@@ -110,6 +118,7 @@
     "@types/fs-extra": "^11.0.3",
     "@types/lodash.merge": "^4.6.8",
     "@types/node": "^20.8.10",
+    "@types/normalize-path": "^3.0.2",
     "@types/prompts": "^2.4.7",
     "@vitest/coverage-v8": "^0.34.6",
     "execa": "^8.0.1",
@@ -122,18 +131,14 @@
     "simple-git-hooks": "^2.9.0",
     "tsup": "^7.2.0",
     "tsx": "^3.12.7",
-    "typedoc": "^0.25.3",
+    "typedoc": "^0.25.4",
     "typedoc-plugin-markdown": "4.0.0-next.23",
     "typedoc-vitepress-theme": "1.0.0-next.3",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.2",
     "vitepress": "1.0.0-rc.24",
     "vitest": "^0.34.6",
     "vitest-mock-extended": "^1.3.1",
-    "vue": "^3.3.7",
-    "webextension-polyfill": "^0.10.0"
-  },
-  "peerDependencies": {
-    "webextension-polyfill": ">=0.10.0"
+    "vue": "^3.3.7"
   },
   "packageManager": "pnpm@8.6.3",
   "simple-git-hooks": {

scripts/build.ts

@@ -57,6 +57,7 @@ const config: tsup.Options[] = [
     entry: {
       index: 'src/index.ts',
       testing: 'src/testing/index.ts',
+      storage: 'src/storage.ts',
     },
     format: ['cjs', 'esm'],
     clean: true,

src/__tests__/storage.test.ts

@@ -0,0 +1,70 @@
+import { fakeBrowser } from '@webext-core/fake-browser';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { browser } from '~/browser';
+import { storage } from '~/storage';
+
+describe('Storage Utils', () => {
+  beforeEach(() => {
+    fakeBrowser.reset();
+  });
+
+  describe.each(['local', 'sync', 'managed', 'session'] as const)(
+    'storage - %s',
+    (storageArea) => {
+      describe('getItem', () => {
+        it('should return the value from the correct storage area', async () => {
+          const expected = 123;
+          await fakeBrowser.storage[storageArea].set({ count: expected });
+          expect(await storage.getItem(`${storageArea}:count`)).toBe(expected);
+        });
+
+        it("should return null if the value doesn't exist", async () => {
+          expect(await storage.getItem(`${storageArea}:count`)).toBeNull();
+        });
+      });
+
+      describe('getItems', () => {
+        it('should return an array of values in the same order as the keys passed in', async () => {
+          const expected = [
+            { key: `${storageArea}:count`, value: 234 },
+            { key: `${storageArea}:installDate`, value: null },
+          ];
+          const keys = expected.map((item) => item.key);
+          await fakeBrowser.storage[storageArea].set({
+            count: expected[0].value,
+          });
+
+          const actual = await storage.getItems(keys);
+
+          expect(actual).toEqual(expected);
+        });
+      });
+
+      describe('setItem', () => {
+        it('should set the value in the correct storage area', () => {});
+
+        it.each([undefined, null])(
+          'should remove the item from storage when setting the value to %s',
+          async (value) => {
+            await fakeBrowser.storage[storageArea].set({ count: 345 });
+            await storage.setItem(`${storageArea}:count`, value as null);
+
+            // For some reason storage sets the value to "null" instead of deleting it. So using
+            // fakeBrowser during the expect fails. Using storage works. I've confirmed that this
+            // doesn't happen in a real extension environment.
+            expect(await storage.getItem(`${storageArea}:count`)).toBeNull();
+          },
+        );
+      });
+
+      describe('removeItem', () => {
+        it('should remove the key from storage', async () => {
+          await fakeBrowser.storage[storageArea].set({ count: 456 });
+          await storage.removeItem(`${storageArea}:count`);
+
+          expect(await browser.storage[storageArea].get()).toEqual({});
+        });
+      });
+    },
+  );
+});

src/core/initialize.ts

@@ -41,9 +41,13 @@ export async function initialize(options: {
         type: () => (options.packageManager == null ? 'select' : undefined),
         message: 'Package Manager',
         choices: [
-          { title: 'npm', value: 'npm' },
-          { title: 'pnpm', value: 'pnpm' },
-          { title: 'yarn', value: 'yarn' },
+          { title: pc.red('npm'), value: 'npm' },
+          { title: pc.yellow('pnpm'), value: 'pnpm' },
+          { title: pc.cyan('yarn'), value: 'yarn' },
+          {
+            title: `${pc.magenta('bun')}${pc.gray(' (experimental)')}`,
+            value: 'bun',
+          },
         ],
       },
     ],

src/core/runners/web-ext.ts

@@ -11,6 +11,12 @@ export function createWebExtRunner(): ExtensionRunner {
     async openBrowser(config) {
       config.logger.info('Opening browser...');
 
+      if (config.browser === 'firefox' && config.manifestVersion === 3) {
+        throw Error(
+          'Dev mode does not support Firefox MV3. For alternatives, see https://github.com/wxt-dev/wxt/issues/230#issuecomment-1806881653',
+        );
+      }
+
       // Use the plugin's logger instead of web-ext's built-in one.
       const webExtLogger = await import('web-ext-run/util/logger');
       webExtLogger.consoleStream.write = ({ level, msg, name }) => {

src/core/utils/__tests__/paths.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { normalizePath } from '../paths';
+
+describe('Path Utils', () => {
+  describe('normalizePath', () => {
+    it.each([
+      // Relative paths
+      ['../test.sh', '../test.sh'],
+      ['..\\test.sh', '../test.sh'],
+      ['test.png', 'test.png'],
+      // Absolute paths
+      ['C:\\\\path\\to\\file', 'C:/path/to/file'],
+      ['/path/to/file', '/path/to/file'],
+      // Strip trailing slash
+      ['C:\\\\path\\to\\folder\\', 'C:/path/to/folder'],
+      ['/path/to/folder/', '/path/to/folder'],
+      // Dedupe slashes
+      ['path\\\\\\file', 'path/file'],
+      ['path//file', 'path/file'],
+    ])('should normalize "%s" to "%s"', (input, expected) => {
+      expect(normalizePath(input)).toBe(expected);
+    });
+  });
+});

src/core/utils/building/build-entrypoints.ts

@@ -71,6 +71,7 @@ async function buildSingleEntrypoint(
   }
 
   const libMode: vite.UserConfig = {
+    mode: config.mode,
     plugins,
     build: {
       lib: {
@@ -128,6 +129,7 @@ async function buildMultipleEntrypoints(
   config: InternalConfig,
 ): Promise<BuildStepOutput> {
   const multiPage: vite.UserConfig = {
+    mode: config.mode,
     plugins: [wxtPlugins.multipageMove(entrypoints, config)],
     build: {
       rollupOptions: {

src/core/utils/building/generate-wxt-dir.ts

@@ -135,7 +135,7 @@ declare module "wxt/browser" {
   const overrides = messages.map((message) => {
     return `    /**
      * ${message.description ?? 'No message description.'}
-     * 
+     *
      * "${message.message}"
      */
     getMessage(
@@ -195,8 +195,17 @@ async function writeTsConfigFile(
   config: InternalConfig,
 ) {
   const dir = config.wxtDir;
-  const rootPath = normalizePath(relative(dir, config.root));
-  const srcPath = normalizePath(relative(dir, config.srcDir));
+  const getTsconfigPath = (path: string) => normalizePath(relative(dir, path));
+  const paths = Object.entries(config.alias)
+    .flatMap(([alias, absolutePath]) => {
+      const aliasPath = getTsconfigPath(absolutePath);
+      return [
+        `      "${alias}": ["${aliasPath}"]`,
+        `      "${alias}/*": ["${aliasPath}/*"]`,
+      ];
+    })
+    .join(',\n');
+
   await writeFileIfDifferent(
     resolve(dir, 'tsconfig.json'),
     `{
@@ -209,24 +218,16 @@ async function writeTsConfigFile(
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "strict": true,
-    "lib": ["DOM", "WebWorker"],
     "skipLibCheck": true,
     "paths": {
-      "@": ["${srcPath}"],
-      "@/*": ["${srcPath}/*"],
-      "~": ["${srcPath}"],
-      "~/*": ["${srcPath}/*"],
-      "@@": ["${rootPath}"],
-      "@@/*": ["${rootPath}/*"],
-      "~~": ["${rootPath}"],
-      "~~/*": ["${rootPath}/*"]
+${paths}
     }
   },
   "include": [
-    "${normalizePath(relative(dir, config.root))}/**/*",
-    "./${normalizePath(relative(dir, mainReference))}"
+    "${getTsconfigPath(config.root)}/**/*",
+    "./${getTsconfigPath(mainReference)}"
   ],
-  "exclude": ["${normalizePath(relative(dir, config.outBaseDir))}"]
+  "exclude": ["${getTsconfigPath(config.outBaseDir)}"]
 }`,
   );
 }

src/core/utils/building/get-internal-config.ts

@@ -14,6 +14,7 @@ import * as vite from 'vite';
 import { createFsCache } from '~/core/utils/cache';
 import consola, { LogLevels } from 'consola';
 import * as plugins from '~/core/vite-plugins';
+import defu from 'defu';
 
 /**
  * Given an inline config, discover the config file if necessary, merge the results, resolve any
@@ -80,6 +81,16 @@ export async function getInternalConfig(
     overrides: inlineConfig.runner,
     defaults: userConfig.runner,
   });
+  // Make sure alias are absolute
+  const alias = Object.fromEntries(
+    Object.entries({
+      ...mergedConfig.alias,
+      '@': srcDir,
+      '~': srcDir,
+      '@@': root,
+      '~~': root,
+    }).map(([key, value]) => [key, path.resolve(root, value)]),
+  );
 
   const finalConfig: InternalConfig = {
     browser,
@@ -112,6 +123,11 @@ export async function getInternalConfig(
       template: mergedConfig.analysis?.template ?? 'treemap',
     },
     userConfigMetadata: userConfigMetadata ?? {},
+    alias,
+    experimental: {
+      includeBrowserPolyfill:
+        mergedConfig.experimental?.includeBrowserPolyfill ?? true,
+    },
   };
 
   finalConfig.vite = (env) =>
@@ -157,13 +173,13 @@ function mergeInlineConfig(
     const inline = await inlineConfig.vite?.(env);
     return vite.mergeConfig(user ?? {}, inline ?? {});
   };
-  const runner: InlineConfig['runner'] = vite.mergeConfig(
-    userConfig.runner ?? {},
+  const runner: InlineConfig['runner'] = defu(
     inlineConfig.runner ?? {},
+    userConfig.runner ?? {},
   );
-  const zip: InlineConfig['zip'] = vite.mergeConfig(
-    userConfig.zip ?? {},
+  const zip: InlineConfig['zip'] = defu(
     inlineConfig.zip ?? {},
+    userConfig.zip ?? {},
   );
 
   return {
@@ -187,6 +203,14 @@ function mergeInlineConfig(
       template:
         inlineConfig.analysis?.template ?? userConfig.analysis?.template,
     },
+    alias: {
+      ...userConfig.alias,
+      ...inlineConfig.alias,
+    },
+    experimental: {
+      ...userConfig.experimental,
+      ...inlineConfig.experimental,
+    },
   };
 }
 
@@ -252,5 +276,7 @@ async function resolveInternalViteConfig(
   }
   internalVite.plugins.push(plugins.globals(finalConfig));
 
+  internalVite.plugins.push(plugins.excludeBrowserPolyfill(finalConfig));
+
   return internalVite;
 }

src/core/utils/building/import-entrypoint.ts

@@ -55,6 +55,9 @@ export async function importEntrypointFile<T>(
         'node_modules/wxt/dist/virtual/mock-browser.js',
       ),
     },
+    // Continue using node to load TS files even if `bun run --bun` is detected. Jiti does not
+    // respect the custom transform function when using it's native bun option.
+    experimentalBun: false,
     // List of extensions to transform with esbuild
     extensions: ['.ts', '.cts', '.mts', '.tsx', '.js', '.cjs', '.mjs', '.jsx'],
     transform(opts) {

src/core/utils/manifest.ts

@@ -23,7 +23,7 @@ import { getPackageJson } from './package';
 import { normalizePath } from './paths';
 import { writeFileIfDifferent } from './fs';
 import { produce } from 'immer';
-import * as vite from 'vite';
+import defu from 'defu';
 
 /**
  * Writes the manifest to the output directory and the build output.
@@ -78,9 +78,9 @@ export async function generateMainfest(
   };
   const userManifest = config.manifest;
 
-  const manifest = vite.mergeConfig(
-    baseManifest,
+  const manifest = defu(
     userManifest,
+    baseManifest,
   ) as Manifest.WebExtensionManifest;
 
   addEntrypoints(manifest, entrypoints, buildOutput, config);
@@ -154,7 +154,12 @@ function addEntrypoints(
 
   if (background) {
     const script = getEntrypointBundlePath(background, config.outDir, '.js');
-    if (manifest.manifest_version === 3) {
+    if (config.browser === 'firefox' && config.manifestVersion === 3) {
+      manifest.background = {
+        type: background.options.type,
+        scripts: [script],
+      };
+    } else if (config.manifestVersion === 3) {
       manifest.background = {
         type: background.options.type,
         service_worker: script,
@@ -360,13 +365,13 @@ function discoverIcons(
   // prettier-ignore
   // #region snippet
   const iconRegex = [
-    /^icon-([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,             // icon-16.png
-    /^icon-([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/,      // icon-16x16.png
-    /^icon@([0-9]+)w\.(png|bmp|jpeg|jpg|ico|gif)$/,            // icon@16w.png
-    /^icon@([0-9]+)h\.(png|bmp|jpeg|jpg|ico|gif)$/,            // icon@16h.png
-    /^icon@([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,             // icon@16.png
-    /^icon[\/\\]([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,        // icon/16.png
-    /^icon[\/\\]([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/, // icon/16x16.png
+    /^icon-([0-9]+)\.png$/,                 // icon-16.png
+    /^icon-([0-9]+)x[0-9]+\.png$/,          // icon-16x16.png
+    /^icon@([0-9]+)w\.png$/,                // icon@16w.png
+    /^icon@([0-9]+)h\.png$/,                // icon@16h.png
+    /^icon@([0-9]+)\.png$/,                 // icon@16.png
+    /^icons?[\/\\]([0-9]+)\.png$/,          // icon/16.png | icons/16.png
+    /^icons?[\/\\]([0-9]+)x[0-9]+\.png$/,   // icon/16x16.png | icons/16x16.png
   ];
   // #endregion snippet
 

src/core/utils/paths.ts

@@ -1,19 +1,19 @@
-import nodePath from 'node:path';
-import * as vite from 'vite';
+import systemPath from 'node:path';
+import normalize from 'normalize-path';
 
 /**
  * Converts system paths to normalized bundler path. On windows and unix, this returns paths with /
  * instead of \.
  */
 export function normalizePath(path: string): string {
-  return vite.normalizePath(path);
+  return normalize(path);
 }
 
 /**
  * Given a normalized path, convert it to the system path style. On Windows, switch to \, otherwise use /.
  */
 export function unnormalizePath(path: string): string {
-  return nodePath.normalize(path);
+  return systemPath.normalize(path);
 }
 
 export const CSS_EXTENSIONS = ['css', 'scss', 'sass', 'less', 'styl', 'stylus'];

src/core/utils/testing/fake-objects.ts

@@ -244,5 +244,9 @@ export const fakeInternalConfig = fakeObjectCreator<InternalConfig>(() => {
     },
     transformManifest: () => {},
     userConfigMetadata: {},
+    alias: {},
+    experimental: {
+      includeBrowserPolyfill: true,
+    },
   };
 });

src/core/utils/unimport.ts

@@ -17,6 +17,7 @@ export function getUnimportOptions(
       { package: 'wxt/client' },
       { package: 'wxt/browser' },
       { package: 'wxt/sandbox' },
+      { package: 'wxt/storage' },
     ],
     warn: config.logger.warn,
     dirs: ['components', 'composables', 'hooks', 'utils'],

src/core/vite-plugins/excludeBrowserPolyfill.ts

@@ -0,0 +1,33 @@
+import { InternalConfig } from '~/types';
+import * as vite from 'vite';
+
+/**
+ * Apply the experimental config for disabling the polyfill. It works by aliasing the
+ * `webextension-polyfill` module to a virtual module and exporting the `chrome` global from the
+ * virtual module.
+ */
+export function excludeBrowserPolyfill(config: InternalConfig): vite.Plugin {
+  const virtualId = 'virtual:wxt-webextension-polyfill-disabled';
+
+  return {
+    name: 'wxt:exclude-browser-polyfill',
+    config() {
+      // Only apply the config if we're disabling the polyfill
+      if (config.experimental.includeBrowserPolyfill) return;
+
+      return {
+        resolve: {
+          alias: {
+            'webextension-polyfill': virtualId,
+          },
+        },
+      };
+    },
+    load(id) {
+      if (id === virtualId) {
+        // Use chrome instead of the polyfill when disabled.
+        return 'export default chrome';
+      }
+    },
+  };
+}

src/core/vite-plugins/index.ts

@@ -11,3 +11,4 @@ export * from './bundleAnalysis';
 export * from './globals';
 export * from './webextensionPolyfillAlias';
 export * from './webextensionPolyfillInlineDeps';
+export * from './excludeBrowserPolyfill';

src/core/vite-plugins/tsconfigPaths.ts

@@ -7,12 +7,7 @@ export function tsconfigPaths(config: InternalConfig): vite.Plugin {
     async config() {
       return {
         resolve: {
-          alias: {
-            '@@': config.root,
-            '~~': config.root,
-            '@': config.srcDir,
-            '~': config.srcDir,
-          },
+          alias: config.alias,
         },
       };
     },

src/core/vite-plugins/unimport.ts

@@ -4,14 +4,14 @@ import { getUnimportOptions } from '~/core/utils/unimport';
 import * as vite from 'vite';
 import { extname } from 'path';
 
-const ENABLED_EXTENSIONS: Record<string, boolean | undefined> = {
-  '.js': true,
-  '.jsx': true,
-  '.ts': true,
-  '.tsx': true,
-  '.vue': true,
-  '.svelte': true,
-};
+const ENABLED_EXTENSIONS = new Set([
+  '.js',
+  '.jsx',
+  '.ts',
+  '.tsx',
+  '.vue',
+  '.svelte',
+]);
 
 /**
  * Inject any global imports defined by unimport
@@ -28,8 +28,13 @@ export function unimport(config: InternalConfig): vite.PluginOption {
       await unimport.scanImportsFromDir(undefined, { cwd: config.srcDir });
     },
     async transform(code, id) {
-      const ext = extname(id);
-      if (ENABLED_EXTENSIONS[ext]) return unimport.injectImports(code, id);
+      // Don't transform dependencies
+      if (id.includes('node_modules')) return;
+
+      // Don't transform non-js files
+      if (!ENABLED_EXTENSIONS.has(extname(id))) return;
+
+      return unimport.injectImports(code, id);
     },
   };
 }

src/storage.ts

@@ -0,0 +1,118 @@
+/**
+ * @module wxt/storage
+ */
+import {
+  Driver,
+  WatchCallback,
+  createStorage,
+  defineDriver,
+  Storage,
+} from 'unstorage';
+import browser, { Storage as BrowserStorage } from 'webextension-polyfill';
+
+export interface WebExtensionDriverOptions {
+  storageArea: 'sync' | 'local' | 'managed' | 'session';
+}
+
+export const webExtensionDriver: (opts: WebExtensionDriverOptions) => Driver =
+  defineDriver((opts) => {
+    const checkPermission = () => {
+      if (browser.storage == null)
+        throw Error(
+          "You must request the 'storage' permission to use webExtensionDriver",
+        );
+    };
+
+    const _storageListener: (
+      changes: BrowserStorage.StorageAreaSyncOnChangedChangesType,
+    ) => void = (changes) => {
+      Object.entries(changes).forEach(([key, { newValue }]) => {
+        _listeners.forEach((callback) => {
+          callback(newValue ? 'update' : 'remove', key);
+        });
+      });
+    };
+    const _listeners = new Set<WatchCallback>();
+
+    return {
+      name: 'web-extension:' + opts.storageArea,
+      async hasItem(key) {
+        checkPermission();
+        const res = await browser.storage[opts.storageArea].get(key);
+        return res[key] != null;
+      },
+      async getItem(key) {
+        checkPermission();
+        const res = await browser.storage[opts.storageArea].get(key);
+        return res[key] ?? null;
+      },
+      async getItems(items) {
+        checkPermission();
+        const res = await browser.storage[opts.storageArea].get(
+          items.map((item) => item.key),
+        );
+        return items.map((item) => ({
+          key: item.key,
+          value: res[item.key] ?? null,
+        }));
+      },
+      async setItem(key, value) {
+        checkPermission();
+        await browser.storage[opts.storageArea].set({ [key]: value ?? null });
+      },
+      async setItems(items) {
+        checkPermission();
+        const map = items.reduce<Record<string, any>>((map, item) => {
+          map[item.key] = item.value ?? null;
+          return map;
+        }, {});
+        await browser.storage[opts.storageArea].set(map);
+      },
+      async removeItem(key) {
+        checkPermission();
+        await browser.storage[opts.storageArea].remove(key);
+      },
+      async getKeys() {
+        checkPermission();
+        const all = await browser.storage[opts.storageArea].get();
+        return Object.keys(all);
+      },
+      async clear() {
+        checkPermission();
+        await browser.storage[opts.storageArea].clear();
+      },
+      watch(callback) {
+        checkPermission();
+        _listeners.add(callback);
+        if (_listeners.size === 1) {
+          browser.storage[opts.storageArea].onChanged.addListener(
+            _storageListener,
+          );
+        }
+
+        return () => {
+          _listeners.delete(callback);
+          if (_listeners.size === 0) {
+            browser.storage[opts.storageArea].onChanged.removeListener(
+              _storageListener,
+            );
+          }
+        };
+      },
+    };
+  });
+
+function createWebExtensionStorage() {
+  const storage = createStorage();
+  storage.mount('local', webExtensionDriver({ storageArea: 'local' }));
+  storage.mount('session', webExtensionDriver({ storageArea: 'session' }));
+  storage.mount('sync', webExtensionDriver({ storageArea: 'sync' }));
+  storage.mount('managed', webExtensionDriver({ storageArea: 'managed' }));
+  return storage;
+}
+
+export type StorageValue = null | string | number | boolean | object;
+
+export const storage: Storage<StorageValue> = createWebExtensionStorage();
+
+export * from 'unstorage';

src/types/external.ts

@@ -190,6 +190,47 @@ export interface InlineConfig {
      */
     template?: PluginVisualizerOptions['template'];
   };
+  /**
+   * Add additional paths to the `.wxt/tsconfig.json`. Use this instead of overwriting the `paths`
+   * in the root `tsconfig.json` if you want to add new paths.
+   *
+   * Passed into Vite's
+   * [`resolve.alias`](https://vitejs.dev/config/shared-options.html#resolve-alias) option and used
+   * to generate the `.wxt/tsconfig.json`.
+   *
+   * The key is the import alias and the value is either a relative path to the root directory or an absolute path.
+   *
+   * @example
+   * {
+   *   "testing": "src/utils/testing.ts"
+   * }
+   */
+  alias?: Record<string, string>;
+  /**
+   * Experimental settings - use with caution.
+   */
+  experimental?: {
+    /**
+     * Whether to use [`webextension-polyfill`](https://www.npmjs.com/package/webextension-polyfill)
+     * when importing `browser` from `wxt/browser`.
+     *
+     * When set to `false`, WXT will export the chrome global instead of the polyfill from
+     * `wxt/browser`.
+     *
+     * You should use `browser` to access the web extension APIs.
+     *
+     * @experimental This option will remain experimental until Manifest V2 is dead.
+     *
+     * @default true
+     * @example
+     * export default defineConfig({
+     *   experimental: {
+     *     includeBrowserPolyfill: false
+     *   }
+     * })
+     */
+    includeBrowserPolyfill?: boolean;
+  };
 }
 
 export interface WxtInlineViteConfig
@@ -286,7 +327,7 @@ export interface BaseEntrypoint {
    * - `named.sandbox.html` &rarr; `named`
    * - `named.sandbox/index.html` &rarr; `named`
    * - `sandbox.html` &rarr; `sandbox`
-   * - `sandbox.index.html` &rarr; `sandbox`
+   * - `sandbox/index.html` &rarr; `sandbox`
    * - `overlay.content.ts` &rarr; `overlay`
    * - `overlay.content/index.ts` &rarr; `overlay`
    *

src/types/internal.ts

@@ -49,6 +49,13 @@ export interface InternalConfig {
     template: NonNullable<PluginVisualizerOptions['template']>;
   };
   userConfigMetadata: Omit<ResolvedConfig<UserConfig>, 'config'>;
+  /**
+   * Import aliases to absolute paths.
+   */
+  alias: Record<string, string>;
+  experimental: {
+    includeBrowserPolyfill: boolean;
+  };
 }
 
 export interface FsCache {

templates/react/README.md

@@ -1,7 +1,3 @@
-# WXT + Vue 3
+# WXT + React
 
-This template should help get you started developing with Vue 3 in WXT.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+This template should help get you started developing with React in WXT.

templates/react/package.json

@@ -22,7 +22,7 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.3",
-    "typescript": "^5.1.6",
-    "wxt": "^0.8.0"
+    "typescript": "^5.3.2",
+    "wxt": "^0.10.0"
   }
 }

templates/solid/package.json

@@ -18,8 +18,8 @@
     "solid-js": "^1.7.8"
   },
   "devDependencies": {
-    "typescript": "^5.1.6",
+    "typescript": "^5.3.2",
     "vite-plugin-solid": "^2.7.0",
-    "wxt": "^0.8.0"
+    "wxt": "^0.10.0"
   }
 }

templates/svelte/README.md

@@ -1,4 +1,4 @@
-# Svelte + Vite
+# WXT + Svelte
 
 This template should help get you started developing with Svelte in WXT.
 

templates/svelte/package.json

@@ -19,7 +19,7 @@
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.6",
     "tslib": "^2.6.0",
-    "typescript": "^5.1.6",
-    "wxt": "^0.8.0"
+    "typescript": "^5.3.2",
+    "wxt": "^0.10.0"
   }
 }

templates/vanilla/package.json

@@ -15,7 +15,7 @@
     "postinstall": "wxt prepare"
   },
   "devDependencies": {
-    "typescript": "^5.1.6",
-    "wxt": "^0.8.0"
+    "typescript": "^5.3.2",
+    "wxt": "^0.10.0"
   }
 }

templates/vue/package.json

@@ -19,8 +19,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "typescript": "^5.1.6",
+    "typescript": "^5.3.2",
     "vue-tsc": "^1.8.4",
-    "wxt": "^0.8.0"
+    "wxt": "^0.10.0"
   }
 }