chore(release): v0.12.2

.github/workflows/validate.yml

@@ -13,6 +13,12 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
       - run: pnpm format:check
+  lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm lint
   type-check:
     runs-on: ubuntu-22.04
     steps:

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## v0.12.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.12.1...v0.12.2)
+
+### 🚀 Enhancements
+
+- Support PNPM without hoisting dependencies ([#291](https://github.com/wxt-dev/wxt/pull/291))
+
+## v0.12.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.12.0...v0.12.1)
+
+### 🩹 Fixes
+
+- Upgrade `@webext-core/match-patterns` to `1.0.3` ([#289](https://github.com/wxt-dev/wxt/pull/289))
+- Fix `package.json` lint errors ([#290](https://github.com/wxt-dev/wxt/pull/290))
+
+### 🏡 Chore
+
+- Upgrade templates to `wxt@^0.12.0` ([#285](https://github.com/wxt-dev/wxt/pull/285))
+
 ## v0.12.0
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.11.2...v0.12.0)
@@ -24,7 +45,14 @@
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  Add support for "main world" content scripts ([#284](https://github.com/wxt-dev/wxt/pull/284))
+`defineContentScript` and `defineBackground` are now exported from `wxt/sandbox` instead of `wxt/client`. ([#284](https://github.com/wxt-dev/wxt/pull/284))
+
+- If you use auto-imports, no changes are required.
+- If you have disabled auto-imports, you'll need to manually update your import statements:
+   ```diff
+   - import { defineBackground, defineContentScript } from 'wxt/client';
+   + import { defineBackground, defineContentScript } from 'wxt/sandbox';
+   ```
 
 ## v0.11.2
 

docs/.vitepress/components/UsingWxtSection.vue

@@ -11,7 +11,7 @@ const chromeExtensionIds = [
   'bfbnagnphiehemkdgmmficmjfddgfhpl', // UltraWideo
   'elfaihghhjjoknimpccccmkioofjjfkf', // StayFree - Website Blocker & Web Analytics
   'okifoaikfmpfcamplcfjkpdnhfodpkil', // Doozy: Ai Made Easy
-  'lknmjhcajhfbbglglccadlfdjbaiifig' // tl;dv - Record, Transcribe & ChatGPT for Google Meet
+  'lknmjhcajhfbbglglccadlfdjbaiifig', // tl;dv - Record, Transcribe & ChatGPT for Google Meet
 ];
 
 const { data } = useListExtensionDetails(chromeExtensionIds);

e2e/tests/auto-imports.test.ts

@@ -17,6 +17,8 @@ describe('Auto Imports', () => {
           export {}
           declare global {
             const ContentScriptContext: typeof import('wxt/client')['ContentScriptContext']
+            const InvalidMatchPattern: typeof import('wxt/sandbox')['InvalidMatchPattern']
+            const MatchPattern: typeof import('wxt/sandbox')['MatchPattern']
             const browser: typeof import('wxt/browser')['browser']
             const builtinDrivers: typeof import('wxt/storage')['builtinDrivers']
             const createContentScriptIframe: typeof import('wxt/client')['createContentScriptIframe']

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -36,39 +36,59 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./client": {
-      "import": "./dist/client.js",
-      "types": "./dist/client.d.ts"
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
     },
     "./sandbox": {
-      "import": "./dist/sandbox.js",
-      "types": "./dist/sandbox.d.ts"
+      "types": "./dist/sandbox.d.ts",
+      "import": "./dist/sandbox.js"
     },
     "./browser": {
-      "import": "./dist/browser.js",
-      "types": "./dist/browser.d.ts"
+      "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.js"
     },
     "./testing": {
-      "require": "./dist/testing.cjs",
-      "import": "./dist/testing.js",
-      "types": "./dist/testing.d.ts"
+      "import": {
+        "types": "./dist/testing.d.ts",
+        "default": "./dist/testing.js"
+      },
+      "require": {
+        "types": "./dist/testing.d.cts",
+        "default": "./dist/testing.cjs"
+      }
     },
     "./storage": {
-      "require": "./dist/storage.cjs",
-      "import": "./dist/storage.js",
-      "types": "./dist/storage.d.ts"
+      "import": {
+        "types": "./dist/storage.d.ts",
+        "default": "./dist/storage.js"
+      },
+      "require": {
+        "types": "./dist/storage.d.cts",
+        "default": "./dist/storage.cjs"
+      }
     }
   },
   "scripts": {
     "wxt": "tsx src/cli.ts",
     "build": "tsx scripts/build.ts",
     "format": "prettier --write .",
-    "format:check": "prettier --write .",
-    "compile": "tsc --noEmit",
+    "format:check": "prettier --check .",
+    "lint": "run-p -c -s lint:*",
+    "lint:eslint": "echo 'ESLint: TODO'",
+    "lint:package": "publint",
+    "compile": "run-s -c compile:*",
+    "compile:wxt": "tsc --noEmit",
+    "compile:virtual": "tsc --noEmit -p src/virtual",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
     "prepare": "simple-git-hooks",
@@ -83,7 +103,7 @@
     "@types/webextension-polyfill": "^0.10.5",
     "@webext-core/fake-browser": "^1.3.1",
     "@webext-core/isolated-element": "^1.0.4",
-    "@webext-core/match-patterns": "^1.0.2",
+    "@webext-core/match-patterns": "^1.0.3",
     "async-mutex": "^0.4.0",
     "c12": "^1.5.1",
     "cac": "^6.7.14",
@@ -129,6 +149,7 @@
     "npm-run-all": "^4.1.5",
     "p-map": "^7.0.0",
     "prettier": "^3.1.0",
+    "publint": "^0.2.6",
     "simple-git-hooks": "^2.9.0",
     "tsup": "^8.0.1",
     "tsx": "^4.6.2",

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: ^1.0.4
         version: 1.0.4
       '@webext-core/match-patterns':
-        specifier: ^1.0.2
-        version: 1.0.2
+        specifier: ^1.0.3
+        version: 1.0.3
       async-mutex:
         specifier: ^0.4.0
         version: 0.4.0
@@ -150,6 +150,9 @@ importers:
       prettier:
         specifier: ^3.1.0
         version: 3.1.0
+      publint:
+        specifier: ^0.2.6
+        version: 0.2.6
       simple-git-hooks:
         specifier: ^2.9.0
         version: 2.9.0
@@ -1614,10 +1617,6 @@ packages:
       - vue
     dev: true
 
-  /@webcomponents/webcomponentsjs@2.8.0:
-    resolution: {integrity: sha512-loGD63sacRzOzSJgQnB9ZAhaQGkN7wl2Zuw7tsphI5Isa0irijrRo6EnJii/GgjGefIFO8AIO7UivzRhFaEk9w==}
-    dev: false
-
   /@webext-core/fake-browser@1.3.1:
     resolution: {integrity: sha512-NpBl0rXL6rT3msdl9Fb1GPLd/MKJEZ3pHpxuMdlu+qKW78T6SWJqDvyAVs8VjAmYs9RHoQJc+yObxQoGWdskXQ==}
     dependencies:
@@ -1628,10 +1627,8 @@ packages:
     resolution: {integrity: sha512-jbkG+7b6Ty4fNo2o53rokCTkNRinI/0tneJSyuUCJfPzAFtyylF3IxH/WhXykXC+1Ca8ouQnjbEcpYt9IFNcUg==}
     dev: false
 
-  /@webext-core/match-patterns@1.0.2:
-    resolution: {integrity: sha512-ApmXwA2HRCgt/vXaZw8NfyV3hBqsyO7wAork4qgH+AtCJW4uRxHbMruSKJ0Flh/yOGMbrbLixd3E9Yw5dmGygw==}
-    dependencies:
-      '@webcomponents/webcomponentsjs': 2.8.0
+  /@webext-core/match-patterns@1.0.3:
+    resolution: {integrity: sha512-NY39ACqCxdKBmHgw361M9pfJma8e4AZo20w9AY+5ZjIj1W2dvXC8J31G5fjfOGbulW9w4WKpT8fPooi0mLkn9A==}
     dev: false
 
   /acorn-walk@8.2.0:
@@ -2796,6 +2793,17 @@ packages:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
   /global-dirs@3.0.1:
     resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
     engines: {node: '>=10'}
@@ -3084,6 +3092,13 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false
 
+  /ignore-walk@5.0.1:
+    resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -3835,6 +3850,13 @@ packages:
     dependencies:
       brace-expansion: 1.1.11
 
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3901,7 +3923,6 @@ packages:
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
-    dev: false
 
   /mrmime@1.0.1:
     resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
@@ -4011,6 +4032,29 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
+  /npm-bundled@2.0.1:
+    resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      npm-normalize-package-bin: 2.0.0
+    dev: true
+
+  /npm-normalize-package-bin@2.0.0:
+    resolution: {integrity: sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dev: true
+
+  /npm-packlist@5.1.3:
+    resolution: {integrity: sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      glob: 8.1.0
+      ignore-walk: 5.0.1
+      npm-bundled: 2.0.1
+      npm-normalize-package-bin: 2.0.0
+    dev: true
+
   /npm-run-all@4.1.5:
     resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
     engines: {node: '>= 4'}
@@ -4340,6 +4384,16 @@ packages:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
     dev: false
 
+  /publint@0.2.6:
+    resolution: {integrity: sha512-zMwDVwrlLnCsviDXlczhuc5nIljsjZUgbLeKNyMYqbIJLRhcW81xrKsHlEu21YUaIxpa8T66tdIqP0mZm9ym3A==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      npm-packlist: 5.1.3
+      picocolors: 1.0.0
+      sade: 1.8.1
+    dev: true
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -4582,6 +4636,13 @@ packages:
     dependencies:
       queue-microtask: 1.2.3
 
+  /sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+    dependencies:
+      mri: 1.2.0
+    dev: true
+
   /safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
     dev: false

scripts/build.ts

@@ -16,18 +16,17 @@ const startTime = Date.now();
 const outDir = 'dist';
 await fs.rm(path.join(outDir, '*'), { recursive: true, force: true });
 
-const preset: tsup.Options = {
+const preset = {
   dts: true,
   silent: true,
   sourcemap: false,
   external: [
-    'vite',
     'virtual:user-unlisted-script',
     'virtual:user-content-script-isolated-world',
     'virtual:user-content-script-main-world',
     'virtual:user-background',
   ],
-};
+} satisfies tsup.Options;
 
 function spinnerPMap(configs: tsup.Options[]) {
   let completed = 0;
@@ -89,6 +88,7 @@ const config: tsup.Options[] = [
     format: ['esm'],
     splitting: false,
     dts: false,
+    external: [...preset.external, 'wxt'],
   },
   // CJS-only
   {

src/browser.ts

@@ -17,3 +17,65 @@ export interface WxtI18n extends I18n.Static {
 }
 
 export const browser: AugmentedBrowser = originalBrowser;
+
+// re-export all the types from webextension-polyfill
+// Because webextension-polyfill uses a weird namespace with "import export", there isn't a good way
+// to get these types without re-listing them.
+/** @ignore */
+export type {
+  ActivityLog,
+  Alarms,
+  Bookmarks,
+  Action,
+  BrowserAction,
+  BrowserSettings,
+  BrowsingData,
+  CaptivePortal,
+  Clipboard,
+  Commands,
+  ContentScripts,
+  ContextualIdentities,
+  Cookies,
+  DeclarativeNetRequest,
+  Devtools,
+  Dns,
+  Downloads,
+  Events,
+  Experiments,
+  Extension,
+  ExtensionTypes,
+  Find,
+  GeckoProfiler,
+  History,
+  I18n,
+  Identity,
+  Idle,
+  Management,
+  Manifest,
+  ContextMenus,
+  Menus,
+  NetworkStatus,
+  NormandyAddonStudy,
+  Notifications,
+  Omnibox,
+  PageAction,
+  Permissions,
+  Pkcs11,
+  Privacy,
+  Proxy,
+  Runtime,
+  Scripting,
+  Search,
+  Sessions,
+  SidebarAction,
+  Storage,
+  Tabs,
+  Theme,
+  TopSites,
+  Types,
+  Urlbar,
+  UserScripts,
+  WebNavigation,
+  WebRequest,
+  Windows,
+} from 'webextension-polyfill';

src/client/content-scripts/content-script-context.ts

@@ -1,6 +1,6 @@
 import { ContentScriptDefinition } from '~/types';
 import { browser } from '~/browser';
-import { logger } from '~/client/utils/logger';
+import { logger } from '~/sandbox/utils/logger';
 import { WxtLocationChangeEvent, getUniqueEventName } from './custom-events';
 import { createLocationWatcher } from './location-watcher';
 

src/client/content-scripts/content-script-iframe.ts

@@ -1,4 +1,4 @@
-import browser from 'webextension-polyfill';
+import { browser } from '~/browser';
 import {
   ContentScriptAnchoredOptions,
   ContentScriptPositioningOptions,

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

@@ -1,6 +1,6 @@
 import { createIsolatedElement } from '@webext-core/isolated-element';
 import { browser } from '~/browser';
-import { logger } from '~/client/utils/logger';
+import { logger } from '~/sandbox/utils/logger';
 import { ContentScriptContext } from './content-script-context';
 import {
   ContentScriptAnchoredOptions,

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

@@ -9,7 +9,7 @@ export function webextensionPolyfillInlineDeps(): vite.PluginOption {
   return {
     name: 'wxt:testing-inline-deps',
     config() {
-      const wxtModules = ['wxt/browser', 'wxt/client'];
+      const wxtModules = ['wxt/browser'];
       return {
         test: {
           server: {

src/core/initialize.ts

@@ -150,14 +150,6 @@ async function cloneProject({
         consola.warn('Failed to move _gitignore to .gitignore:', err),
       );
 
-    // 3. Add .npmrc for pnpm
-    if (packageManager === 'pnpm') {
-      await fs.writeFile(
-        path.join(directory, '.npmrc'),
-        'shamefully-hoist=true\n',
-      );
-    }
-
     spinner.succeed();
   } catch (err) {
     spinner.fail();

src/core/utils/building/rebuild.ts

@@ -1,4 +1,4 @@
-import type { Manifest } from 'webextension-polyfill';
+import type { Manifest } from '~/browser';
 import { BuildOutput, EntrypointGroup, InternalConfig } from '~/types';
 import { findEntrypoints } from './find-entrypoints';
 import { generateTypesDir } from './generate-wxt-dir';

src/core/utils/content-scripts.ts

@@ -1,4 +1,4 @@
-import type { Manifest } from 'webextension-polyfill';
+import type { Manifest } from '~/browser';
 import { ContentScriptEntrypoint, InternalConfig } from '~/types';
 import { resolvePerBrowserOption } from './entrypoints';
 

src/core/utils/manifest.ts

@@ -1,4 +1,4 @@
-import type { Manifest } from 'webextension-polyfill';
+import type { Manifest } from '~/browser';
 import {
   Entrypoint,
   BackgroundEntrypoint,

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

@@ -4,7 +4,7 @@
 import { resolve } from 'path';
 import { faker } from '@faker-js/faker';
 import merge from 'lodash.merge';
-import type { Manifest } from 'webextension-polyfill';
+import type { Manifest } from '~/browser';
 import {
   FsCache,
   InternalConfig,

src/sandbox/index.ts

@@ -6,3 +6,4 @@
 export * from './define-unlisted-script';
 export * from './define-background';
 export * from './define-content-script';
+export * from '@webext-core/match-patterns';

src/sandbox/utils/logger.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 function print(method: (...args: any[]) => void, ...args: any[]) {
   if (import.meta.env.MODE === 'production') return;
 

src/storage.ts

@@ -8,7 +8,7 @@ import {
   defineDriver,
   Storage,
 } from 'unstorage';
-import browser, { Storage as BrowserStorage } from 'webextension-polyfill';
+import { browser, Storage as BrowserStorage } from '~/browser';
 
 export interface WebExtensionDriverOptions {
   storageArea: 'sync' | 'local' | 'managed' | 'session';

src/types/external.ts

@@ -1,5 +1,5 @@
 import type * as vite from 'vite';
-import type { Manifest, Scripting } from 'webextension-polyfill';
+import type { Manifest, Scripting } from '~/browser';
 import { UnimportOptions } from 'unimport';
 import { LogLevel } from 'consola';
 import { ContentScriptContext } from '../client/content-scripts/content-script-context';

src/types/globals.d.ts

@@ -0,0 +1,7 @@
+// Globals defined by the vite-plugins/devServerGlobals.ts and utils/globals.ts
+declare const __COMMAND__: 'build' | 'serve';
+declare const __DEV_SERVER_PROTOCOL__: string;
+declare const __DEV_SERVER_HOSTNAME__: string;
+declare const __DEV_SERVER_PORT__: string;
+declare const __MANIFEST_VERSION__: 2 | 3;
+declare const __ENTRYPOINT__: string;

src/types/internal.ts

@@ -11,7 +11,7 @@ import {
 } from './external';
 import { UnimportOptions } from 'unimport';
 import { ResolvedConfig } from 'c12';
-import type { Manifest } from 'webextension-polyfill';
+import type { Manifest } from '~/browser';
 import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
 
 export interface InternalConfig {

src/virtual/README.md

@@ -0,0 +1,11 @@
+# WXT Virtual Entrypoints
+
+This folder contains scripts that are either loaded as entrypoints to JS files or included in HTML files, just like a project using WXT might load their own scripts.
+
+While they are bundled and shipped inside WXT, Vite considers them apart of your project's source code, not WXT's. This means they cannot import 3rd party modules directly, otherwise `pnpm i --shamefully-hoist=false` and Yarn PnP will fail.
+
+For this reason, the virtual entrypoints get their own TS project to isolate them from the rest of the project. They can only import from `wxt/*` or utils that don't have any imports from node_modules, like the logger.
+
+When bundling WXT for publishing to NPM, all the `wxt/*` imports are marked as external and resolved when building your application. Other imports are added inline.
+
+See https://github.com/wxt-dev/wxt/issues/286#issuecomment-1858888390 for more details.

src/virtual/background-entrypoint.ts

@@ -1,9 +1,9 @@
 import definition from 'virtual:user-background';
-import { setupWebSocket } from '../client/utils/setup-web-socket';
-import { logger } from '../client/utils/logger';
-import browser from 'webextension-polyfill';
-import { keepServiceWorkerAlive } from '../client/utils/keep-service-worker-alive';
-import { reloadContentScript } from '../client/utils/reload-content-scripts';
+import { setupWebSocket } from './utils/setup-web-socket';
+import { logger } from '../sandbox/utils/logger';
+import { browser } from 'wxt/browser';
+import { keepServiceWorkerAlive } from './utils/keep-service-worker-alive';
+import { reloadContentScript } from './utils/reload-content-scripts';
 
 if (__COMMAND__ === 'serve') {
   try {

src/virtual/content-script-isolated-world-entrypoint.ts

@@ -1,6 +1,6 @@
 import definition from 'virtual:user-content-script-isolated-world';
-import { logger } from '~/client/utils/logger';
-import { ContentScriptContext } from '~/client/content-scripts/content-script-context';
+import { logger } from '../sandbox/utils/logger';
+import { ContentScriptContext } from 'wxt/client';
 
 (async () => {
   try {

src/virtual/content-script-main-world-entrypoint.ts

@@ -1,5 +1,5 @@
 import definition from 'virtual:user-content-script-main-world';
-import { logger } from '~/client/utils/logger';
+import { logger } from '../sandbox/utils/logger';
 
 (async () => {
   try {

src/virtual/mock-browser.ts

@@ -1,3 +1,3 @@
-import { fakeBrowser as mockBrowser } from '~/testing';
+import { fakeBrowser as mockBrowser } from 'wxt/testing';
 
 export default mockBrowser;

src/virtual/reload-html.ts

@@ -1,7 +1,5 @@
-/// <reference types="vite/client" />
-
-import { logger } from '~/client/utils/logger';
-import { setupWebSocket } from '~/client/utils/setup-web-socket';
+import { logger } from '../sandbox/utils/logger';
+import { setupWebSocket } from './utils/setup-web-socket';
 
 if (__COMMAND__ === 'serve') {
   try {

src/virtual/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["vite/client", "../types/globals.d.ts"]
+  },
+  "include": ["./*"]
+}

src/virtual/unlisted-script-entrypoint.ts

@@ -1,5 +1,5 @@
 import definition from 'virtual:user-unlisted-script';
-import { logger } from '~/client/utils/logger';
+import { logger } from '../sandbox/utils/logger';
 
 (async () => {
   try {

src/virtual/utils/keep-service-worker-alive.ts

@@ -1,4 +1,4 @@
-import browser from 'webextension-polyfill';
+import { browser } from 'wxt/browser';
 
 /**
  * https://developer.chrome.com/blog/longer-esw-lifetimes/

src/virtual/utils/reload-content-scripts.ts

@@ -1,8 +1,14 @@
-import browser, { Manifest } from 'webextension-polyfill';
-import { logger } from './logger';
-import { MatchPattern } from '@webext-core/match-patterns';
+import { browser } from 'wxt/browser';
+import { logger } from '../../sandbox/utils/logger';
+import { MatchPattern } from 'wxt/sandbox';
 
-export function reloadContentScript(contentScript: Manifest.ContentScript) {
+interface ContentScript {
+  matches: string[];
+  js?: string[];
+  css?: string[];
+}
+
+export function reloadContentScript(contentScript: ContentScript) {
   const manifest = browser.runtime.getManifest();
   if (manifest.manifest_version == 2) {
     void reloadContentScriptMv2(contentScript);
@@ -11,9 +17,7 @@ export function reloadContentScript(contentScript: Manifest.ContentScript) {
   }
 }
 
-export async function reloadContentScriptMv3(
-  contentScript: Manifest.ContentScript,
-) {
+export async function reloadContentScriptMv3(contentScript: ContentScript) {
   const id = `wxt:${contentScript.js![0]}`;
   logger.log('Reloading content script:', contentScript);
   const registered = await browser.scripting.getRegisteredContentScripts();
@@ -41,8 +45,6 @@ export async function reloadContentScriptMv3(
   await Promise.all(matchingTabs.map((tab) => browser.tabs.reload(tab.id)));
 }
 
-export async function reloadContentScriptMv2(
-  contentScript: Manifest.ContentScript,
-) {
+export async function reloadContentScriptMv2(contentScript: ContentScript) {
   throw Error('TODO: reloadContentScriptMv2');
 }

src/virtual/utils/setup-web-socket.ts

@@ -1,4 +1,4 @@
-import { logger } from './logger';
+import { logger } from '../../sandbox/utils/logger';
 
 interface WebSocketMessage {
   type: string;

src/virtual/virtual-module-globals.d.ts

@@ -1,34 +1,39 @@
 // Types required to make the virtual modules happy.
 
-declare module '*?raw' {
-  const content: any;
-  export default content;
-}
-
 declare module 'virtual:user-background' {
-  const definition: import('~/types').BackgroundDefinition;
+  const definition: { main: () => void };
   export default definition;
 }
 
 declare module 'virtual:user-content-script-isolated-world' {
-  const definition: import('~/types').ContentScriptIsolatedWorldDefinition;
+  const definition: {
+    main: (
+      ctx: import('wxt/client').ContentScriptContext,
+    ) => void | Promise<void>;
+  };
   export default definition;
 }
 
 declare module 'virtual:user-content-script-main-world' {
-  const definition: import('~/types').ContentScriptMainWorldDefinition;
+  const definition: { main: () => void | Promise<void> };
   export default definition;
 }
 
 declare module 'virtual:user-unlisted-script' {
-  const definition: import('~/types').UnlistedScriptDefinition;
+  const definition: { main: () => void | Promise<void> };
   export default definition;
 }
 
-// Globals defined by the vite-plugins/devServerGlobals.ts and utils/globals.ts
-declare const __COMMAND__: 'build' | 'serve';
-declare const __DEV_SERVER_PROTOCOL__: string;
-declare const __DEV_SERVER_HOSTNAME__: string;
-declare const __DEV_SERVER_PORT__: string;
-declare const __MANIFEST_VERSION__: 2 | 3;
-declare const __ENTRYPOINT__: string;
+declare module 'wxt/browser' {
+  export const browser: import('webextension-polyfill').Browser;
+}
+
+declare module 'wxt/client' {
+  export class ContentScriptContext {
+    constructor(name: string, options: any);
+  }
+}
+
+declare module 'wxt/testing' {
+  export const fakeBrowser: import('webextension-polyfill').Browser;
+}

templates/react/package.json

@@ -23,6 +23,6 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.2",
-    "wxt": "^0.11.0"
+    "wxt": "^0.12.0"
   }
 }

templates/solid/package.json

@@ -20,6 +20,6 @@
   "devDependencies": {
     "typescript": "^5.3.2",
     "vite-plugin-solid": "^2.8.0",
-    "wxt": "^0.11.0"
+    "wxt": "^0.12.0"
   }
 }

templates/svelte/package.json

@@ -20,6 +20,6 @@
     "svelte-check": "^3.4.6",
     "tslib": "^2.6.0",
     "typescript": "^5.3.2",
-    "wxt": "^0.11.0"
+    "wxt": "^0.12.0"
   }
 }

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.3.2",
-    "wxt": "^0.11.0"
+    "wxt": "^0.12.0"
   }
 }

templates/vue/package.json

@@ -21,6 +21,6 @@
     "@vitejs/plugin-vue": "^4.5.1",
     "typescript": "^5.3.2",
     "vue-tsc": "^1.8.25",
-    "wxt": "^0.11.0"
+    "wxt": "^0.12.0"
   }
 }

tsconfig.json

@@ -5,5 +5,5 @@
       "~/*": ["./src/*"]
     }
   },
-  "exclude": ["dist", "demo", "e2e/dist", "templates"]
+  "exclude": ["dist", "demo", "e2e/dist", "templates", "src/virtual"]
 }

vitest.workspace.ts

@@ -20,6 +20,7 @@ const resolve = {
   alias: {
     '~': path.resolve('src'),
     'webextension-polyfill': path.resolve('src/virtual/mock-browser'),
+    'wxt/testing': path.resolve('src/testing'),
   },
 };