fix: Don't crash background service worker when using `import.meta.ur…

…l` (#402)

demo/src/entrypoints/background.ts

@@ -7,6 +7,7 @@ export default defineBackground({
     console.log(browser.runtime.id);
     logId();
     console.log({
+      url: import.meta.url,
       browser: import.meta.env.BROWSER,
       chrome: import.meta.env.CHROME,
       firefox: import.meta.env.FIREFOX,

src/core/builders/vite/index.ts

@@ -63,6 +63,7 @@ export async function createViteBuilder(
       wxtPlugins.noopBackground(),
       wxtPlugins.globals(wxtConfig),
       wxtPlugins.excludeBrowserPolyfill(wxtConfig),
+      wxtPlugins.defineImportMeta(),
     );
     if (wxtConfig.analysis.enabled) {
       config.plugins.push(wxtPlugins.bundleAnalysis());

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

@@ -0,0 +1,19 @@
+/**
+ * Overrides definitions for `import.meta.*`
+ *
+ * - `import.meta.url`: Without this, background service workers crash trying to access
+ *   `document.location`, see https://github.com/wxt-dev/wxt/issues/392
+ */
+export function defineImportMeta() {
+  return {
+    name: 'wxt:define',
+    config() {
+      return {
+        define: {
+          // This works for all extension contexts, including background service worker
+          'import.meta.url': 'self.location.href',
+        },
+      };
+    },
+  };
+}

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

@@ -12,3 +12,4 @@ export * from './globals';
 export * from './webextensionPolyfillMock';
 export * from './excludeBrowserPolyfill';
 export * from './entrypointGroupGlobals';
+export * from './defineImportMeta';