chore(release): v0.16.7

Co-authored-by: Aaron Klinker <aaronklinker1@gmail.com>

CHANGELOG.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## v0.16.7
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.6...v0.16.7)
+
+### 🚀 Enhancements
+
+- Generate ESLint globals file for auto-imports ([#450](https://github.com/wxt-dev/wxt/pull/450))
+
+### 🔥 Performance
+
+- Upgrade Vite to 5.1 ([#452](https://github.com/wxt-dev/wxt/pull/452))
+
+### 📖 Documentation
+
+- Add section about dev mode differences ([a0d1643](https://github.com/wxt-dev/wxt/commit/a0d1643))
+- Remove anchor from content script ui examples ([87a62a1](https://github.com/wxt-dev/wxt/commit/87a62a1))
+
+### 🏡 Chore
+
+- **e2e:** Use `wxt prepare` instead of `wxt build` when possible to speed up E2E tests ([#451](https://github.com/wxt-dev/wxt/pull/451))
+
+## v0.16.6
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.5...v0.16.6)
+
+### 🚀 Enhancements
+
+- Add option to customize the analysis artifacts output ([#431](https://github.com/wxt-dev/wxt/pull/431))
+
+### 🩹 Fixes
+
+- Use `insertBefore` on mounting content script UI ([ba85fdf](https://github.com/wxt-dev/wxt/commit/ba85fdf))
+
+### 💅 Refactors
+
+- Use `Element.prepend` on mounting UI ([295f860](https://github.com/wxt-dev/wxt/commit/295f860))
+
+### 📖 Documentation
+
+- Fix `createShadowRootUi` unmount calls ([946072f](https://github.com/wxt-dev/wxt/commit/946072f))
+
+### 🏡 Chore
+
+- Enable skipped test since it works now ([6b8dfdf](https://github.com/wxt-dev/wxt/commit/6b8dfdf))
+
+### ❤️ Contributors
+
+- Lionelhorn 
+- Okou
+
+## v0.16.5
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.4...v0.16.5)
+
+### 🩹 Fixes
+
+- Support node 20 when running `wxt submit` ([e835502](https://github.com/wxt-dev/wxt/commit/e835502))
+
+### 📖 Documentation
+
+- Remove "coming soon" from automated publishing feature ([2b374b9](https://github.com/wxt-dev/wxt/commit/2b374b9))
+
+## v0.16.4
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.3...v0.16.4)
+
+### 🚀 Enhancements
+
+- Automatically convert MV3 `web_accessible_resources` to MV2 ([#423](https://github.com/wxt-dev/wxt/pull/423))
+- Add option to customize the analysis output filename ([#426](https://github.com/wxt-dev/wxt/pull/426))
+
+### 🩹 Fixes
+
+- Don't use immer for `transformManifest` ([#424](https://github.com/wxt-dev/wxt/pull/424))
+- Exclude analysis files from the build summary ([#425](https://github.com/wxt-dev/wxt/pull/425))
+
+### 🏡 Chore
+
+- Fix fake path in test data generator ([d0f1c70](https://github.com/wxt-dev/wxt/commit/d0f1c70))
+
 ## v0.16.3
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.2...v0.16.3)
@@ -26,7 +106,7 @@
 
 ### ❤️ Contributors
 
-- Chen Hua <hcljsq@gmail.com>
+- Chen Hua ([@hcljsq](https://github.com/hcljsq))
 - Florian Metz ([@Timeraa](http://github.com/Timeraa))
 
 ## v0.16.2

README.md

@@ -55,14 +55,11 @@ Or see the [installation guide](https://wxt.dev/guide/installation.html) to get
 - 📂 File based entrypoints
 - 🚔 TypeScript
 - 🦾 Auto-imports
-- ⬇️ Download and bundle remote URL imports
+- 🤖 Automated publishing
 - 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
 - 🖍️ Quickly bootstrap a new project
 - 📏 Bundle analysis
-
-### Coming Soon
-
-- 🤖 Automated publishing
+- ⬇️ Download and bundle remote URL imports
 
 ## Contributors
 

demo/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vitest": "^1.1.0"
+    "vitest": "^1.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.34",

docs/guide/content-script-ui.md

@@ -26,7 +26,6 @@ export default defineContentScript({
   main(ctx) {
     const ui = createIntegratedUi(ctx, {
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Append children to the container
         const app = document.createElement('p');
@@ -52,7 +51,6 @@ export default defineContentScript({
   main(ctx) {
     const ui = createIntegratedUi(ctx, {
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Create the app and mount it to the UI container
         const app = createApp(App);
@@ -82,7 +80,6 @@ export default defineContentScript({
   main(ctx) {
     const ui = createIntegratedUi(ctx, {
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Create a root on the UI container and render a component
         const root = ReactDOM.createRoot(container);
@@ -111,7 +108,6 @@ export default defineContentScript({
   main(ctx) {
     const ui = createIntegratedUi(ctx, {
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Create the Svelte app inside the UI container
         const app = new App({
@@ -141,7 +137,6 @@ export default defineContentScript({
   main(ctx) {
     const ui = createIntegratedUi(ctx, {
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Render your app to the UI container
         const unmount = render(() => <div>...</div>, container);
@@ -192,7 +187,6 @@ export default defineContentScript({
     // 3. Define your UI
     const ui = await createShadowRootUi(ctx, {
       name: 'example-ui',
-      anchor: '#anchor',
       position: 'inline',
       onMount(container) {
         // Define how your UI will be mounted inside the container
@@ -223,7 +217,6 @@ export default defineContentScript({
     // 3. Define your UI
     const ui = await createShadowRootUi(ctx, {
       name: 'example-ui',
-      anchor: '#anchor',
       position: 'inline',
       onMount: (container) => {
         // Define how your UI will be mounted inside the container
@@ -233,7 +226,7 @@ export default defineContentScript({
       },
       onRemove: (app) => {
         // Unmount the app when the UI is removed
-        app.unmount();
+        app?.unmount();
       },
     });
 
@@ -259,7 +252,6 @@ export default defineContentScript({
     const ui = await createShadowRootUi(ctx, {
       name: 'example-ui',
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Create a root on the UI container and render a component
         const root = ReactDOM.createRoot(container);
@@ -268,7 +260,7 @@ export default defineContentScript({
       },
       onRemove: (root) => {
         // Unmount the root when the UI is removed
-        root.unmount();
+        root?.unmount();
       },
     });
 
@@ -293,7 +285,6 @@ export default defineContentScript({
     const ui = await createShadowRootUi(ctx, {
       name: 'example-ui',
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Create the Svelte app inside the UI container
         const app = new App({
@@ -303,7 +294,7 @@ export default defineContentScript({
       },
       onRemove: (app) => {
         // Destroy the app when the UI is removed
-        app.$destroy();
+        app?.$destroy();
       },
     });
 
@@ -328,14 +319,13 @@ export default defineContentScript({
     const ui = await createShadowRootUi(ctx, {
       name: 'example-ui',
       position: 'inline',
-      anchor: '#anchor',
       onMount: (container) => {
         // Render your app to the UI container
         const unmount = render(() => <div>...</div>, container);
       },
       onRemove: (unmount) => {
         // Unmount the app when the UI is removed
-        unmount();
+        unmount?.();
       },
     });
 
@@ -398,7 +388,6 @@ WXT provides a helper function, [`createIframeUi`](/api/wxt/client/functions/cre
        // Define the UI
        const ui = await createIframeUi(ctx, {
          page: '/example-iframe.html',
-         anchor: '#anchor',
          position: 'inline',
          onMount: (wrapper, iframe) => {
            // Add styles to the iframe like width

docs/guide/development.md

@@ -13,6 +13,24 @@ WXT's main goal is providing the best DX it possibly can. When running your exte
 | `wxt.config.ts`     |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
 | `web-ext.config.ts` |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
 
+## Dev Mode vs Production Builds
+
+There are some notible differences between the development and production versions of an extension. During development:
+
+1. **Content scripts are not listed in the `manifest.json`** when targetting MV3. Instead, the [`scripting`](https://developer.chrome.com/docs/extensions/reference/api/scripting) permission is used to register content scripts at runtime so they can be reloaded individually.
+
+   To get the list of content scripts during development, run the following in the background's console:
+
+   ```ts
+   await chrome.scripting.getRegisteredContentScripts();
+   ```
+
+2. **The CSP is modified to allow loading scripts from the dev server**. Make sure you're using Chrome v110 or above for HMR to work.
+
+3. If you don't include a background script/service worker, one will be created to perform various tasks in dev mode, mostly related to reloading different parts of the extension on change.
+
+For production builds, none of the above modifications will be applied, and you're extension/manifest will only include what you have defined.
+
 ## Configure Browser Startup
 
 WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
@@ -83,6 +101,6 @@ Normally, to manually reload an extension, you have to visit `chrome://extension
 
 When running `wxt` command to start the dev server, WXT adds a keyboard shortcut, `ctrl+E` for Windows/Linux and `cmd+E` for Mac, that reloads the extension when pressed, without visiting `chrome://extensions`.
 
-:::note
+:::info
 This shortcut is only available during development, and is not be added to your extension when running `wxt build` or `wxt-zip`.
 :::

docs/index.md

@@ -6,7 +6,7 @@ title: Next-gen Web Extension Framework
 hero:
   name: WXT
   text: Next-gen Web Extension Framework
-  tagline: An open source tool that makes Chrome Extension devlopment faster than ever before.
+  tagline: An open source tool that makes Chrome Extension development faster than ever before.
   image:
     src: /hero-logo.svg
     alt: WXT
@@ -47,11 +47,9 @@ features:
     details: Nuxt-like auto-imports to speed up development.
     link: /guide/auto-imports
     linkText: Read docs
-  - icon: ⬇️
-    title: Bundle Remote Code
-    details: Downloads and bundles remote code imported from URLs.
-    link: /guide/remote-code
-    linkText: Read docs
+  - icon: 🤖
+    title: Automated Publishing
+    details: Automatically zip, upload, submit, and publish extensions.
   - icon: 🎨
     title: Frontend Framework Agnostic
     details: Works with any front-end framework with a Vite plugin.
@@ -65,9 +63,11 @@ features:
   - icon: 📏
     title: Bundle Analysis
     details: Tools for analyizing the final extension bundle and minimizing your extension's size.
-  - icon: 🤖
-    title: Automated Publishing
-    details: 'Coming soon. Automatically zip, upload, and release extensions.'
+  - icon: ⬇️
+    title: Bundle Remote Code
+    details: Downloads and bundles remote code imported from URLs.
+    link: /guide/remote-code
+    linkText: Read docs
 ---
 
 <section class="vp-doc">

e2e/tests/analysis.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { TestProject } from '../utils';
+import { resetBundleIncrement } from '~/core/builders/vite/plugins';
+
+describe('Analysis', () => {
+  beforeEach(() => {
+    resetBundleIncrement();
+  });
+
+  it('should outptut a stats.html with no part files by default', async () => {
+    const project = new TestProject();
+    project.addFile('entrypoints/popup.html');
+    project.addFile('entrypoints/options.html');
+    project.addFile(
+      'entrypoints/background.ts',
+      'export default defineBackground(() => {});',
+    );
+
+    await project.build({
+      analysis: {
+        enabled: true,
+      },
+    });
+
+    expect(await project.fileExists('stats.html')).toBe(true);
+    expect(await project.fileExists('.output/chrome-mv3/stats-0.json')).toBe(
+      false,
+    );
+  });
+
+  it('should save part files when requested', async () => {
+    const project = new TestProject();
+    project.addFile('entrypoints/popup.html');
+    project.addFile('entrypoints/options.html');
+    project.addFile(
+      'entrypoints/background.ts',
+      'export default defineBackground(() => {});',
+    );
+
+    await project.build({
+      analysis: {
+        enabled: true,
+        keepArtifacts: true,
+      },
+    });
+
+    expect(await project.fileExists('stats.html')).toBe(true);
+    expect(await project.fileExists('stats-0.json')).toBe(true);
+    expect(await project.fileExists('stats-1.json')).toBe(true);
+  });
+
+  it('should support customizing the stats output directory', async () => {
+    const project = new TestProject();
+    project.addFile('entrypoints/popup.html');
+    project.addFile('entrypoints/options.html');
+    project.addFile(
+      'entrypoints/background.ts',
+      'export default defineBackground(() => {});',
+    );
+
+    await project.build({
+      analysis: {
+        enabled: true,
+        outputFile: 'stats/bundle.html',
+      },
+    });
+
+    expect(await project.fileExists('stats/bundle.html')).toBe(true);
+  });
+
+  it('should place artifacts next to the custom output file', async () => {
+    const project = new TestProject();
+    project.addFile('entrypoints/popup.html');
+    project.addFile('entrypoints/options.html');
+    project.addFile(
+      'entrypoints/background.ts',
+      'export default defineBackground(() => {});',
+    );
+
+    await project.build({
+      analysis: {
+        enabled: true,
+        outputFile: 'stats/bundle.html',
+        keepArtifacts: true,
+      },
+    });
+    console.log(project.root);
+
+    expect(await project.fileExists('stats/bundle.html')).toBe(true);
+    expect(await project.fileExists('stats/bundle-0.json')).toBe(true);
+    expect(await project.fileExists('stats/bundle-1.json')).toBe(true);
+  });
+});

e2e/tests/auto-imports.test.ts

@@ -7,7 +7,7 @@ describe('Auto Imports', () => {
       const project = new TestProject();
       project.addFile('entrypoints/popup.html', `<html></html>`);
 
-      await project.build();
+      await project.prepare();
 
       expect(await project.serializeFile('.wxt/types/imports.d.ts'))
         .toMatchInlineSnapshot(`
@@ -38,7 +38,7 @@ describe('Auto Imports', () => {
       const project = new TestProject();
       project.addFile('entrypoints/popup.html', `<html></html>`);
 
-      await project.build();
+      await project.prepare();
 
       expect(await project.serializeFile('.wxt/wxt.d.ts'))
         .toMatchInlineSnapshot(`
@@ -63,7 +63,7 @@ describe('Auto Imports', () => {
       });
       project.addFile('entrypoints/popup.html', `<html></html>`);
 
-      await project.build();
+      await project.prepare();
 
       expect(await project.fileExists('.wxt/types/imports.d.ts')).toBe(false);
     });
@@ -75,7 +75,7 @@ describe('Auto Imports', () => {
       });
       project.addFile('entrypoints/popup.html', `<html></html>`);
 
-      await project.build();
+      await project.prepare();
 
       expect(
         await project.serializeFile('.wxt/wxt.d.ts'),
@@ -93,4 +93,82 @@ describe('Auto Imports', () => {
       );
     });
   });
+
+  describe('eslintrc', () => {
+    it('should output the globals list for ESLint to consume', async () => {
+      const project = new TestProject();
+      project.addFile('entrypoints/popup.html', `<html></html>`);
+
+      await project.prepare({
+        imports: {
+          eslintrc: {
+            enabled: true,
+          },
+        },
+      });
+
+      expect(await project.serializeFile('.wxt/eslintrc-auto-import.json'))
+        .toMatchInlineSnapshot(`
+          ".wxt/eslintrc-auto-import.json
+          ----------------------------------------
+          {
+            "globals": {
+              "ContentScriptContext": true,
+              "InvalidMatchPattern": true,
+              "MatchPattern": true,
+              "browser": true,
+              "createIframeUi": true,
+              "createIntegratedUi": true,
+              "createShadowRootUi": true,
+              "defineBackground": true,
+              "defineConfig": true,
+              "defineContentScript": true,
+              "defineUnlistedScript": true,
+              "fakeBrowser": true,
+              "storage": true
+            }
+          }
+          "
+        `);
+    });
+
+    it('should allow customizing the output', async () => {
+      const project = new TestProject();
+      project.addFile('entrypoints/popup.html', `<html></html>`);
+
+      await project.prepare({
+        imports: {
+          eslintrc: {
+            enabled: true,
+            filePath: project.resolvePath('example.json'),
+            globalsPropValue: 'readonly',
+          },
+        },
+      });
+
+      expect(await project.serializeFile('example.json'))
+        .toMatchInlineSnapshot(`
+          "example.json
+          ----------------------------------------
+          {
+            "globals": {
+              "ContentScriptContext": "readonly",
+              "InvalidMatchPattern": "readonly",
+              "MatchPattern": "readonly",
+              "browser": "readonly",
+              "createIframeUi": "readonly",
+              "createIntegratedUi": "readonly",
+              "createShadowRootUi": "readonly",
+              "defineBackground": "readonly",
+              "defineConfig": "readonly",
+              "defineContentScript": "readonly",
+              "defineUnlistedScript": "readonly",
+              "fakeBrowser": "readonly",
+              "storage": "readonly"
+            }
+          }
+          "
+        `);
+    });
+  });
 });

e2e/tests/typescript-project.test.ts

@@ -6,7 +6,7 @@ describe('TypeScript Project', () => {
     const project = new TestProject();
     project.addFile('entrypoints/unlisted.html');
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/types/globals.d.ts');
     expect(output).toMatchInlineSnapshot(`
@@ -38,7 +38,7 @@ describe('TypeScript Project', () => {
     project.addFile('entrypoints/options.html');
     project.addFile('entrypoints/sandbox.html');
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/types/paths.d.ts');
     expect(output).toMatchInlineSnapshot(`
@@ -103,7 +103,7 @@ describe('TypeScript Project', () => {
       },
     });
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/types/i18n.d.ts');
     expect(output).toMatchInlineSnapshot(`
@@ -225,7 +225,7 @@ describe('TypeScript Project', () => {
     const project = new TestProject();
     project.addFile('entrypoints/unlisted.html');
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/wxt.d.ts');
     expect(output).toMatchInlineSnapshot(`
@@ -245,7 +245,7 @@ describe('TypeScript Project', () => {
     const project = new TestProject();
     project.addFile('entrypoints/unlisted.html');
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/tsconfig.json');
     expect(output).toMatchInlineSnapshot(`
@@ -289,7 +289,7 @@ describe('TypeScript Project', () => {
       srcDir: 'src',
     });
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/tsconfig.json');
     expect(output).toMatchInlineSnapshot(`
@@ -337,7 +337,7 @@ describe('TypeScript Project', () => {
       },
     });
 
-    await project.build();
+    await project.prepare();
 
     const output = await project.serializeFile('.wxt/tsconfig.json');
     expect(output).toMatchInlineSnapshot(`

e2e/utils.ts

@@ -92,12 +92,19 @@ export class TestProject {
     return server;
   }
 
+  /**
+   * Call `path.resolve` relative to the project's root directory.
+   */
+  resolvePath(...path: string[]): string {
+    return resolve(this.root, ...path);
+  }
+
   private async writeProjectToDisk() {
     if (this.config == null) this.setConfigFileConfig();
 
     for (const file of this.files) {
       const [name, content] = file;
-      const filePath = resolve(this.root, name);
+      const filePath = this.resolvePath(name);
       const fileDir = dirname(filePath);
       await fs.ensureDir(fileDir);
       await fs.writeFile(filePath, content ?? '', 'utf-8');
@@ -140,13 +147,13 @@ export class TestProject {
     ignoreContentsOfFilenames?: string[],
   ): Promise<string> {
     const outputFiles = await glob('**/*', {
-      cwd: resolve(this.root, dir),
+      cwd: this.resolvePath(dir),
       ignore: ['**/node_modules', '**/.output'],
     });
     outputFiles.sort();
     const fileContents = [];
     for (const file of outputFiles) {
-      const path = resolve(this.root, dir, file);
+      const path = this.resolvePath(dir, file);
       const isContentIgnored = !!ignoreContentsOfFilenames?.find(
         (ignoredFile) => normalizePath(path).endsWith(ignoredFile),
       );
@@ -161,7 +168,7 @@ export class TestProject {
    *                       the file contents.
    */
   async serializeFile(path: string, ignoreContents?: boolean): Promise<string> {
-    const absolutePath = resolve(this.root, path);
+    const absolutePath = this.resolvePath(path);
     return [
       normalizePath(relative(this.root, absolutePath)),
       ignoreContents ? '<contents-ignored>' : await fs.readFile(absolutePath),
@@ -169,12 +176,12 @@ export class TestProject {
   }
 
   fileExists(path: string): Promise<boolean> {
-    return fs.exists(resolve(this.root, path));
+    return fs.exists(this.resolvePath(path));
   }
 
   async getOutputManifest(
     path: string = '.output/chrome-mv3/manifest.json',
   ): Promise<any> {
-    return await fs.readJson(resolve(this.root, path));
+    return await fs.readJson(this.resolvePath(path));
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.16.3",
+  "version": "0.16.7",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -121,7 +121,6 @@
     "get-port": "^7.0.0",
     "giget": "^1.1.3",
     "hookable": "^5.5.3",
-    "immer": "^10.0.3",
     "is-wsl": "^3.0.0",
     "jiti": "^1.21.0",
     "json5": "^2.2.3",
@@ -133,10 +132,10 @@
     "ora": "^7.0.1",
     "picocolors": "^1.0.0",
     "prompts": "^2.4.2",
-    "publish-browser-extension": "^2.1.1",
+    "publish-browser-extension": "^2.1.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "unimport": "^3.4.0",
-    "vite": "^5.0.12",
+    "vite": "^5.1.3",
     "web-ext-run": "^0.2.0",
     "webextension-polyfill": "^0.10.0",
     "zip-dir": "^2.0.0"
@@ -166,7 +165,7 @@
     "typedoc-vitepress-theme": "1.0.0-next.3",
     "typescript": "^5.3.2",
     "vitepress": "1.0.0-rc.34",
-    "vitest": "^1.1.0",
+    "vitest": "^1.2.2",
     "vitest-mock-extended": "^1.3.1",
     "vue": "^3.3.10"
   },

pnpm-lock.yaml

@@ -62,9 +62,6 @@ importers:
       hookable:
         specifier: ^5.5.3
         version: 5.5.3
-      immer:
-        specifier: ^10.0.3
-        version: 10.0.3
       is-wsl:
         specifier: ^3.0.0
         version: 3.1.0
@@ -99,8 +96,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       publish-browser-extension:
-        specifier: ^2.1.1
-        version: 2.1.1
+        specifier: ^2.1.2
+        version: 2.1.2
       rollup-plugin-visualizer:
         specifier: ^5.9.2
         version: 5.12.0
@@ -108,8 +105,8 @@ importers:
         specifier: ^3.4.0
         version: 3.4.0
       vite:
-        specifier: ^5.0.12
-        version: 5.0.12(@types/node@20.10.3)(sass@1.69.5)
+        specifier: ^5.1.3
+        version: 5.1.3(@types/node@20.10.3)(sass@1.69.5)
       web-ext-run:
         specifier: ^0.2.0
         version: 0.2.0
@@ -143,7 +140,7 @@ importers:
         version: 2.4.9
       '@vitest/coverage-v8':
         specifier: ^1.0.1
-        version: 1.2.2(vitest@1.1.0)
+        version: 1.2.2(vitest@1.2.2)
       execa:
         specifier: ^8.0.1
         version: 8.0.1
@@ -193,11 +190,11 @@ importers:
         specifier: 1.0.0-rc.34
         version: 1.0.0-rc.34(@types/node@20.10.3)(typescript@5.3.3)
       vitest:
-        specifier: ^1.1.0
-        version: 1.1.0(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
+        specifier: ^1.2.2
+        version: 1.2.2(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
       vitest-mock-extended:
         specifier: ^1.3.1
-        version: 1.3.1(typescript@5.3.3)(vitest@1.1.0)
+        version: 1.3.1(typescript@5.3.3)(vitest@1.2.2)
       vue:
         specifier: ^3.3.10
         version: 3.3.10(typescript@5.3.3)
@@ -211,8 +208,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       vitest:
-        specifier: ^1.1.0
-        version: 1.1.0(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
+        specifier: ^1.2.2
+        version: 1.2.2(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
     devDependencies:
       '@types/react':
         specifier: ^18.2.34
@@ -1061,7 +1058,6 @@ packages:
 
   /@types/estree@1.0.4:
     resolution: {integrity: sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==}
-    dev: false
 
   /@types/fs-extra@11.0.4:
     resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
@@ -1171,18 +1167,18 @@ packages:
     dev: false
     optional: true
 
-  /@vitejs/plugin-vue@5.0.2(vite@5.0.12)(vue@3.4.3):
+  /@vitejs/plugin-vue@5.0.2(vite@5.1.3)(vue@3.4.3):
     resolution: {integrity: sha512-kEjJHrLb5ePBvjD0SPZwJlw1QTRcjjCA9sB5VyfonoXVBxTS7TMnqL6EkLt1Eu61RDeiuZ/WN9Hf6PxXhPI2uA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.12(@types/node@20.10.3)(sass@1.69.5)
+      vite: 5.1.3(@types/node@20.10.3)(sass@1.69.5)
       vue: 3.4.3(typescript@5.3.3)
     dev: true
 
-  /@vitest/coverage-v8@1.2.2(vitest@1.1.0):
+  /@vitest/coverage-v8@1.2.2(vitest@1.2.2):
     resolution: {integrity: sha512-IHyKnDz18SFclIEEAHb9Y4Uxx0sPKC2VO1kdDCs1BF6Ip4S8rQprs971zIsooLUn7Afs71GRxWMWpkCGZpRMhw==}
     peerDependencies:
       vitest: ^1.0.0
@@ -1200,41 +1196,42 @@ packages:
       std-env: 3.6.0
       test-exclude: 6.0.0
       v8-to-istanbul: 9.2.0
-      vitest: 1.1.0(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
+      vitest: 1.2.2(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@1.1.0:
-    resolution: {integrity: sha512-9IE2WWkcJo2BR9eqtY5MIo3TPmS50Pnwpm66A6neb2hvk/QSLfPXBz2qdiwUOQkwyFuuXEUj5380CbwfzW4+/w==}
+  /@vitest/expect@1.2.2:
+    resolution: {integrity: sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==}
     dependencies:
-      '@vitest/spy': 1.1.0
-      '@vitest/utils': 1.1.0
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
       chai: 4.3.10
 
-  /@vitest/runner@1.1.0:
-    resolution: {integrity: sha512-zdNLJ00pm5z/uhbWF6aeIJCGMSyTyWImy3Fcp9piRGvueERFlQFbUwCpzVce79OLm2UHk9iwaMSOaU9jVHgNVw==}
+  /@vitest/runner@1.2.2:
+    resolution: {integrity: sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==}
     dependencies:
-      '@vitest/utils': 1.1.0
+      '@vitest/utils': 1.2.2
       p-limit: 5.0.0
       pathe: 1.1.1
 
-  /@vitest/snapshot@1.1.0:
-    resolution: {integrity: sha512-5O/wyZg09V5qmNmAlUgCBqflvn2ylgsWJRRuPrnHEfDNT6tQpQ8O1isNGgo+VxofISHqz961SG3iVvt3SPK/QQ==}
+  /@vitest/snapshot@1.2.2:
+    resolution: {integrity: sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==}
     dependencies:
       magic-string: 0.30.5
       pathe: 1.1.1
       pretty-format: 29.7.0
 
-  /@vitest/spy@1.1.0:
-    resolution: {integrity: sha512-sNOVSU/GE+7+P76qYo+VXdXhXffzWZcYIPQfmkiRxaNCSPiLANvQx5Mx6ZURJ/ndtEkUJEpvKLXqAYTKEY+lTg==}
+  /@vitest/spy@1.2.2:
+    resolution: {integrity: sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==}
     dependencies:
       tinyspy: 2.2.0
 
-  /@vitest/utils@1.1.0:
-    resolution: {integrity: sha512-z+s510fKmYz4Y41XhNs3vcuFTFhcij2YF7F8VQfMEYAAUfqQh0Zfg7+w9xdgFGhPf3tX3TicAe+8BDITk6ampQ==}
+  /@vitest/utils@1.2.2:
+    resolution: {integrity: sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==}
     dependencies:
       diff-sequences: 29.6.3
+      estree-walker: 3.0.3
       loupe: 2.3.7
       pretty-format: 29.7.0
 
@@ -1296,7 +1293,7 @@ packages:
       '@vue/shared': 3.4.3
       estree-walker: 2.0.2
       magic-string: 0.30.5
-      postcss: 8.4.32
+      postcss: 8.4.35
       source-map-js: 1.0.2
     dev: true
 
@@ -1487,8 +1484,8 @@ packages:
     resolution: {integrity: sha512-NY39ACqCxdKBmHgw361M9pfJma8e4AZo20w9AY+5ZjIj1W2dvXC8J31G5fjfOGbulW9w4WKpT8fPooi0mLkn9A==}
     dev: false
 
-  /acorn-walk@8.3.0:
-    resolution: {integrity: sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==}
+  /acorn-walk@8.3.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
     engines: {node: '>=0.4.0'}
 
   /acorn@8.11.2:
@@ -2409,6 +2406,11 @@ packages:
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  /estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.4
+
   /eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
@@ -2930,10 +2932,6 @@ packages:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false
 
-  /immer@10.0.3:
-    resolution: {integrity: sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==}
-    dev: false
-
   /immutable@4.3.4:
     resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
 
@@ -4116,6 +4114,15 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
+
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
 
   /preact@10.18.1:
     resolution: {integrity: sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==}
@@ -4168,9 +4175,9 @@ packages:
       sade: 1.8.1
     dev: true
 
-  /publish-browser-extension@2.1.1:
-    resolution: {integrity: sha512-WqCnhHXbmiYn4vIbgcyKWVHiOvCoPjjpt3X+hfnU8rlOozU43TURpHUWZlQ0W49LhvJvBRsBfGRQxtRMGhqsxw==}
-    engines: {node: '18', pnpm: '8'}
+  /publish-browser-extension@2.1.2:
+    resolution: {integrity: sha512-g6+mtdR4Z+GYHPIrfaAwC7Kbt1oQlpJ8r0x1PAytScy33OFdK+HVUeDDYorBpPAiQlmYJRQga7rY9QVTyTw34g==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
       cac: 6.7.14
@@ -4892,8 +4899,8 @@ packages:
   /tinybench@2.5.1:
     resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
 
-  /tinypool@0.8.1:
-    resolution: {integrity: sha512-zBTCK0cCgRROxvs9c0CGK838sPkeokNGdQVUUwHAbynHFlmyJYj825f/oRs528HaIJ97lo0pLIlDUzwN+IorWg==}
+  /tinypool@0.8.2:
+    resolution: {integrity: sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==}
     engines: {node: '>=14.0.0'}
 
   /tinyspy@2.2.0:
@@ -5185,8 +5192,8 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-node@1.1.0(@types/node@20.10.3)(sass@1.69.5):
-    resolution: {integrity: sha512-jV48DDUxGLEBdHCQvxL1mEh7+naVy+nhUUUaPAZLd3FJgXuxQiewHcfeZebbJ6onDqNGkP4r3MhQ342PRlG81Q==}
+  /vite-node@1.2.2(@types/node@20.10.3)(sass@1.69.5):
+    resolution: {integrity: sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
@@ -5194,7 +5201,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 5.0.12(@types/node@20.10.3)(sass@1.69.5)
+      vite: 5.1.3(@types/node@20.10.3)(sass@1.69.5)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -5205,8 +5212,8 @@ packages:
       - supports-color
       - terser
 
-  /vite@5.0.12(@types/node@20.10.3)(sass@1.69.5):
-    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+  /vite@5.1.3(@types/node@20.10.3)(sass@1.69.5):
+    resolution: {integrity: sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -5235,7 +5242,7 @@ packages:
     dependencies:
       '@types/node': 20.10.3
       esbuild: 0.19.11
-      postcss: 8.4.32
+      postcss: 8.4.35
       rollup: 4.6.1
       sass: 1.69.5
     optionalDependencies:
@@ -5256,7 +5263,7 @@ packages:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2
       '@types/markdown-it': 13.0.7
-      '@vitejs/plugin-vue': 5.0.2(vite@5.0.12)(vue@3.4.3)
+      '@vitejs/plugin-vue': 5.0.2(vite@5.1.3)(vue@3.4.3)
       '@vue/devtools-api': 6.5.1
       '@vueuse/core': 10.7.1(vue@3.4.3)
       '@vueuse/integrations': 10.7.1(focus-trap@7.5.4)(vue@3.4.3)
@@ -5267,7 +5274,7 @@ packages:
       shikiji: 0.9.16
       shikiji-core: 0.9.16
       shikiji-transformers: 0.9.16
-      vite: 5.0.12(@types/node@20.10.3)(sass@1.69.5)
+      vite: 5.1.3(@types/node@20.10.3)(sass@1.69.5)
       vue: 3.4.3(typescript@5.3.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -5297,7 +5304,7 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest-mock-extended@1.3.1(typescript@5.3.3)(vitest@1.1.0):
+  /vitest-mock-extended@1.3.1(typescript@5.3.3)(vitest@1.2.2):
     resolution: {integrity: sha512-OpghYjh4BDuQ/Mzs3lFMQ1QRk9D8/2O9T47MLUA5eLn7K4RWIy+MfIivYOWEyxjTENjsBnzgMihDjyNalN/K0Q==}
     peerDependencies:
       typescript: 3.x || 4.x || 5.x
@@ -5305,11 +5312,11 @@ packages:
     dependencies:
       ts-essentials: 9.3.2(typescript@5.3.3)
       typescript: 5.3.3
-      vitest: 1.1.0(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
+      vitest: 1.2.2(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5)
     dev: true
 
-  /vitest@1.1.0(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5):
-    resolution: {integrity: sha512-oDFiCrw7dd3Jf06HoMtSRARivvyjHJaTxikFxuqJjO76U436PqlVw1uLn7a8OSPrhSfMGVaRakKpA2lePdw79A==}
+  /vitest@1.2.2(@types/node@20.10.3)(happy-dom@13.3.8)(sass@1.69.5):
+    resolution: {integrity: sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -5334,12 +5341,12 @@ packages:
         optional: true
     dependencies:
       '@types/node': 20.10.3
-      '@vitest/expect': 1.1.0
-      '@vitest/runner': 1.1.0
-      '@vitest/snapshot': 1.1.0
-      '@vitest/spy': 1.1.0
-      '@vitest/utils': 1.1.0
-      acorn-walk: 8.3.0
+      '@vitest/expect': 1.2.2
+      '@vitest/runner': 1.2.2
+      '@vitest/snapshot': 1.2.2
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      acorn-walk: 8.3.2
       cac: 6.7.14
       chai: 4.3.10
       debug: 4.3.4
@@ -5352,9 +5359,9 @@ packages:
       std-env: 3.6.0
       strip-literal: 1.3.0
       tinybench: 2.5.1
-      tinypool: 0.8.1
-      vite: 5.0.12(@types/node@20.10.3)(sass@1.69.5)
-      vite-node: 1.1.0(@types/node@20.10.3)(sass@1.69.5)
+      tinypool: 0.8.2
+      vite: 5.1.3(@types/node@20.10.3)(sass@1.69.5)
+      vite-node: 1.2.2(@types/node@20.10.3)(sass@1.69.5)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

src/client/content-scripts/ui/__tests__/index.test.ts

@@ -367,7 +367,7 @@ describe('Content Script UIs', () => {
       });
     });
 
-    describe.todo('after', () => {
+    describe('after', () => {
       it('should append the UI after the anchor', () => {
         const ui = createIntegratedUi(ctx, {
           position: 'inline',

src/client/content-scripts/ui/index.ts

@@ -211,20 +211,16 @@ function mountUi(
       anchor.append(root);
       break;
     case 'first':
-      if (anchor.firstChild) {
-        anchor.insertBefore(root, anchor.firstChild);
-      } else {
-        anchor.append(root);
-      }
+      anchor.prepend(root);
       break;
     case 'replace':
       anchor.replaceWith(root);
       break;
     case 'after':
-      anchor.replaceWith(anchor, root);
+      anchor.parentElement?.insertBefore(root, anchor.nextElementSibling);
       break;
     case 'before':
-      anchor.replaceWith(root, anchor);
+      anchor.parentElement?.insertBefore(root, anchor);
       break;
     default:
       options.append(anchor, root);

src/core/builders/vite/index.ts

@@ -66,7 +66,7 @@ export async function createViteBuilder(
       wxtPlugins.defineImportMeta(),
     );
     if (wxtConfig.analysis.enabled) {
-      config.plugins.push(wxtPlugins.bundleAnalysis());
+      config.plugins.push(wxtPlugins.bundleAnalysis(wxtConfig));
     }
 
     return config;

src/core/builders/vite/plugins/bundleAnalysis.ts

@@ -1,12 +1,25 @@
 import type * as vite from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
+import { ResolvedConfig } from '~/types';
+import path from 'node:path';
 
 let increment = 0;
 
-export function bundleAnalysis(): vite.Plugin {
+export function bundleAnalysis(
+  config: Omit<ResolvedConfig, 'builder'>,
+): vite.Plugin {
   return visualizer({
-    emitFile: true,
     template: 'raw-data',
-    filename: `stats-${increment++}.json`,
-  }) as vite.Plugin;
+    filename: path.resolve(
+      config.analysis.outputDir,
+      `${config.analysis.outputName}-${increment++}.json`,
+    ),
+  });
+}
+
+/**
+ * @deprecated FOR TESTING ONLY.
+ */
+export function resetBundleIncrement() {
+  increment = 0;
 }

src/core/builders/vite/plugins/unimport.ts

@@ -1,6 +1,5 @@
 import { createUnimport } from 'unimport';
 import { ResolvedConfig } from '~/types';
-import { getUnimportOptions } from '~/core/utils/unimport';
 import type * as vite from 'vite';
 import { extname } from 'path';
 
@@ -19,7 +18,7 @@ const ENABLED_EXTENSIONS = new Set([
 export function unimport(
   config: Omit<ResolvedConfig, 'builder'>,
 ): vite.PluginOption {
-  const options = getUnimportOptions(config);
+  const options = config.imports;
   if (options === false) return [];
 
   const unimport = createUnimport(options);

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

@@ -851,6 +851,55 @@ describe('Manifest Utils', () => {
           'content-scripts/one.css',
         ]);
       });
+
+      it('should convert mv3 items to mv2 strings automatically', async () => {
+        setFakeWxt({
+          config: {
+            outDir,
+            manifestVersion: 2,
+            manifest: {
+              web_accessible_resources: [
+                {
+                  matches: ['*://*/*'],
+                  resources: ['/icon-128.png'],
+                },
+                {
+                  matches: ['https://google.com'],
+                  resources: ['/icon-128.png', '/icon-32.png'],
+                },
+              ],
+            },
+          },
+        });
+
+        const { manifest: actual } = await generateManifest(
+          [],
+          fakeBuildOutput(),
+        );
+
+        expect(actual.web_accessible_resources).toEqual([
+          '/icon-128.png',
+          '/icon-32.png',
+        ]);
+      });
+
+      it('should convert mv2 strings to mv3 items with a warning automatically', async () => {
+        setFakeWxt({
+          config: {
+            outDir,
+            manifestVersion: 3,
+            manifest: {
+              web_accessible_resources: ['/icon.svg'],
+            },
+          },
+        });
+
+        await expect(() =>
+          generateManifest([], fakeBuildOutput()),
+        ).rejects.toThrow(
+          'Non-MV3 web_accessible_resources detected: ["/icon.svg"]. When manually defining web_accessible_resources, define them as MV3 objects ({ matches: [...], resources: [...] }), and WXT will automatically convert them to MV2 when necessary.',
+        );
+      });
     });
 
     describe('transformManifest option', () => {

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

@@ -20,6 +20,7 @@ export async function buildEntrypoints(
     try {
       steps.push(await wxt.config.builder.build(group));
     } catch (err) {
+      wxt.logger.error(err);
       throw Error(`Failed to build ${groupNames.join(', ')}`, { cause: err });
     }
   }

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

@@ -1,9 +1,12 @@
-import { UnimportOptions, createUnimport } from 'unimport';
-import { Entrypoint } from '~/types';
+import { Unimport, createUnimport } from 'unimport';
+import {
+  EslintGlobalsPropValue,
+  Entrypoint,
+  WxtResolvedUnimportOptions,
+} from '~/types';
 import fs from 'fs-extra';
 import { relative, resolve } from 'path';
 import { getEntrypointBundlePath } from '~/core/utils/entrypoints';
-import { getUnimportOptions } from '~/core/utils/unimport';
 import { getEntrypointGlobals, getGlobals } from '~/core/utils/globals';
 import { normalizePath } from '~/core/utils/paths';
 import path from 'node:path';
@@ -21,9 +24,12 @@ export async function generateTypesDir(
 
   const references: string[] = [];
 
-  const imports = getUnimportOptions(wxt.config);
-  if (imports !== false) {
-    references.push(await writeImportsDeclarationFile(imports));
+  if (wxt.config.imports !== false) {
+    const unimport = createUnimport(wxt.config.imports);
+    references.push(await writeImportsDeclarationFile(unimport));
+    if (wxt.config.imports.eslintrc.enabled) {
+      await writeImportsEslintFile(unimport, wxt.config.imports);
+    }
   }
 
   references.push(await writePathsDeclarationFile(entrypoints));
@@ -34,11 +40,8 @@ export async function generateTypesDir(
   await writeTsConfigFile(mainReference);
 }
 
-async function writeImportsDeclarationFile(
-  unimportOptions: Partial<UnimportOptions>,
-): Promise<string> {
+async function writeImportsDeclarationFile(unimport: Unimport) {
   const filePath = resolve(wxt.config.typesDir, 'imports.d.ts');
-  const unimport = createUnimport(unimportOptions);
 
   // Load project imports into unimport memory so they are output via generateTypeDeclarations
   await unimport.scanImportsFromDir(undefined, { cwd: wxt.config.srcDir });
@@ -53,6 +56,23 @@ async function writeImportsDeclarationFile(
   return filePath;
 }
 
+async function writeImportsEslintFile(
+  unimport: Unimport,
+  options: WxtResolvedUnimportOptions,
+) {
+  const globals: Record<string, EslintGlobalsPropValue> = {};
+  const eslintrc = { globals };
+
+  (await unimport.getImports())
+    .map((i) => i.as ?? i.name)
+    .filter(Boolean)
+    .sort()
+    .forEach((name) => {
+      eslintrc.globals[name] = options.eslintrc.globalsPropValue;
+    });
+  await fs.writeJson(options.eslintrc.filePath, eslintrc, { spaces: 2 });
+}
+
 async function writePathsDeclarationFile(
   entrypoints: Entrypoint[],
 ): Promise<string> {

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

@@ -2,7 +2,6 @@ import createJITI, { TransformOptions as JitiTransformOptions } from 'jiti';
 import { createUnimport } from 'unimport';
 import fs from 'fs-extra';
 import { relative, resolve } from 'node:path';
-import { getUnimportOptions } from '~/core/utils/unimport';
 import { removeProjectImportStatements } from '~/core/utils/strings';
 import { normalizePath } from '~/core/utils/paths';
 import { TransformOptions, transformSync } from 'esbuild';
@@ -30,7 +29,7 @@ export async function importEntrypointFile<T>(path: string): Promise<T> {
   const normalPath = normalizePath(path);
 
   const unimport = createUnimport({
-    ...getUnimportOptions(wxt.config),
+    ...wxt.config.imports,
     // Only allow specific imports, not all from the project
     dirs: [],
   });

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

@@ -77,8 +77,9 @@ export async function internalBuild(): Promise<BuildOutput> {
 
   if (wxt.config.analysis.enabled) {
     await combineAnalysisStats();
+    const statsPath = relative(wxt.config.root, wxt.config.analysis.outputFile);
     wxt.logger.info(
-      `Analysis complete:\n  ${pc.gray('└─')} ${pc.yellow('stats.html')}`,
+      `Analysis complete:\n  ${pc.gray('└─')} ${pc.yellow(statsPath)}`,
     );
   }
 
@@ -86,17 +87,27 @@ export async function internalBuild(): Promise<BuildOutput> {
 }
 
 async function combineAnalysisStats(): Promise<void> {
-  const unixFiles = await glob(`stats-*.json`, {
-    cwd: wxt.config.outDir,
+  const unixFiles = await glob(`${wxt.config.analysis.outputName}-*.json`, {
+    cwd: wxt.config.analysis.outputDir,
     absolute: true,
   });
   const absolutePaths = unixFiles.map(unnormalizePath);
 
   await exec(
     'rollup-plugin-visualizer',
-    [...absolutePaths, '--template', wxt.config.analysis.template],
+    [
+      ...absolutePaths,
+      '--template',
+      wxt.config.analysis.template,
+      '--filename',
+      wxt.config.analysis.outputFile,
+    ],
     { cwd: wxt.config.root, stdio: 'inherit' },
   );
+
+  if (!wxt.config.analysis.keepArtifacts) {
+    await Promise.all(absolutePaths.map((statsFile) => fs.remove(statsFile)));
+  }
 }
 
 function printValidationResults({

src/core/utils/building/resolve-config.ts

@@ -8,6 +8,8 @@ import {
   UserManifest,
   ExtensionRunnerConfig,
   WxtDevServer,
+  WxtResolvedUnimportOptions,
+  Logger,
 } from '~/types';
 import path from 'node:path';
 import { createFsCache } from '~/core/utils/cache';
@@ -15,6 +17,7 @@ import consola, { LogLevels } from 'consola';
 import { createViteBuilder } from '~/core/builders/vite';
 import defu from 'defu';
 import { NullablyRequired } from '../types';
+import { isModuleInstalled } from '../package';
 
 /**
  * Given an inline config, discover the config file if necessary, merge the results, resolve any
@@ -100,6 +103,13 @@ export async function resolveConfig(
     }).map(([key, value]) => [key, path.resolve(root, value)]),
   );
 
+  const analysisOutputFile = path.resolve(
+    root,
+    mergedConfig.analysis?.outputFile ?? 'stats.html',
+  );
+  const analysisOutputDir = path.dirname(analysisOutputFile);
+  const analysisOutputName = path.parse(analysisOutputFile).name;
+
   const finalConfig: Omit<ResolvedConfig, 'builder'> = {
     browser,
     command,
@@ -108,7 +118,7 @@ export async function resolveConfig(
     filterEntrypoints,
     env,
     fsCache: createFsCache(wxtDir),
-    imports: mergedConfig.imports ?? {},
+    imports: await getUnimportOptions(wxtDir, logger, mergedConfig),
     logger,
     manifest: await resolveManifestConfig(env, mergedConfig.manifest),
     manifestVersion,
@@ -129,6 +139,10 @@ export async function resolveConfig(
     analysis: {
       enabled: mergedConfig.analysis?.enabled ?? false,
       template: mergedConfig.analysis?.template ?? 'treemap',
+      outputFile: analysisOutputFile,
+      outputDir: analysisOutputDir,
+      outputName: analysisOutputName,
+      keepArtifacts: mergedConfig.analysis?.keepArtifacts ?? false,
     },
     userConfigMetadata: userConfigMetadata ?? {},
     alias,
@@ -216,9 +230,8 @@ function mergeInlineConfig(
     outDir: inlineConfig.outDir ?? userConfig.outDir,
     zip,
     analysis: {
-      enabled: inlineConfig.analysis?.enabled ?? userConfig.analysis?.enabled,
-      template:
-        inlineConfig.analysis?.template ?? userConfig.analysis?.template,
+      ...userConfig.analysis,
+      ...inlineConfig.analysis,
     },
     alias: {
       ...userConfig.alias,
@@ -263,3 +276,48 @@ function resolveInternalZipConfig(
     ],
   };
 }
+
+async function getUnimportOptions(
+  wxtDir: string,
+  logger: Logger,
+  config: InlineConfig,
+): Promise<WxtResolvedUnimportOptions | false> {
+  if (config.imports === false) return false;
+
+  const enabledConfig = config.imports?.eslintrc?.enabled;
+  let enabled: boolean;
+  switch (enabledConfig) {
+    case undefined:
+    case 'auto':
+      enabled = await isModuleInstalled('eslint');
+      break;
+    default:
+      enabled = enabledConfig;
+  }
+
+  const defaultOptions: WxtResolvedUnimportOptions = {
+    debugLog: logger.debug,
+    imports: [
+      { name: 'defineConfig', from: 'wxt' },
+      { name: 'fakeBrowser', from: 'wxt/testing' },
+    ],
+    presets: [
+      { package: 'wxt/client' },
+      { package: 'wxt/browser' },
+      { package: 'wxt/sandbox' },
+      { package: 'wxt/storage' },
+    ],
+    warn: logger.warn,
+    dirs: ['components', 'composables', 'hooks', 'utils'],
+    eslintrc: {
+      enabled,
+      filePath: path.resolve(wxtDir, 'eslintrc-auto-import.json'),
+      globalsPropValue: true,
+    },
+  };
+
+  return defu<WxtResolvedUnimportOptions, [WxtResolvedUnimportOptions]>(
+    config.imports ?? {},
+    defaultOptions,
+  );
+}

src/core/utils/manifest.ts

@@ -21,7 +21,6 @@ import {
 import { getPackageJson } from './package';
 import { normalizePath } from './paths';
 import { writeFileIfDifferent } from './fs';
-import { produce } from 'immer';
 import defu from 'defu';
 import { wxt } from '../wxt';
 
@@ -78,7 +77,7 @@ export async function generateManifest(
   };
   const userManifest = wxt.config.manifest;
 
-  const manifest = defu(
+  let manifest = defu(
     userManifest,
     baseManifest,
   ) as Manifest.WebExtensionManifest;
@@ -113,21 +112,29 @@ export async function generateManifest(
   if (wxt.config.command === 'serve') addDevModeCsp(manifest);
   if (wxt.config.command === 'serve') addDevModePermissions(manifest);
 
-  const finalManifest = produce(manifest, wxt.config.transformManifest);
-  await wxt.hooks.callHook('build:manifestGenerated', wxt, finalManifest);
+  // TODO: Remove in v1
+  wxt.config.transformManifest(manifest);
+  await wxt.hooks.callHook('build:manifestGenerated', wxt, manifest);
 
-  if (finalManifest.name == null)
+  if (wxt.config.manifestVersion === 2)
+    convertWebAccessibleResourcesToMv2(manifest);
+
+  if (wxt.config.manifestVersion === 3) {
+    validateMv3WebAccessbileResources(manifest);
+  }
+
+  if (manifest.name == null)
     throw Error(
       "Manifest 'name' is missing. Either:\n1. Set the name in your <rootDir>/package.json\n2. Set a name via the manifest option in your wxt.config.ts",
     );
-  if (finalManifest.version == null) {
+  if (manifest.version == null) {
     throw Error(
       "Manifest 'version' is missing. Either:\n1. Add a version in your <rootDir>/package.json\n2. Pass the version via the manifest option in your wxt.config.ts",
     );
   }
 
   return {
-    manifest: finalManifest,
+    manifest,
     warnings,
   };
 }
@@ -501,7 +508,8 @@ export function getContentScriptCssWebAccessibleResources(
   contentScripts: ContentScriptEntrypoint[],
   contentScriptCssMap: Record<string, string | undefined>,
 ): any[] {
-  const resources: any[] = [];
+  const resources: Manifest.WebExtensionManifestWebAccessibleResourcesC2ItemType[] =
+    [];
 
   contentScripts.forEach((script) => {
     if (script.options.cssInjectionMode !== 'ui') return;
@@ -509,17 +517,13 @@ export function getContentScriptCssWebAccessibleResources(
     const cssFile = contentScriptCssMap[script.name];
     if (cssFile == null) return;
 
-    if (wxt.config.manifestVersion === 2) {
-      resources.push(cssFile);
-    } else {
-      resources.push({
-        resources: [cssFile],
-        matches: resolvePerBrowserOption(
-          script.options.matches,
-          wxt.config.browser,
-        ).map((matchPattern) => stripPathFromMatchPattern(matchPattern)),
-      });
-    }
+    resources.push({
+      resources: [cssFile],
+      matches: resolvePerBrowserOption(
+        script.options.matches,
+        wxt.config.browser,
+      ).map((matchPattern) => stripPathFromMatchPattern(matchPattern)),
+    });
   });
 
   return resources;
@@ -573,3 +577,43 @@ export function stripPathFromMatchPattern(pattern: string) {
   const startOfPath = pattern.indexOf('/', protocolSepIndex + 3);
   return pattern.substring(0, startOfPath) + '/*';
 }
+
+/**
+ * Converts all MV3 web accessible resources to their MV2 forms. MV3 web accessible resources are
+ * generated in this file, and may be defined by the user in their manifest. In both cases, when
+ * targetting MV2, automatically convert their definitions down to the basic MV2 array.
+ */
+export function convertWebAccessibleResourcesToMv2(
+  manifest: Manifest.WebExtensionManifest,
+): void {
+  if (manifest.web_accessible_resources == null) return;
+
+  manifest.web_accessible_resources = Array.from(
+    new Set(
+      manifest.web_accessible_resources.flatMap((item) => {
+        if (typeof item === 'string') return item;
+        return item.resources;
+      }),
+    ),
+  );
+}
+
+/**
+ * Make sure all resources are in MV3 format. If not, add a wanring
+ */
+export function validateMv3WebAccessbileResources(
+  manifest: Manifest.WebExtensionManifest,
+): void {
+  if (manifest.web_accessible_resources == null) return;
+
+  const stringResources = manifest.web_accessible_resources.filter(
+    (item) => typeof item === 'string',
+  );
+  if (stringResources.length > 0) {
+    throw Error(
+      `Non-MV3 web_accessible_resources detected: ${JSON.stringify(
+        stringResources,
+      )}. When manually defining web_accessible_resources, define them as MV3 objects ({ matches: [...], resources: [...] }), and WXT will automatically convert them to MV2 when necessary.`,
+    );
+  }
+}

src/core/utils/package.ts

@@ -20,3 +20,7 @@ export async function getPackageJson(): Promise<
     return {};
   }
 }
+
+export function isModuleInstalled(name: string) {
+  return import(name).then(() => true).catch(() => false);
+}

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

@@ -216,7 +216,20 @@ export const fakeResolvedConfig = fakeObjectCreator<ResolvedConfig>(() => {
     entrypointsDir: fakeDir(),
     env: { browser, command, manifestVersion, mode },
     fsCache: mock<FsCache>(),
-    imports: {},
+    imports: {
+      eslintrc: {
+        enabled: faker.datatype.boolean(),
+        filePath: fakeFile(),
+        globalsPropValue: faker.helpers.arrayElement([
+          true,
+          false,
+          'readable',
+          'readonly',
+          'writable',
+          'writeable',
+        ] as const),
+      },
+    },
     logger: mock(),
     manifest: fakeUserManifest(),
     manifestVersion,
@@ -236,6 +249,10 @@ export const fakeResolvedConfig = fakeObjectCreator<ResolvedConfig>(() => {
     analysis: {
       enabled: false,
       template: 'treemap',
+      outputFile: fakeFile(),
+      outputDir: fakeDir(),
+      outputName: 'stats',
+      keepArtifacts: false,
     },
     zip: {
       artifactTemplate: '{{name}}-{{version}}.zip',

src/core/utils/unimport.ts

@@ -1,27 +0,0 @@
-import { UnimportOptions } from 'unimport';
-import { ResolvedConfig } from '~/types';
-import { defu } from 'defu';
-
-export function getUnimportOptions(
-  config: Omit<ResolvedConfig, 'builder'>,
-): Partial<UnimportOptions | false> {
-  if (config.imports === false) return false;
-
-  const defaultOptions: Partial<UnimportOptions> = {
-    debugLog: config.logger.debug,
-    imports: [
-      { name: 'defineConfig', from: 'wxt' },
-      { name: 'fakeBrowser', from: 'wxt/testing' },
-    ],
-    presets: [
-      { package: 'wxt/client' },
-      { package: 'wxt/browser' },
-      { package: 'wxt/sandbox' },
-      { package: 'wxt/storage' },
-    ],
-    warn: config.logger.warn,
-    dirs: ['components', 'composables', 'hooks', 'utils'],
-  };
-
-  return defu(config.imports, defaultOptions);
-}

src/types/index.ts

@@ -77,7 +77,7 @@ export interface InlineConfig {
    * })
    * ```
    */
-  imports?: Partial<UnimportOptions> | false;
+  imports?: WxtUnimportOptions | false;
   /**
    * Explicitly set a browser to build for. This will override the default browser for each command,
    * and can be overridden by the command line `--browser` option.
@@ -209,6 +209,27 @@ export interface InlineConfig {
      * @default "treemap"
      */
     template?: PluginVisualizerOptions['template'];
+    /**
+     * Name of the output HTML file. Relative to the project's root directory.
+     *
+     * Changing the filename of the outputFile also effects the names of the artifacts generated
+     * when setting `keepArtifacts` to true:
+     * - "stats.html" => "stats-*.json"
+     * - "stats/bundle.html" => "bundle-*.json"
+     * - ".analysis/index.html" => "index-*.json"
+     *
+     * @default "stats.html"
+     */
+    outputFile?: string;
+    /**
+     * By default, the `stats-*.json` artifacts generated during bundle analysis are deleted. Set to
+     * `true` to keep them.
+     *
+     * One stats file is output per build step.
+     *
+     * @default false
+     */
+    keepArtifacts?: boolean;
   };
   /**
    * Add additional paths to the `.wxt/tsconfig.json`. Use this instead of overwriting the `paths`
@@ -878,7 +899,7 @@ export interface ResolvedConfig {
   manifestVersion: TargetManifestVersion;
   env: ConfigEnv;
   logger: Logger;
-  imports: false | Partial<UnimportOptions>;
+  imports: false | WxtResolvedUnimportOptions;
   manifest: UserManifest;
   fsCache: FsCache;
   server?: WxtDevServer;
@@ -895,6 +916,13 @@ export interface ResolvedConfig {
   analysis: {
     enabled: boolean;
     template: NonNullable<PluginVisualizerOptions['template']>;
+    /** Absolute file path to the `stats.html` file */
+    outputFile: string;
+    /** The directory where the final `stats.html` file is located */
+    outputDir: string;
+    /** Name of the `stats.html` file, minus ".html" */
+    outputName: string;
+    keepArtifacts: boolean;
   };
   userConfigMetadata: Omit<C12ResolvedConfig<UserConfig>, 'config'>;
   /**
@@ -926,3 +954,51 @@ export type VirtualEntrypointType =
   | 'content-script-isolated-world'
   | 'background'
   | 'unlisted-script';
+
+export type EslintGlobalsPropValue =
+  | boolean
+  | 'readonly'
+  | 'readable'
+  | 'writable'
+  | 'writeable';
+
+export interface Eslintrc {
+  /**
+   * When true, generates a file that can be used by ESLint to know which variables are valid globals.
+   *
+   * - `'auto'`: Check if eslint is installed, and if it is, generate the helper file
+   * - `true`: Generate the helper file
+   * - `false`: Don't generate the file
+   *
+   * @default 'auto'
+   */
+  enabled?: boolean | 'auto';
+  /**
+   * File path to save the generated eslint config.
+   *
+   * @default './.wxt/eslintrc-auto-import.json'
+   */
+  filePath?: string;
+  /**
+   * @default true
+   */
+  globalsPropValue?: EslintGlobalsPropValue;
+}
+
+export interface ResolvedEslintrc {
+  enabled: boolean;
+  /** Absolute path */
+  filePath: string;
+  globalsPropValue: EslintGlobalsPropValue;
+}
+
+export type WxtUnimportOptions = Partial<UnimportOptions> & {
+  /**
+   * When eslint is installed,
+   */
+  eslintrc?: Eslintrc;
+};
+
+export type WxtResolvedUnimportOptions = Partial<UnimportOptions> & {
+  eslintrc: ResolvedEslintrc;
+};

templates/react/_gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 .output
 stats.html
+stats-*.json
 .wxt
 web-ext.config.ts
 

templates/solid/_gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 .output
 stats.html
+stats-*.json
 .wxt
 web-ext.config.ts
 

templates/svelte/_gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 .output
 stats.html
+stats-*.json
 .wxt
 web-ext.config.ts
 

templates/vanilla/_gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 .output
 stats.html
+stats-*.json
 .wxt
 web-ext.config.ts
 

templates/vue/_gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 .output
 stats.html
+stats-*.json
 .wxt
 web-ext.config.ts