bump version for early release

update test snapshot
get it working
2024-04-19 20:34:36 -05:00 · 2024-04-19 20:33:21 -05:00 · 2024-04-19 20:31:32 -05:00 · 2024-04-19 16:25:17 -05:00
416 changed files with 7248 additions and 16049 deletions
@@ -0,0 +1,50 @@
+---
+name: Bug report
+about: Report an issue with WXT
+title: ''
+labels: triage
+assignees: ''
+---
+
+### Describe the bug
+
+A clear and concise description of what the bug is.
+
+### To Reproduce
+
+Share minimal reproduction. Examples of a minimal reproduction:
+
+- PR with a failing test case
+- ZIP file containing a minimal WXT project (be sure to include your lockfile!!)
+
+> **_⚠️ If you don't upload a minimal reproduction, your issue will be closed until a reproduction is added._**
+>
+> Why? https://antfu.me/posts/why-reproductions-are-required
+
+Steps to reproduce the bug using the reproduction:
+
+1. Install dependencies: `pnpm i`
+2. Start dev mode: `pnpm dev`
+3. Click this...
+4. Do that...
+5. Etc...
+
+### Expected behavior
+
+A clear and concise description of what you expected to happen.
+
+### Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+### Environment
+
+<!--- Run `npx envinfo --system --browsers --binaries --npmPackages wxt,vite` and paste the output below -->
+
+```
+Paste output here
+```
+
+### Additional context
+
+Add any other context about the problem here, otherwise you can delete this section.
@@ -1,74 +0,0 @@
-name: "\U0001F41E Bug report"
-description: Report an issue with WXT
-labels: [pending-triage]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
-      placeholder: I am doing ... What I expect is ... What actually happening is ...
-    validations:
-      required: true
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: |
-        Please provide a minimal reproduction. This can include:
-
-        - A PR with a failing test case
-        - A link to a github repo
-        - A ZIP you upload to this issue
-
-        A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required ([Why?](https://antfu.me/posts/why-reproductions-are-required)). If a report is vague (e.g. just a generic error message) and has no reproduction or a partial reproduction, it will be closed immediately and labeled with as "needs-reproduction". Once a reproduction is provided, it will be re-opened.
-      placeholder: Reproduction URL or attach a ZIP
-    validations:
-      required: true
-  - type: textarea
-    id: reproduction-steps
-    attributes:
-      label: Steps to reproduce
-      description: Please provide any reproduction steps that may need to be described. E.g. if it happens only when running the dev or build script make sure it's clear which one to use.
-      placeholder: Run `npm install` followed by `npm run dev`
-  - type: textarea
-    id: system-info
-    attributes:
-      label: System Info
-      description: Output of `npx envinfo --system --browsers --binaries --npmPackages wxt,vite`
-      render: shell
-      placeholder: System, Binaries, Browsers
-    validations:
-      required: true
-  - type: dropdown
-    id: package-manager
-    attributes:
-      label: Used Package Manager
-      description: Select the used package manager
-      options:
-        - npm
-        - yarn
-        - pnpm
-        - bun
-    validations:
-      required: true
-  - type: checkboxes
-    id: checkboxes
-    attributes:
-      label: Validations
-      description: Before submitting the issue, please make sure you do the following
-      options:
-        - label: Read the [Contributing Guidelines](https://github.com/wxt-dev/wxt/blob/main/CONTRIBUTING.md).
-          required: true
-        - label: Read the [docs](https://wxt.dev/guide/installation.html).
-          required: true
-        - label: Check that there isn't [already an issue](https://github.com/wxt-dev/wxt/issues) that reports the same bug to avoid creating a duplicate.
-          required: true
-        - label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/wxt-dev/wxt/discussions) or join our [Discord Chat Server](https://discord.gg/ZFsZqGery9).
-          required: true
-        - label: The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
-          required: true
@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Discord Chat
-    url: https://discord.gg/ZFsZqGery9
-    about: Ask questions and discuss with other WXT users in real time.
-  - name: Questions & Discussions
-    url: https://github.com/wxt-dev/wxt/discussions
-    about: Use GitHub discussions for message-board style questions and discussions.
@@ -4,7 +4,9 @@ runs:
  using: composite
  steps:
    - name: Setup PNPM
-      uses: pnpm/action-setup@v4
+      uses: pnpm/action-setup@v3
+      with:
+        version: 8
    - name: Setup NodeJS
      uses: actions/setup-node@v4
      with:
@@ -1,18 +1,6 @@
 name: Release
 on:
  workflow_dispatch:
-    inputs:
-      package:
-        description: Package to release
-        default: wxt
-        type: choice
-        options:
-          - wxt
-          - module-react
-          - module-vue
-          - module-svelte
-          - module-solid
-          - auto-icons

 jobs:
  validate:
@@ -34,18 +22,14 @@ jobs:
        run: |
          git config user.email "github-actions@users.noreply.github.com"
          git config user.name "GitHub Actions"
-          pnpm tsx scripts/bump-package-version.ts ${{ inputs.package }}
+          pnpx changelogen@latest --release
          git push
          git push --tags

      - name: NPM
        run: |
          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
-          pnpm build
          pnpm publish
-        working-directory: packages/${{ inputs.package }}

      - name: GitHub Release
-        run: pnpm tsx scripts/create-github-release.ts ${{ inputs.package }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: pnpx changelogen@latest gh release --token ${{ secrets.GITHUB_TOKEN }}
@@ -1,24 +1,22 @@
 name: Sync Releases
 on:
  workflow_dispatch:
-    inputs:
-      package:
-        description: Package to sync
-        default: wxt
-        type: choice
-        options:
-          - wxt
-          - module-react
-          - module-vue
-          - module-svelte
-          - module-solid
+  push:
+    branches:
+      - main
+    paths:
+      - CHANGELOG.md

 jobs:
  sync:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm tsx scripts/sync-releases.ts ${{ inputs.package }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: pnpm
+      - run: pnpm sync-releases all --token ${{ secrets.GITHUB_TOKEN }}
@@ -13,29 +13,27 @@ jobs:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
      - run: pnpm check
-  builds:
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm buildc all
-  build-demo:
+  validate-demo:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
+      - run: pnpm tsc --noEmit
+        working-directory: demo
      - run: pnpm build:all
-        working-directory: packages/wxt-demo
+        working-directory: demo
      - run: pnpm wxt zip
-        working-directory: packages/wxt-demo
+        working-directory: demo
+      - run: pnpm vitest run
+        working-directory: demo
  tests:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
-      - uses: oven-sh/setup-bun@v2
+      - uses: oven-sh/setup-bun@v1
      - name: pnpm test:coverage
-        run: pnpm test:coverage -- --reporter=default --reporter=hanging-process
+        run: pnpm test:coverage --reporter=default --reporter=hanging-process
      - uses: codecov/codecov-action@v4
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -44,11 +42,10 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
-      - run: pnpm test
+      - run: pnpm test run
  template:
    runs-on: ubuntu-22.04
    strategy:
-      fail-fast: false
      matrix:
        template:
          - react
@@ -60,10 +57,9 @@ jobs:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
      - run: pnpm pack
-        working-directory: packages/wxt
      - run: npm i
        working-directory: templates/${{ matrix.template }}
-      - run: npm i -D ../../packages/wxt/wxt-*.tgz
+      - run: npm i -D ../../wxt-*.tgz
        working-directory: templates/${{ matrix.template }}
      - run: pnpm compile
        if: matrix.template != 'svelte'
@@ -17,7 +17,6 @@ web-ext.config.ts
 templates/*/pnpm-lock.yaml
 templates/*/yarn.lock
 templates/*/package-lock.json
-docs/api/reference
+docs/api
 stats.html
 .tool-versions
-.cache
@@ -0,0 +1 @@
+ignore-workspace-root-check=true
@@ -1,462 +1,5 @@
 # Changelog

-## v0.19.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.3...wxt-v0.19.4)
-
-### 🚀 Enhancements
-
- Add `injectScript` helper ([#900](https://github.com/wxt-dev/wxt/pull/900))
-
-### 🩹 Fixes
-
- Do not clear `.wxt/tsconfig.json` in `findEntrypoints` if it exists ([#898](https://github.com/wxt-dev/wxt/pull/898))
- **types:** `PublicPath` type resolution with `extensionApi: "chrome"` ([#901](https://github.com/wxt-dev/wxt/pull/901))
- Fix `createIframeUi` `page` option types ([3a8e613](https://github.com/wxt-dev/wxt/commit/3a8e613))
-
-### ❤️ Contributors
-
- Hikiko4ern ([@hikiko4ern](http://github.com/hikiko4ern))
-
-## v0.19.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.2...wxt-v0.19.3)
-
-### 🩹 Fixes
-
- Add `consola` to `wxt` dependencies ([#892](https://github.com/wxt-dev/wxt/pull/892))
- **content-script-context:** Fix initialization logic for Firefox ([#895](https://github.com/wxt-dev/wxt/pull/895))
-
-### 📖 Documentation
-
- Improve `prepare:types` hook JSDoc ([#886](https://github.com/wxt-dev/wxt/pull/886))
-
-### ❤️ Contributors
-
- Hikiko4ern ([@hikiko4ern](http://github.com/hikiko4ern))
- Himanshu Patil ([@mehimanshupatil](https://github.com/mehimanshupatil))
-
-## v0.19.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.1...wxt-v0.19.2)
-
-### 🩹 Fixes
-
- Remove unused top-level functions and variables when loading entrypoints with the `vite-node` loader ([#875](https://github.com/wxt-dev/wxt/pull/875))
- Don't default to dev mode for production builds when using `vite-node` loader ([#877](https://github.com/wxt-dev/wxt/pull/877))
-
-### 📖 Documentation
-
- Update README and homepage features with WXT modules ([ed07a49](https://github.com/wxt-dev/wxt/commit/ed07a49))
-
-### 🏡 Chore
-
- **deps:** Upgrade all dependencies ([#869](https://github.com/wxt-dev/wxt/pull/869))
-
-## v0.19.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.0...wxt-v0.19.1)
-
-### 🚀 Enhancements
-
- Auto Icons Module ([#851](https://github.com/wxt-dev/wxt/pull/851))
-
-### 🔥 Performance
-
- Tree-shake unrelated code inside `vite-node` entrypoint loader ([#867](https://github.com/wxt-dev/wxt/pull/867))
-
-### 🩹 Fixes
-
- Define web globals when importing entrypoints ([#865](https://github.com/wxt-dev/wxt/pull/865))
-
-### ❤️ Contributors
-
- Florian Metz ([@Timeraa](http://github.com/Timeraa))
-
-## v0.19.0
-
-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.15...wxt-v0.19.0)
-
-### 🚀 Enhancements
-
- **experimental:** First-class support for excluding `webextension-polyfill` ([#847](https://github.com/wxt-dev/wxt/pull/847))
- **storage:** `init` option and rename `defaultValue` to `fallback` ([#827](https://github.com/wxt-dev/wxt/pull/827))
- **hooks:** Add `prepare:publicPaths` hook ([#858](https://github.com/wxt-dev/wxt/pull/858))
- ⚠️  Use `vite-node` to load entrypoints by default ([#859](https://github.com/wxt-dev/wxt/pull/859))
-
-### 🔥 Performance
-
- **size:** ⚠️  Switch from `tsup` to `unbuild` for building WXT ([#848](https://github.com/wxt-dev/wxt/pull/848))
-
-### 🩹 Fixes
-
- Wrong module hook type ([#849](https://github.com/wxt-dev/wxt/pull/849))
-
-### 📖 Documentation
-
- Update labels in content script UI positioning screenshot ([2b6ff8d](https://github.com/wxt-dev/wxt/commit/2b6ff8d))
- Add upgrade guide and breaking changes ([#860](https://github.com/wxt-dev/wxt/pull/860))
-
-### 🏡 Chore
-
- **deps:** Bump all non-major dependencies ([#834](https://github.com/wxt-dev/wxt/pull/834))
- **dev-deps:** Upgrade `vitest` from 1.6 to 2.0 ([#836](https://github.com/wxt-dev/wxt/pull/836))
- **deps:** Upgrade `async-mutex` from 0.4.1 to 0.5.0 ([#837](https://github.com/wxt-dev/wxt/pull/837))
- **deps:** Upgrade `esbuild` from 0.19.12 to 0.23.0 ([#838](https://github.com/wxt-dev/wxt/pull/838))
- **deps:** Upgrade `vite-node` from 1.6 to 2.0 ([#839](https://github.com/wxt-dev/wxt/pull/839))
- **deps:** Upgrade `ora` from 7 to 8 ([#841](https://github.com/wxt-dev/wxt/pull/841))
- **deps:** Upgrade `webextension-polyfill` from 0.10 to 0.12 ([#842](https://github.com/wxt-dev/wxt/pull/842))
- **deps:** Upgrade `minimatch` from 9 to 10 ([#840](https://github.com/wxt-dev/wxt/pull/840))
- **dev-deps:** Upgrade `happy-dom` from 13 to 14 ([#843](https://github.com/wxt-dev/wxt/pull/843))
-
-### ❤️ Contributors
-
- Florian Metz ([@Timeraa](http://github.com/Timeraa))
-
-## v0.18.15
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.14...wxt-v0.18.15)
-
-### 🩹 Fixes
-
- Don't throw error if localization file is missing ([#832](https://github.com/wxt-dev/wxt/pull/832))
- Build latest version of package before packing ([88a1244](https://github.com/wxt-dev/wxt/commit/88a1244))
- Externalize app config during dependency optimization ([#833](https://github.com/wxt-dev/wxt/pull/833))
-
-### 📖 Documentation
-
- Fix links to Guide pages ([#821](https://github.com/wxt-dev/wxt/pull/821))
-
-### ❤️ Contributors
-
- Eetann ([@eetann](http://github.com/eetann))
-
-## v0.18.14
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.13...wxt-v0.18.14)
-
-### 🩹 Fixes
-
- **modules:** Add types from all wxt node_modules, not just ones with config ([#817](https://github.com/wxt-dev/wxt/pull/817))
-
-## v0.18.13
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.12...wxt-v0.18.13)
-
-### 🚀 Enhancements
-
- **config:** `dev.server.hostname` ([#807](https://github.com/wxt-dev/wxt/pull/807))
- Add XPath support to getAnchor() ([#813](https://github.com/wxt-dev/wxt/pull/813))
-
-### 🩹 Fixes
-
- Add debug logs for vite builder ([#816](https://github.com/wxt-dev/wxt/pull/816))
-
-### ❤️ Contributors
-
- Ayub Kokabi ([@sir-kokabi](http://github.com/sir-kokabi))
-
-## v0.18.12
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.11...wxt-v0.18.12)
-
-### 🚀 Enhancements
-
- Support runtime config in `app.config.ts` ([#792](https://github.com/wxt-dev/wxt/pull/792))
-
-### 🔥 Performance
-
- Create zip using streams ([#793](https://github.com/wxt-dev/wxt/pull/793))
-
-### 🩹 Fixes
-
- Add missing name to ESLint v9 autoImports config ([#801](https://github.com/wxt-dev/wxt/pull/801))
-
-### 📖 Documentation
-
- Update README ([#802](https://github.com/wxt-dev/wxt/pull/802))
-
-### 🏡 Chore
-
- **deps:** Upgrade `web-ext-run` (0.2.0 to 0.2.1) ([#804](https://github.com/wxt-dev/wxt/pull/804))
-
-### ❤️ Contributors
-
- Ntnyq ([@ntnyq](http://github.com/ntnyq))
- Florian Metz ([@Timeraa](http://github.com/Timeraa))
-
-## v0.18.11
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.10...wxt-v0.18.11)
-
-### 🚀 Enhancements
-
- Add eslint 9 config support ([#762](https://github.com/wxt-dev/wxt/pull/762))
-
-### 🩹 Fixes
-
- Respect custom `outDir` when cleaning and zipping ([#774](https://github.com/wxt-dev/wxt/pull/774))
- **dev:** Catch error when attempting to reload a tab in a saved tab group ([#786](https://github.com/wxt-dev/wxt/pull/786))
-
-### 🏡 Chore
-
- Replace consola with wxt.logger ([#776](https://github.com/wxt-dev/wxt/pull/776))
- **deps:** Upgrade non-major deps ([#778](https://github.com/wxt-dev/wxt/pull/778))
-
-### ❤️ Contributors
-
- KnightYoshi ([@KnightYoshi](http://github.com/KnightYoshi))
- Asakura Mizu ([@AsakuraMizu](http://github.com/AsakuraMizu))
-
-## v0.18.10
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.9...wxt-v0.18.10)
-
-### 🚀 Enhancements
-
- Add `prepare:types` hook to extend `.wxt/` directory generation ([#767](https://github.com/wxt-dev/wxt/pull/767))
- **modules:** Allow adding generated public files ([#769](https://github.com/wxt-dev/wxt/pull/769))
-
-### 🩹 Fixes
-
- Await `prepare:types` hook ([b29d49c](https://github.com/wxt-dev/wxt/commit/b29d49c))
-
-### 🏡 Chore
-
- Refactor package manager test fixtures ([39f6c29](https://github.com/wxt-dev/wxt/commit/39f6c29))
- Consolidate `unimport` code into a built-in module ([#771](https://github.com/wxt-dev/wxt/pull/771))
-
-## v0.18.9
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.8...wxt-v0.18.9)
-
-### 🚀 Enhancements
-
- **experimental:** Replace `viteRuntime` option with `entrypointImporter` option, and implement `vite-node` importer ([#761](https://github.com/wxt-dev/wxt/pull/761))
-
-## v0.18.8
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.7...wxt-v0.18.8)
-
-### 🚀 Enhancements
-
- **dev:** Reload extension when public files change ([#752](https://github.com/wxt-dev/wxt/pull/752))
-
-### 🩹 Fixes
-
- Don't load plugins twice in HTML pages ([#746](https://github.com/wxt-dev/wxt/pull/746))
- Ignore .wxt file changes in dev ([#755](https://github.com/wxt-dev/wxt/pull/755))
- **modules:** `addViteConfig` ignored user vite config ([#760](https://github.com/wxt-dev/wxt/pull/760))
-
-### 🏡 Chore
-
- Refactor client web socket util ([#753](https://github.com/wxt-dev/wxt/pull/753))
- Add E2E test for `addImportPreset` ([9fc6408](https://github.com/wxt-dev/wxt/commit/9fc6408))
-
-## v0.18.7
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.6...wxt-v0.18.7)
-
-### 🩹 Fixes
-
- **dev:** Fix CSP error loading HTML plugins ([#723](https://github.com/wxt-dev/wxt/pull/723))
- Generalize react-refresh preamble logic to virtualize all inline scripts ([#728](https://github.com/wxt-dev/wxt/pull/728))
- **zip:** Revert dotfile changes from #674 ([#742](https://github.com/wxt-dev/wxt/pull/742), [#674](https://github.com/wxt-dev/wxt/issues/674))
-
-### 🏡 Chore
-
- **deps:** Upgrade and sync all dependencies ([#725](https://github.com/wxt-dev/wxt/pull/725))
- Extract build cache script to NPM package ([#737](https://github.com/wxt-dev/wxt/pull/737))
-
-## v0.18.6
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.5...wxt-v0.18.6)
-
-### 🚀 Enhancements
-
- **modules:** Add new `addImportPreset` helper function ([#720](https://github.com/wxt-dev/wxt/pull/720))
-
-### 🩹 Fixes
-
- **types:** Module `options` param is optional, but types did not reflect that ([#719](https://github.com/wxt-dev/wxt/pull/719))
- **modules:** Re-export `WxtModule` type from `wxt/modules` to prevent TS2742 ([#721](https://github.com/wxt-dev/wxt/pull/721))
- **modules:** Add modules to TS project so type augmentation works ([#722](https://github.com/wxt-dev/wxt/pull/722))
-
-### 🏡 Chore
-
- **dev-deps:** Upgrade typescript to 5.4 ([#718](https://github.com/wxt-dev/wxt/pull/718))
-
-## v0.18.5
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.4...wxt-v0.18.5)
-
-### 🚀 Enhancements
-
- Module system ([#672](https://github.com/wxt-dev/wxt/pull/672))
-
-### 🩹 Fixes
-
- To fix the issue with Entrypoint Side Effects link errors ([#705](https://github.com/wxt-dev/wxt/pull/705))
- **storage:** Add storage area typing for storage keys ([#708](https://github.com/wxt-dev/wxt/pull/708))
-
-### 📖 Documentation
-
- Restructure wxt.dev ([#701](https://github.com/wxt-dev/wxt/pull/701))
- Add eslintrc info to auto-imports page ([454b076](https://github.com/wxt-dev/wxt/commit/454b076))
-
-### 🏡 Chore
-
- **deps:** Bump linkedom from 0.16.8 to 0.18.2 ([#690](https://github.com/wxt-dev/wxt/pull/690))
- **deps:** Bump nypm from 0.3.6 to 0.3.8 ([#692](https://github.com/wxt-dev/wxt/pull/692))
- **deps-dev:** Bump tsx from 4.7.0 to 4.11.2 ([#699](https://github.com/wxt-dev/wxt/pull/699))
- **deps-dev:** Bump execa from 8.0.1 to 9.1.0 ([#691](https://github.com/wxt-dev/wxt/pull/691))
- Fix flakey TS config ([a257217](https://github.com/wxt-dev/wxt/commit/a257217))
- Remove log in tests ([eb3b9bc](https://github.com/wxt-dev/wxt/commit/eb3b9bc))
- **deps:** Upgrade braces to 3.0.3 ([#711](https://github.com/wxt-dev/wxt/pull/711))
-
-### 🤖 CI
-
- Add support for managing multiple changelogs ([#712](https://github.com/wxt-dev/wxt/pull/712))
-
-### ❤️ Contributors
-
- TheOnlyTails ([@TheOnlyTails](http://github.com/TheOnlyTails))
- Rxliuli ([@rxliuli](http://github.com/rxliuli))
-
-## v0.18.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.3...v0.18.4)
-
-### 🩹 Fixes
-
- Allow zipping hidden files in sources by listing them explicitly in `includeSources` ([#674](https://github.com/wxt-dev/wxt/pull/674))
- Properly invalidate content script context ([#683](https://github.com/wxt-dev/wxt/pull/683))
-
-### 📖 Documentation
-
- Update contributing guidelines ([8125d74](https://github.com/wxt-dev/wxt/commit/8125d74))
-
-### ❤️ Contributors
-
- Hujiulong ([@hujiulong](http://github.com/hujiulong))
-
-## v0.18.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.2...v0.18.3)
-
-### 🩹 Fixes
-
- Automatically add dev server to sandbox CSP ([#663](https://github.com/wxt-dev/wxt/pull/663))
- Remove `import * as` imports from entrypoints during build ([#671](https://github.com/wxt-dev/wxt/pull/671))
- **security:** Upgrade tar to 6.2.1 ([215def7](https://github.com/wxt-dev/wxt/commit/215def7))
-
-### 📖 Documentation
-
- Add YTBlock to homepage ([#666](https://github.com/wxt-dev/wxt/pull/666))
-
-### 🏡 Chore
-
- Add missing tests for dev mode CSP ([#662](https://github.com/wxt-dev/wxt/pull/662))
- Upgrade templates to v0.18 ([3b954cc](https://github.com/wxt-dev/wxt/commit/3b954cc))
-
-### 🤖 CI
-
- Fix sync-releases workflow trigger ([5d8efef](https://github.com/wxt-dev/wxt/commit/5d8efef))
-
-### ❤️ Contributors
-
- Edoan ([@EdoanR](http://github.com/EdoanR))
-
-## v0.18.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.1...v0.18.2)
-
-### 🚀 Enhancements
-
- **runner:** Add `keepProfileChanges` option ([#655](https://github.com/wxt-dev/wxt/pull/655))
-
-### 🩹 Fixes
-
- Automatically detect and add "sidePanel" permission ([5fcaf7c](https://github.com/wxt-dev/wxt/commit/5fcaf7c))
-
-### 📖 Documentation
-
- Fix `wxt-vitest-plugin` reference ([#650](https://github.com/wxt-dev/wxt/pull/650))
- Fix spelling mistake in remote-code.md ([#652](https://github.com/wxt-dev/wxt/pull/652))
- Correct event handler name in handling-updates.md ([#653](https://github.com/wxt-dev/wxt/pull/653))
- Fix iframe typos ([c74e530](https://github.com/wxt-dev/wxt/commit/c74e530))
-
-### ❤️ Contributors
-
- Edoan ([@EdoanR](http://github.com/EdoanR))
- Linus Norton ([@linusnorton](http://github.com/linusnorton))
- Jeffrey Zang ([@jeffrey-zang](http://github.com/jeffrey-zang))
- Emmanuel Ferdman ([@emmanuel-ferdman](https://github.com/emmanuel-ferdman))
-
-## v0.18.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.0...v0.18.1)
-
-### 🩹 Fixes
-
- `_background` is not defined ([#649](https://github.com/wxt-dev/wxt/pull/649))
-
-### 🏡 Chore
-
- Add root README back ([ec3dd52](https://github.com/wxt-dev/wxt/commit/ec3dd52))
-
-### 🤖 CI
-
- Fix sync releases workflow ([dc5b55b](https://github.com/wxt-dev/wxt/commit/dc5b55b))
-
-## v0.18.0
-
-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.12...v0.18.0)
-
-### 🚀 Enhancements
-
- Add zip compression settings ([#605](https://github.com/wxt-dev/wxt/pull/605))
- Support returning values from scripts executed with the scripting API ([#624](https://github.com/wxt-dev/wxt/pull/624))
- **experimental:** Load entrypoint options with Vite Runtime API ([#648](https://github.com/wxt-dev/wxt/pull/648))
-
-### 🩹 Fixes
-
- ⚠️ Automatically move `host_permissions` to `permissions` for MV2 ([#626](https://github.com/wxt-dev/wxt/pull/626))
- **dep:** Upgrade `@webext-core/isolated-element` to v1.1.2 ([#625](https://github.com/wxt-dev/wxt/pull/625))
-
-### 📖 Documentation
-
- Add Fluent Read to homepage ([#600](https://github.com/wxt-dev/wxt/pull/600))
- Fix typo on example for wxt.config.ts. ([#609](https://github.com/wxt-dev/wxt/pull/609))
- Tix typo in `entrypoints.md` ([#614](https://github.com/wxt-dev/wxt/pull/614))
- Add Facebook Video Controls to homepage ([#615](https://github.com/wxt-dev/wxt/pull/615))
- Fix typo in assets page ([a94d673](https://github.com/wxt-dev/wxt/commit/a94d673))
- Add ElemSnap to homepage ([#621](https://github.com/wxt-dev/wxt/pull/621))
- Update content script registration JSDoc ([e47519f](https://github.com/wxt-dev/wxt/commit/e47519f))
- Add docs about handling updates ([acb7554](https://github.com/wxt-dev/wxt/commit/acb7554))
- Add MS Edge TTS to homepage ([#647](https://github.com/wxt-dev/wxt/pull/647))
- Document required permission for storage API ([#632](https://github.com/wxt-dev/wxt/pull/632))
-
-### 🏡 Chore
-
- Update vue template config ([#607](https://github.com/wxt-dev/wxt/pull/607))
- **deps-dev:** Bump lint-staged from 15.2.1 to 15.2.2 ([#637](https://github.com/wxt-dev/wxt/pull/637))
- **deps-dev:** Bump publint from 0.2.6 to 0.2.7 ([#639](https://github.com/wxt-dev/wxt/pull/639))
- **deps-dev:** Bump simple-git-hooks from 2.9.0 to 2.11.1 ([#640](https://github.com/wxt-dev/wxt/pull/640))
- Refactor repo to a standard monorepo ([#646](https://github.com/wxt-dev/wxt/pull/646))
- Fix formatting after monorepo refactor ([6ca3767](https://github.com/wxt-dev/wxt/commit/6ca3767))
-
-### ❤️ Contributors
-
- Alegal200 ([@alegal200](https://github.com/alegal200))
- Yacine-bens ([@yacine-bens](http://github.com/yacine-bens))
- Ayden ([@AydenGen](https://github.com/AydenGen))
- Wuzequanyouzi ([@wuzequanyouzi](http://github.com/wuzequanyouzi))
- Can Rau ([@CanRau](http://github.com/CanRau))
- 日高 凌 ([@ryohidaka](http://github.com/ryohidaka))
- Bas Van Zanten ([@Bas950](http://github.com/Bas950))
- ThinkStu ([@Bistutu](http://github.com/Bistutu))
-
 ## v0.17.12

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.11...v0.17.12)
@@ -712,21 +255,84 @@

 ## v0.17.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.11...v0.17.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.11...v0.17.0)

 ### 🚀 Enhancements

- **storage:** ⚠️ Improved support for default values on storage items ([#477](https://github.com/wxt-dev/wxt/pull/477))
+- **storage:** ⚠️  Improved support for default values on storage items ([#477](https://github.com/wxt-dev/wxt/pull/477))

 ### 🩹 Fixes

- **storage:** ⚠️ Only run migrations when the extension is updated ([#478](https://github.com/wxt-dev/wxt/pull/478))
+- **storage:** ⚠️  Only run migrations when the extension is updated ([#478](https://github.com/wxt-dev/wxt/pull/478))
 - Improve dev mode for content scripts registered at runtime ([#474](https://github.com/wxt-dev/wxt/pull/474))

 ### 📖 Documentation

 - **storage:** Update docs ([91fc41c](https://github.com/wxt-dev/wxt/commit/91fc41c))

+#### ⚠️ Breaking Changes
+
+`v0.17.0` introduces several breaking changes to `wxt/storage`.
+
+First, if you were using `defineItem` with versioning and no default value, you will need to add `defaultValue: null` to the options and update the first type parameter:
+
+```ts
+// < 0.17
+const item = storage.defineItem<number>("local:count", {
+  version: ...,
+  migrations: ...,
+})
+
+// >= 0.17
+const item = storage.defineItem<number | null>("local:count", {
+  defaultValue: null,
+  version: ...,
+  migrations: ...,
+})
+```
+
+The `defaultValue` property is now required if passing in the second options argument. 
+
+If you exclude the second options argument, it will default to being nullable, as before.
+
+```ts
+const item: WxtStorageItem<number | null> = storage.defineItem<number>("local:count");
+const value: number | null = await item.getValue();
+```
+
+> If you don't use typescript, there aren't any breaking changes, this is just a type change.
+
+For storage items that are not nullable, the `watch` callback types has improved and will use the default value instead of `null` when the value is missing:
+
+```ts
+// >=0.17
+const item = storage.defineItem<number>("local:count", { defaultValue: 0 });
+item.watch((newValue: number | null, oldValue: number | null) => {
+  // ...
+});
+
+// >=0.17
+const item = storage.defineItem<number>("local:count", { defaultValue: 0 });
+item.watch((newValue: number, oldValue: number) => {
+  // ...
+});
+```
+
+You can also access the default value directly off the item:
+
+```ts
+console.log(item.defaultValue); // 0
+```
+
+The second breaking change is that migrations for versioned items only run when the extension is updated. Before, they were ran whenever the storage item was created, in any entrypoint (background, popup, content script, etc). Now, in v0.17, storage items will only run migrations when the `browser.runtime.onInstalled` event is fired with `reason = "update"` in the background. See the updated docs to make sure they run correctly: https://wxt.dev/guide/storage.html#running-migrations. TLDR: you need to import all storage items into the background entrypoint for the `onInstalled` hook to fire properly and thus run the migrations.
+
+To keep the old behavior, call the new `migrate` function to run migrations as soon as an item is defined:
+
+```ts
+const item = storage.defineItem(...);
+item.migrate();
+```
+
 ## v0.16.11

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.16.10...v0.16.11)
@@ -932,11 +538,11 @@

 ## v0.16.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.15.4...v0.16.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.15.4...v0.16.0)

 ### 🚀 Enhancements

- ⚠️ ESM background support ([#398](https://github.com/wxt-dev/wxt/pull/398))
+- ⚠️  ESM background support ([#398](https://github.com/wxt-dev/wxt/pull/398))

 ### 📖 Documentation

@@ -948,6 +554,31 @@
 - **deps-dev:** Bump p-map from 7.0.0 to 7.0.1 ([#396](https://github.com/wxt-dev/wxt/pull/396))
 - **deps-dev:** Bump @vitest/coverage-v8 from 1.0.1 to 1.2.2 ([#397](https://github.com/wxt-dev/wxt/pull/397))

+#### ⚠️ Breaking Changes
+
+In [#398](https://github.com/wxt-dev/wxt/pull/398), HTML pages' JS entrypoints in the output directory have been moved. Unless you're doing some kind of post-build work referencing files, you don't have to make any changes.
+
+- Before:
+   ```
+   .output/
+     <target>/
+       chunks/
+         some-shared-chunk-<hash>.js
+         popup-<hash>.js
+       popup.html
+   ```
+- After:
+   ```
+   .output/
+     <target>/
+       chunks/
+         some-shared-chunk-<hash>.js
+       popup.html
+       popup.js
+   ```
+
+This effects all HTML files, not just the Popup. The hash has been removed, and it's been moved to the root of the build target folder, not inside the `chunks/` directory. Moving files like this has not historically increased review times or triggered in-depth reviews when submitting updates to the stores.
+
 ## v0.15.4

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.15.3...v0.15.4)
@@ -1006,16 +637,16 @@

 ## v0.15.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.14.7...v0.15.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.14.7...v0.15.0)

 ### 🚀 Enhancements

- **zip:** ⚠️ Add `includeSources` and rename `ignoredSources` to `excludeSources` ([#378](https://github.com/wxt-dev/wxt/pull/378))
+- **zip:** ⚠️  Add `includeSources` and rename `ignoredSources` to `excludeSources` ([#378](https://github.com/wxt-dev/wxt/pull/378))

 ### 🩹 Fixes

 - Generate missing sourcemap in `wxt:unimport` plugin ([#381](https://github.com/wxt-dev/wxt/pull/381))
- ⚠️ Move browser constants to `import.meta.env` ([#380](https://github.com/wxt-dev/wxt/pull/380))
+- ⚠️  Move browser constants to `import.meta.env` ([#380](https://github.com/wxt-dev/wxt/pull/380))
 - Enable inline sourcemaps by default during development ([#382](https://github.com/wxt-dev/wxt/pull/382))

 ### 📖 Documentation
@@ -1026,6 +657,21 @@

 - Update contributor docs ([eb758bd](https://github.com/wxt-dev/wxt/commit/eb758bd))

+#### ⚠️ Breaking Changes
+
+Renamed `zip.ignoredSources` to `zip.excludeSources` in [#378](https://github.com/wxt-dev/wxt/pull/378)
+
+Renamed undocumented constants for detecting the build config at runtime in [#380](https://github.com/wxt-dev/wxt/pull/380). Now documented here: https://wxt.dev/guide/multiple-browsers.html#runtime
+
+- `__BROWSER__` &rarr; `import.meta.env.BROWSER`
+- `__COMMAND__` &rarr; `import.meta.env.COMMAND`
+- `__MANIFEST_VERSION__` &rarr; `import.meta.env.MANIFEST_VERSION`
+- `__IS_CHROME__` &rarr; `import.meta.env.CHROME`
+- `__IS_FIREFOX__` &rarr; `import.meta.env.FIREFOX`
+- `__IS_SAFARI__` &rarr; `import.meta.env.SAFARI`
+- `__IS_EDGE__` &rarr; `import.meta.env.EDGE`
+- `__IS_OPERA__` &rarr; `import.meta.env.OPERA`
+
 ### ❤️ Contributors

 - Nenad Novaković ([@dvlden](https://github.com/dvlden))
@@ -1146,11 +792,21 @@

 ## v0.14.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.13.5...v0.14.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.13.5...v0.14.0)

 ### 🚀 Enhancements

- ⚠️ Refactor content script UI functions and add helper for "integrated" UIs ([#333](https://github.com/wxt-dev/wxt/pull/333))
+- ⚠️  Refactor content script UI functions and add helper for "integrated" UIs ([#333](https://github.com/wxt-dev/wxt/pull/333))
+
+#### ⚠️ Breaking Changes
+
+`createContentScriptUi` and `createContentScriptIframe`, and some of their options, have been renamed:
+
+- `createContentScriptUi({ ... })` &rarr; `createShadowRootUi({ ... })`
+- `createContentScriptIframe({ ... })` &rarr; `createIframeUi({ ... })`
+- `type: "inline" | "overlay" | "modal"` has been changed to `position: "inline" | "overlay" | "modal"`
+- `onRemove` is now called ***before*** the UI is removed from the DOM, previously it was called after the UI was removed
+- `mount` option has been renamed to `onMount`, to better match the related option, `onRemove`.

 ## v0.13.5

@@ -1241,11 +897,15 @@

 ## v0.13.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.12.5...v0.13.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.12.5...v0.13.0)

 ### 🚀 Enhancements

- ⚠️ New `wxt/storage` APIs ([#300](https://github.com/wxt-dev/wxt/pull/300))
+- ⚠️  New `wxt/storage` APIs ([#300](https://github.com/wxt-dev/wxt/pull/300))
+
+#### ⚠️ Breaking Changes
+
+- `wxt/storage` no longer relies on [`unstorage`](https://www.npmjs.com/package/unstorage). Some `unstorage` APIs, like `prefixStorage`, have been removed, while others, like `snapshot`, are methods on the new `storage` object. Most of the standard usage remains the same. See https://wxt.dev/guide/storage and https://wxt.dev/api/wxt/storage/ for more details ([#300](https://github.com/wxt-dev/wxt/pull/300))

 ## v0.12.5

@@ -1294,11 +954,11 @@

 ## v0.12.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.11.2...v0.12.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.11.2...v0.12.0)

 ### 🚀 Enhancements

- ⚠️ Add support for "main world" content scripts ([#284](https://github.com/wxt-dev/wxt/pull/284))
+- ⚠️  Add support for "main world" content scripts ([#284](https://github.com/wxt-dev/wxt/pull/284))

 ### 🩹 Fixes

@@ -1314,6 +974,17 @@

 - Convert WXT CLI to an ESM binary ([#279](https://github.com/wxt-dev/wxt/pull/279))

+#### ⚠️ Breaking Changes
+
+`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

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.11.1...v0.11.2)
@@ -1346,11 +1017,11 @@

 ## v0.11.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.10.4...v0.11.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.10.4...v0.11.0)

 ### 🚀 Enhancements

- ⚠️ Vite 5 support ([#261](https://github.com/wxt-dev/wxt/pull/261))
+- ⚠️  Vite 5 support ([#261](https://github.com/wxt-dev/wxt/pull/261))

 ### 📖 Documentation

@@ -1361,6 +1032,10 @@
 - Speed up CI using `pnpm` instead of `npm` ([#259](https://github.com/wxt-dev/wxt/pull/259))
 - Abstract vite from WXT's core logic ([#242](https://github.com/wxt-dev/wxt/pull/242))

+#### ⚠️ Breaking Changes
+
+- You will need to update any other Vite plugins to a version that supports Vite 5 ([#261](https://github.com/wxt-dev/wxt/pull/261))
+
 ### ❤️ Contributors

 - Ítalo Brasil ([@italodeverdade](http://github.com/italodeverdade))
@@ -1433,12 +1108,12 @@

 ## v0.10.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.9.2...v0.10.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.9.2...v0.10.0)

 ### 🚀 Enhancements

 - List `bun` as an experimental option in `wxt init` ([#233](https://github.com/wxt-dev/wxt/pull/233))
- ⚠️ Allow plural directory and only png's for manifest icons ([#237](https://github.com/wxt-dev/wxt/pull/237))
+- ⚠️  Allow plural directory and only png's for manifest icons ([#237](https://github.com/wxt-dev/wxt/pull/237))
 - Add `wxt/storage` API ([#234](https://github.com/wxt-dev/wxt/pull/234))

 ### 🩹 Fixes
@@ -1506,11 +1181,11 @@

 ## v0.9.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.7...v0.9.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.7...v0.9.0)

 ### 🩹 Fixes

- ⚠️ Remove `lib` from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209))
+- ⚠️  Remove `lib` from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209))

 ### 📖 Documentation

@@ -1521,6 +1196,18 @@

 - Fix Svelte and React template READMEs ([#207](https://github.com/wxt-dev/wxt/pull/207))

+#### ⚠️ Breaking Changes
+
+- ⚠️  Removed [`"WebWorker"` types](https://www.typescriptlang.org/tsconfig/lib.html) from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209)). These types are useful for MV3 projects using a service worker. To add them back to your project, add the following to your project's TSConfig:
+   ```diff
+   {
+     "extends": "./.wxt/tsconfig.json",
+   + "compilerOptions": {
+   +   "lib": ["ESNext", "DOM", "WebWorker"]
+   + }
+   }
+   ```
+
 ### ❤️ Contributors

 - yyyanghj ([@yyyanghj](https://github.com/yyyanghj))
@@ -1629,11 +1316,11 @@

 ## v0.8.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.5...v0.8.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.5...v0.8.0)

 ### 🚀 Enhancements

- ⚠️ Use `defineUnlistedScript` to define unlisted scripts ([#167](https://github.com/wxt-dev/wxt/pull/167))
+- ⚠️  Use `defineUnlistedScript` to define unlisted scripts ([#167](https://github.com/wxt-dev/wxt/pull/167))

 ### 📖 Documentation

@@ -1641,7 +1328,12 @@

 ### 🌊 Types

- ⚠️ Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
+- ⚠️  Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️  Unlisted scripts must now `export default defineUnlistedScript(...)` ([#167](https://github.com/wxt-dev/wxt/pull/167))
+- ⚠️  Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))

 ### ❤️ Contributors

@@ -1725,7 +1417,7 @@

 ## v0.7.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.6...v0.7.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.6...v0.7.0)

 ### 🚀 Enhancements

@@ -1734,13 +1426,17 @@
 ### 🩹 Fixes

 - Validate transformed manifest correctly ([4b2012c](https://github.com/wxt-dev/wxt/commit/4b2012c))
- ⚠️ Output content script CSS to `content-scripts/<name>.css` ([#140](https://github.com/wxt-dev/wxt/pull/140))
+- ⚠️  Output content script CSS to `content-scripts/<name>.css` ([#140](https://github.com/wxt-dev/wxt/pull/140))
 - Reorder typescript paths to give priority to `@` and `~` over `@@` and `~~` ([#142](https://github.com/wxt-dev/wxt/pull/142))

 ### 🏡 Chore

 - Store user config metadata in memory ([0591050](https://github.com/wxt-dev/wxt/commit/0591050))

+#### ⚠️ Breaking Changes
+
+- ⚠️ Content script CSS used to be output to `assets/<name>.css`, but is now `content-scripts/<name>.css` to match the docs. ([#140](https://github.com/wxt-dev/wxt/pull/140))
+
 ## v0.6.6

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.5...v0.6.6)
@@ -1823,18 +1519,22 @@

 ## v0.6.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.6...v0.6.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.6...v0.6.0)

 ### 🚀 Enhancements

 - Export `ContentScriptContext` from `wxt/client` ([1f448d1](https://github.com/wxt-dev/wxt/commit/1f448d1))
- ⚠️ Require a function for `vite` configuration ([#121](https://github.com/wxt-dev/wxt/pull/121))
+- ⚠️  Require a function for `vite` configuration ([#121](https://github.com/wxt-dev/wxt/pull/121))

 ### 🩹 Fixes

 - Use the same mode for each build step ([1f6a931](https://github.com/wxt-dev/wxt/commit/1f6a931))
 - Disable dev logs in production ([3f260ee](https://github.com/wxt-dev/wxt/commit/3f260ee))

+#### ⚠️ Breaking Changes
+
+- ⚠️  The `vite` config option must now be a function. If you were using an object before, change it from `vite: { ... }` to `vite: () => ({ ... })`. ([#121](https://github.com/wxt-dev/wxt/pull/121))
+
 ## v0.5.6

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.5...v0.5.6)
@@ -1895,12 +1595,12 @@

 ## v0.5.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.4.1...v0.5.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.4.1...v0.5.0)

 ### 🩹 Fixes

 - **types:** Don't write to files if nothing changes ([#107](https://github.com/wxt-dev/wxt/pull/107))
- ⚠️ Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))
+- ⚠️  Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))

 ### 📖 Documentation

@@ -1918,6 +1618,10 @@
 - **deps-dev:** Bump @types/node from 20.5.0 to 20.5.9 ([#110](https://github.com/wxt-dev/wxt/pull/110))
 - Add entrypoints debug log ([dbd84c8](https://github.com/wxt-dev/wxt/commit/dbd84c8))

+#### ⚠️ Breaking Changes
+
+- ⚠️  Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))
+
 ## v0.4.1

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.4.0...v0.4.1)
@@ -1932,7 +1636,7 @@

 ## v0.4.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.3.2...v0.4.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.3.2...v0.4.0)

 ### 🚀 Enhancements

@@ -1944,7 +1648,7 @@

 - Allow adding custom content scripts ([b428a62](https://github.com/wxt-dev/wxt/commit/b428a62))
 - Don't overwrite `wxt.config.ts` content scripts, append entrypoints to it ([5f5f1d9](https://github.com/wxt-dev/wxt/commit/5f5f1d9))
- ⚠️ Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))
+- ⚠️  Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))

 ### 📖 Documentation

@@ -1975,6 +1679,10 @@
 - Remove explicit icon config from templates ([93bfee0](https://github.com/wxt-dev/wxt/commit/93bfee0))
 - Use import aliases in Vue template ([#104](https://github.com/wxt-dev/wxt/pull/104))

+#### ⚠️ Breaking Changes
+
+- ⚠️  Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))
+
 ## v0.3.2

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.3.1...v0.3.2)
@@ -2041,12 +1749,12 @@

 ## v0.3.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.5...v0.3.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.5...v0.3.0)

 ### 🚀 Enhancements

- ⚠️ Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
- ⚠️ Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
+- ⚠️  Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
+- ⚠️  Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
 - Windows support ([#50](https://github.com/wxt-dev/wxt/pull/50))

 ### 🩹 Fixes
@@ -2065,6 +1773,11 @@

 - Improve checks against `demo/` extension ([9cc464f](https://github.com/wxt-dev/wxt/commit/9cc464f))

+#### ⚠️  Breaking Changes
+
+- ⚠️  Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
+- ⚠️  Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
+
 ## v0.2.5

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.4...v0.2.5)
@@ -2127,7 +1840,7 @@

 ## v0.2.0

-[⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) &bull; [compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.6...v0.2.0)
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.6...v0.2.0)

 ### 🚀 Enhancements

@@ -2145,6 +1858,10 @@
 - Run `wxt prepare` on `postinstall` ([c1ea9ba](https://github.com/wxt-dev/wxt/commit/c1ea9ba))
 - Don't format lockfile ([5c7e041](https://github.com/wxt-dev/wxt/commit/5c7e041))

+#### ⚠️ Breaking Changes
+
+- ⚠️ Rename `defineBackgroundScript` to `defineBackground` ([5b48ae9](https://github.com/wxt-dev/wxt/commit/5b48ae9))
+
 ## v0.1.6

 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.5...v0.1.6)
@@ -37,13 +37,13 @@ pnpm build

 ```sh
 # Build WXT package, then build demo extension
-cd packages/wxt-demo
+cd demo
 pnpm build
 ```

 ```sh
 # Build WXT package, then start the demo extension in dev mode
-cd packages/wxt-demo
+cd demo
 pnpm dev
 ```

@@ -75,7 +75,7 @@ To run tests for a specific file, add the filename at the end of the test comman
 pnpm test manifest-contents
 ```

-All test (unit and E2E) for all packages are ran together via [Vitest workspaces](https://vitest.dev/guide/#workspaces-support).
+Unit and E2E tests are ran together via [Vitest workspaces](https://vitest.dev/guide/#workspaces-support).

 If you want to manually test a change, you can modify the demo project for your test, but please don't leave those changes committed once you open a PR.

@@ -90,7 +90,7 @@ npm run dev
 npm run build
 ```

-Note that templates are hardcoded to a specific version of `wxt` from NPM, they do not use the local version. PR checks will test your PR's changes against the templates, but if you want to manually do it, update the package.json dependency:
+Note that templates are hardcoded to a specific version of `wxt` from NPM, they do not use the local version. PR checks will test your changes against the templates, but if you want to manually do it, update the package.json dependency:

 ```diff
  "devDependencies": {
@@ -112,20 +112,3 @@ cp -r templates/vanilla templates/<new-template-name>
 ```

 That's it. Once your template is merged, it will be available inside `wxt init` immediately. You don't need to release a new version of WXT to release a new template.
-
-## Releasing Updates
-
-Releases are done with GitHub actions:
-
- Use the [Release workflow](https://github.com/wxt-dev/wxt/actions/workflows/release.yml) to release a single package in the monorepo. This automatically detects the version change with conventional commits, builds and uploads the package to NPM, and creates a GitHub release.
- Use the [Sync Releases workflow](https://github.com/wxt-dev/wxt/actions/workflows/sync-releases.yml) to sync the GitHub releases with changes to the changelog. To change a release, update the `CHANGELOG.md` file and run the workflow. It will sync the releases of a single package in the monorepo.
-
-## Upgrading Dependencies
-
-Use [`taze`](https://www.npmjs.com/package/taze) to upgrade dependencies throughout the entire monorepo.
-
-```ts
-pnpm dlx taze -r
-```
-
-Configuration is in [`taze.config.ts`](./taze.config.ts).
@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img style="vertical-align:middle" width="44" src="https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/public/hero-logo.svg" alt="WXT Logo">
+  <img style="vertical-align:middle" width="44" src="./docs/public/hero-logo.svg" alt="WXT Logo">
  <span>WXT</span>
 </h1>

@@ -18,22 +18,22 @@
  <br/>
  <span>⚡</span>
  <br/>
-  <q><i>It's like Nuxt, but for Web Extensions</i></q>
+  <q><i>It's like Nuxt, but for Chrome Extensions</i></q>
 </p>

 <p align="center">
-  <a href="https://wxt.dev/guide/installation.html" target="_blank">Get Started</a>
+  <a href="https://wxt.dev" target="_blank">Get Started</a>
+  &bull;
+  <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
  &bull;
  <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
  &bull;
  <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
  &bull;
-  <a href="https://github.com/wxt-dev/wxt/blob/main/packages/wxt/CHANGELOG.md" target="_blank">Changelog</a>
-  &bull;
  <a href="https://discord.gg/ZFsZqGery9" target="_blank">Discord</a>
 </p>

-![Example CLI Output](https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/assets/cli-output.png)
+![Example CLI Output](./docs/assets/cli-output.png)

 ## Demo

@@ -59,7 +59,6 @@ Or see the [installation guide](https://wxt.dev/guide/installation.html) to get
 - 🦾 Auto-imports
 - 🤖 Automated publishing
 - 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
- 📦 Modular architecture with [WXT modules](https://wxt.dev/guide/go-further/reusable-modules.html#overview)
 - 🖍️ Quickly bootstrap a new project
 - 📏 Bundle analysis
 - ⬇️ Download and bundle remote URL imports
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/cli.js';
@@ -0,0 +1,30 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "Demo extension for WXT",
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm -w build && wxt",
+    "build": "pnpm -w build && wxt build",
+    "build:all": "pnpm -w build && run-s -s 'build:all:*'",
+    "build:all:chrome-mv3": "wxt build",
+    "build:all:chrome-mv2": "wxt build --mv2",
+    "build:all:firefox-mv3": "wxt build -b firefox --mv3",
+    "build:all:firefox-mv2": "wxt build -b firefox",
+    "test": "pnpm -w build && vitest",
+    "zip": "pnpm -w build && wxt zip",
+    "compile": "pnpm -w build && tsc --noEmit",
+    "postinstall": "pnpm -w build && wxt prepare"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vitest": "^1.2.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "sass": "^1.69.5",
+    "wxt": "workspace:*"
+  }
+}
@@ -15,12 +15,10 @@ export default defineBackground({
      messages,
    });

-    console.log(useAppConfig());
-
    // @ts-expect-error: should only accept entrypoints or public assets
    browser.runtime.getURL('/');
    browser.runtime.getURL('/background.js');
-    browser.runtime.getURL('/icons/128.png');
+    browser.runtime.getURL('/icon/128.png');
    browser.runtime.getURL('/example.html#hash');
    browser.runtime.getURL('/example.html?query=param');
    // @ts-expect-error: should only allow hashes/query params on HTML files
@@ -13,7 +13,7 @@ export default defineContentScript({
      anchor: 'form[role=search]',
      onMount: (container) => {
        const app = document.createElement('div');
-        app.textContent = browser.i18n.getMessage('prompt_for_name');
+        app.textContent = 'Custom content script UI';
        container.append(app);
      },
    });
@@ -0,0 +1,7 @@
+{
+  "extends": ["../tsconfig.base.json", "./.wxt/tsconfig.json"],
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx"
+  }
+}
@@ -1,7 +1,7 @@
-import { defineProject } from 'vitest/config';
+import { defineConfig } from 'vitest/config';
 import { WxtVitest } from 'wxt/testing';

-export default defineProject({
+export default defineConfig({
  test: {
    mockReset: true,
    restoreMocks: true,
@@ -2,7 +2,6 @@ import { defineConfig } from 'wxt';

 export default defineConfig({
  srcDir: 'src',
-  extensionApi: 'chrome',
  manifest: {
    permissions: ['storage'],
    default_locale: 'en',
@@ -19,12 +18,4 @@ export default defineConfig({
  analysis: {
    open: true,
  },
-  runner: {
-    startUrls: ['https://duckduckgo.com'],
-  },
-  example: {
-    a: 'a',
-    // @ts-expect-error: c is not defined, this should error out
-    c: 'c',
-  },
 });
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue';
+
+const props = defineProps<{
+  tag?: string;
+}>();
+
+const examples = ref();
+onMounted(async () => {
+  const res = await fetch(
+    'https://raw.githubusercontent.com/wxt-dev/wxt-examples/main/examples.json',
+  );
+  examples.value = await res.json();
+});
+
+const filteredExamples = computed(() => {
+  if (props.tag == null) return examples.value;
+
+  return examples.value.filter((example) => {
+    return example.tags?.includes(props.tag);
+  });
+});
+</script>
+
+<template>
+  <ul>
+    <li v-if="examples == null">Loading...</li>
+    <template v-else>
+      <li v-for="example of filteredExamples">
+        <a :href="example.url" target="_blank">{{ example.name }}</a>
+      </li>
+    </template>
+  </ul>
+</template>
@@ -1,226 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, computed, toRaw, Ref } from 'vue';
-import ExampleSearchFilterByItem from './ExampleSearchFilterByItem.vue';
-import ExampleSearchResult from './ExampleSearchResult.vue';
-import { ExamplesMetadata, KeySelectedObject } from '../utils/types';
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const exampleMetadata = ref<ExamplesMetadata>();
-onMounted(async () => {
-  const res = await fetch(
-    'https://raw.githubusercontent.com/wxt-dev/examples/main/metadata.json',
-  );
-  exampleMetadata.value = await res.json();
-});
-
-const searchText = ref('');
-const selectedApis = ref<KeySelectedObject>({});
-const selectedPermissions = ref<KeySelectedObject>({});
-const selectedPackages = ref<KeySelectedObject>({});
-
-function useRequiredItems(selectedItems: Ref<KeySelectedObject>) {
-  return computed(() =>
-    Array.from(
-      Object.entries(toRaw(selectedItems.value)).reduce(
-        (set, [pkg, checked]) => {
-          if (checked) set.add(pkg);
-          return set;
-        },
-        new Set<string>(),
-      ),
-    ),
-  );
-}
-const requiredApis = useRequiredItems(selectedApis);
-const requiredPermissions = useRequiredItems(selectedPermissions);
-const requiredPackages = useRequiredItems(selectedPackages);
-
-function doesExampleMatchSelected(
-  exampleItems: string[],
-  requiredItems: Ref<string[]>,
-) {
-  const exampleItemsSet = new Set(exampleItems);
-  return !requiredItems.value.find((item) => !exampleItemsSet.has(item));
-}
-
-const filteredExamples = computed(() => {
-  const text = searchText.value.toLowerCase();
-  return exampleMetadata.value.examples.filter((example) => {
-    const matchesText = example.searchText.toLowerCase().includes(text);
-    const matchesApis = doesExampleMatchSelected(example.apis, requiredApis);
-    const matchesPermissions = doesExampleMatchSelected(
-      example.permissions,
-      requiredPermissions,
-    );
-    const matchesPackages = doesExampleMatchSelected(
-      example.packages,
-      requiredPackages,
-    );
-    return matchesText && matchesApis && matchesPermissions && matchesPackages;
-  });
-});
-</script>
-
-<template>
-  <div class="example-layout">
-    <div class="search">
-      <input v-model="searchText" placeholder="Search for an example..." />
-    </div>
-
-    <div class="filters">
-      <ExampleSearchFilterByItem
-        label="APIs"
-        :items="exampleMetadata?.allApis"
-        v-model="selectedApis"
-      />
-      <ExampleSearchFilterByItem
-        label="Permissions"
-        :items="exampleMetadata?.allPermissions"
-        v-model="selectedPermissions"
-      />
-      <ExampleSearchFilterByItem
-        label="Packages"
-        :items="exampleMetadata?.allPackages"
-        v-model="selectedPackages"
-      />
-    </div>
-
-    <div class="results">
-      <p v-if="exampleMetadata == null">Loading examples...</p>
-      <template v-else>
-        <ul class="search-results">
-          <ExampleSearchResult
-            v-for="example of filteredExamples"
-            :key="example.name"
-            :example
-          />
-        </ul>
-        <p v-if="filteredExamples.length === 0">No matching examples</p>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.example-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  grid-template-areas:
-    'search'
-    'results';
-  gap: 16px;
-}
-@media only screen and (min-width: 720px) {
-  .example-layout {
-    grid-template-columns: 256px 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'filters search'
-      'filters results';
-  }
-}
-.search {
-  grid-area: search;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  width: 100%;
-  display: flex;
-  border-radius: 16px;
-}
-.filters {
-  display: none;
-  grid-area: filters;
-}
-@media only screen and (min-width: 720px) {
-  .filters {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    border-radius: 16px;
-    overflow: hidden;
-    align-self: flex-start;
-  }
-}
-.results {
-  grid-area: results;
-}
-
-.box {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.search input {
-  min-width: 0;
-  flex: 1;
-  font-size: 16px;
-}
-
-.checkbox-col {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 200px;
-  font-size: 14px;
-  gap: 4px;
-}
-
-.filter-btn {
-  color: var(--vp-c-brand-1);
-}
-
-.checkbox-col .header {
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-
-.checkbox-col p {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-}
-
-span {
-  padding-top: 1px;
-}
-
-.checkbox-col input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.checkbox-col-container {
-  display: flex;
-}
-
-.search-results {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 16px;
-}
-@media only screen and (min-width: 800px) {
-  .search-results {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media only screen and (min-width: 1024px) {
-  .search-results {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-a {
-  background-color: red;
-}
-</style>
@@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import { computed, toRaw } from 'vue';
-import { KeySelectedObject } from '../utils/types';
-
-const props = defineProps<{
-  label: string;
-  items?: string[];
-}>();
-
-const selectedItems = defineModel<KeySelectedObject>({
-  required: true,
-});
-
-const count = computed(() => {
-  return Object.values(toRaw(selectedItems.value)).filter(Boolean).length;
-});
-
-function toggleItem(pkg: string) {
-  selectedItems.value = {
-    ...toRaw(selectedItems.value),
-    [pkg]: !selectedItems.value[pkg],
-  };
-}
-</script>
-
-<template>
-  <div class="filter-container">
-    <p class="header">
-      <span>Filter by {{ label }}</span> <span v-if="count">({{ count }})</span>
-    </p>
-    <div class="scroll-container">
-      <ul>
-        <li v-for="item in items">
-          <label :title="item">
-            <input
-              type="checkbox"
-              :checked="selectedItems[item]"
-              @input="toggleItem(item)"
-            />
-            <span>{{ item }}</span>
-          </label>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.filter-container {
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  background: var(--vp-c-bg-soft);
-}
-
-.scroll-container {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.scroll-container ul {
-  position: absolute;
-  overflow-y: auto;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: small;
-  padding: 8px 16px 16px 16px;
-}
-
-.header {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-label {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-  cursor: pointer;
-  text-wrap: nowrap;
-}
-span {
-  padding-top: 1px;
-}
-input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-</style>
@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import { Example } from '../utils/types';
-
-const props = defineProps<{
-  example: Example;
-}>();
-</script>
-
-<template>
-  <li>
-    <a :href="example.url" target="_blank">
-      <p class="name">{{ example.name }}</p>
-      <p class="description">{{ example.description }}</p>
-      <p class="link">Open &rarr;</p>
-    </a>
-  </li>
-</template>
-
-<style scoped>
-* {
-  min-width: 0;
-}
-a {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  border: 2px solid var(--vp-c-bg-soft);
-  border-radius: 16px;
-  color: var(--vp-c-text-1) !important;
-  gap: 8px;
-}
-
-a:hover {
-  outline: 2px solid var(--vp-c-brand-2);
-}
-.name {
-  font-size: 16px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 0;
-
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.description {
-  height: 53px;
-  opacity: 70%;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 120%;
-  min-height: 0;
-
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.link {
-  opacity: 0;
-  transition: 250ms;
-  color: var(--vp-c-brand-2);
-  font-weight: bold;
-  text-align: right;
-}
-a:hover .link {
-  opacity: 100%;
-}
-</style>
@@ -24,20 +24,7 @@ const chromeExtensionIds = [
  'aelkipgppclpfimeamgmlonimflbhlgf', // GitHub Custom Notifier
  'djnlaiohfaaifbibleebjggkghlmcpcj', // Fluent Read
  'nhclljcpfmmaiojbhhnkpjcfmacfcian', // Facebook Video Controls
-  'mblkhbaakhbhiimkbcnmeciblfhmafna', // ElemSnap - Quick capture of webpage elements and conversion to images,
-  'oajalfneblkfiejoadecnmodfpnaeblh', // MS Edge TTS (Text to Speech)
-  'nedcanggplmbbgmlpcjiafgjcpdimpea', // YTBlock - Block any content from YouTube™
-  'oadbjpccljkplmhnjekgjamejnbadlne', // demo.fun - Interactive product demos that convert
-  'iopdafdcollfgaoffingmahpffckmjni', // SmartEReply: Elevate Your LinkedIn™ Engagement with AI 🚀📈
-  'khjdmjcmpolknpccmaaipmidphjokhdf', // WorkFlowy MultiFlow
-  'fencadnndhdeggodopebjgdfdlhcimfk', // 香草布丁🌿🍮- https://github.com/Xdy1579883916/vanilla-pudding
-  'bnacincmbaknlbegecpioobkfgejlojp', // MaxFocus: Link Preview
-  'bcpgdpedphodjcjlminjbdeejccjbimp', // 汇率转换-中文版本
-  'loeilaonggnalkaiiaepbegccilkmjjp', // Currency Converter Plus
-  'npcnninnjghigjfiecefheeibomjpkak', // Respond Easy
-  'cfkdcideecefncbglkhneoflfnmhoicc', // mindful - stay focused on your goals
-  'lnhejcpclabmbgpiiomjbhalblnnbffg', // 1Proompt
-  'fonflmjnjbkigocpoommgmhljdpljain', // NiceTab - https://github.com/web-dahuyou/NiceTab
+  'mblkhbaakhbhiimkbcnmeciblfhmafna', // ElemSnap - Quick capture of webpage elements and conversion to images
 ];

 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
@@ -63,56 +50,90 @@ function getStoreUrl(extension: ChromeExtension) {
 </script>

 <template>
-  <p v-if="isLoading" style="text-align: center; opacity: 50%">Loading...</p>
-  <p
-    v-else-if="err || sortedExtensions.length === 0"
-    style="text-align: center; opacity: 50%"
-  >
-    Failed to load extension details.
-  </p>
-  <ul v-else>
-    <li
-      v-for="extension of sortedExtensions"
-      :key="extension.id"
-      class="relative"
-    >
-      <img
-        :src="extension.iconUrl"
-        :alt="`${extension.name} icon`"
-        referrerpolicy="no-referrer"
-      />
-      <div class="relative">
-        <a
-          :href="getStoreUrl(extension)"
-          target="_blank"
-          :title="extension.name"
-          class="extension-name"
-          >{{ extension.name }}</a
-        >
-        <p class="description" :title="extension.shortDescription">
-          {{ extension.shortDescription }}
-        </p>
-      </div>
-      <p class="user-count">
-        <span>{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
-        ><template v-if="extension.rating != null"
-          >,
-          <span>{{ extension.rating }} stars</span>
-        </template>
+  <section class="vp-doc">
+    <div class="container">
+      <h2 id="whos-using-wxt">Who's Using WXT?</h2>
+      <p>
+        Battle tested and ready for production. Explore chrome extensions made
+        with WXT.
      </p>
-    </li>
-  </ul>
-  <p class="centered pr">
-    <a
-      href="https://github.com/wxt-dev/wxt/edit/main/docs/.vitepress/components/UsingWxtSection.vue"
-      target="_blank"
-      >Open a PR</a
-    >
-    to add your extension to the list!
-  </p>
+      <p v-if="isLoading" style="text-align: center; opacity: 50%">
+        Loading...
+      </p>
+      <p
+        v-else-if="err || sortedExtensions.length === 0"
+        style="text-align: center; opacity: 50%"
+      >
+        Failed to load extension details.
+      </p>
+      <ul v-else>
+        <li
+          v-for="extension of sortedExtensions"
+          :key="extension.id"
+          class="relative"
+        >
+          <img
+            :src="extension.iconUrl"
+            :alt="`${extension.name} icon`"
+            referrerpolicy="no-referrer"
+          />
+          <div class="relative">
+            <a
+              :href="getStoreUrl(extension)"
+              target="_blank"
+              :title="extension.name"
+              class="extension-name"
+              >{{ extension.name }}</a
+            >
+            <p class="description" :title="extension.shortDescription">
+              {{ extension.shortDescription }}
+            </p>
+          </div>
+          <p class="user-count">
+            <span>{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
+            ><template v-if="extension.rating != null"
+              >,
+              <span>{{ extension.rating }} stars</span>
+            </template>
+          </p>
+        </li>
+      </ul>
+      <p class="centered pr">
+        <a
+          href="https://github.com/wxt-dev/wxt/edit/main/docs/.vitepress/components/UsingWxtSection.vue"
+          target="_blank"
+          >Open a PR</a
+        >
+        to add your extension to the list!
+      </p>
+    </div>
+  </section>
 </template>

 <style scoped>
+.vp-doc {
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .vp-doc {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-doc {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  max-width: 1152px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
 li img {
  width: 116px;
  height: 116px;
@@ -1,16 +1,23 @@
-import { defineConfig } from 'vitepress';
-import typedocSidebar from '../api/reference/typedoc-sidebar.json';
-import {
-  menuGroup,
-  menuItem,
-  menuRoot,
-  navItem,
-  prepareTypedocSidebar,
-} from './utils/menus';
-import { meta, script } from './utils/head';
+import { DefaultTheme, defineConfig } from 'vitepress';
+import { generateCliDocs } from './plugins/generate-cli-docs';
+import typedocSidebar from '../api/typedoc-sidebar.json';
+
+const filteredTypedocSidebar = typedocSidebar.filter(
+  (item) => item.text !== 'API',
+);
+// Typedoc's markdown theme adds collapse: true to all our items, event ones without any children,
+// so they need to be removed.
+function removeCollapsedWithNoItems(items: DefaultTheme.SidebarItem[]) {
+  for (const item of items) {
+    if (item.items) removeCollapsedWithNoItems(item.items);
+    else delete item.collapsed;
+  }
+}
+removeCollapsedWithNoItems(filteredTypedocSidebar);

 const title = 'Next-gen Web Extension Framework';
 const titleSuffix = ' – WXT';
+
 const description =
  "WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
 const ogTitle = `${title}${titleSuffix}`;
@@ -24,6 +31,7 @@ export default defineConfig({
  description,
  vite: {
    clearScreen: false,
+    plugins: [generateCliDocs()],
  },
  lastUpdated: true,
  sitemap: {
@@ -31,16 +39,20 @@ export default defineConfig({
  },

  head: [
-    meta('og:type', 'website'),
-    meta('og:title', ogTitle),
-    meta('og:image', ogImage),
-    meta('og:url', ogUrl),
-    meta('og:description', description),
-    meta('twitter:card', 'summary_large_image', { useName: true }),
-    script('https://umami.aklinker1.io/script.js', {
-      'data-website-id': 'c1840c18-a12c-4a45-a848-55ae85ef7915',
-      async: '',
-    }),
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:title', content: ogTitle }],
+    ['meta', { property: 'og:image', content: ogImage }],
+    ['meta', { property: 'og:url', content: ogUrl }],
+    ['meta', { property: 'og:description', content: description }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    [
+      'script',
+      {
+        async: '',
+        'data-website-id': 'c1840c18-a12c-4a45-a848-55ae85ef7915',
+        src: 'https://umami.aklinker1.io/script.js',
+      },
+    ],
  ],

  themeConfig: {
@@ -49,119 +61,94 @@ export default defineConfig({
      src: '/logo.svg',
      alt: 'WXT logo',
    },
-
    editLink: {
      pattern: 'https://github.com/wxt-dev/wxt/edit/main/docs/:path',
    },
-
    search: {
      provider: 'local',
    },

+    nav: [
+      { text: 'Guide', link: '/guide/installation.md' },
+      { text: 'Entrypoints', link: '/entrypoints/background.md' },
+      { text: 'Examples', link: '/examples.md' },
+      { text: 'API', link: '/api/cli.md' },
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            { text: 'Introduction', link: '/guide/introduction.md' },
+            { text: 'Installation', link: '/guide/installation.md' },
+            { text: 'Configuration', link: '/guide/configuration.md' },
+            { text: 'Entrypoints', link: '/guide/entrypoints.md' },
+            { text: 'Manifest.json', link: '/guide/manifest.md' },
+            { text: 'Extension APIs', link: '/guide/extension-apis.md' },
+            { text: 'Storage', link: '/guide/storage.md' },
+            { text: 'Assets', link: '/guide/assets.md' },
+            { text: 'Content Script UI', link: '/guide/content-script-ui.md' },
+            { text: 'Multiple Browsers', link: '/guide/multiple-browsers.md' },
+            { text: 'ES Modules', link: '/guide/esm.md' },
+            { text: 'Auto-imports', link: '/guide/auto-imports.md' },
+            { text: 'Vite', link: '/guide/vite.md' },
+            { text: 'Remote Code', link: '/guide/remote-code.md' },
+            { text: 'Publishing', link: '/guide/publishing.md' },
+            { text: 'Development', link: '/guide/development.md' },
+            { text: 'Testing', link: '/guide/testing.md' },
+          ],
+        },
+        {
+          text: 'Other',
+          items: [
+            { text: 'Migrate to WXT', link: '/guide/migrate-to-wxt.md' },
+            { text: 'Compare', link: '/guide/compare.md' },
+          ],
+        },
+      ],
+      '/entrypoints/': [
+        {
+          text: 'Entrypoints',
+          items: [
+            { text: 'Background', link: '/entrypoints/background.md' },
+            { text: 'Bookmarks', link: '/entrypoints/bookmarks.md' },
+            {
+              text: 'Content Scripts',
+              link: '/entrypoints/content-scripts.md',
+            },
+            { text: 'CSS', link: '/entrypoints/css.md' },
+            { text: 'Devtools', link: '/entrypoints/devtools.md' },
+            { text: 'History', link: '/entrypoints/history.md' },
+            { text: 'Newtab', link: '/entrypoints/newtab.md' },
+            { text: 'Options', link: '/entrypoints/options.md' },
+            { text: 'Popup', link: '/entrypoints/popup.md' },
+            { text: 'Sandbox', link: '/entrypoints/sandbox.md' },
+            { text: 'Side Panel', link: '/entrypoints/sidepanel.md' },
+            { text: 'Unlisted Pages', link: '/entrypoints/unlisted-pages.md' },
+            {
+              text: 'Unlisted Scripts',
+              link: '/entrypoints/unlisted-scripts.md',
+            },
+          ].sort((l, r) => l.text.localeCompare(r.text)),
+        },
+      ],
+      '/api/': [
+        {
+          items: [
+            { text: 'CLI', link: '/api/cli.md' },
+            {
+              text: 'Modules',
+              items: filteredTypedocSidebar,
+            },
+          ],
+        },
+      ],
+    },
+
    socialLinks: [
      { icon: 'discord', link: 'https://discord.gg/ZFsZqGery9' },
      { icon: 'github', link: 'https://github.com/wxt-dev/wxt' },
    ],
-
-    nav: [
-      navItem('Get Started', '/get-started/introduction'),
-      navItem('Guide', '/guide/key-concepts/manifest'),
-      navItem('API', '/api/reference/wxt'),
-      navItem('Examples', '/examples'),
-    ],
-
-    sidebar: {
-      '/get-started/': menuRoot([
-        menuGroup('Get Started', '/get-started/', [
-          menuItem('Introduction', 'introduction'),
-          menuItem('Installation', 'installation'),
-          menuItem('Configuration', 'configuration'),
-          menuItem('Entrypoints', 'entrypoints'),
-          menuItem('Assets', 'assets'),
-          menuItem('Publishing', 'publishing'),
-          menuItem('Migrate to WXT', 'migrate-to-wxt'),
-          menuItem('Compare', 'compare'),
-        ]),
-      ]),
-      '/guide/': menuRoot([
-        menuGroup('Key Concepts', '/guide/key-concepts/', [
-          menuItem('Manifest', 'manifest'),
-          menuItem('Auto-imports', 'auto-imports'),
-          menuItem('Web Extension Polyfill', 'web-extension-polyfill'),
-          menuItem('Frontend Frameworks', 'frontend-frameworks'),
-          menuItem('Content Script UI', 'content-script-ui'),
-        ]),
-        menuGroup('Directory Structure', '/guide/directory-structure/', [
-          // Folders
-          menuItem('.output/', 'output'),
-          menuItem('.wxt/', 'wxt'),
-          menuItem('assets/', 'assets'),
-          menuItem('components/', 'components'),
-          menuItem('composables/', 'composables'),
-          menuGroup('entrypoints/', '/guide/directory-structure/entrypoints/', [
-            menuItem('background', 'background.md'),
-            menuItem('bookmarks', 'bookmarks.md'),
-            menuItem('*.content.ts', 'content-scripts.md'),
-            menuItem('*.css', 'css.md'),
-            menuItem('devtools', 'devtools.md'),
-            menuItem('history', 'history.md'),
-            menuItem('newtab', 'newtab.md'),
-            menuItem('options', 'options.md'),
-            menuItem('popup', 'popup.md'),
-            menuItem('sandbox', 'sandbox.md'),
-            menuItem('sidepanel', 'sidepanel.md'),
-            menuItem('*.html', 'unlisted-pages.md'),
-            menuItem('*.ts', 'unlisted-scripts.md'),
-          ]),
-          menuItem('hooks/', 'hooks'),
-          menuItem('public/', 'public/', [
-            menuItem('_locales/', 'public/locales'),
-          ]),
-          menuItem('utils/', 'utils'),
-
-          // Files
-          menuItem('.env', 'env'),
-          menuItem('app.config.ts', 'app-config'),
-          menuItem('package.json', 'package'),
-          menuItem('tsconfig.json', 'tsconfig'),
-          menuItem('web-ext.config.ts', 'web-ext-config'),
-          menuItem('wxt.config.ts', 'wxt-config'),
-        ]),
-        menuGroup('Extension APIs', '/guide/extension-apis/', [
-          menuItem('Storage', 'storage'),
-          menuItem('Messaging', 'messaging'),
-          menuItem('Scripting', 'scripting'),
-          menuItem('Others', 'others'),
-        ]),
-        menuGroup('Go Further', '/guide/go-further/', [
-          menuItem('Testing', 'testing'),
-          menuItem('ES Modules', 'es-modules'),
-          menuItem('Debugging', 'debugging'),
-          menuItem('Handling Updates', 'handling-updates'),
-          menuItem('Vite', 'vite'),
-          menuItem('Custom Events', 'custom-events'),
-          menuItem('Reusable Modules', 'reusable-modules'),
-          menuItem('Remote Code', 'remote-code'),
-          menuItem('Entrypoint Loaders', 'entrypoint-loaders'),
-          menuItem('How WXT Works', 'how-wxt-works'),
-        ]),
-        menuGroup('Upgrade Guide', '/guide/upgrade-guide/', [
-          menuItem('wxt', 'wxt'),
-        ]),
-      ]),
-      '/api/': menuRoot([
-        menuGroup('CLI', '/api/cli/', [
-          menuItem('wxt', 'wxt.md'),
-          menuItem('wxt build', 'wxt-build.md'),
-          menuItem('wxt zip', 'wxt-zip.md'),
-          menuItem('wxt prepare', 'wxt-prepare.md'),
-          menuItem('wxt clean', 'wxt-clean.md'),
-          menuItem('wxt init', 'wxt-init.md'),
-          menuItem('wxt submit', 'wxt-submit.md'),
-          menuItem('wxt submit init', 'wxt-submit-init.md'),
-        ]),
-        menuGroup('API Reference', prepareTypedocSidebar(typedocSidebar)),
-      ]),
-    },
  },
 });
@@ -1,60 +0,0 @@
-import { resolve, join } from 'node:path';
-import consola from 'consola';
-import { execaCommand } from 'execa';
-
-const cliDir = resolve('packages/wxt/src/cli/commands');
-const cliDirGlob = resolve(cliDir, '**');
-
-export default {
-  watch: [cliDirGlob],
-  async load() {
-    consola.info(`Generating CLI docs`);
-
-    const [wxt, build, zip, prepare, clean, init, submit, submitInit] =
-      await Promise.all([
-        getWxtHelp(''),
-        getWxtHelp('build'),
-        getWxtHelp('zip'),
-        getWxtHelp('prepare'),
-        getWxtHelp('clean'),
-        getWxtHelp('init'),
-        getPublishExtensionHelp(''),
-        getPublishExtensionHelp('init'),
-      ]);
-
-    consola.success(`Generated CLI docs`);
-    return {
-      wxt,
-      build,
-      zip,
-      prepare,
-      clean,
-      init,
-      submit,
-      submitInit,
-    };
-  },
-};
-
-async function getHelp(command: string): Promise<string> {
-  const res = await execaCommand(command + ' --help', {
-    cwd: 'packages/wxt',
-  });
-  return res.stdout;
-}
-
-function getWxtHelp(command: string): Promise<string> {
-  return getHelp(`pnpm -s wxt ${command}`.trim());
-}
-
-async function getPublishExtensionHelp(command: string): Promise<string> {
-  const res = await getHelp(
-    `./node_modules/.bin/publish-extension ${command}`.trim(),
-  );
-  return res.replace(/\$ publish-extension/g, '$ wxt submit');
-}
-
-export interface Command {
-  name: string;
-  docs: string;
-}
@@ -0,0 +1,5 @@
+# CLI Reference
+
+> Reference generated from `wxt <command> --help`
+
+{{ DOCS }}
@@ -0,0 +1,114 @@
+import { relative, resolve } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { format } from 'prettier';
+import consola from 'consola';
+import { execaCommand } from 'execa';
+
+let hasGenerated = false;
+
+const cliDir = resolve('src/cli/commands');
+const cliDirGlob = resolve(cliDir, '**');
+const cliTemplatePath = resolve('docs/.vitepress/plugins/cli.tpl.md');
+const cliPath = resolve('docs/api/cli.md');
+
+const PREFACE = `<!--
+DO NOT EDIT
+Generated by \`wxt/docs/.vitepress/plugins/generate-config-docs.ts\`
+To make changes to the config reference, update the JSDoc in \`src/core/types/external.ts\`.
+-->`;
+
+export function generateCliDocs() {
+  writeFileSync(cliPath, '');
+
+  const generateDocs = async () => {
+    consola.info(`Generating ${relative(process.cwd(), cliPath)}`);
+    try {
+      const res = await execaCommand('pnpm -s wxt --help');
+      const dev = splitInfo(res.stdout);
+      const lines: Array<string | string[]> = [
+        `## \`wxt\``,
+        '```sh',
+        dev.rest,
+        '```',
+      ];
+
+      const commands = await Promise.allSettled(
+        extractCommands(dev.info).map(async (command) => {
+          const res = await execaCommand(`pnpm -s wxt ${command} --help`);
+          const { rest: docs } = splitInfo(res.stdout);
+          return [`## \`wxt ${command}\``, '```sh', docs, '```'];
+        }),
+      );
+      lines.push(
+        ...commands
+          .filter((res) => res.status === 'fulfilled')
+          .map(
+            (res) => (res as unknown as PromiseFulfilledResult<string>).value,
+          ),
+      );
+
+      const text = await format(
+        PREFACE +
+          '\n\n' +
+          readFileSync(cliTemplatePath, 'utf-8').replace(
+            '{{ DOCS }}',
+            lines.flat().join('\n'),
+          ),
+        { parser: 'markdown' },
+      );
+
+      writeFileSync(cliPath, text);
+      consola.success(`Generated ${relative(process.cwd(), cliPath)}`);
+    } catch (err) {
+      consola.fail(`Failed to generate ${relative(process.cwd(), cliPath)}`);
+      consola.error(err.message);
+    }
+  };
+
+  return {
+    name: 'docs:generate-cli-docs',
+    async config() {
+      if (!hasGenerated) {
+        hasGenerated = true;
+        await generateDocs();
+      }
+    },
+    configureServer(server: any) {
+      server.watcher.add(cliDirGlob);
+    },
+    async handleHotUpdate(ctx: { file: string }) {
+      if (ctx.file === cliTemplatePath || ctx.file.includes(cliDir)) {
+        await generateDocs();
+      }
+    },
+  };
+}
+
+function splitInfo(text: string): { info: string; rest: string } {
+  const infoStart = text.indexOf('For more info,');
+  const infoEnd = text.indexOf('\n\nOptions:');
+
+  if (infoStart === -1 || infoEnd === -1) {
+    return { info: '', rest: text };
+  }
+
+  const info = text.substring(infoStart, infoEnd).trim();
+  const rest = text.replace(info, '').trim().replace('\n\n\n\n', '\n\n');
+
+  return { info, rest };
+}
+
+function extractCommands(info: string): string[] {
+  const commands: string[] = [];
+
+  // Split the info by line and iterate through each line
+  info.split('\n').forEach((line) => {
+    // Use regex to capture the command after "$ wxt " and before "--help"
+    const match = line.match(/\$ wxt (\w+) --help/);
+    if (match && match[1]) {
+      commands.push(match[1]);
+    }
+  });
+
+  return commands;
+}
@@ -72,45 +72,6 @@
 .vp-doc .no-vertical-dividers td {
  border: none;
 }
-
 .vp-doc .no-vertical-dividers tr {
  border: 1px solid var(--vp-c-divider);
 }
-
-body {
-  overflow-y: scroll;
-}
-
-.VPSidebar {
-  user-select: none;
-}
-
-.VPSidebarItem.level-0.collapsible {
-  padding-bottom: 0.5rem;
-}
-
-.VPSidebarItem.level-0.collapsible .items {
-  /*border-left: 1px solid var(--vp-c-divider);*/
-}
-
-.VPSidebarItem.level-1 {
-  padding-left: 0.75rem;
-}
-
-.VPSidebar .group + .group {
-  border-top: none;
-  padding-top: 0;
-}
-
-.VPSidebarItem .badge {
-  display: inline-block;
-  min-width: 1.6em;
-  padding: 0.3em 0.4em 0.2em;
-  border-radius: 1rem;
-  font-size: 0.75em;
-  line-height: 1;
-  margin-left: 0.5rem;
-  text-align: center;
-  vertical-align: middle;
-  background-color: var(--vp-c-default-2);
-}
@@ -2,7 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import Icon from '../components/Icon.vue';
 import EntrypointPatterns from '../components/EntrypointPatterns.vue';
 import UsingWxtSection from '../components/UsingWxtSection.vue';
-import ExampleSearch from '../components/ExampleSearch.vue';
+import ExampleList from '../components/ExampleList.vue';
 import './custom.css';

 export default {
@@ -11,6 +11,6 @@ export default {
    ctx.app.component('Icon', Icon);
    ctx.app.component('EntrypointPatterns', EntrypointPatterns);
    ctx.app.component('UsingWxtSection', UsingWxtSection);
-    ctx.app.component('ExampleSearch', ExampleSearch);
+    ctx.app.component('ExampleList', ExampleList);
  },
 };
@@ -1,28 +0,0 @@
-import { HeadConfig } from 'vitepress/types/shared';
-
-export function meta(
-  property: string,
-  content: string,
-  options?: { useName: boolean },
-): HeadConfig {
-  return [
-    'meta',
-    {
-      [options?.useName ? 'name' : 'property']: property,
-      content,
-    },
-  ];
-}
-
-export function script(
-  src: string,
-  props: Record<string, string> = {},
-): HeadConfig {
-  return [
-    'script',
-    {
-      ...props,
-      src,
-    },
-  ];
-}
@@ -1,88 +0,0 @@
-import { DefaultTheme } from 'vitepress';
-
-type SidebarItem = DefaultTheme.SidebarItem;
-type NavItem = DefaultTheme.NavItem;
-
-export function navItem(text: string, link: string): NavItem {
-  return { text, link };
-}
-
-export function menuRoot(items: SidebarItem[]) {
-  return items.map((item, index) => {
-    // item.collapsed = false; // uncomment to expand all level-0 items
-    return item;
-  });
-}
-
-export function menuGroup(text: string, items: SidebarItem[]): SidebarItem;
-export function menuGroup(
-  text: string,
-  base: string,
-  items: SidebarItem[],
-): SidebarItem;
-export function menuGroup(
-  text: string,
-  a: string | SidebarItem[],
-  b?: SidebarItem[],
-): SidebarItem {
-  const collapsed = true;
-  if (typeof a === 'string') {
-    return {
-      text,
-      base: a,
-      items: b,
-      collapsed,
-    };
-  }
-  return {
-    text,
-    items: a,
-    collapsed,
-  };
-}
-
-export function menuItems(items: SidebarItem[]) {
-  return {
-    items,
-  };
-}
-
-export function menuItem(
-  text: string,
-  link: string,
-  items?: SidebarItem[],
-): SidebarItem {
-  if (items) {
-    return { text, link, items };
-  }
-  return { text, link };
-}
-
-/**
- * Clean up and add badges to typedoc leaf sections
- */
-export function prepareTypedocSidebar(items: SidebarItem[]) {
-  // skip contents file
-  const filtered = items.slice(1);
-
-  // remove Typedoc's collapse: true from text nodes
-  const prepareItems = (items: DefaultTheme.SidebarItem[], depth = 0) => {
-    for (const item of items) {
-      if (item.items) {
-        prepareItems(item.items, depth + 1);
-        const hasLeaves = item.items.some((item) => !item.items);
-        if (hasLeaves) {
-          item.text += ` <span class="badge">${item.items.length}</span>`;
-        }
-      } else {
-        delete item.collapsed;
-      }
-    }
-  };
-
-  // process
-  prepareItems(filtered);
-
-  // return
-  return filtered;
-}
@@ -1,18 +0,0 @@
-export interface Example {
-  name: string;
-  description?: string;
-  url: string;
-  searchText: string;
-  apis: string[];
-  permissions: string[];
-  packages: string[];
-}
-
-export type ExamplesMetadata = {
-  examples: Example[];
-  allApis: string[];
-  allPermissions: string[];
-  allPackages: string[];
-};
-
-export type KeySelectedObject = Record<string, boolean | undefined>;
@@ -1,7 +0,0 @@
-# `wxt build`
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.build }}</code></pre></div>
@@ -1,7 +0,0 @@
-# `wxt clean`
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.clean }}</code></pre></div>
@@ -1,7 +0,0 @@
-# `wxt init`
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.init }}</code></pre></div>
@@ -1,7 +0,0 @@
-# `wxt prepare`
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.prepare }}</code></pre></div>
@@ -1,9 +0,0 @@
-# `wxt submit init`
-
-> Alias for [`publish-browser-extension`](https://www.npmjs.com/package/publish-browser-extension)
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.submitInit }}</code></pre></div>
@@ -1,9 +0,0 @@
-# `wxt submit`
-
-> Alias for [`publish-browser-extension`](https://www.npmjs.com/package/publish-browser-extension)
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.submit }}</code></pre></div>
@@ -1,7 +0,0 @@
-# `wxt zip`
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.zip }}</code></pre></div>
@@ -1,7 +0,0 @@
-# `wxt`
-
-<script setup>
-import { data } from '../../.vitepress/loaders/cli.data.ts'
-</script>
-
-<div class="language-sh vp-adaptive-theme active"><pre class="shiki shiki-themes github-light github-dark vp-code"><code>{{ data.wxt }}</code></pre></div>
@@ -40,7 +40,7 @@ export default defineContentScript({
  // Configure how/when content script will be registered
  registration: undefined | "manifest" | "runtime",

-  main(ctx: ContentScriptContext) {
+  main(ctx) {
    // Executed when content script is loaded
  },
 });
@@ -50,6 +50,52 @@ export default defineContentScript({

 When defining multiple content scripts, content script entrypoints that have the same set of options will be merged into a single `content_script` item in the manifest.

+## Context
+
+Old content scripts are not automatically stopped when an extension updates and reloads. Often, this leads to "Invalidated context" errors in production when a content script from an old version of your extension tries to use a web extension API (ie, the `browser` or `chrome` globals).
+
+WXT provides a utility for handling this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
+
+When your extension updates or is uninstalled, the context will become invalidated, and will trigger any `ctx.onInvalidated` listeners you add:
+
+```ts
+export default defineContentScript({
+  // ...
+  main(ctx: ContentScriptContext) {
+    // Add custom listeners for stopping work
+    ctx.onInvalidated(() => {
+      // ...
+    });
+
+    // Timeout utilities that are automatically cleared when invalidated
+    ctx.setTimeout(() => {
+      // ...
+    }, 5e3);
+    ctx.setInterval(() => {
+      // ...
+    }, 60e3);
+
+    // Or add event listeners that get removed when invalidated
+    ctx.addEventListener(document, 'visibilitychange', (event) => {
+      // ...
+    });
+
+    // You can also stop fetch requests
+    fetch('...url', { signal: ctx.signal });
+  },
+});
+```
+
+The class extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) and provides other utilities for stopping a content script's logic once it becomes invalidated.
+
+:::warning
+When working with content scripts, **you should always use the `ctx` object to stop any async or future work.**
+
+This prevents old content scripts from interfering with new content scripts, and prevents error messages from the console in production.
+
+If you're using a framework like React, Vue, Svelte, etc., make sure you're unmounting your UI properly in the `onRemove` option of [`createShadowRootUi`](https://wxt.dev/guide/content-script-ui.html#shadow-root).
+:::
+
 ## CSS

 To include CSS with your content script, import the CSS file at the top of your entrypoint.
@@ -104,4 +150,4 @@ export default defineContentScript({
 });
 ```

-See [Content Script UI](/guide/key-concepts/content-script-ui) for more info on creating UIs and including CSS in content scripts.
+See [Content Script UI](/guide/content-script-ui) for more info on creating UIs and including CSS in content scripts.
@@ -2,10 +2,10 @@

 WXT can build CSS entrypoints individually. CSS entrypoints are always unlisted.

-See [Content Script CSS](/guide/directory-structure/entrypoints/content-scripts#css) documentation for the recommended approach to include CSS with a content script.
+See [Content Script CSS](/entrypoints/content-scripts#css) documentation for the recommended approach to include CSS with a content script.

 :::info
-If the recommended approach doesn't work for your use case, you can use any of the filename patterns below to build the styles separate from the JS and use the [`transformManifest` hook](/api/reference/wxt/interfaces/InlineConfig#transformmanifest) to manually add your CSS file to the manifest.
+If the recommended approach doesn't work for your use case, you can use any of the filename patterns below to build the styles separate from the JS and use the [`transformManifest` hook](/api/wxt/interfaces/InlineConfig#transformmanifest) to manually add your CSS file to the manifest.
 :::

 ## Filenames
@@ -37,4 +37,4 @@ Chrome extensions allow you to add panels and side panes to the devtools window.

 See the WXT's examples for a full walkthrough of extending the devtools window:

- [Devtools Setup](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-devtools#readme)
+<ExampleList tag="devtools" />
@@ -12,8 +12,8 @@ Firefox does not support sandboxed pages.
  :patterns="[
    ['sandbox.html', 'sandbox.html'],
    ['sandbox/index.html', 'sandbox.html'],
-    ['<name>.sandbox.html', '<name>.html'],
-    ['<name>.sandbox/index.html', '<name>.html'],
+    ['<name>.sandbox.html', '<name>.html` '],
+    ['<name>.sandbox/index.html', '<name>.html` '],
  ]"
 />

@@ -24,7 +24,7 @@ If you plan on using the page in an iframe, don't forget to add the page to [`we
 Pages are accessible at `'/<name>.html'`:

 ```ts
-const url = browser.runtime.getURL('/<name>.html', '<html></html>');
+const url = browser.runtime.getURL('/<name>.html');

 console.log(url); // "chrome-extension://<id>/<name>.html"
 ```
@@ -1,19 +1,7 @@
---
-layout: page
---
+# Examples

-<style>
-.examples-container {
-  padding: 32px;
-}
-</style>
+Simple walkthroughs to accomplish common tasks or patterns with WXT.

-<div class="examples-container">
-  <div class="vp-doc">
-    <h1>Examples</h1>
-  </div>
+<ExampleList />

-  <br />
-
-  <ExampleSearch />
-</div>
+> Full code available at [`wxt-dev/wxt-examples`](https://github.com/wxt-dev/wxt-examples)
@@ -1,33 +0,0 @@
-# Assets
-
-WXT has two directories for storing assets like CSS, images, or fonts.
-
- [public directory](/guide/directory-structure/public/): Store files that will be copied into the output directory as-is
- [assets directory](/guide/directory-structure/assets): Store files that will be processed by Vite during the build process
-
-To learn more about how to use assets at runtime from either of these directories, visit their guides linked above.
-
-## Public Directory
-
-Place static files like the extension icon or `_locales/` directory here. These files will be copied over to the output directory without being transformed by Vite.
-
-```
-<srcDir>
-└─ public/
-   ├─ icon-16.png
-   ├─ icon-32.png
-   ├─ icon-48.png
-   ├─ icon-96.png
-   └─ icon-128.png
-```
-
-## Assets Directory
-
-Files in the assets directory will be processed by Vite. They are imported in your source code, and will be transformed or renamed in the output directory.
-
-```
-<srcDir>
-└─ assets/
-   ├─ tailwind.css
-   └─ illustration.svg
-```
@@ -1,47 +0,0 @@
-# Compare
-
-Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework) (another framework) and [CRXJS](https://crxjs.dev/vite-plugin) (a bundler plugin).
-
-## Overview
-
-| Features                                             |       WXT        |     Plasmo      |      CRXJS       |
-| ---------------------------------------------------- | :--------------: | :-------------: | :--------------: |
-| Supports all browsers                                |        ✅        |       ✅        | 🟡 <sup>10</sup> |
-| MV2 Support                                          |        ✅        |       ✅        | 🟡 <sup>1</sup>  |
-| MV3 Support                                          |        ✅        |       ✅        | 🟡 <sup>1</sup>  |
-| Create Extension ZIPs                                |        ✅        |       ✅        |        ❌        |
-| Create Firefox Sources ZIP                           |        ✅        |       ❌        |        ❌        |
-| First-class TypeScript support                       |        ✅        |       ✅        |        ✅        |
-| Entrypoint discovery                                 | ✅ <sup>2</sup>  | ✅ <sup>2</sup> |        ❌        |
-| Inline entrypoint config                             |        ✅        |       ✅        | ❌ <sup>9</sup>  |
-| Auto-imports                                         |        ✅        |       ❌        |        ❌        |
-| Supports all frontend frameworks                     |        ✅        | 🟡 <sup>3</sup> |        ✅        |
-| Framework specific entrypoints (like `Popup.tsx`)    | 🟡 <sup>4</sup>  | ✅ <sup>5</sup> |        ❌        |
-| Automated publishing                                 |        ✅        |       ✅        |        ❌        |
-| Remote Code Bundling (Google Analytics)              |        ✅        |       ✅        |        ❌        |
-| <strong style="opacity: 50%">Dev Mode</strong>       |                  |                 |
-| `.env` Files                                         |        ✅        |       ✅        |        ✅        |
-| Opens browser with extension installed               |        ✅        |       ❌        |        ❌        |
-| HMR for UIs                                          |        ✅        | 🟡 <sup>6</sup> |        ✅        |
-| Reload HTML Files on Change                          |        ✅        | 🟡 <sup>7</sup> |        ✅        |
-| Reload Content Scripts on Change                     |        ✅        | 🟡 <sup>7</sup> |        ✅        |
-| Reload Background on Change                          | 🟡 <sup>7</sup>  | 🟡 <sup>7</sup> | 🟡 <sup>7</sup>  |
-| Respects Content Script `run_at`                     |        ✅        |       ✅        | ❌ <sup>8</sup>  |
-| <strong style="opacity: 50%">Built-in Utils</strong> |                  |                 |                  |
-| Storage                                              |        ✅        |       ✅        | ❌ <sup>11</sup> |
-| Messaging                                            | ❌ <sup>11</sup> |       ✅        | ❌ <sup>11</sup> |
-| Content Script UI                                    |        ✅        |       ✅        | ❌ <sup>11</sup> |
-
-<small>
-  <sup>1</sup>: Either MV2 or MV3, not both.
-  <br/><sup>2</sup>: File based.
-  <br/><sup>3</sup>: Only React, Vue, and Svelte.
-  <br/><sup>4</sup>: <code>.html</code> <code>.ts</code> <code>.tsx</code>.
-  <br/><sup>5</sup>: <code>.html</code> <code>.ts</code> <code>.tsx</code>. <code>.vue</code> <code>.svelte</code>.
-  <br/><sup>6</sup>: React only.
-  <br/><sup>7</sup>: Reloads entire extension.
-  <br/><sup>8</sup>: ESM-style loaders run asynchronously.
-  <br/><sup>9</sup>: Entrypoint options all configured in `manifest.json`.
-  <br/><sup>10</sup>: As of <code>v2.0.0-beta.23</code>, but v2 stable hasn't been released yet.
-  <br/><sup>11</sup>: There is no built-in wrapper around this API. However, you can still access the standard APIs via <code>chrome</code>/<code>browser</code> globals or use any 3rd party NPM package.
-</small>
@@ -1,57 +0,0 @@
-# Configuration
-
-By default, WXT provides sensible configuration for bundling web extensions with Vite.
-
-## Config File
-
-To configure WXT, create a `wxt.config.ts` file in your project root. It should have the following contents:
-
-```ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  // My WXT config
-});
-```
-
-:::info
-For more information on configuring WXT via the `wxt.config.ts` file, read the dedicated [`wxt.config.ts` guide](/guide/directory-structure/wxt-config).
-:::
-
-## Manifest.json
-
-WXT generates your extension's `manifest.json` based on the project structure. To add additional properties, like permissions, use the [`manifest` property](/api/reference/wxt/interfaces/InlineConfig#manifest).
-
-```ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  manifest: {
-    permissions: ['storage'],
-  },
-});
-```
-
-:::info
-For more information on configuring the manifest, read the dedicated [Manifest guide](/guide/key-concepts/manifest).
-:::
-
-## Environment
-
-WXT can read `.env` files, and variables are accessible via `import.meta.env.*`.
-
-:::code-group
-
-```sh [.env]
-VITE_OAUTH_CLIENT_ID=abc123
-```
-
-```ts [JS]
-import.meta.env.VITE_OAUTH_CLIENT_ID;
-```
-
-:::
-
-:::info
-For more information on using .env files, read the dedicated [`.env` guide](/guide/directory-structure/env).
-:::
@@ -1,60 +0,0 @@
-# Entrypoints
-
-An "entrypoint" is any HTML, JS, or CSS file that needs to be bundled and included with your extension, which will be loaded and executed by the browser.
-
-## Defining Entrypoints
-
-In WXT, you create an entrypoint by adding a file to the `entrypoints/` directory.
-
-```
-<rootDir>
-└─ entrypoints/
-   ├─ background.ts
-   ├─ content.ts
-   ├─ injected.ts
-   └─ popup.html
-```
-
-Some entrypoint filesname patterns are reserved by WXT and effect how the manifest is generated.
-
- `popup` adds an `action` to the manifest
- `background` adds a background script/service worker
- `*.content.ts` adds a content script
- ...
-
-> For a full list of recognized filenames, see the the [Entrypoints Directory guide](/guide/directory-structure/entrypoints/background).
-
-Any other files, whether JS, CSS, or HTML, is considered "unlisted". Unlisted files, like `injected.ts` from above, are just bundled to the output directory and not added to the manifest. You can still access or load them at runtime.
-
-## Entrypoint Options
-
-Most entrypoints allow customizing their options in the file you define them in. This differs from regular web extension development, where all options are placed in the `manifest.json`.
-
-WXT looks for custom options in the entrypoint, and adds them to the manifest when generated.
-
-In HTML files, options are listed as `meta` tags:
-
-```html
-<html>
-  <head>
-    <!-- Defining the popup's "default_icon" field -->
-    <meta name="manifest.default_icon" content="{ '16': '/icon/16.png' }" />
-  </head>
-</html>
-```
-
-In TS files, options are apart of the file's default export:
-
-```ts
-export default defineContentScript({
-  matches: ['*://*.google.com/*'],
-  runAt: 'document_start',
-  main() {
-    // ...
-  },
-});
-```
-
-:::info
-All options for each entrypoint type is listed in the [entrypoints directory docs](/guide/directory-structure/entrypoints/background).
-:::
@@ -0,0 +1,85 @@
+# Assets
+
+WXT has two directories for storing assets like CSS, images, or fonts.
+
+- `<srcDir>/public`: Store files that will be copied into the output directory as-is
+- `<srcDir>/assets`: Store files that will be processed by Vite during the build process
+
+## `/public` Directory
+
+Place static files like the extension icon or `_locales/` directory here. These files will be copied over to the output directory without being transformed by Vite.
+
+```
+<srcDir>
+└─ public/
+   ├─ icon-16.png
+   ├─ icon-32.png
+   ├─ icon-48.png
+   ├─ icon-96.png
+   └─ icon-128.png
+```
+
+### Example
+
+You can reference these files by using absolute paths in HTML files or `browser.runtime.getURL` in content scripts.
+
+:::code-group
+
+```html [popup.html]
+<img src="/icon-128.png" />
+```
+
+```ts [content.ts]
+defineContentScript({
+  main() {
+    const image = document.createElement('img');
+    image.src = browser.runtime.getURL('/icon-128.png');
+    document.body.append(image);
+  },
+});
+```
+
+:::
+
+## `/assets` Directory
+
+Files in the assets directory will be processed by Vite. They are imported in your source code, and will be transformed or renamed in the output directory.
+
+```
+<srcDir>
+└─ assets/
+   ├─ style.css
+   └─ illustration.svg
+```
+
+### Example
+
+:::code-group
+
+```html [popup.html]
+<html>
+  <head>
+    <link rel="stylesheet" href="~/assets/style.css" />
+    <!-- ... -->
+  </head>
+  <body>
+    <img src="~/assets/illustration.svg" />
+    <!-- ... -->
+  </body>
+</html>
+```
+
+```ts [content.ts]
+import '~/assets/style.css';
+import illustration from '~/assets/style.svg';
+
+defineContentScript({
+  main() {
+    const image = document.createElement('img');
+    image.src = illustration;
+    document.body.append(image);
+  },
+});
+```
+
+:::
@@ -0,0 +1,80 @@
+# Auto-imports
+
+WXT uses the same tool as Nuxt for auto-imports, [`unimport`](https://github.com/unjs/unimport).
+
+:::info Testing
+To setup your test environment for auto-imports, see [Testing](/guide/testing).
+:::
+
+## WXT Auto-imports
+
+Some WXT APIs can be used without importing them:
+
+- [`browser`](/api/wxt/browser/variables/browser) from `wxt/browser`, a small wrapper around `webextension-polyfill`
+- [`defineContentScript`](/api/wxt/sandbox/functions/defineContentScript) from `wxt/sandbox`
+- [`defineBackground`](/api/wxt/sandbox/functions/defineBackground) from `wxt/sandbox`
+- [`defineUnlistedScript`](/api/wxt/sandbox/functions/defineUnlistedScript) from `wxt/sandbox`
+- [`createIntegratedUi`](/api/wxt/client/functions/createIntegratedUi) from `wxt/client`
+- [`createShadowRootUi`](/api/wxt/client/functions/createShadowRootUi) from `wxt/client`
+- [`createIframeUi`](/api/wxt/client/functions/createIframeUi) from `wxt/client`
+- [`fakeBrowser`](/api/wxt/testing/variables/fakeBrowser) from `wxt/testing`
+
+And more!
+
+## Project Auto-imports
+
+In addition WXT APIs, default and named exports from inside the following directories can be used without listing them in imports.
+
+- `<srcDir>/components/*`
+- `<srcDir>/composables/*`
+- `<srcDir>/hooks/*`
+- `<srcDir>/utils/*`
+
+To add auto-imports from subdirectories, like `utils/api/some-file.ts`, re-export them from the base directory:
+
+```ts
+// utils/index.ts
+export * from './api/some-file.ts';
+```
+
+Alternatively, you could add the directory to the list of auto-import directories in your config file.
+
+## TypeScript
+
+For TypeScript to work, you need to run the `wxt prepare` command. This will ensure types are generated for auto-imports.
+
+This should be added to your `postinstall` script:
+
+```json
+// package.json
+{
+  "scripts": {
+    "postinstall": "wxt prepare" // [!code ++]
+  }
+}
+```
+
+## Customization
+
+You can override the default auto-import behavior in your `wxt.config.ts` file.
+
+See [`unimport`'s documentation](https://github.com/unjs/unimport#configurations) for a complete list of options.
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  imports: {
+    // Add auto-imports for vue functions like createApp, ref, computed, watch, toRaw, etc...
+    presets: ['vue'],
+  },
+});
+```
+
+To disable auto-imports, set `imports: false`
+
+```ts
+export default defineConfig({
+  imports: false,
+});
+```
@@ -0,0 +1,50 @@
+# Compare
+
+Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework) (another web extension framework) and [CRXJS](https://crxjs.dev/vite-plugin) (the most popular bundler plugin).
+
+## Overview
+
+| Features                                             |             WXT             |                  Plasmo                  |                                  CRXJS                                  |
+| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | :---------------------------------------------------------------------: |
+| Supports all browsers                                |             ✅              |                    ✅                    | ❌ See [#56](https://github.com/crxjs/chrome-extension-tools/issues/56) |
+| MV2 Support                                          |             ✅              |                    ✅                    |                          🟡 Either MV2 or MV3                           |
+| MV3 Support                                          |             ✅              |                    ✅                    |                          🟡 Either MV2 or MV3                           |
+| Create Extension ZIPs                                |             ✅              |                    ✅                    |                                   ❌                                    |
+| Create Firefox Sources ZIP                           |             ✅              |                    ❌                    |                                   ❌                                    |
+| First-class TypeScript support                       |             ✅              |                    ✅                    |                                   ✅                                    |
+| Entrypoint discovery                                 |         File based          |                File based                |                                   ❌                                    |
+| Inline entrypoint config                             |             ✅              |                    ✅                    |                             Manifest based                              |
+| Auto-imports                                         |             ✅              |                    ❌                    |                                   ❌                                    |
+| Supports all frontend frameworks                     |             ✅              |      🟡 Only React, Vue, and Svelte      |                                   ✅                                    |
+| Framework specific entrypoints (like `Popup.tsx`)    |   🟡 `.html` `.ts` `.tsx`   | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` |                                   ❌                                    |
+| Automated publishing                                 |             ✅              |                    ✅                    |                                   ❌                                    |
+| Remote Code Bundling (Google Analytics)              |             ✅              |                    ✅                    |                                   ❌                                    |
+| <strong style="opacity: 50%">Dev Mode</strong>       |                             |                                          |
+| `.env` Files                                         |             ✅              |                    ✅                    |                                   ✅                                    |
+| Opens browser and install extension                  |             ✅              |                    ❌                    |                                   ❌                                    |
+| HMR for UIs                                          |             ✅              |              🟡 React only               |                                   ✅                                    |
+| Reload HTML Files on Change                          |             ✅              |       🟡 Reloads entire extension        |                                   ✅                                    |
+| Reload Content Scripts on Change                     |             ✅              |       🟡 Reloads entire extension        |                                   ✅                                    |
+| Reload Background on Change                          | 🟡 Reloads entire extension |       🟡 Reloads entire extension        |                       🟡 Reloads entire extension                       |
+| Respects Content Script `run_at`                     |             ✅              |                    ✅                    |                 ❌ ESM-style loaders run asynchronously                 |
+| <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |                                                                         |
+| Storage                                              |             ✅              |                    ✅                    |                                   ❌                                    |
+| Messaging                                            |             ❌              |                    ✅                    |                                   ❌                                    |
+| Content Script UI                                    |             ✅              |                    ✅                    |                                   ❌                                    |
+
+## Why use WXT?
+
+WXT's main goal is improving the development experience (DX) of creating web extensions, while not sacrificing support. There are two things WXT does differently:
+
+1. Automatically opens a browser with the extension installed when starting development
+2. Reload each part of the extension individually rather than reloading the entire extension
+
+Opening a browser automatically makes it super easy to start and stop development without having to manually load the extension in your browser.
+
+Reloading each part of the extension individually improves your iteration speed while developing UIs. This is because reloading the entire extension on every change will close the popup and any tabs open to an extension page, like options. If you save a file associated with a UI and a content script while working on the UI, it will randomly close because it needed to reload the extension when the content script changed. This interrupts your development flow and is really annoying.
+
+WXT solves this problem by reloading HTML pages and content scripts individually (when possible) to keep your UIs open while you develop them. This is a MV3 feature, so if you're developing a MV2 extension, you'll get the same dev experience as Plasmo.
+
+:::info
+Unfortunately, there isn't an API for reloading the background page/service worker individually, so if you change a file used by the background, the entire extension will reload. See [Issue #53](https://github.com/wxt-dev/wxt/issues/53) for more details.
+:::
@@ -0,0 +1,99 @@
+# Configuration
+
+WXT's behavior can be configured via the `wxt.config.ts` file. In this file, you can add Vite plugins, change the directory structure of your project, and set fields on your `manifest.json`.
+
+## Config File
+
+To configure WXT, create a `wxt.config.ts` file in your project root. It should have the following contents:
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  // My WXT config
+});
+```
+
+:::info
+See the [Config reference](/api/wxt/interfaces/InlineConfig) for a full list of options.
+:::
+
+## Directory Config
+
+WXT allows you to edit several directories to your liking:
+
+- `root` (default: `process.cwd()`) - Root of the WXT project
+- `srcDir` (default: `<rootDir>`) - Location of all your source code
+- `entrypointsDir` (default: `<srcDir>/entrypoints`) - Folder containing all the entrypoints.
+- `publicDir` (default: `<srcDir>/public`) - Folder containing [public assets](/guide/assets)
+
+### Example
+
+You want a `src/` directory to contain all your source code, and you want to rename `entrypoints/` &rarr; `entries/`:
+
+```
+<rootDir>
+├─ src/
+│  └─ entries/
+│     ├─ background.ts
+│     └─ ...
+└─ wxt.config.ts
+```
+
+Your config would look like this:
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  srcDir: 'src',
+  entrypointsDir: 'entries',
+});
+```
+
+## Frontend Frameworks
+
+Adding a framework like Vue, React, or Svelte is easy!
+
+In the `wxt.config.ts` file, install and add the framework's Vite plugin to the config.
+
+:::code-group
+
+```ts [Vue]
+import { defineConfig } from 'wxt';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  vite: () => ({
+    plugins: [vue()],
+  }),
+});
+```
+
+```ts [React]
+import { defineConfig } from 'wxt';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  vite: () => ({
+    plugins: [react()],
+  }),
+});
+```
+
+```ts [Svelte]
+import { defineConfig } from 'wxt';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  vite: () => ({
+    plugins: [svelte()],
+  }),
+});
+```
+
+:::
+
+:::info
+Internally, WXT runs `vite build` multiple times during a single build. It can't share the same instance of some plugins between each build, so a function is used to return completely new instances of each plugin for each build.
+:::
@@ -155,20 +155,20 @@ export default defineContentScript({

 :::

-See the [API Reference](/api/reference/wxt/client/functions/createIntegratedUi) for the complete list of options.
+See the [API Reference](/api/wxt/client/functions/createIntegratedUi) for the complete list of options.

-You can control how CSS is injected for an integrated content script UI with the [`cssInjectionMode`](/api/reference/wxt/interfaces/BaseContentScriptEntrypointOptions#cssinjectionmode) property. Usually, you'll want to leave it as `"manifest"`, the default, so the UI inherits its style from the website's CSS.
+You can control how CSS is injected for an integrated content script UI with the [`cssInjectionMode`](/api/wxt/interfaces/BaseContentScriptEntrypointOptions#cssinjectionmode) property. Usually, you'll want to leave it as `"manifest"`, the default, so the UI inherits its style from the website's CSS.

 ## Shadow Root

 Often in web extensions, you don't want your content script's CSS affecting the page, or vise-versa. The [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) API is ideal for this.

-WXT's [`createShadowRootUi`](/api/reference/wxt/client/functions/createShadowRootUi) abstracts all the `ShadowRoot` setup away, making it easy to create UIs with isolated CSS. It also supports an optional `isolateEvents` parameter to further isolate user interactions.
+WXT's [`createShadowRootUi`](/api/wxt/client/functions/createShadowRootUi) abstracts all the `ShadowRoot` setup away, making it easy to create UIs with isolated CSS. It also supports an optional `isolateEvents` parameter to further isolate user interactions.

 To use `createShadowRootUi`, follow these steps:

 1. Import your CSS file at the top of your content script
-2. Set [`cssInjectionMode: "ui"`](/api/reference/wxt/interfaces/BaseContentScriptEntrypointOptions#cssinjectionmode) inside `defineContentScript`
+2. Set [`cssInjectionMode: "ui"`](/api/wxt/interfaces/BaseContentScriptEntrypointOptions#cssinjectionmode) inside `defineContentScript`
 3. Define your UI with `createShadowRootUi()`
 4. Mount the UI so it is visible to users

@@ -341,7 +341,7 @@ export default defineContentScript({

 :::

-See the [API Reference](/api/reference/wxt/client/functions/createShadowRootUi) for the complete list of options.
+See the [API Reference](/api/wxt/client/functions/createShadowRootUi) for the complete list of options.

 :::info TailwindCSS
 `createShadowRootUi` supports TailwindCSS out of the box! When importing the styles, just import the main CSS file containing the `@tailwind` directives, and everything will just work :+1:.
@@ -351,7 +351,7 @@ See the [API Reference](/api/reference/wxt/client/functions/createShadowRootUi)

 If you don't need to run your UI in the same frame as the content script, you can use an IFrame to host your UI instead. Since an IFrame just hosts an HTML page, **_HMR is supported_**.

-WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/functions/createIframeUi), which simplifies setting up the IFrame.
+WXT provides a helper function, [`createIframeUi`](/api/wxt/client/functions/createIframeUi), which simplifies setting up the IFrame.

 1. Create an HTML page that will be loaded into your IFrame
   ```html
@@ -388,14 +388,14 @@ WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/fun
   export default defineContentScript({
     matches: ['<all_urls>'],

-     main(ctx) {
+     async main(ctx) {
       // Define the UI
-       const ui = createIframeUi(ctx, {
+       const ui = await createIframeUi(ctx, {
         page: '/example-iframe.html',
         position: 'inline',
         onMount: (wrapper, iframe) => {
           // Add styles to the iframe like width
-           iframe.width = '123';
+           iframe.width = 123;
         },
       });

@@ -405,4 +405,4 @@ WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/fun
   });
   ```

-See the [API Reference](/api/reference/wxt/client/functions/createIframeUi) for the complete list of options.
+See the [API Reference](/api/wxt/client/functions/createIframeUi) for the complete list of options.
@@ -33,7 +33,7 @@ For production builds, none of the above modifications will be applied, and you'

 ## 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/reference/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
+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`.

 :::code-group

@@ -59,7 +59,7 @@ export default defineRunnerConfig({

 ### Browser Binaries

-`web-ext`'s browser discovery is very limited. By default, it only guesses at where Chrome and Firefox are installed. If you've customized your install locations, you may need to tell `web-ext` where the binaries/executables are located using the [`binaries` option](/api/reference/wxt/interfaces/ExtensionRunnerConfig#binaries). For other Chromium based browsers, like Edge or Opera, you'll need to explicitly list them in the `binaries` option as well, otherwise they will open in Chrome by default.
+`web-ext`'s browser discovery is very limited. By default, it only guesses at where Chrome and Firefox are installed. If you've customized your install locations, you may need to tell `web-ext` where the binaries/executables are located using the [`binaries` option](/api/wxt/interfaces/ExtensionRunnerConfig#binaries). For other Chromium based browsers, like Edge or Opera, you'll need to explicitly list them in the `binaries` option as well, otherwise they will open in Chrome by default.

 ```ts
 // ~/web-ext.config.ts
@@ -89,11 +89,11 @@ import { defineRunnerConfig } from 'wxt';
 export default defineRunnerConfig({
  startUrls: ['https://google.com', 'https://duckduckgo.com'],
  chromiumProfile: '/path/to/profile/to/use',
-  chromiumArgs: ['--window-size=400,300'],
+  chromiumArgs: ['--window-size=400x300'],
 });
 ```

-For a full list of options, see the [API Reference](/api/reference/wxt/interfaces/ExtensionRunnerConfig).
+For a full list of options, see the [API Reference](/api/wxt/interfaces/ExtensionRunnerConfig).

 ## Reload the Extension

@@ -1,61 +0,0 @@
-# `<srcDir>/app.config.ts`
-
-:::warning Nuxt Users
-If you're familiar with Nuxt, this file is meant to be a direct equivalent to Nuxt's `app.config.ts` file.
-
-However, some of Nuxt's features, like overriding the app config based on a `.env` file or automatically generating the config's types, are not implemented. They are planned, just not implemented yet. Feel free to open a PR!
-:::
-
-## Overview
-
-Define runtime configuration in a single place.
-
-```ts
-// <srcDir>/app.config.ts
-import { defineAppConfig } from 'wxt/sandbox';
-
-// Define types for your config
-declare module 'wxt/sandbox' {
-  export interface WxtAppConfig {
-    theme?: 'light' | 'dark';
-  }
-}
-
-export default defineAppConfig({
-  theme: 'dark',
-});
-```
-
-Then access the config in your extension by calling `useAppConfig`:
-
-```ts
-console.log(useAppConfig()); // { theme: "dark" }
-```
-
-## Environment Variables
-
-If you have a `.env` file, you can access any variables defined in it here. You can convert them to better types (like booleans), add types for them, or leave them as is.
-
-```txt
-# .env
-VITE_BUG_REPORTING_DISABLED=true
-VITE_API_KEY=...
-```
-
-```ts
-// <srcDir>/app.config.ts
-
-declare module 'wxt/sandbox' {
-  export interface WxtAppConfig {
-    bugReportingDisabled: boolean;
-    apiKey?: string;
-  }
-}
-
-export default defineAppConfig({
-  bugReportingDisabled: import.meta.env.VITE_BUG_REPORTING_DISABLED === 'true',
-  apiKey: import.meta.env.VITE_API_KEY,
-});
-```
-
-> You don't have to do this, you can use `import.meta.env.VITE_*` anywhere in your runtime code, but putting them here consolidates them to one place and defines what variables are expected.
@@ -1,42 +0,0 @@
-# `<srcDir>/assets`
-
-Files in the assets directory will be processed by Vite. They are imported in your source code, and will be transformed or renamed in the output directory.
-
-```
-<srcDir>
-└─ assets/
-   ├─ style.css
-   └─ illustration.svg
-```
-
-### Example
-
-:::code-group
-
-```html [popup.html]
-<html>
-  <head>
-    <link rel="stylesheet" href="~/assets/style.css" />
-    <!-- ... -->
-  </head>
-  <body>
-    <img src="~/assets/illustration.svg" />
-    <!-- ... -->
-  </body>
-</html>
-```
-
-```ts [content.ts]
-import '~/assets/style.css';
-import illustration from '~/assets/style.svg';
-
-defineContentScript({
-  main() {
-    const image = document.createElement('img');
-    image.src = illustration;
-    document.body.append(image);
-  },
-});
-```
-
-:::
@@ -1,5 +0,0 @@
-# `<srcDir>/components`
-
-:::warning 🚧 Under construction
-These docs will be coming soon!
-:::
@@ -1,5 +0,0 @@
-# `<srcDir>/composables`
-
-:::warning 🚧 Under construction
-These docs will be coming soon!
-:::
@@ -1,5 +0,0 @@
-# `<root>/.env`
-
-:::warning 🚧 Under construction
-These docs will be coming soon!
-:::
@@ -1,5 +0,0 @@
-# `<srcDir>/hooks`
-
-:::warning 🚧 Under construction
-These docs will be coming soon!
-:::
@@ -1,5 +0,0 @@
-# `<root>/.output`
-
-:::warning 🚧 Under construction
-These docs will be coming soon!
-:::
@@ -1,5 +0,0 @@
-# `<root>/package.json`
-
-:::warning 🚧 Under construction
-These docs will be coming soon!
-:::
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aaron	d5fe4248e2	bump version for early release	2024-04-19 20:34:36 -05:00
Aaron	58140cf3e8	update test snapshot	2024-04-19 20:33:21 -05:00
Aaron	1a39f856af	get it working	2024-04-19 20:31:32 -05:00
Aaron	82b769e939	feat: Support returning values from scripts executed with the scripting API	2024-04-19 16:25:17 -05:00