chore(release): v0.9.1

This closes https://github.com/wxt-dev/wxt/issues/215

.github/workflows/sync-releases.yml

@@ -0,0 +1,21 @@
+name: Sync Releases
+on:
+  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

CHANGELOG.md

@@ -1,5 +1,74 @@
 # Changelog
 
+## 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 ([](https://github.com/wxt-dev/wxt/commit/))
+
+### 🤖 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))
+-  ^5.0.0-0` <f1e8084>
+
+## 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 +129,7 @@
 
 ### ❤️ Contributors
 
-- Nenad Novaković
+- Nenad Novaković ([@dvlden](https://github.com/dvlden))
 
 ## v0.8.4
 
@@ -125,7 +194,7 @@
 
 ### ❤️ Contributors
 
-- 渣渣120 <WOSHIZHAZHA120@qq.com>
+- 渣渣120 [@WOSHIZHAZHA120](https://github.com/WOSHIZHAZHA120)
 
 ## v0.7.5
 

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">
@@ -38,6 +34,10 @@
 
 ![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

demo/wxt.config.ts

@@ -11,4 +11,7 @@ export default defineConfig({
       },
     ],
   },
+  alias: {
+    public: 'src/public',
+  },
 });

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' },
     ],
 

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                                              |       🟡 Coming soon        |                    ✅                    |
+| Messaging                                            |       🟡 Coming soon        |                    ✅                    |
+| Content Script UI                                    |             ✅              |                    ✅                    |
 
 ## Dev Mode
 

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>

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({

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\\"]
+      }"
+    `);
+  });
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.9.1",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -100,7 +100,7 @@
     "prompts": "^2.4.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "unimport": "^3.4.0",
-    "vite": "^4.5.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"
@@ -129,11 +129,7 @@
     "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": {

pnpm-lock.yaml

@@ -84,8 +84,8 @@ importers:
         specifier: ^3.4.0
         version: 3.4.0
       vite:
-        specifier: ^4.5.0
-        version: 4.5.0(@types/node@20.8.10)(sass@1.64.0)
+        specifier: ^4.0.0 || ^5.0.0-0
+        version: 4.5.0(@types/node@20.8.10)(sass@1.69.5)
       web-ext-run:
         specifier: ^0.1.0
         version: 0.1.0
@@ -161,7 +161,7 @@ importers:
         version: 1.0.0-rc.24(@types/node@20.8.10)(typescript@5.2.2)
       vitest:
         specifier: ^0.34.6
-        version: 0.34.6(happy-dom@12.10.3)(sass@1.64.0)
+        version: 0.34.6(happy-dom@12.10.3)(sass@1.69.5)
       vitest-mock-extended:
         specifier: ^1.3.1
         version: 1.3.1(typescript@5.2.2)(vitest@0.34.6)
@@ -179,7 +179,7 @@ importers:
         version: 18.2.0(react@18.2.0)
       vitest:
         specifier: ^0.34.6
-        version: 0.34.6(sass@1.69.5)
+        version: 0.34.6(happy-dom@12.10.3)(sass@1.69.5)
       webextension-polyfill:
         specifier: ^0.10.0
         version: 0.10.0
@@ -1072,7 +1072,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@20.8.10)(sass@1.64.0)
+      vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5)
       vue: 3.3.7(typescript@5.2.2)
     dev: true
 
@@ -1092,7 +1092,7 @@ packages:
       std-env: 3.3.3
       test-exclude: 6.0.0
       v8-to-istanbul: 9.1.0
-      vitest: 0.34.6(happy-dom@12.10.3)(sass@1.64.0)
+      vitest: 0.34.6(happy-dom@12.10.3)(sass@1.69.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1828,7 +1828,6 @@ packages:
 
   /css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-    dev: true
 
   /cssom@0.5.0:
     resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
@@ -2461,7 +2460,6 @@ packages:
       webidl-conversions: 7.0.0
       whatwg-encoding: 2.0.0
       whatwg-mimetype: 3.0.0
-    dev: true
 
   /has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
@@ -2569,7 +2567,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       safer-buffer: 2.1.2
-    dev: true
 
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
@@ -2588,9 +2585,6 @@ packages:
     resolution: {integrity: sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==}
     dev: false
 
-  /immutable@4.3.1:
-    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
-
   /immutable@4.3.4:
     resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
 
@@ -3895,16 +3889,6 @@ packages:
 
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    dev: true
-
-  /sass@1.64.0:
-    resolution: {integrity: sha512-m7YtAGmQta9uANIUJwXesAJMSncqH+3INc8kdVXs6eV6GUC8Qu2IYKQSN8PRLgiQfpca697G94klm2leYMxSHw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.1
-      source-map-js: 1.0.2
 
   /sass@1.69.5:
     resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
@@ -4588,28 +4572,6 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-node@0.34.6(@types/node@20.8.10)(sass@1.64.0):
-    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
-    engines: {node: '>=v14.18.0'}
-    hasBin: true
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.4
-      mlly: 1.4.2
-      pathe: 1.1.1
-      picocolors: 1.0.0
-      vite: 4.5.0(@types/node@20.8.10)(sass@1.64.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /vite-node@0.34.6(@types/node@20.8.10)(sass@1.69.5):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}
@@ -4630,43 +4592,6 @@ packages:
       - sugarss
       - supports-color
       - terser
-    dev: false
-
-  /vite@4.5.0(@types/node@20.8.10)(sass@1.64.0):
-    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 20.8.10
-      esbuild: 0.18.20
-      postcss: 8.4.31
-      rollup: 3.29.4
-      sass: 1.64.0
-    optionalDependencies:
-      fsevents: 2.3.3
 
   /vite@4.5.0(@types/node@20.8.10)(sass@1.69.5):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
@@ -4703,7 +4628,6 @@ packages:
       sass: 1.69.5
     optionalDependencies:
       fsevents: 2.3.3
-    dev: false
 
   /vitepress@1.0.0-rc.24(@types/node@20.8.10)(typescript@5.2.2):
     resolution: {integrity: sha512-RpnL8cnOGwiRlBbrYQUm9sYkJbtyOt/wYXk2diTcokY4yvks/5lq9LuSt+MURWB6ZqwpSNHvTmxgaSfLoG0/OA==}
@@ -4728,7 +4652,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.2.0
       shiki: 0.14.5
-      vite: 4.5.0(@types/node@20.8.10)(sass@1.64.0)
+      vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5)
       vue: 3.3.7(typescript@5.2.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4766,10 +4690,10 @@ packages:
     dependencies:
       ts-essentials: 9.3.2(typescript@5.2.2)
       typescript: 5.2.2
-      vitest: 0.34.6(happy-dom@12.10.3)(sass@1.64.0)
+      vitest: 0.34.6(happy-dom@12.10.3)(sass@1.69.5)
     dev: true
 
-  /vitest@0.34.6(happy-dom@12.10.3)(sass@1.64.0):
+  /vitest@0.34.6(happy-dom@12.10.3)(sass@1.69.5):
     resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -4822,71 +4746,6 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.0
       tinypool: 0.7.0
-      vite: 4.5.0(@types/node@20.8.10)(sass@1.64.0)
-      vite-node: 0.34.6(@types/node@20.8.10)(sass@1.64.0)
-      why-is-node-running: 2.2.2
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /vitest@0.34.6(sass@1.69.5):
-    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
-    engines: {node: '>=v14.18.0'}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
-      happy-dom: '*'
-      jsdom: '*'
-      playwright: '*'
-      safaridriver: '*'
-      webdriverio: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-      playwright:
-        optional: true
-      safaridriver:
-        optional: true
-      webdriverio:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.5
-      '@types/chai-subset': 1.3.3
-      '@types/node': 20.8.10
-      '@vitest/expect': 0.34.6
-      '@vitest/runner': 0.34.6
-      '@vitest/snapshot': 0.34.6
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
-      acorn: 8.11.2
-      acorn-walk: 8.2.0
-      cac: 6.7.14
-      chai: 4.3.10
-      debug: 4.3.4
-      local-pkg: 0.4.3
-      magic-string: 0.30.5
-      pathe: 1.1.1
-      picocolors: 1.0.0
-      std-env: 3.3.3
-      strip-literal: 1.3.0
-      tinybench: 2.5.0
-      tinypool: 0.7.0
       vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5)
       vite-node: 0.34.6(@types/node@20.8.10)(sass@1.69.5)
       why-is-node-running: 2.2.2
@@ -4898,7 +4757,6 @@ packages:
       - sugarss
       - supports-color
       - terser
-    dev: false
 
   /vscode-oniguruma@1.7.0:
     resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
@@ -4991,7 +4849,6 @@ packages:
   /webidl-conversions@7.0.0:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
-    dev: true
 
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
@@ -5007,12 +4864,10 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       iconv-lite: 0.6.3
-    dev: true
 
   /whatwg-mimetype@3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
-    dev: true
 
   /whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}

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/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

@@ -80,6 +80,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 +122,7 @@ export async function getInternalConfig(
       template: mergedConfig.analysis?.template ?? 'treemap',
     },
     userConfigMetadata: userConfigMetadata ?? {},
+    alias,
   };
 
   finalConfig.vite = (env) =>
@@ -187,6 +198,10 @@ function mergeInlineConfig(
       template:
         inlineConfig.analysis?.template ?? userConfig.analysis?.template,
     },
+    alias: {
+      ...userConfig.alias,
+      ...inlineConfig.alias,
+    },
   };
 }
 

src/core/utils/manifest.ts

@@ -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,

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

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

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/types/external.ts

@@ -190,6 +190,22 @@ 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>;
 }
 
 export interface WxtInlineViteConfig

src/types/internal.ts

@@ -49,6 +49,10 @@ export interface InternalConfig {
     template: NonNullable<PluginVisualizerOptions['template']>;
   };
   userConfigMetadata: Omit<ResolvedConfig<UserConfig>, 'config'>;
+  /**
+   * Import aliases to absolute paths.
+   */
+  alias: Record<string, string>;
 }
 
 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

@@ -23,6 +23,6 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.3",
     "typescript": "^5.1.6",
-    "wxt": "^0.8.0"
+    "wxt": "^0.9.0"
   }
 }

templates/solid/package.json

@@ -20,6 +20,6 @@
   "devDependencies": {
     "typescript": "^5.1.6",
     "vite-plugin-solid": "^2.7.0",
-    "wxt": "^0.8.0"
+    "wxt": "^0.9.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

@@ -20,6 +20,6 @@
     "svelte-check": "^3.4.6",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
-    "wxt": "^0.8.0"
+    "wxt": "^0.9.0"
   }
 }

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.1.6",
-    "wxt": "^0.8.0"
+    "wxt": "^0.9.0"
   }
 }

templates/vue/package.json

@@ -21,6 +21,6 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.1.6",
     "vue-tsc": "^1.8.4",
-    "wxt": "^0.8.0"
+    "wxt": "^0.9.0"
   }
 }