WIP

packages/wxt/src/core/builders/vite/plugins/extensionApiMock.ts

@@ -14,18 +14,17 @@ export function extensionApiMock(config: ResolvedConfig): vite.PluginOption {
   return {
     name: 'wxt:extension-api-mock',
     config() {
-      const mockBrowser = path.resolve(
+      const replacement = path.resolve(
         config.wxtModuleDir,
         'dist/virtual/mock-browser',
       );
       return {
         resolve: {
-          alias: {
-            'webextension-polyfill': mockBrowser,
-            'wxt/browser': mockBrowser,
-            'wxt/browser/webextension-polyfill': mockBrowser,
-            'wxt/browser/chrome': mockBrowser,
-          },
+          alias: [
+            { find: 'webextension-polyfill', replacement },
+            // wxt/browser, wxt/browser/...
+            { find: /^wxt\/browser.*/, replacement },
+          ],
         },
         ssr: {
           // Inline all WXT modules so vite processes them so the aliases can

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

@@ -25,6 +25,7 @@ import { normalizePath } from '../paths';
 import glob from 'fast-glob';
 import { builtinModules } from '../../../builtin-modules';
 import { getEslintVersion } from '../eslint';
+import { ensureDependencyInstalled } from 'nypm';
 
 /**
  * Given an inline config, discover the config file if necessary, merge the results, resolve any
@@ -146,6 +147,17 @@ export async function resolveConfig(
     {},
   );
 
+  const experimental = defu(mergedConfig.experimental, {
+    extensionApi: 'webextension-polyfill' as const,
+    entrypointImporter: 'jiti' as const,
+  });
+
+  if (experimental.extensionApi === 'chrome') {
+    await ensureDependencyInstalled('@types/chrome', {
+      dev: true,
+    });
+  }
+
   return {
     browser,
     command,
@@ -174,10 +186,7 @@ export async function resolveConfig(
     analysis: resolveAnalysisConfig(root, mergedConfig),
     userConfigMetadata: userConfigMetadata ?? {},
     alias,
-    experimental: defu(mergedConfig.experimental, {
-      extensionApi: 'webextension-polyfill' as const,
-      entrypointImporter: 'jiti' as const,
-    }),
+    experimental,
     dev: {
       server: devServerConfig,
       reloadCommand,
@@ -324,7 +333,12 @@ async function getUnimportOptions(
         // ignored.
         ignore: ['options'],
       },
-      { package: 'wxt/browser' },
+      {
+        package:
+          config.experimental?.extensionApi === 'chrome'
+            ? 'wxt/browser/chrome'
+            : 'wxt/browser',
+      },
       { package: 'wxt/sandbox' },
       { package: 'wxt/storage' },
     ],

pnpm-lock.yaml

@@ -380,6 +380,9 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
     devDependencies:
+      '@types/chrome':
+        specifier: ^0.0.268
+        version: 0.0.268
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -7263,7 +7266,7 @@ packages:
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
     dependencies:
-      vite: 5.3.4(@types/node@20.14.11)
+      vite: 5.3.4(sass@1.77.8)
     dev: true
 
   /vitest@2.0.3: