chore(release): wxt v0.18.14

fix(modules): Add types from all wxt node_modules, not just ones with config (#817 )
chore(release): wxt v0.18.13
2024-07-09 16:03:18 +00:00 · 2024-07-09 10:58:41 -05:00 · 2024-07-09 15:07:38 +00:00 · 2024-07-09 10:02:00 -05:00 · 2024-07-09 09:58:59 -05:00 · 2024-07-09 08:12:38 -05:00
464 changed files with 26873 additions and 10623 deletions
@@ -1,2 +1,5 @@
 * text=auto eol=lf
 pnpm-lock.yaml linguist-generated
+package-lock.json linguist-generated
+bun.lockb linguist-generated
+yarn.lock linguist-generated
@@ -1,42 +0,0 @@
---
-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
-
-Upload a ZIP or share a link to a repo representing the minimal reproduction. **_If you don't upload a minimal reproduction, you bug report will be closed._**
-
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-### 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.
@@ -0,0 +1,74 @@
+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
@@ -0,0 +1,8 @@
+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,9 +4,7 @@ runs:
  using: composite
  steps:
    - name: Setup PNPM
-      uses: pnpm/action-setup@v2
-      with:
-        version: 8
+      uses: pnpm/action-setup@v4
    - name: Setup NodeJS
      uses: actions/setup-node@v4
      with:
@@ -9,3 +9,7 @@ updates:
    directory: '/' # Location of package manifests
    schedule:
      interval: 'monthly'
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'monthly'
@@ -0,0 +1,27 @@
+name: Publish Docs
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Docker Image Tag
+        required: true
+        default: latest
+
+jobs:
+  publish:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - uses: docker/login-action@v3
+        with:
+          registry: https://${{ secrets.DOCKER_REGISTRY_HOSTNAME }}
+          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
+          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+      - run: pnpm docs:build
+      - run: docker build docs/.vitepress -t ${{ secrets.DOCKER_REGISTRY_HOSTNAME }}/wxt/docs:${{ github.event.inputs.tag || 'latest' }}
+      - run: docker push ${{ secrets.DOCKER_REGISTRY_HOSTNAME }}/wxt/docs:${{ github.event.inputs.tag || 'latest' }}
+      - run: curl -X POST -i ${{ secrets.UPDATE_DOCS_WEBHOOK }}
@@ -1,17 +1,29 @@
 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

 jobs:
  validate:
    uses: './.github/workflows/validate.yml'
+    secrets: inherit

  publish:
    runs-on: ubuntu-22.04
    needs:
      - validate
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

@@ -21,14 +33,18 @@ jobs:
        run: |
          git config user.email "github-actions@users.noreply.github.com"
          git config user.name "GitHub Actions"
-          pnpx changelogen@latest --release
+          pnpm tsx scripts/bump-package-version.ts ${{ inputs.package }}
          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: pnpx changelogen@latest gh release --token ${{ secrets.GITHUB_TOKEN }}
+        run: pnpm tsx scripts/create-github-release.ts ${{ inputs.package }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -0,0 +1,24 @@
+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
+
+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 }}
@@ -7,50 +7,48 @@ on:
      - main

 jobs:
-  formatting:
+  checks:
    runs-on: ubuntu-22.04
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
-      - run: pnpm format:check
-  type-check:
+      - run: pnpm check
+  builds:
    runs-on: ubuntu-22.04
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
-      - run: pnpm compile
-  validate-demo:
+      - run: pnpm buildc all
+  build-demo:
    runs-on: ubuntu-22.04
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
      - run: pnpm build:all
-        working-directory: demo
-      - run: pnpm tsc --noEmit
-        working-directory: demo
+        working-directory: packages/wxt-demo
      - run: pnpm wxt zip
-        working-directory: demo
-      - run: pnpm vitest run
-        working-directory: demo
+        working-directory: packages/wxt-demo
  tests:
    runs-on: ubuntu-22.04
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
+      - uses: oven-sh/setup-bun@v2
      - name: pnpm test:coverage
        run: pnpm test:coverage --reporter=default --reporter=hanging-process
-      - uses: codecov/codecov-action@v3
+      - uses: codecov/codecov-action@v4
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
  windows-tests:
    runs-on: windows-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
      - run: pnpm test run
  template:
    runs-on: ubuntu-22.04
    strategy:
+      fail-fast: false
      matrix:
        template:
          - react
@@ -59,18 +57,19 @@ jobs:
          - vanilla
          - vue
    steps:
-      - uses: actions/checkout@v3
+      - 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 ../../wxt-*.tgz
+      - run: npm i -D ../../packages/wxt/wxt-*.tgz
        working-directory: templates/${{ matrix.template }}
-      - run: npm run compile
+      - run: pnpm compile
        if: matrix.template != 'svelte'
        working-directory: templates/${{ matrix.template }}
-      - run: npm run check
+      - run: pnpm check
        if: matrix.template == 'svelte'
        working-directory: templates/${{ matrix.template }}
-      - run: npm run build
+      - run: pnpm build
        working-directory: templates/${{ matrix.template }}
@@ -17,6 +17,7 @@ web-ext.config.ts
 templates/*/pnpm-lock.yaml
 templates/*/yarn.lock
 templates/*/package-lock.json
-docs/api
+docs/api/reference
 stats.html
 .tool-versions
+.cache
@@ -1 +0,0 @@
-ignore-workspace-root-check=true
@@ -1,886 +0,0 @@
-# Changelog
-
-## 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))
-
-### 📖 Documentation
-
- Fix heading ([345406f](https://github.com/wxt-dev/wxt/commit/345406f))
- Add demo video ([#208](https://github.com/wxt-dev/wxt/pull/208))
-
-### 🏡 Chore
-
- Fix Svelte and React template READMEs ([#207](https://github.com/wxt-dev/wxt/pull/207))
-
-#### ⚠️ Breaking Changes
-
- ⚠️  Remove `lib` from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209))
-
-### ❤️ Contributors
-
- Yyyanghj <yyyanghj@gmail.com>
-
-## v0.8.7
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.6...v0.8.7)
-
-### 🚀 Enhancements
-
- `createContentScriptIframe` utility ([#206](https://github.com/wxt-dev/wxt/pull/206))
-
-### 🏡 Chore
-
- **deps-dev:** Bump happy-dom from 12.4.0 to 12.10.3 ([#194](https://github.com/wxt-dev/wxt/pull/194))
- **deps-dev:** Bump tsx from 3.12.8 to 3.14.0 ([#198](https://github.com/wxt-dev/wxt/pull/198))
- Upgrade types ([f3874da](https://github.com/wxt-dev/wxt/commit/f3874da))
- **deps-dev:** Upgrade `lint-staged` to `^15.0.2` ([5f74a54](https://github.com/wxt-dev/wxt/commit/5f74a54))
- **deps-dev:** Upgrade `execa` to `^8.0.1` ([#200](https://github.com/wxt-dev/wxt/pull/200))
- **deps-dev:** Upgrade `typedoc` to `^0.25.3` ([#201](https://github.com/wxt-dev/wxt/pull/201))
- **deps-dev:** Upgrade `vue` to `3.3.7` ([0b8d101](https://github.com/wxt-dev/wxt/commit/0b8d101))
- **deps-dev:** Upgrade `vitepress` to `1.0.0-rc.24` ([5de18e5](https://github.com/wxt-dev/wxt/commit/5de18e5))
- **deps-dev:** Update `@type/*` packages for demo ([cd4d00e](https://github.com/wxt-dev/wxt/commit/cd4d00e))
- **deps-dev:** Update `sass` to `1.69.5` ([183bb02](https://github.com/wxt-dev/wxt/commit/183bb02))
- Improve prettier git hook ([0f09cbe](https://github.com/wxt-dev/wxt/commit/0f09cbe))
- Run E2E tests in parallel ([#204](https://github.com/wxt-dev/wxt/pull/204))
-
-### 🤖 CI
-
- Separate validation into multiple jobs ([#203](https://github.com/wxt-dev/wxt/pull/203))
-
-## v0.8.6
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.5...v0.8.6)
-
-### 🩹 Fixes
-
- Inline WXT modules inside `WxtVitest` plugin ([b75c553](https://github.com/wxt-dev/wxt/commit/b75c553))
-
-## v0.8.5
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.4...v0.8.5)
-
-### 🚀 Enhancements
-
- Refactor project structure to export `initialize`, `prepare`, and `zip` functions ([#182](https://github.com/wxt-dev/wxt/pull/182))
-
-### 🩹 Fixes
-
- Enable Vue SFC auto-imports in `vue` template ([f8a0fb3](https://github.com/wxt-dev/wxt/commit/f8a0fb3))
-
-### 📖 Documentation
-
- Improve `runner.binaries` documentation ([d9e9b43](https://github.com/wxt-dev/wxt/commit/d9e9b43))
- Update auto-imports.md ([#186](https://github.com/wxt-dev/wxt/pull/186))
- Add `test.server.deps.inline` to Vitest guide ([19756c6](https://github.com/wxt-dev/wxt/commit/19756c6))
-
-### 🏡 Chore
-
- Update template docs ([2e24b9e](https://github.com/wxt-dev/wxt/commit/2e24b9e))
- Reduce package size by 70%, 1.92 MB to 590 kB ([#190](https://github.com/wxt-dev/wxt/pull/190))
-
-### ❤️ Contributors
-
- Nenad Novaković
-
-## v0.8.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.3...v0.8.4)
-
-### 🩹 Fixes
-
- Allow actions without a popup ([#181](https://github.com/wxt-dev/wxt/pull/181))
-
-## v0.8.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.2...v0.8.3)
-
-### 🚀 Enhancements
-
- Add testing utils under `wxt/testing` ([#178](https://github.com/wxt-dev/wxt/pull/178))
-
-## v0.8.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.1...v0.8.2)
-
-### 🩹 Fixes
-
- **firefox:** Stop extending `AbortController` to fix crash in content scripts ([#176](https://github.com/wxt-dev/wxt/pull/176))
-
-### 🏡 Chore
-
- Improve output consistency ([#175](https://github.com/wxt-dev/wxt/pull/175))
-
-## v0.8.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.0...v0.8.1)
-
-### 🩹 Fixes
-
- Output `action.browser_style` correctly ([6a93f20](https://github.com/wxt-dev/wxt/commit/6a93f20))
-
-### 📖 Documentation
-
- Generate full API docs with typedoc ([#174](https://github.com/wxt-dev/wxt/pull/174))
-
-## 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))
-
-### 📖 Documentation
-
- Fix wrong links ([#166](https://github.com/wxt-dev/wxt/pull/166))
-
-### 🌊 Types
-
- ⚠️  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
-
- 渣渣120 <WOSHIZHAZHA120@qq.com>
-
-## v0.7.5
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.4...v0.7.5)
-
-### 🩹 Fixes
-
- More consistent `version_name` generation between browsers ([#163](https://github.com/wxt-dev/wxt/pull/163))
- Ignore non-manifest fields when merging content script entries ([#164](https://github.com/wxt-dev/wxt/pull/164))
- Add `browser_style` to popup options ([#165](https://github.com/wxt-dev/wxt/pull/165))
-
-## v0.7.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.3...v0.7.4)
-
-### 🩹 Fixes
-
- Support `react-refresh` when pre-rendering HTML pages in dev mode ([#158](https://github.com/wxt-dev/wxt/pull/158))
-
-### 📖 Documentation
-
- Add migration guides ([b58fb02](https://github.com/wxt-dev/wxt/commit/b58fb02))
-
-### 🏡 Chore
-
- Upgrade templates to v0.7 ([#156](https://github.com/wxt-dev/wxt/pull/156))
-
-## v0.7.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.2...v0.7.3)
-
-### 🚀 Enhancements
-
- Support JS entrypoints ([#155](https://github.com/wxt-dev/wxt/pull/155))
-
-## v0.7.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.1...v0.7.2)
-
-### 🚀 Enhancements
-
- Allow customizing entrypoint options per browser ([#154](https://github.com/wxt-dev/wxt/pull/154))
-
-### 🩹 Fixes
-
- Default safari to MV2 ([5807931](https://github.com/wxt-dev/wxt/commit/5807931))
- Add missing `persistent` type to `defineBackgroundScript` ([d9fdcb5](https://github.com/wxt-dev/wxt/commit/d9fdcb5))
-
-### 📖 Documentation
-
- Restructure website to improve UX ([#149](https://github.com/wxt-dev/wxt/pull/149))
- Add docs for development and testing ([f58d69d](https://github.com/wxt-dev/wxt/commit/f58d69d))
-
-### 🏡 Chore
-
- **deps-dev:** Bump @types/fs-extra from 11.0.1 to 11.0.2 ([#144](https://github.com/wxt-dev/wxt/pull/144))
- **deps-dev:** Bump @faker-js/faker from 8.0.2 to 8.1.0 ([#146](https://github.com/wxt-dev/wxt/pull/146))
- **deps-dev:** Bump vitest-mock-extended from 1.2.1 to 1.3.0 ([#147](https://github.com/wxt-dev/wxt/pull/147))
- **deps-dev:** Bump vitest from 0.34.3 to 0.34.6 ([#145](https://github.com/wxt-dev/wxt/pull/145))
- **deps-dev:** Bump typescript from 5.1 to 5.2 ([#148](https://github.com/wxt-dev/wxt/pull/148))
-
-## v0.7.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.0...v0.7.1)
-
-### 🚀 Enhancements
-
- `createContentScriptUi` helper ([#143](https://github.com/wxt-dev/wxt/pull/143))
-
-### 📖 Documentation
-
- Add docs for `createContentScriptUi` ([65fcfc0](https://github.com/wxt-dev/wxt/commit/65fcfc0))
-
-### 🏡 Chore
-
- **release:** V0.7.1-alpha1 ([2d4983e](https://github.com/wxt-dev/wxt/commit/2d4983e))
-
-## v0.7.0
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.6...v0.7.0)
-
-### 🚀 Enhancements
-
- Content script `cssInjectionMode` ([#141](https://github.com/wxt-dev/wxt/pull/141))
-
-### 🩹 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))
- 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)
-
-### 🚀 Enhancements
-
- Disable opening browser automatically during dev mode ([#136](https://github.com/wxt-dev/wxt/pull/136))
-
-## v0.6.5
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.4...v0.6.5)
-
-### 🩹 Fixes
-
- Don't crash when `<all_urls>` matches is used in dev mode ([b48cee9](https://github.com/wxt-dev/wxt/commit/b48cee9))
- Support loading `tsx` entrypoints ([#134](https://github.com/wxt-dev/wxt/pull/134))
-
-### 📖 Documentation
-
- Add tags for SEO and socials ([96be879](https://github.com/wxt-dev/wxt/commit/96be879))
- Add more content to the homepage ([5570793](https://github.com/wxt-dev/wxt/commit/5570793))
- Fix DX section sizing ([41e1549](https://github.com/wxt-dev/wxt/commit/41e1549))
- Add link to update extensions using WXT ([24e69fe](https://github.com/wxt-dev/wxt/commit/24e69fe))
-
-### 🏡 Chore
-
- Code coverage improvements ([#131](https://github.com/wxt-dev/wxt/pull/131))
-
-## v0.6.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.3...v0.6.4)
-
-### 🩹 Fixes
-
- **content-scripts:** Don't throw an error when including `include` or `exclude` options on a content script ([455e7f3](https://github.com/wxt-dev/wxt/commit/455e7f3))
- Use `execaCommand` instead of `node:child_process` ([#130](https://github.com/wxt-dev/wxt/pull/130))
-
-### 🏡 Chore
-
- **templates:** Add `.wxt` directory to gitignore ([#129](https://github.com/wxt-dev/wxt/pull/129))
- Increase E2E test timeout ([5482b2f](https://github.com/wxt-dev/wxt/commit/5482b2f))
-
-## v0.6.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.2...v0.6.3)
-
-### 🚀 Enhancements
-
- **client:** Add `block` and `addEventListener` utils to `ContentScriptContext` ([#128](https://github.com/wxt-dev/wxt/pull/128))
-
-## v0.6.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.1...v0.6.2)
-
-### 🚀 Enhancements
-
- `--analyze` build flag ([#125](https://github.com/wxt-dev/wxt/pull/125))
- Show spinner when building entrypoints ([#126](https://github.com/wxt-dev/wxt/pull/126))
-
-### 📖 Documentation
-
- Fix import typo ([4c43072](https://github.com/wxt-dev/wxt/commit/4c43072))
- Update vite docs to use function ([e0929a6](https://github.com/wxt-dev/wxt/commit/e0929a6))
-
-## v0.6.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.6.0...v0.6.1)
-
-### 🚀 Enhancements
-
- Add `transformManifest` option ([#124](https://github.com/wxt-dev/wxt/pull/124))
-
-### 🩹 Fixes
-
- Don't open browser during development when using WSL ([#123](https://github.com/wxt-dev/wxt/pull/123))
-
-### 📖 Documentation
-
- Load extension details from CWS ([8e0a189](https://github.com/wxt-dev/wxt/commit/8e0a189))
-
-## 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))
-
-### 🩹 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)
-
-### 🚀 Enhancements
-
- Add `ContentScriptContext` util for stopping invalidated content scripts ([#120](https://github.com/wxt-dev/wxt/pull/120))
-
-## v0.5.5
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.4...v0.5.5)
-
-### 🩹 Fixes
-
- Automatically replace vite's `process.env.NODE_ENV` output in lib mode with the mode ([92039b8](https://github.com/wxt-dev/wxt/commit/92039b8))
-
-## v0.5.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.3...v0.5.4)
-
-### 🩹 Fixes
-
- Recognize `background/index.ts` as an entrypoint ([419fab8](https://github.com/wxt-dev/wxt/commit/419fab8))
- Don't warn about deep entrypoint subdirectories not being recognized ([87e8df9](https://github.com/wxt-dev/wxt/commit/87e8df9))
-
-## v0.5.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.2...v0.5.3)
-
-### 🩹 Fixes
-
- Allow function for vite config ([4ec904e](https://github.com/wxt-dev/wxt/commit/4ec904e))
-
-### 🏡 Chore
-
- Refactor how config is resolved ([#118](https://github.com/wxt-dev/wxt/pull/118))
-
-## v0.5.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.1...v0.5.2)
-
-### 🩹 Fixes
-
- Import client utils when getting entrypoint config ([#117](https://github.com/wxt-dev/wxt/pull/117))
-
-## v0.5.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.0...v0.5.1)
-
-### 🚀 Enhancements
-
- Allow disabling auto-imports ([#114](https://github.com/wxt-dev/wxt/pull/114))
- Include/exclude entrypoints based on target browser ([#115](https://github.com/wxt-dev/wxt/pull/115))
-
-### 🩹 Fixes
-
- Allow any string for target browser ([b4de93d](https://github.com/wxt-dev/wxt/commit/b4de93d))
-
-## 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))
-
-### 📖 Documentation
-
- Add link to examples repo ([46a5036](https://github.com/wxt-dev/wxt/commit/46a5036))
- Fix typos ([beafa6a](https://github.com/wxt-dev/wxt/commit/beafa6a))
- Make README pretty ([b33b663](https://github.com/wxt-dev/wxt/commit/b33b663))
- Add migration docs ([e2350fe](https://github.com/wxt-dev/wxt/commit/e2350fe))
- Add vite customization docs ([fe966b6](https://github.com/wxt-dev/wxt/commit/fe966b6))
-
-### 🏡 Chore
-
- Move repo to wxt-dev org ([ac7cbfc](https://github.com/wxt-dev/wxt/commit/ac7cbfc))
- **deps-dev:** Bump prettier from 3.0.1 to 3.0.3 ([#111](https://github.com/wxt-dev/wxt/pull/111))
- **deps-dev:** Bump tsx from 3.12.7 to 3.12.8 ([#109](https://github.com/wxt-dev/wxt/pull/109))
- **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)
-
-### 🚀 Enhancements
-
- **cli:** Add `wxt clean` command to delete generated files ([#106](https://github.com/wxt-dev/wxt/pull/106))
-
-### 🩹 Fixes
-
- **init:** Don't show `cd .` when initializing the current directory ([e086374](https://github.com/wxt-dev/wxt/commit/e086374))
-
-## v0.4.0
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.3.2...v0.4.0)
-
-### 🚀 Enhancements
-
- Add `--debug` flag for printing debug logs for all CLI commands ([#75](https://github.com/wxt-dev/wxt/pull/75))
- Replace `web-ext` with `web-ext-run` ([#101](https://github.com/wxt-dev/wxt/pull/101))
- Generate types for `browser.i18n.getMessage` ([#103](https://github.com/wxt-dev/wxt/pull/103))
-
-### 🩹 Fixes
-
- 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))
-
-### 📖 Documentation
-
- Add contribution guide ([#76](https://github.com/wxt-dev/wxt/pull/76))
-
-### 🏡 Chore
-
- Setup dependabot for upgrading dependencies ([d66293c](https://github.com/wxt-dev/wxt/commit/d66293c))
- Update social preview ([e164bd5](https://github.com/wxt-dev/wxt/commit/e164bd5))
- Setup bug and feature issue templates ([2bde917](https://github.com/wxt-dev/wxt/commit/2bde917))
- Upgrade to prettier 3 ([#77](https://github.com/wxt-dev/wxt/pull/77))
- **deps-dev:** Bump vitest from 0.32.4 to 0.34.1 ([#81](https://github.com/wxt-dev/wxt/pull/81))
- **deps-dev:** Bump ora from 6.3.1 to 7.0.1 ([#79](https://github.com/wxt-dev/wxt/pull/79))
- **deps-dev:** Bump @types/node from 20.4.5 to 20.5.0 ([#78](https://github.com/wxt-dev/wxt/pull/78))
- **deps-dev:** Bump tsup from 7.1.0 to 7.2.0 ([#80](https://github.com/wxt-dev/wxt/pull/80))
- **deps-dev:** Bump @vitest/coverage-v8 from 0.32.4 to 0.34.1 ([#84](https://github.com/wxt-dev/wxt/pull/84))
- **deps-dev:** Bump vitepress from 1.0.0-beta.5 to 1.0.0-rc.4 ([#85](https://github.com/wxt-dev/wxt/pull/85))
- **deps-dev:** Bump vitest-mock-extended from 1.1.4 to 1.2.0 ([#87](https://github.com/wxt-dev/wxt/pull/87))
- **deps-dev:** Bump lint-staged from 13.3.0 to 14.0.0 ([#89](https://github.com/wxt-dev/wxt/pull/89))
- Fix remote code E2E test ([83e62a1](https://github.com/wxt-dev/wxt/commit/83e62a1))
- Fix failing demo build ([b58a15e](https://github.com/wxt-dev/wxt/commit/b58a15e))
- **deps-dev:** Bump vitest-mock-extended from 1.2.0 to 1.2.1 ([#97](https://github.com/wxt-dev/wxt/pull/97))
- **deps-dev:** Bump lint-staged from 14.0.0 to 14.0.1 ([#100](https://github.com/wxt-dev/wxt/pull/100))
- **deps-dev:** Bump vitest from 0.34.1 to 0.34.3 ([#99](https://github.com/wxt-dev/wxt/pull/99))
- Increase E2E test timeout because GitHub Actions Window runner is slow ([2a0842b](https://github.com/wxt-dev/wxt/commit/2a0842b))
- **deps-dev:** Bump vitepress from 1.0.0-rc.4 to 1.0.0-rc.10 ([#96](https://github.com/wxt-dev/wxt/pull/96))
- Fix test watcher restarting indefinetly ([2c7922c](https://github.com/wxt-dev/wxt/commit/2c7922c))
- Remove explict 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)
-
-### 🚀 Enhancements
-
- Discover icons from the public directory ([#72](https://github.com/wxt-dev/wxt/pull/72))
- Don't allow auto-importing from subdirectories ([d54d611](https://github.com/wxt-dev/wxt/commit/d54d611))
-
-### 📖 Documentation
-
- Document the `url:` import prefix for remote code ([323045a](https://github.com/wxt-dev/wxt/commit/323045a))
- Fix typos ([97f0938](https://github.com/wxt-dev/wxt/commit/97f0938))
- Fix capitalization ([39467d1](https://github.com/wxt-dev/wxt/commit/39467d1))
- Generate markdown for config reference ([#74](https://github.com/wxt-dev/wxt/pull/74))
-
-### 🏡 Chore
-
- Upgrade dependencies ([798f02f](https://github.com/wxt-dev/wxt/commit/798f02f))
- Upgrade vite (`v4.3` &rarr; `v4.4`) ([547c185](https://github.com/wxt-dev/wxt/commit/547c185))
- Update templates to work with CSS entrypoints ([7f15305](https://github.com/wxt-dev/wxt/commit/7f15305))
- Improve file list output in CI ([#73](https://github.com/wxt-dev/wxt/pull/73))
-
-### 🤖 CI
-
- Validate templates against `main` ([#66](https://github.com/wxt-dev/wxt/pull/66))
- List vite version when validating project templates ([ef140dc](https://github.com/wxt-dev/wxt/commit/ef140dc))
- Validate templates using tarball to avoid version conflicts within the `wxt/node_modules` directory ([edfa075](https://github.com/wxt-dev/wxt/commit/edfa075))
-
-## v0.3.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.3.0...v0.3.1)
-
-### 🚀 Enhancements
-
- CSS entrypoints ([#61](https://github.com/wxt-dev/wxt/pull/61))
- `init` command for bootstrapping new projects ([#65](https://github.com/wxt-dev/wxt/pull/65))
-
-### 📖 Documentation
-
- Add zip command to installation scripts ([94a1097](https://github.com/wxt-dev/wxt/commit/94a1097))
- Add output paths to entrypoint docs ([3a336eb](https://github.com/wxt-dev/wxt/commit/3a336eb))
- Update installation docs ([aea866c](https://github.com/wxt-dev/wxt/commit/aea866c))
- Add publishing docs ([4184b05](https://github.com/wxt-dev/wxt/commit/4184b05))
- Add a section for extensions using WXT ([709b61a](https://github.com/wxt-dev/wxt/commit/709b61a))
- Add a comparison page to compare and contrast against Plasmo ([38d4f9c](https://github.com/wxt-dev/wxt/commit/38d4f9c))
-
-### 🏡 Chore
-
- Update template projects to v0.3 ([#56](https://github.com/wxt-dev/wxt/pull/56))
- Branding and logo ([#60](https://github.com/wxt-dev/wxt/pull/60))
- Simplify binary setup ([#62](https://github.com/wxt-dev/wxt/pull/62))
- Add Solid template ([#63](https://github.com/wxt-dev/wxt/pull/63))
- Increate E2E test timeout to fix flakey test ([dfe424f](https://github.com/wxt-dev/wxt/commit/dfe424f))
-
-### 🤖 CI
-
- Speed up demo validation ([3a9fd39](https://github.com/wxt-dev/wxt/commit/3a9fd39))
- Fix flakey failure when validating templates ([25677ba](https://github.com/wxt-dev/wxt/commit/25677ba))
-
-### ❤️ Contributors
-
- BeanWei ([@BeanWei](https://github.com/BeanWei))
-
-## 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))
- Windows support ([#50](https://github.com/wxt-dev/wxt/pull/50))
-
-### 🩹 Fixes
-
- Add `WebWorker` lib to generated tsconfig ([2c70246](https://github.com/wxt-dev/wxt/commit/2c70246))
-
-### 📖 Documentation
-
- Update entrypoint directory links ([0aebb67](https://github.com/wxt-dev/wxt/commit/0aebb67))
-
-### 🌊 Types
-
- Allow any string for the `__BROWSER__` global ([6092235](https://github.com/wxt-dev/wxt/commit/6092235))
-
-### 🤖 CI
-
- 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)
-
-### 🚀 Enhancements
-
- Auto-import from subdirectories ([547fee0](https://github.com/wxt-dev/wxt/commit/547fee0))
- Include background script in dev mode if user doesn't define one ([ca20a21](https://github.com/wxt-dev/wxt/commit/ca20a21))
-
-### 🩹 Fixes
-
- Don't crash when generating types in dev mode ([d8c1903](https://github.com/wxt-dev/wxt/commit/d8c1903))
- Properly load entrypoints that reference `import.meta` ([54b18cc](https://github.com/wxt-dev/wxt/commit/54b18cc))
-
-### 🏡 Chore
-
- Update templates to wxt@0.2 ([9d00eb2](https://github.com/wxt-dev/wxt/commit/9d00eb2))
-
-### 🤖 CI
-
- Validate project templates ([9ac756f](https://github.com/wxt-dev/wxt/commit/9ac756f))
-
-## v0.2.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.3...v0.2.4)
-
-### 🚀 Enhancements
-
- Add `wxt zip` command ([#47](https://github.com/wxt-dev/wxt/pull/47))
-
-## v0.2.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.2...v0.2.3)
-
-### 🩹 Fixes
-
- Correctly lookup open port ([#45](https://github.com/wxt-dev/wxt/pull/45))
- Read boolean maniest options from meta tags correctly ([495c5c8](https://github.com/wxt-dev/wxt/commit/495c5c8))
- Some fields cannot be overridden from `config.manifest` ([#46](https://github.com/wxt-dev/wxt/pull/46))
-
-## v0.2.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.1...v0.2.2)
-
-### 🩹 Fixes
-
- Register content scripts correctly in dev mode ([2fb5a54](https://github.com/wxt-dev/wxt/commit/2fb5a54))
-
-## v0.2.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.2.0...v0.2.1)
-
-### 🚀 Enhancements
-
- Support all content script options ([6f5bf89](https://github.com/wxt-dev/wxt/commit/6f5bf89))
-
-### 🩹 Fixes
-
- Remove HMR log ([90fa6bf](https://github.com/wxt-dev/wxt/commit/90fa6bf))
-
-## v0.2.0
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.6...v0.2.0)
-
-### 🚀 Enhancements
-
- ⚠️ Rename `defineBackgroundScript` to `defineBackground` ([5b48ae9](https://github.com/wxt-dev/wxt/commit/5b48ae9))
- Recongize unnamed content scripts (`content.ts` and `content/index.ts`) ([3db5cec](https://github.com/wxt-dev/wxt/commit/3db5cec))
-
-### 📖 Documentation
-
- Update templates ([f28a29e](https://github.com/wxt-dev/wxt/commit/f28a29e))
- Add docs for each type of entrypoint ([77cbfc1](https://github.com/wxt-dev/wxt/commit/77cbfc1))
- Add inline JSDoc for public types ([375a2a6](https://github.com/wxt-dev/wxt/commit/375a2a6))
-
-### 🏡 Chore
-
- 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)
-
-### 🩹 Fixes
-
- Resolve tsconfig paths in vite ([ea92a27](https://github.com/wxt-dev/wxt/commit/ea92a27))
- Add logs when a hot reload happens ([977246f](https://github.com/wxt-dev/wxt/commit/977246f))
-
-### 🏡 Chore
-
- React and Vue starter templates ([#33](https://github.com/wxt-dev/wxt/pull/33))
- Svelte template ([#34](https://github.com/wxt-dev/wxt/pull/34))
-
-## v0.1.5
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.4...v0.1.5)
-
-### 🩹 Fixes
-
- Include `vite/client` types ([371be99](https://github.com/wxt-dev/wxt/commit/371be99))
-
-## v0.1.4
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.3...v0.1.4)
-
-### 🩹 Fixes
-
- Fix regression where manifest was not listed first in build summary ([fa2b656](https://github.com/wxt-dev/wxt/commit/fa2b656))
- Fix config hook implementations for vite plugins ([49965e7](https://github.com/wxt-dev/wxt/commit/49965e7))
-
-### 📖 Documentation
-
- Update CLI screenshot ([0a26673](https://github.com/wxt-dev/wxt/commit/0a26673))
-
-### 🏡 Chore
-
- Update prettier ignore ([68611ae](https://github.com/wxt-dev/wxt/commit/68611ae))
-
-## v0.1.3
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.2...v0.1.3)
-
-### 🚀 Enhancements
-
- Add tsconfig path aliases ([#32](https://github.com/wxt-dev/wxt/pull/32))
-
-### 🩹 Fixes
-
- Merge `manifest` option from both inline and user config ([05ca998](https://github.com/wxt-dev/wxt/commit/05ca998))
- Cleanup build summary with sourcemaps ([ac0b28e](https://github.com/wxt-dev/wxt/commit/ac0b28e))
-
-### 📖 Documentation
-
- Create documentation site ([#31](https://github.com/wxt-dev/wxt/pull/31))
-
-### 🏡 Chore
-
- Upgrade to pnpm 8 ([0ce7c9d](https://github.com/wxt-dev/wxt/commit/0ce7c9d))
-
-## v0.1.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.1...v0.1.2)
-
-### 🚀 Enhancements
-
- Accept a function for `config.manifest` ([ee49837](https://github.com/wxt-dev/wxt/commit/ee49837))
-
-### 🩹 Fixes
-
- Add missing types for `webextension-polyfill` and the `manifest` option ([636aa48](https://github.com/wxt-dev/wxt/commit/636aa48))
- Only add imports to JS files ([b29c3c6](https://github.com/wxt-dev/wxt/commit/b29c3c6))
- Generate valid type for `EntrypointPath` when there are no entrypoints ([6e7184d](https://github.com/wxt-dev/wxt/commit/6e7184d))
-
-### 🌊 Types
-
- Change `config.vite` to `UserConfig` ([ef6001e](https://github.com/wxt-dev/wxt/commit/ef6001e))
-
-## v0.1.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.1.0...v0.1.1)
-
-### 🩹 Fixes
-
- Allow dashes in entrypoint names ([2e51e73](https://github.com/wxt-dev/wxt/commit/2e51e73))
- Unable to read entrypoint options ([#28](https://github.com/wxt-dev/wxt/pull/28))
-
-## v0.1.0
-
-Initial release of WXT. Full support for production builds and initial toolkit for development:
-
- HMR support when HTML page dependencies change
- Reload extension when background changes
- Reload HTML pages when saving them directly
- Re-register and reload tabs when content scripts change
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.0.2...v0.1.0)
-
-### 🚀 Enhancements
-
- Content scripts reloading ([#25](https://github.com/wxt-dev/wxt/pull/25))
-
-### 📖 Documentation
-
- Update feature list ([0255028](https://github.com/wxt-dev/wxt/commit/0255028))
-
-### 🤖 CI
-
- Create github release ([b7c078f](https://github.com/wxt-dev/wxt/commit/b7c078f))
-
-## v0.0.2
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.0.1...v0.0.2)
-
-### 🚀 Enhancements
-
- Reload extension when source code is changed ([#17](https://github.com/wxt-dev/wxt/pull/17))
- Setup background script web socket/reload ([#22](https://github.com/wxt-dev/wxt/pull/22))
- Reload HTML files individually ([#23](https://github.com/wxt-dev/wxt/pull/23))
-
-### 🩹 Fixes
-
- Output chunks to a chunks directory ([2dd7a99](https://github.com/wxt-dev/wxt/commit/2dd7a99))
- Remove hash from content script css outputs ([#20](https://github.com/wxt-dev/wxt/pull/20))
- Overwrite files with the same name when renaming entrypoints in dev mode ([37986bf](https://github.com/wxt-dev/wxt/commit/37986bf))
- Separate template builds to prevent sharing chunks ([7f3a1e8](https://github.com/wxt-dev/wxt/commit/7f3a1e8))
- Show Vite warnings and errors ([c51f0e0](https://github.com/wxt-dev/wxt/commit/c51f0e0))
-
-### 📖 Documentation
-
- Add milestone progress badge to README ([684197d](https://github.com/wxt-dev/wxt/commit/684197d))
- Fix milestone link in README ([e14f81d](https://github.com/wxt-dev/wxt/commit/e14f81d))
-
-### 🏡 Chore
-
- Refactor build output type ([#19](https://github.com/wxt-dev/wxt/pull/19))
- Refactor build outputs to support transpiled templates ([a78aada](https://github.com/wxt-dev/wxt/commit/a78aada))
- Rename `templates` to `virtual-modules` ([#24](https://github.com/wxt-dev/wxt/pull/24))
- Update cli screenshot ([54eb118](https://github.com/wxt-dev/wxt/commit/54eb118))
-
-## v0.0.1
-
-[compare changes](https://github.com/wxt-dev/wxt/compare/v0.0.0...v0.0.1)
-
-### 🚀 Enhancements
-
- Add logger to config ([232ff7a](https://github.com/wxt-dev/wxt/commit/232ff7a))
- Export and bootstrap the `/client` package ([5b07c95](https://github.com/wxt-dev/wxt/commit/5b07c95))
- Resolve entrypoints based on filesystem ([a63f061](https://github.com/wxt-dev/wxt/commit/a63f061))
- Separate output directories for each browser/manifest version ([f09ffbb](https://github.com/wxt-dev/wxt/commit/f09ffbb))
- Build entrypoints and output `manfiest.json` ([1e7c738](https://github.com/wxt-dev/wxt/commit/1e7c738))
- Automatically add CSS files to content scripts ([047ce04](https://github.com/wxt-dev/wxt/commit/047ce04))
- Download and bundle remote URL imports ([523c7df](https://github.com/wxt-dev/wxt/commit/523c7df))
- Generate type declarations and config for project types and auto-imports ([21debad](https://github.com/wxt-dev/wxt/commit/21debad))
- Good looking console output ([e2cc995](https://github.com/wxt-dev/wxt/commit/e2cc995))
- Dev server working and a valid extension is built ([505e419](https://github.com/wxt-dev/wxt/commit/505e419))
- Virtualized content script entrypoint ([ca29537](https://github.com/wxt-dev/wxt/commit/ca29537))
- Provide custom, typed globals defined by Vite ([8c59a1c](https://github.com/wxt-dev/wxt/commit/8c59a1c))
- Copy public directory to outputs ([1a25f2b](https://github.com/wxt-dev/wxt/commit/1a25f2b))
- Support browser and chrome styles for mv2 popups ([7945c94](https://github.com/wxt-dev/wxt/commit/7945c94))
- Support browser and chrome styles for mv2 popups ([7abb577](https://github.com/wxt-dev/wxt/commit/7abb577))
- Support more CLI flags for `build` and `dev` ([#9](https://github.com/wxt-dev/wxt/pull/9))
- Add more supported browser types ([f114c5b](https://github.com/wxt-dev/wxt/commit/f114c5b))
- Open browser when starting dev server ([#11](https://github.com/wxt-dev/wxt/pull/11))
-
-### 🩹 Fixes
-
- Support `srcDir` config ([739d19f](https://github.com/wxt-dev/wxt/commit/739d19f))
- Root path customization now works ([4faa3b3](https://github.com/wxt-dev/wxt/commit/4faa3b3))
- Print durations as ms/s based on total time ([3e37de9](https://github.com/wxt-dev/wxt/commit/3e37de9))
- Don't print error twice when background crashes ([407627c](https://github.com/wxt-dev/wxt/commit/407627c))
- Load package.json from root not cwd ([3ca16ee](https://github.com/wxt-dev/wxt/commit/3ca16ee))
- Only allow a single entrypoint with a given name ([8eb4e86](https://github.com/wxt-dev/wxt/commit/8eb4e86))
- Respect the mv2 popup type ([0f37ceb](https://github.com/wxt-dev/wxt/commit/0f37ceb))
- Respect background type and persistent manifest options ([573ef80](https://github.com/wxt-dev/wxt/commit/573ef80))
- Make content script array orders consistent ([f380378](https://github.com/wxt-dev/wxt/commit/f380378))
- Firefox manifest warnings in dev mode ([50bb845](https://github.com/wxt-dev/wxt/commit/50bb845))
-
-### 📖 Documentation
-
- Update README ([785ea54](https://github.com/wxt-dev/wxt/commit/785ea54))
- Update README ([99ccadb](https://github.com/wxt-dev/wxt/commit/99ccadb))
- Update description ([07a262e](https://github.com/wxt-dev/wxt/commit/07a262e))
- Update README ([58a0ef4](https://github.com/wxt-dev/wxt/commit/58a0ef4))
- Update README ([23ed6f7](https://github.com/wxt-dev/wxt/commit/23ed6f7))
- Add initial release milestone link to README ([b400e54](https://github.com/wxt-dev/wxt/commit/b400e54))
- Fix typo in README ([5590c9d](https://github.com/wxt-dev/wxt/commit/5590c9d))
-
-### 🏡 Chore
-
- Refactor cli files into their own directory ([e6c0d84](https://github.com/wxt-dev/wxt/commit/e6c0d84))
- Simplify `BuildOutput` type ([1f6c4a0](https://github.com/wxt-dev/wxt/commit/1f6c4a0))
- Move `.exvite` directory into `srcDir` instead of `root` ([53fb805](https://github.com/wxt-dev/wxt/commit/53fb805))
- Refactor CLI commands ([b8952b6](https://github.com/wxt-dev/wxt/commit/b8952b6))
- Improve build summary sorting ([ec57e8c](https://github.com/wxt-dev/wxt/commit/ec57e8c))
- Remove comments ([e3e9c0d](https://github.com/wxt-dev/wxt/commit/e3e9c0d))
- Refactor internal config creation ([7c634f4](https://github.com/wxt-dev/wxt/commit/7c634f4))
- Check virtual entrypoints feature in README ([70208f4](https://github.com/wxt-dev/wxt/commit/70208f4))
- Add E2E tests and convert to vitest workspace ([5813302](https://github.com/wxt-dev/wxt/commit/5813302))
- Rename package to wxt ([51a1072](https://github.com/wxt-dev/wxt/commit/51a1072))
- Fix header log's timestamp ([8ca5657](https://github.com/wxt-dev/wxt/commit/8ca5657))
- Fix demo global usage ([1ecfedd](https://github.com/wxt-dev/wxt/commit/1ecfedd))
- Refactor folder structure ([9ab3953](https://github.com/wxt-dev/wxt/commit/9ab3953))
- Fix release workflow ([2e94f2a](https://github.com/wxt-dev/wxt/commit/2e94f2a))
-
-### 🤖 CI
-
- Create validation workflow ([#12](https://github.com/wxt-dev/wxt/pull/12))
- Create release workflow ([#13](https://github.com/wxt-dev/wxt/pull/13))
@@ -37,13 +37,13 @@ pnpm build

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

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

@@ -57,9 +57,17 @@ pnpm test
 pnpm docs:dev
 ```

+## Updating Docs
+
+Documentation is written with VitePress, and is located in the `docs/` directory.
+
+The API reference is generated from JSDoc comments in the source code. If there's a typo or change you want to make in there, you'll need to update the source code instead of a file in the `docs/` directory.
+
 ## Testing

-WXT has unit and E2E tests. When making a change or adding a feature, make sure to update the tests or add new ones.
+WXT has unit and E2E tests. When making a change or adding a feature, make sure to update the tests or add new ones, if they exist.
+
+> If they don't exist, feel free to create them, but that's a lot for a one-time contributor. A maintainer might add them to your PR though.

 To run tests for a specific file, add the filename at the end of the test command:

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

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

@@ -82,11 +90,11 @@ 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 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 PR's changes against the templates, but if you want to manually do it, update the package.json dependency:

 ```diff
  "devDependencies": {
-    "typescript": "^5.1.6",
+    "typescript": "^5.3.2",
    "vite-plugin-solid": "^2.7.0",
 -   "wxt": "^0.8.0"
 +   "wxt": "../.."
@@ -100,7 +108,24 @@ Then run `npm i` again.
 To add a template, copy the vanilla template and give it a new name.

 ```sh
-cp -r templates/vailla templates/<new-template-name>
+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="./docs/public/hero-logo.svg" alt="WXT Logo">
+  <img style="vertical-align:middle" width="44" src="https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/public/hero-logo.svg" alt="WXT Logo">
  <span>WXT</span>
 </h1>

@@ -9,9 +9,8 @@
  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048"></a>
  <span> </span>
  <a href="https://github.com/wxt-dev/wxt/blob/main/LICENSE" target="_blank"><img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048"></a>
-  <!-- Hide code coverage while it's broken -->
-  <!-- <span> </span>
-  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a> -->
+  <span> </span>
+  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a>
 </p>

 <p align="center">
@@ -23,27 +22,29 @@
 </p>

 <p align="center">
-  <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/entrypoints/background.html" target="_blank">Entrypoints</a>
+  <a href="https://wxt.dev/guide/installation.html" target="_blank">Get Started</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](./docs/assets/cli-output.png)
+![Example CLI Output](https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/assets/cli-output.png)

 ## Demo

-https://github.com/wxt-dev/wxt/assets/10101283/07359e53-f491-43b6-8e8f-fae94aec8063
+<video src="https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94"></video>

 ## Quick Start

 Bootstrap a new project:

 ```sh
-pnpx wxt@latest init <project-name>
+pnpm dlx wxt@latest init <project-name>
 ```

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

 ## Contributors

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-require('../dist/cli.cjs');
@@ -1,32 +0,0 @@
-{
-  "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": "^0.34.6",
-    "webextension-polyfill": "^0.10.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "@types/webextension-polyfill": "^0.10.5",
-    "sass": "^1.69.5",
-    "wxt": "workspace:*"
-  }
-}
@@ -1,24 +0,0 @@
-export default defineBackground(() => {
-  console.log(browser.runtime.id);
-  logId();
-  console.log({
-    browser: __BROWSER__,
-    chrome: __IS_CHROME__,
-    firefox: __IS_FIREFOX__,
-    manifestVersion: __MANIFEST_VERSION__,
-  });
-
-  // @ts-expect-error: should only accept entrypoints or public assets
-  browser.runtime.getURL('/');
-  browser.runtime.getURL('/background.js');
-  browser.runtime.getURL('/icon/128.png');
-
-  // @ts-expect-error: should only accept known message names
-  browser.i18n.getMessage('test');
-  browser.i18n.getMessage('prompt_for_name');
-  browser.i18n.getMessage('hello', 'Aaron');
-  browser.i18n.getMessage('bye', ['Aaron']);
-  browser.i18n.getMessage('@@extension_id');
-
-  console.log('WXT MODE:', import.meta.env.MODE);
-});
@@ -1,14 +0,0 @@
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  srcDir: 'src',
-  manifest: {
-    default_locale: 'en',
-    web_accessible_resources: [
-      {
-        resources: ['/iframe-src.html'],
-        matches: ['*://*.google.com/*'],
-      },
-    ],
-  },
-});
@@ -0,0 +1,116 @@
+# Development
+
+WXT's main goal is providing the best DX it possibly can. When running your extension in dev mode, each part of your extension is reloaded separately when possible.
+
+|                     | HMR | Reloaded individually | Reload extension |                    Restart browser                     |
+| ------------------- | :-: | :-------------------: | :--------------: | :----------------------------------------------------: |
+| HTML File           |     |          ✅           |
+| HTML Dependency     | ✅  |
+| MV3 Content Script  |     |          ✅           |
+| MV2 Content Script  |     |                       |        ✅        |
+| Background          |     |                       |        ✅        |
+| manifest.json       |     |                       |                  | 🟡 See [#16](https://github.com/wxt-dev/wxt/issues/16) |
+| `wxt.config.ts`     |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
+| `web-ext.config.ts` |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
+
+## Dev Mode vs Production Builds
+
+There are some notable differences between the development and production versions of an extension. During development:
+
+1. **Content scripts are not listed in the `manifest.json`** when targeting MV3. Instead, the [`scripting`](https://developer.chrome.com/docs/extensions/reference/api/scripting) permission is used to register content scripts at runtime so they can be reloaded individually.
+
+   To get the list of content scripts during development, run the following in the background's console:
+
+   ```ts
+   await chrome.scripting.getRegisteredContentScripts();
+   ```
+
+2. **The CSP is modified to allow loading scripts from the dev server**. Make sure you're using Chrome v110 or above for HMR to work.
+
+3. If you don't include a background script/service worker, one will be created to perform various tasks in dev mode, mostly related to reloading different parts of the extension on change.
+
+For production builds, none of the above modifications will be applied, and you're extension/manifest will only include what you have defined.
+
+## Configure Browser Startup
+
+WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/reference/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
+
+:::code-group
+
+```ts [wxt.config.ts]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  runner: {
+    // Runner config
+  },
+});
+```
+
+```ts [web-ext.config.ts]
+import { defineRunnerConfig } from 'wxt';
+
+export default defineRunnerConfig({
+  // Runner config
+});
+```
+
+:::
+
+### 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.
+
+```ts
+// ~/web-ext.config.ts
+import { defineRunnerConfig } from 'wxt';
+
+export default defineRunnerConfig({
+  binaries: {
+    chrome: '/path/to/chrome-beta', // Use Chrome Beta instead of regular Chrome
+    firefox: 'firefoxdeveloperedition', // Use Firefox Developer Edition instead of regular Firefox
+    edge: '/path/to/edge', // Open MS Edge when running "wxt -b edge"
+  },
+});
+```
+
+:::tip
+When configuring browser binaries, it's helpful to put them in `~/web-ext.config.ts` instead of the project directory's `web-ext.config.ts` file. When placed in your home directory (`~/`), this config will be used by all WXT projects, so you only need to configure the binaries once.
+:::
+
+### Other options
+
+You can customize other options as well, like startup URLs, profiles, or additional command line arguments:
+
+```ts
+// web-ext.config.ts
+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'],
+});
+```
+
+For a full list of options, see the [API Reference](/api/reference/wxt/interfaces/ExtensionRunnerConfig).
+
+## Reload the Extension
+
+Normally, to manually reload an extension, you have to visit `chrome://extensions` and click the reload button for your extension.
+
+When running `wxt` command to start the dev server, WXT adds a keyboard shortcut `Alt+R`, that reloads the extension when pressed, without visiting `chrome://extensions`. This can also be customized or disabled:
+
+```ts [wxt.config.ts]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  dev: {
+    reloadCommand: 'Alt+T', // false, to disable
+  },
+});
+```
+
+:::info
+This shortcut is only available during development, and is not be added to your extension when running `wxt build` or `wxt-zip`.
+:::
@@ -0,0 +1,2 @@
+FROM lipanski/docker-static-website:latest
+COPY dist .
@@ -0,0 +1,226 @@
+<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>
@@ -0,0 +1,100 @@
+<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>
@@ -0,0 +1,72 @@
+<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>
@@ -5,17 +5,51 @@ import useListExtensionDetails, {
 } from '../composables/useListExtensionDetails';

 // Add extension IDs here. Order doesn't matter, will be sorted by weekly active users
+// During the transition from chrome.google.com/webstore to
+// chromewebstore.google.com, queue.wxt.dev might return null for your
+// extension. If it does, use "<slug>/<id>" instead of just the ID. The slug
+// can be retrieved from the URL of the item on chromewebstore.google.com
 const chromeExtensionIds = [
  'ocfdgncpifmegplaglcnglhioflaimkd', // GitHub: Better Line Counts
  'mgmdkjcljneegjfajchedjpdhbadklcf', // Anime Skip Player
+  'bfbnagnphiehemkdgmmficmjfddgfhpl', // UltraWideo
+  'elfaihghhjjoknimpccccmkioofjjfkf', // StayFree - Website Blocker & Web Analytics
+  'okifoaikfmpfcamplcfjkpdnhfodpkil', // Doozy: Ai Made Easy
+  'lknmjhcajhfbbglglccadlfdjbaiifig', // tl;dv - Record, Transcribe & ChatGPT for Google Meet
+  'youtube中文配音/oglffgiaiekgeicdgkdlnlkhliajdlja', // Youtube中文配音
+  'agjnjboanicjcpenljmaaigopkgdnihi', // PreMiD
+  'aiakblgmlabokilgljkglggnpflljdgp', // Markdown Sticky Notes
+  'nomnkbngkijpffepcgbbofhcnafpkiep', // DocVersionRedirector
+  'ceicccfeikoipigeghddpocceifjelph', // Plex Skipper
+  '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
 ];

-const { data } = useListExtensionDetails(chromeExtensionIds);
-const sortedExtensions = computed(() =>
-  !data.value
-    ? undefined
-    : [...data.value].sort((l, r) => r.weeklyActiveUsers - l.weeklyActiveUsers),
-);
+const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
+const sortedExtensions = computed(() => {
+  if (!data.value?.length) return [];
+
+  return [...data.value]
+    .filter((item) => item != null)
+    .map((item) => ({
+      ...item,
+      // Sort based on the user count weighted by the rating
+      sortKey: ((item.rating ?? 5) / 5) * item.weeklyActiveUsers,
+    }))
+    .filter((item) => !!item)
+    .sort((l, r) => r.sortKey - l.sortKey);
+});

 function getStoreUrl(extension: ChromeExtension) {
  const url = new URL(extension.storeUrl);
@@ -25,72 +59,56 @@ function getStoreUrl(extension: ChromeExtension) {
 </script>

 <template>
-  <section class="vp-doc">
-    <div class="container">
-      <h2>Who's Using WXT?</h2>
-      <p>
-        Battle tested and ready for production. Explore chrome extensions made
-        with WXT.
-      </p>
-      <ul>
-        <li v-for="extension of sortedExtensions">
-          <img
-            :src="extension.iconUrl"
-            :alt="`${extension.name} icon`"
-            referrerpolicy="no-referrer"
-          />
-          <div>
-            <a
-              :href="getStoreUrl(extension)"
-              target="_blank"
-              :title="extension.name"
-              >{{ extension.name }}</a
-            >
-            <p class="description" :title="extension.shortDescription">
-              {{ extension.shortDescription }}
-            </p>
-            <p class="user-count">
-              {{ extension.weeklyActiveUsers.toLocaleString() }} users
-            </p>
-          </div>
-        </li>
-      </ul>
-      <p class="centered pr">
+  <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="https://github.com/wxt-dev/wxt/edit/main/docs/.vitepress/components/UsingWxtSection.vue"
+          :href="getStoreUrl(extension)"
          target="_blank"
-          >Open a PR</a
+          :title="extension.name"
+          class="extension-name"
+          >{{ extension.name }}</a
        >
-        to add your extension to the list!
+        <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>
-    </div>
-  </section>
+    </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>
 </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;
@@ -121,7 +139,8 @@ li {
  background-color: var(--vp-c-bg-soft);
  border-radius: 12px;
  flex: 1;
-  gap: 16px;
+  gap: 24px;
+  align-items: center;
 }

 .centered {
@@ -136,9 +155,10 @@ li .description {
 }
 li .user-count {
  opacity: 70%;
-  text-align: right;
-  width: 100%;
  font-size: small;
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
 }

 li a {
@@ -157,8 +177,6 @@ li a:hover {

 li div {
  flex: 1;
-  display: flex;
-  flex-direction: column;
 }

 li .description {
@@ -167,10 +185,18 @@ li .description {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
-  flex-grow: 1;
+  margin-bottom: 16px;
+}
+
+li .extension-name {
+  font-size: large;
 }

 .pr {
  opacity: 70%;
 }
+
+.relative {
+  position: relative;
+}
 </style>
@@ -7,6 +7,7 @@ export interface ChromeExtension {
  weeklyActiveUsers: number;
  shortDescription: string;
  storeUrl: string;
+  rating: number | undefined;
 }

 const operationName = 'WxtDocsUsedBy';
@@ -18,12 +19,14 @@ const query = `query ${operationName}($ids:[String!]!) {
    weeklyActiveUsers
    shortDescription
    storeUrl
+    rating
  }
 }`;

 export default function (ids: string[]) {
  const data = ref<ChromeExtension[]>();
  const err = ref<unknown>();
+  const isLoading = ref(true);

  fetch('https://queue.wxt.dev/api', {
    method: 'POST',
@@ -34,6 +37,7 @@ export default function (ids: string[]) {
    }),
  })
    .then(async (res) => {
+      isLoading.value = false;
      const {
        data: { chromeExtensions },
      } = await res.json();
@@ -41,6 +45,7 @@ export default function (ids: string[]) {
      err.value = undefined;
    })
    .catch((error) => {
+      isLoading.value = false;
      console.error(error);
      data.value = undefined;
      err.value = error;
@@ -49,5 +54,6 @@ export default function (ids: string[]) {
  return {
    data,
    err,
+    isLoading,
  };
 }
@@ -1,25 +1,18 @@
-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);
+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';

 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 utilties for building, zipping, and publishing your extension, it's easy to get started.";
+  "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}`;
 const ogUrl = 'https://wxt.dev';
 const ogImage = 'https://wxt.dev/social-preview.png';
@@ -31,7 +24,6 @@ export default defineConfig({
  description,
  vite: {
    clearScreen: false,
-    plugins: [generateCliDocs()],
  },
  lastUpdated: true,
  sitemap: {
@@ -39,20 +31,16 @@ export default defineConfig({
  },

  head: [
-    ['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',
-      },
-    ],
+    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: '',
+    }),
  ],

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

+    socialLinks: [
+      { icon: 'discord', link: 'https://discord.gg/ZFsZqGery9' },
+      { icon: 'github', link: 'https://github.com/wxt-dev/wxt' },
+    ],
+
    nav: [
-      { text: 'Guide', link: '/guide/installation.md' },
-      { text: 'Entrypoints', link: '/entrypoints/background.md' },
-      { text: 'API', link: '/api/cli.md' },
+      navItem('Get Started', '/get-started/introduction'),
+      navItem('Guide', '/guide/key-concepts/manifest'),
+      navItem('API', '/api/reference/wxt'),
+      navItem('Examples', '/examples'),
    ],

    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: 'Assets', link: '/guide/assets.md' },
-            { text: 'Multiple Browsers', link: '/guide/multiple-browsers.md' },
-            { text: 'Publishing', link: '/guide/publishing.md' },
-            { text: 'Auto-imports', link: '/guide/auto-imports.md' },
-            { text: 'Manifest.json', link: '/guide/manifest.md' },
-            { text: 'Extension APIs', link: '/guide/extension-apis.md' },
-            { text: 'Remote Code', link: '/guide/remote-code.md' },
-            { text: 'Development', link: '/guide/development.md' },
-            { text: 'Testing', link: '/guide/testing.md' },
-            { text: 'Vite', link: '/guide/vite.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: 'Sidepanel', 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,
-            },
-          ],
-        },
-      ],
-    },
+      '/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'),

-    socialLinks: [{ icon: 'github', link: 'https://github.com/wxt-dev/wxt' }],
+          // 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 Side Effects', 'entrypoint-side-effects'),
+          menuItem('How WXT Works', 'how-wxt-works'),
+        ]),
+      ]),
+      '/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)),
+      ]),
+    },
  },
 });
@@ -0,0 +1,60 @@
+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;
+}
@@ -1,5 +0,0 @@
-# CLI Reference
-
-> Reference generated from `wxt <command> --help`
-
-{{ DOCS }}
@@ -1,108 +0,0 @@
-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.all(
-        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);
-
-      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,6 +72,45 @@
 .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,6 +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 './custom.css';

 export default {
@@ -10,5 +11,6 @@ export default {
    ctx.app.component('Icon', Icon);
    ctx.app.component('EntrypointPatterns', EntrypointPatterns);
    ctx.app.component('UsingWxtSection', UsingWxtSection);
+    ctx.app.component('ExampleSearch', ExampleSearch);
  },
 };
@@ -0,0 +1,28 @@
+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,
+    },
+  ];
+}
@@ -0,0 +1,88 @@
+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;
+}
@@ -0,0 +1,18 @@
+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>;
@@ -0,0 +1,7 @@
+# `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>
@@ -0,0 +1,7 @@
+# `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>
@@ -0,0 +1,7 @@
+# `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>
@@ -0,0 +1,7 @@
+# `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>
@@ -0,0 +1,9 @@
+# `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>
@@ -0,0 +1,9 @@
+# `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>
@@ -0,0 +1,7 @@
+# `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>
@@ -0,0 +1,7 @@
+# `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>
@@ -1,335 +0,0 @@
-# Content Scripts
-
-[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)
-
-When creating content script entrypoints, they are automatically included in the `manifest.json` along with any CSS files they import.
-
-## Filenames
-
-<EntrypointPatterns
-  :patterns="[
-    ['content.[jt]sx?', 'content-scripts/content.js'],
-    ['content/index.[jt]sx?', 'content-scripts/content.js'],
-    ['<name>.content.[jt]sx?', 'content-scripts/<name>.js'],
-    ['<name>.content/index.[jt]sx?', 'content-scripts/<name>.js'],
-  ]"
-/>
-
-## Definition
-
-```ts
-export default defineContentScript({
-  // Set manifest options
-  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-  excludeMatches: undefined | [],
-  includeGlobs: undefined | [],
-  excludeGlobs: undefined | [],
-  allFrames: undefined | [],
-  runAt: undefined | 'document_start' | 'document_end' | 'document_idle',
-  matchAboutBlank: undefined | true | false,
-  matchOriginAsFallback: undefined | true | false,
-  world: undefined | 'ISOLATED' | 'MAIN',
-
-  // Set include/exclude if the background should be removed from some builds
-  include: undefined | string[],
-  exclude: undefined | string[],
-
-  // Configure how CSS is injected onto the page
-  cssInjectionMode: undefined | "manifest" | "manual" | "ui",
-
-  main(ctx) {
-    // Executed when content script is loaded
-  },
-});
-```
-
-> All manifest options default to `undefined`.
-
-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 extension API.
-
-WXT provides a utility for managing this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
-
-```ts
-export default defineContentScript({
-  // ...
-  main(ctx: ContentScriptContext) {
-    // Add custom listeners for stopping work
-    ctx.onInvalidated(() => {
-      // ...
-    });
-
-    // Stop fetch requests
-    fetch('...url', { signal: ctx.signal });
-
-    // Timeout utilities
-    ctx.setTimeout(() => {
-      // ...
-    }, 5e3);
-    ctx.setInterval(() => {
-      // ...
-    }, 60e3);
-  },
-});
-```
-
-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.
-
-:::tip
-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.
-:::
-
-## CSS
-
-To include CSS with your content script, import the CSS file at the top of your entrypoint.
-
-```
-
-<srcDir>
-└─ entrypoints/
-   └─ overlay.content/
-      ├─ index.ts
-      └─ style.css
-```
-
-```ts
-// entrypoints/overlay.content/index.ts
-import './style.css';
-
-export default defineContentScript({
-  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-
-  main(ctx) {
-    // ...
-  },
-});
-```
-
-Any styles imported in your content script will be added to that content script's `css` array in your `manifest.json`:
-
-```json
-// .output/chrome-mv3/manifest.json
-{
-  "content_scripts": [
-    {
-      "matches": ["*://google.com/*", "*://duckduckgo.com/*"],
-      "js": ["content-scripts/overlay.js"],
-      "css": ["content-scripts/overlay.css"]
-    }
-  ]
-}
-```
-
-To disable this behavior, set `cssInjectionMode` to `"manual"` or `"ui"`.
-
-```ts
-export default defineContentScript({
-  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-  cssInjectionMode: 'manual',
-
-  main(ctx) {
-    // ...
-  },
-});
-```
-
-## UI
-
-WXT provides a utility function, `createContentScriptUi` to simplify mounting a UI from a content script. Internally, it uses the `ShadowRoot` API to isolate your CSS from the webpages.
-
-`createContentScriptUi` requires a `ContentScriptContext` so that when the context is invalidated, the UI is automatically removed from the webpage.
-
-:::details When to use `createContentScriptUi`
-You should only use `createContentScriptUi` if you want your UI's styles isolated from the webpages. If you want to create a more "integrated" UI that uses the page's styles, you can just use the regular JS API's to append your UI to the page.
-
-```ts
-const ui = document.createElement('div');
-const anchor = document.querySelector('#anchor-selector');
-anchor.append(ui);
-```
-
-You can try out [`createContentScriptIframe`](#createcontentscriptiframe) as an alternative solution
-
-:::
-
-### Usage
-
-To use `createContentScriptUi`, follow these steps:
-
-1. Import your CSS file at the top of your content script
-2. Set `cssInjectionMode: "ui"` inside `defineContentScript`
-3. Call `createContentScriptUi`
-4. Call `mount` to add the UI to the webpage
-
-Here's a basic example:
-
-```ts
-// entrypoints/ui.content/index.ts
-import './style.css';
-
-export default defineContentScript({
-  // ...
-  cssInjectionMode: 'ui',
-
-  async main(ctx) {
-    const ui = await createContentScriptUi(ctx, {
-      name: 'example-ui',
-      type: 'inline',
-      anchor: '#some-element',
-      append: 'after',
-      mount(container) {
-        // Mount UI inside `container`...
-      },
-    });
-
-    // You must call `mount` to add the UI to the page.
-    ui.mount();
-  },
-});
-```
-
-If you're using a frontend framework, you'll also need to include an `onRemoved` callback:
-
-:::code-group
-
-```ts [Vue]
-import { createApp } from 'vue';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Create a new app and mount it inside the container
-    const app = createApp(...);
-    app.mount(container);
-    return app;
-  },
-  onRemove(app) {
-    // When the UI is removed from the DOM, call unmount to stop the app
-    app.unmount();
-  },
-});
-```
-
-```ts [React]
-import ReactDOM from 'react-dom/client';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Create a root using the container and render your app
-    const root = ReactDOM.createRoot(container);
-    root.render(...);
-    return root;
-  },
-  onRemove(root) {
-    // When the UI is removed from the DOM, call unmount to stop the app
-    root.unmount();
-  },
-});
-```
-
-```ts [Svelte]
-import App from './App.svelte';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Mount your app component inside the container
-    return new App({
-      target: container,
-    });
-  },
-  onRemove(app) {
-    // When the UI is removed from the DOM, call $destroy to stop the app
-    app.$destroy();
-  },
-});
-```
-
-```ts [Solid]
-import { render } from 'solid-js/web';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Render your app component into the container
-    return render(() => ..., container)
-  },
-  onRemove(unmount) {
-    // When the UI is removed from the DOM, call unmount to stop the app
-    unmount();
-  },
-});
-```
-
-:::
-
-### `anchor`
-
-The anchor dictates where the UI will be mounted.
-
-### `append`
-
-Customize where the UI get's appended to the DOM, relative to the `anchor` element.
-
-### `type`
-
-There are 3 types of UI's you can mount.
-
- `inline`: Shows up inline based on the `anchor` and `append` options
- `overlay`: Shows up inline, but styled to be 0px by 0px, with overflow visible. This causes the UI to overlay on top of the webpage's content
- `modal`: A fullscreen overlay that covers the entire screen, regardless of where it's anchored.
-
-> TODO: Add visualization of the different UI types.
-
-### Overlay `alignment`
-
-Because the overlay UI type results in a 0px by 0px container being added to the webpage, the `alignment` option allows you to configure which corner of your UI is aligned with the 0x0 element.
-
-> TODO: Add visualization of the different alignments.
-
-## IFrame
-
-WXT provides a utility function, `createContentScriptIframe` to simplify mounting a UI from a content script. It creates an iframe to an unlisted HTML page. Unlike `createContentScriptUi`, this API support HMR.
-
-`createContentScriptIframe` requires a `ContentScriptContext` so that when the context is invalidated, the UI is automatically removed from the webpage.
-
-### Usage
-
-To use `createContentScriptIframe`, follow these steps:
-
-1. Create an unlisted HTML page that will be loaded into your iframe
-1. Add unlisted page to the manifest's `web_accessible_resouces`
-1. Call `createContentScriptUi`
-1. Call `mount` to add the UI to the webpage
-
-Here's a basic example:
-
-```ts
-export default defineContentScript({
-  // ...
-
-  async main(ctx) {
-    const ui = await createContentScriptIframe(ctx, {
-      page: '/your-unlisted-page.html',
-      type: 'inline',
-      anchor: '#some-element',
-      append: 'after',
-    });
-
-    // You must call `mount` to add the UI to the page.
-    ui.mount();
-  },
-});
-```
-
-The options, other than `page`, are the same as [`createContentScriptUi`](#anchor).
-
-### `page`
-
-The HTML page you want to load inside the iframe. This string will be passed into `browser.runtime.getURL` to resolve the full path of to your HTML page.
@@ -1,37 +0,0 @@
-# Side Panel
-
-[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/sidePanel/)
-
-:::tip Chromium Only
-Firefox does not support sidepanel pages.
-:::
-
-## Filenames
-
-<EntrypointPatterns
-  :patterns="[
-    ['entrypoints/sidepanel.html', 'sidepanel.html'],
-    ['entrypoints/sidepanel/index.html', 'sidepanel.html'],
-    ['entrypoints/<name>.sidepanel.html', '<name>.html` '],
-    ['entrypoints/<name>.sidepanel/index.html', '<name>.html` '],
-  ]"
-/>
-
-## Definition
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
-    <!-- Set include/exclude if the page should be removed from some builds -->
-    <meta name="manifest.include" content="['chrome', ...]" />
-    <meta name="manifest.exclude" content="['chrome', ...]" />
-  </head>
-  <body>
-    <!-- ... -->
-  </body>
-</html>
-```
@@ -0,0 +1,19 @@
+---
+layout: page
+---
+
+<style>
+.examples-container {
+  padding: 32px;
+}
+</style>
+
+<div class="examples-container">
+  <div class="vp-doc">
+    <h1>Examples</h1>
+  </div>
+
+  <br />
+
+  <ExampleSearch />
+</div>
@@ -0,0 +1,33 @@
+# 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,49 +1,33 @@
 # Compare

-Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework), another web extension framework.
+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                  |
-| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: |
-| Supports all browsers                                |             ✅              |                    ✅                    |
-| MV2 Support                                          |             ✅              |                    ✅                    |
-| MV3 Support                                          |             ✅              |                    ✅                    |
-| Create Extension ZIPs                                |             ✅              |                    ✅                    |
-| Create Firefox Sources ZIP                           |             ✅              |                    ❌                    |
-| First-class TypeScript support                       |             ✅              |                    ✅                    |
-| File based entrypoint discovery                      |             ✅              |                    ✅                    |
-| Inline entrypoint config                             |             ✅              |                    ✅                    |
-| 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                                 |       🟡 Coming soon        |                    ✅                    |
-| Remote Code Bundling (Google Analytics)              |             ✅              |                    ✅                    |
+| Features                                             |             WXT             |                  Plasmo                  |                  CRXJS                  |
+| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | :-------------------------------------: |
+| Supports all browsers                                |             ✅              |                    ✅                    |        ✅ As of `v2.0.0-beta.23`        |
+| 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        |
-| <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |
-| Storage                                              |             ❌              |                    ✅                    |
-| Messaging                                            |             ❌              |                    ✅                    |
-| Content Script UI                                    |             ❌              |                    ✅                    |
-
-## Dev Mode
-
-WXT's main goal is improving the development experience (DX) of creating web extensions. 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 interupts 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.
-:::
+| `.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                                    |             ✅              |                    ✅                    |                   ❌                    |
@@ -0,0 +1,57 @@
+# 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).
+:::
@@ -0,0 +1,60 @@
+# 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).
+:::
@@ -1,19 +1,30 @@
 # Installation

-Bootstrap a new project, start from scratch, or [migrate an existing project](/guide/migrate-to-wxt).
+Bootstrap a new project, start from scratch, or [migrate an existing project](/get-started/migrate-to-wxt).

 ## Bootstrap Project

 :::code-group

 ```sh [pnpm]
-pnpx wxt@latest init <project-name>
+pnpm dlx wxt@latest init <project-name>
 ```

 ```sh [npm]
 npx wxt@latest init <project-name>
 ```

+```sh [bun]
+# The "wxt init" command currently fails when ran with bunx.
+# Use NPX as a workaround, and select "bun" as your package
+# manager. To stay up to date with this issue, follow
+# https://github.com/wxt-dev/wxt/issues/707
+#
+# bunx wxt@latest init <project-name>
+
+npx wxt@latest init <project-name>
+```
+
 :::

 There are several starting templates available.
@@ -32,47 +43,30 @@ All templates default to TypeScript. Rename the file extensions to `.js` to use

 ## From Scratch

-Create a new NPM project:
+Initialize a project and install `wxt`:

 :::code-group

 ```sh [pnpm]
-mkdir project-name
-cd project-name
 pnpm init
-echo 'shamefully-hoist=true' >> .npmrc
-```
-
-```sh [npm]
-mkdir project-name
-cd project-name
-npm init
-```
-
-```sh [yarn]
-mkdir project-name
-cd project-name
-yarn init
-```
-
-:::
-
-Then install `wxt`:
-
-:::code-group
-
-```sh [pnpm]
 pnpm add -D wxt
 ```

 ```sh [npm]
+npm init
 npm i --save-dev wxt
 ```

 ```sh [yarn]
+yarn init
 yarn add --dev wxt
 ```

+```sh [bun]
+bun init
+bun add --dev wxt
+```
+
 :::

 Add your first entrypoint:
@@ -84,7 +78,7 @@ export default defineBackground(() => {
 });
 ```

-Finally, add scripts to your `package.json`:
+And add scripts to your `package.json`:

 ```json
 {
@@ -100,50 +94,23 @@ Finally, add scripts to your `package.json`:
 }
 ```

-## Migrate an Existing Project
-
-Before starting the migration, it is recommended to run `pnpx wxt@latest init` to see what a basic project looks like. Once you have an understanding of how WXT projects are structured, you're ready to convert the project, using the initialized project as a reference.
-
-Migrating a project to WXT comes down to a few steps:
-
-1. Install WXT and remove any old build tools: `pnpm i -D wxt`
-1. Refactoring/move your entrypoints to the `entrypoints` directory
-1. Moving public assets to the `public` directory
-1. Update the dev and build scripts to use WXT
-1. Ensure project is compatible with Vite, which is used under the hood to bundle your extension
-
-:::info
-Since projects vary greatly in setup, [start a discussion on GitHub](https://github.com/wxt-dev/wxt/discussions/new/choose) if you need help migrating your project to WXT.
-:::
-
 ## Development

-Once you've installed WXT, you can start the development server using the `dev` script.
+Once the project is setup, you can start the development server using the `dev` script.

 ```sh
 pnpm dev
 ```

 :::tip 🎉&ensp;Well done!
-
 The dev command will build the extension for development, open the browser, and reload the different parts of the extension when you save changes.
 :::

-:::details Development Manifest
-When running the dev command, WXT will make several changes to your `manifest.json` to improve your development experience:
-
- If missing, add a background script/service worker to enable fast reloads
- Add serveral `permissions` and `host_permissions` to enable HMR and fast reloads
- Modify the CSP to allow connections with the dev server
- Remove `content_scripts` and register them at runtime so they can be easily reloaded when you save a file
-
-If you're an experienced web extension developer and think the dev manifest looks wrong, this is why. Run a production build with `wxt build` to see the unmodified `manifest.json`.
-:::
-
 ## Next Steps

 You're ready to build your web extension!

- Learn how to [add entrypoints](./entrypoints) like the popup, options page, or content scripts
+- Read the rest of the "Get Started" pages for a high-overview of what WXT can do
+- Read the [Guide](/guide/key-concepts/manifest) to learn in-depth about each feature WXT supports
 - [Configure WXT](./configuration) by creating a `wxt.config.ts` file
- Checkout [example projects](https://github.com/wxt-dev/wxt-examples) to see how to perfom common tasks with WXT
+- Checkout [example projects](https://github.com/wxt-dev/examples) to see how to perform common tasks with WXT
@@ -7,7 +7,9 @@ head:

 # Introduction

-WXT is a free and open source framework for building web extensions in an conventional, intuative, and safe way **_for all browsers_**.
+## Overview
+
+WXT is a free and open source framework for building web extensions in an conventional, intuitive, and safe way **_for all browsers_**.

 WXT is based of [Nuxt](https://nuxt.com), and aims to provide the same great DX with TypeScript, auto-imports, and an opinionated project structure.

@@ -15,12 +17,12 @@ WXT is based of [Nuxt](https://nuxt.com), and aims to provide the same great DX

 ## Conventions

-WXT is an optionated framework. This helps keep projects consistent and easy to pick up.
+WXT is an opinionated framework. This helps keep projects consistent and easy to pick up.

 - **Generated manifest**: Based on your project's file structure
 - **Entrypoint configuration**: Configure entrypoints from the same file they're declare in
 - **Type-safety is a priority**: Out-of-the-box TypeScript support with improved browser API typing
- **Simple output file structure**: Ouptut file paths minimize the path at runtime
+- **Simple output file structure**: Output file paths minimize the path at runtime

 ## Development

@@ -37,3 +39,9 @@ In addition, WXT fully supports Firefox's source code requirements when using a
 :::info
 See [Publishing](./publishing) for more info around production builds.
 :::
+
+## New to Extension Development?
+
+Most of these docs assume you have a basic understanding of how to write a chrome or web extension.
+
+If you've never written a web extension before or need a refresher, follow Google's ["Hello, World!" tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world) to understand the basics.
@@ -4,7 +4,7 @@ outline: deep

 # Migrate to WXT

-> If you have problems migrating to WXT, feel free to ask for help in GitHub by [starting a discussion](https://github.com/wxt-dev/wxt/discussions/new?category=q-a)!
+> If you have problems migrating to WXT, feel free to ask for help in GitHub by [starting a discussion](https://github.com/wxt-dev/wxt/discussions/new?category=q-a) or in [Discord](https://discord.gg/ZFsZqGery9)!

 ## Overview

@@ -12,27 +12,27 @@ Always start by generating a new vanilla project and merging it into your projec

 ```sh
 cd path/to/your/project
-pnpx wxt@latest init example-wxt --template vanilla
+pnpm dlx wxt@latest init example-wxt --template vanilla
 ```

 In general, you'll need to:

-<input type="checkbox" /> Install `wxt`<br />
-<input type="checkbox" /> Update/create `package.json` scripts to use `wxt` (don't forget about `postinstall`)<br />
-<input type="checkbox" /> Move entrypoints into `entrypoints/` directory<br />
-<input type="checkbox" /> Move assets into either the `assets/` or `public/` directories<br />
-<input type="checkbox" /> Move manifest.json content into `wxt.config.ts`<br />
-<input type="checkbox" /> Convert custom import syntax to be compatible with Vite<br />
-<input type="checkbox" /> Add a default export to JS entrypoints<br />
-<input type="checkbox" /> Use the `browser` global instead of `chrome`<br />
-<input type="checkbox" /> Compare final `manifest.json` files, making sure permissions and host permissions are unchanged<br />
-<input type="checkbox" /> Extension output by `wxt build` works the same way as before the migration<br />
+&ensp;<input type="checkbox" /> Install `wxt`<br />
+&ensp;<input type="checkbox" /> Update/create `package.json` scripts to use `wxt` (don't forget about `postinstall`)<br />
+&ensp;<input type="checkbox" /> Move entrypoints into `entrypoints/` directory<br />
+&ensp;<input type="checkbox" /> Move assets into either the `assets/` or `public/` directories<br />
+&ensp;<input type="checkbox" /> Move manifest.json content into `wxt.config.ts`<br />
+&ensp;<input type="checkbox" /> Convert custom import syntax to be compatible with Vite<br />
+&ensp;<input type="checkbox" /> Add a default export to JS entrypoints<br />
+&ensp;<input type="checkbox" /> Use the `browser` global instead of `chrome`<br />
+&ensp;<input type="checkbox" /> Compare final `manifest.json` files, making sure permissions and host permissions are unchanged<br />
+&ensp;<input type="checkbox" /> Extension output by `wxt build` works the same way as before the migration<br />

 Every project is different, so there's no one-solution-fits-all to migrating your project. Just make sure `wxt dev` runs, `wxt build` results in a working extension, and the list of permissions in the `manifest.json` hasn't changed. If all that looks good, you've finished migrating your extension!

 ## Popular Tools/Frameworks

-Here's specific steps for other popuplar frameworks/build tools.
+Here's specific steps for other popular frameworks/build tools.

 ### `vite-plugin-web-extension`

@@ -55,3 +55,11 @@ Since you're already using Vite, it's a simple refactor.
 5. Convert Plasmo's custom import resolutions to Vite's
 6. If importing remote code via a URL, add a `url:` prefix so it works with WXT
 7. Compare your output `manifest.json` files from before the migration to after the migration. They should have the same content. If not, tweak your entrypoints and config to get as close as possible.
+
+<!--
+## Migrate an Existing Project
+
+:::info
+Since projects vary greatly in setup, [start a discussion on GitHub](https://github.com/wxt-dev/wxt/discussions/new/choose) if you need help migrating your project to WXT.
+:::
+-->
@@ -0,0 +1,236 @@
+---
+outline: deep
+---
+
+# Publishing
+
+WXT will help you ZIP your extensions and submit them to the stores for review.
+
+## First Time Publishing
+
+If you're publishing an extension to a store for the first time, you must manually navigate the process. WXT doesn't help you create listings, each store has unique steps and requirements that you need to familiarize yourself with.
+
+For specific details about each store, see the stores sections below.
+
+- [Chrome Web Store](#chrome-web-store)
+- [Firefox Addon Store](#firefox-addon-store)
+- [Edge Addons](#edge-addons)
+
+## Automation
+
+WXT provides two commands to help automate the release process:
+
+- `wxt submit init`: Setup all the required secrets and options for the `wxt submit` command
+- `wxt submit`: Submit new versions of your extension for review (and publish them automatically once approved)
+
+To get started, run `wxt submit init` and follow the prompts. Once finished, you should have a `.env.submit` file! WXT will use this file to submit your updates.
+
+> In CI, make sure you add all the environment variables to the submit step.
+
+To release an update, build all the ZIPs you plan on releasing:
+
+```sh
+wxt zip
+wxt zip -b firefox
+```
+
+Then run the `wxt submit` command, passing in all the ZIP files you want to release. In this case, we'll do a release for all 3 major stores: Chrome Web Store, Edge Addons, and Firefox Addons Store.
+
+If it's your first time running the command, you'll want to test your secrets by passing the `--dry-run` flag:
+
+```sh
+wxt submit --dry-run \
+  --chrome-zip .output/<your-extension>-<version>-chrome.zip \
+  --firefox-zip .output/<your-extension>-<version>-firefox.zip --firefox-sources-zip .output/<your-extension>-<version>-sources.zip \
+  --edge-zip .output/<your-extension>-<version>-chrome.zip
+```
+
+If the dry run passes, remove the flag and do the actual release:
+
+```sh
+wxt submit \
+  --chrome-zip .output/<your-extension>-<version>-chrome.zip \
+  --firefox-zip .output/<your-extension>-<version>-firefox.zip --firefox-sources-zip .output/<your-extension>-<version>-sources.zip \
+  --edge-zip .output/<your-extension>-<version>-chrome.zip
+```
+
+:::tip
+If you only need to release to a single store, only pass that store's ZIP flag.
+:::
+
+:::tip
+See the [Firefox Addon Store](#firefox-addon-store) section for more details about the `--firefox-sources-zip` option.
+:::
+
+## GitHub Action
+
+Here's an example of a GitHub Action that submits new versions of an extension for review. Ensure that you've added all required secrets used in the workflow to the repo's settings.
+
+```yml
+name: Release
+
+on:
+  workflow_dispatch:
+
+jobs:
+  submit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Zip extensions
+        run: |
+          pnpm zip
+          pnpm zip:firefox
+
+      - name: Submit to stores
+        run: |
+          pnpm wxt submit \
+            --chrome-zip .output/*-chrome.zip \
+            --firefox-zip .output/*-firefox.zip --firefox-sources-zip .output/*-sources.zip
+        env:
+          CHROME_EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
+          CHROME_CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
+          CHROME_CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
+          CHROME_REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+          FIREFOX_EXTENSION_ID: ${{ secrets.FIREFOX_EXTENSION_ID }}
+          FIREFOX_JWT_ISSUER: ${{ secrets.FIREFOX_JWT_ISSUER }}
+          FIREFOX_JWT_SECRET: ${{ secrets.FIREFOX_JWT_SECRET }}
+```
+
+The action above lays the foundation for a basic workflow, including `zip` and `submit` steps. To further enhance your GitHub Action and delve into more complex scenarios, consider exploring the following examples from real projects. They introduce advanced features such as version management, changelog generation, and GitHub releases, tailored for different needs:
+
+- [`aklinker1/github-better-line-counts`](https://github.com/aklinker1/github-better-line-counts/blob/main/.github/workflows/submit.yml) - Conventional commits, automated version bump and changelog generation, triggered manually, optional dry run for testing
+- [`GuiEpi/plex-skipper`](https://github.com/GuiEpi/plex-skipper/blob/main/.github/workflows/deploy.yml) - Triggered automatically when `package.json` version is changed, creates and uploads artifacts to GitHub release.
+
+> These examples are designed to provide clear insights and are a good starting point for customizing your own workflows. Feel free to explore and adapt them to your project needs.
+
+## Stores
+
+### Chrome Web Store
+
+> ✅ Supported &bull; [Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard) &bull; [Publishing Docs](https://developer.chrome.com/docs/webstore/publish/)
+
+To create a ZIP for Chrome:
+
+```sh
+wxt zip
+```
+
+### Firefox Addon Store
+
+> ✅ Supported &bull; [Developer Dashboard](https://addons.mozilla.org/developers/) &bull; [Publishing Docs](https://extensionworkshop.com/documentation/publish/submitting-an-add-on/)
+
+Firefox requires you to upload a ZIP of your source code. This allows them to rebuild your extension and review the code in a readable way. More details can be found in [Firefox's docs](https://extensionworkshop.com/documentation/publish/source-code-submission/).
+
+WXT fully supports generating and automatically submitting a source code ZIP.
+
+When you run `wxt zip -b firefox`, your sources are zipped into the `.output` directory alongside the extension. WXT will automatically exclude certain files such as config files, hidden files, and tests. However, it's important to manually check the ZIP to ensure it only contains the files necessary to rebuild your extension.
+
+To customize which files are zipped, add the `zip` option to your config file.
+
+```ts
+// wxt.config.ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  zip: {
+    // ...
+  },
+});
+```
+
+If it's your first time submitting to the Firefox Addon Store, or if you've updated your project layout, always test your sources ZIP! The commands below should allow you to rebuild your extension from inside the extracted ZIP.
+
+:::code-group
+
+```sh [pnpm]
+pnpm i
+pnpm zip:firefox
+```
+
+```sh [npm]
+npm i
+npm run zip:firefox
+```
+
+```sh [yarn]
+yarn
+yarn zip:firefox
+```
+
+```sh [bun]
+bun i
+bun zip:firefox
+```
+
+:::
+
+Make sure the build output is the exact same when running `wxt build -b firefox` in your main project and inside the zipped sources.
+
+:::warning
+If you use a `.env` files, they can effect the chunk hashes in the output directory. Either delete the .env file before running `wxt zip -b firefox`, or include it in your sources zip with the [`zip.includeSources`](/api/reference/wxt/interfaces/InlineConfig#includesources) option. Be careful to not include any secrets in your `.env` files.
+
+See Issue [#377](https://github.com/wxt-dev/wxt/issues/377) for more details.
+:::
+
+Ensure that you have a `README.md` or `SOURCE_CODE_REVIEW.md` file with the above commands so that the Firefox team knows how to build your extension.
+
+#### Private Packages
+
+If you use private packages and you don't want to provide your auth token to the Firefox team during the review process, you can use `zip.downloadPackages` to download any private packages and include them in the zip.
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  zip: {
+    downloadPackages: [
+      '@mycompany/some-package',
+      //...
+    ],
+  },
+});
+```
+
+Depending on your package manager, the `package.json` in the sources zip will be modified to use the downloaded dependencies via the `overrides` or `resolutions` field.
+
+:::warning
+WXT uses the command `npm pack <package-name>` to download the package. That means regardless of your package manager, you need to properly setup a `.npmrc` file. NPM and PNPM both respect `.npmrc` files, but Yarn and Bun have their own ways of authorizing private registries, so you'll need to add an `.npmrc` file.
+:::
+
+### Safari
+
+> 🚧 Not supported yet
+
+WXT does not currently support automated publishing for Safari. Safari extensions require a native MacOS or iOS app wrapper, which WXT does not create yet. For now, if you want to publish to Safari, follow this guide:
+
+- [Converting a web extension for Safari](https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari) - "Convert your existing extension to a Safari web extension using Xcode’s command-line tool."
+
+When running the `safari-web-extension-converter` CLI tool, pass the `.output/safari-mv2` or `.output/safari-mv3` directory, not your source code directory.
+
+```sh
+pnpm wxt build -b safari
+xcrun safari-web-extension-converter .output/safari-mv2
+```
+
+### Edge Addons
+
+> ✅ Supported &bull; [Developer Dashboard](https://aka.ms/PartnerCenterLogin) &bull; [Publishing Docs](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension)
+
+No need to create a specific ZIP for Edge. If you're already publishing to the Chrome Web Store, you can reuse your Chrome ZIP.
+
+However, if you have features specifically for Edge, create a separate ZIP with:
+
+```sh
+wxt zip -b edge
+```
@@ -1,85 +0,0 @@
-# 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="~/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,78 +0,0 @@
-# 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/client/functions/defineContentScript) from `wxt/client`
- [`defineBackground`](/api/wxt/client/functions/defineBackground) from `wxt/client`
- [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi) from `wxt/client`
- [`defineUnlistedScript`](/api/wxt/sandbox/functions/defineUnlistedScript) from `wxt/sandbox`
- [`fakeBrowser`](/api/wxt/testing/variables/fakeBrowser) from `wxt/testing`
-
-And more. All `wxt/*` APIs can be used without imports.
-
-## 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 fuctions like createApp, ref, computed, watch, toRaw, etc...
-    presets: ['vue'],
-  },
-});
-```
-
-To disable auto-imports, set `imports: false`
-
-```ts
-export default defineConfig({
-  imports: false,
-});
-```
@@ -1,101 +0,0 @@
-# Configuration
-
-WXT's behavior can be configured via the `wxt.config.ts` file. In this file, you can add Vite plugins, change the directory strucutre 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',
-});
-```
-
-## Vite Config
-
-[Vite](https://vitejs.dev/) is the bundler used to build each entrypoint of your extension. Vite can be configured via the `vite` option.
-
-See [Vite's documentation](https://vitejs.dev/config/) for configuring the bundler.
-
-## 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()],
-  },
-});
-```
-
-:::
@@ -1,59 +0,0 @@
-# Development
-
-WXT's main goal is providing the best DX it possibly can. When running your extension in dev mode, each part of your extension is reloaded separately when possible.
-
-|                     | HMR | Reloaded individually | Reload extension |                    Restart browser                     |
-| ------------------- | :-: | :-------------------: | :--------------: | :----------------------------------------------------: |
-| HTML File           |     |          ✅           |
-| HTML Dependency     | ✅  |
-| MV3 Content Script  |     |          ✅           |
-| MV2 Content Script  |     |                       |        ✅        |
-| Background          |     |                       |        ✅        |
-| manifest.json       |     |                       |                  | 🟡 See [#16](https://github.com/wxt-dev/wxt/issues/16) |
-| `wxt.config.ts`     |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
-| `web-ext.config.ts` |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
-
-## Configure Browser Startup
-
-WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
-
-:::code-group
-
-```ts [wxt.config.ts]
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  runner: {
-    // Runner config
-  },
-});
-```
-
-```ts [web-ext.config.ts]
-import { defineRunnerConfig } from 'wxt';
-
-export default defineRunnerConfig({
-  // Runner config
-});
-```
-
-:::
-
-`web-ext`'s browser discovery is very limitted. 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
-import { defineRunnerConfig } from 'wxt';
-
-export default defineRunnerConfig({
-  binaries: {
-    chrome: '/path/to/chrome-beta', // Use Chrome Beta instead of regular Chrome
-    firefox: 'firefoxdeveloperedition', // Use Firefox Developer Edition instead of regular Firefox
-    edge: '/path/to/edge', // Open MS Edge when running "wxt -b edge"
-  },
-});
-```
-
-:::tip
-When configuring browser binaries, it's helpful to put them in `~/web-ext.config.ts` instead of the project directory's `web-ext.config.ts` file. When placed in your home directory (`~/`), this config will be used by all WXT projects, so you only need to configure the binaries once.
-:::
@@ -0,0 +1,61 @@
+# `<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: process.env.VITE_BUG_REPORTING_DISABLED === 'true',
+  apiKey: process.env.VITE_API_KEY,
+});
+```
+
+> You don't have to do this, you can use `process.env.VITE_*` anywhere in your runtime code, but putting them here consolidates them to one place and defines what variables are expected.
@@ -0,0 +1,42 @@
+# `<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);
+  },
+});
+```
+
+:::
@@ -0,0 +1,5 @@
+# `<srcDir>/components`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `<srcDir>/composables`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -16,7 +16,7 @@ For MV2, the background is added as a script to the background page. For MV3, th
 ## Definition

 :::warning
-The main function of the background **_CANNOT BE ASYNC_**. Event listeners must be added syncronously on background startup. If your main function returns a promise, WXT will log an error.
+The main function of the background **_CANNOT BE ASYNC_**. Event listeners must be added synchronously on background startup. If your main function returns a promise, WXT will log an error.
 :::

 ```ts
@@ -0,0 +1,107 @@
+# Content Scripts
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)
+
+When creating content script entrypoints, they are automatically included in the `manifest.json` along with any CSS files they import.
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['content.[jt]sx?', 'content-scripts/content.js'],
+    ['content/index.[jt]sx?', 'content-scripts/content.js'],
+    ['<name>.content.[jt]sx?', 'content-scripts/<name>.js'],
+    ['<name>.content/index.[jt]sx?', 'content-scripts/<name>.js'],
+  ]"
+/>
+
+## Definition
+
+```ts
+export default defineContentScript({
+  // Set manifest options
+  matches: string[],
+  excludeMatches: undefined | [],
+  includeGlobs: undefined | [],
+  excludeGlobs: undefined | [],
+  allFrames: undefined | [],
+  runAt: undefined | 'document_start' | 'document_end' | 'document_idle',
+  matchAboutBlank: undefined | true | false,
+  matchOriginAsFallback: undefined | true | false,
+  world: undefined | 'ISOLATED' | 'MAIN',
+
+  // Set include/exclude if the background should be removed from some builds
+  include: undefined | string[],
+  exclude: undefined | string[],
+
+  // Configure how CSS is injected onto the page
+  cssInjectionMode: undefined | "manifest" | "manual" | "ui",
+
+  // Configure how/when content script will be registered
+  registration: undefined | "manifest" | "runtime",
+
+  main(ctx: ContentScriptContext) {
+    // Executed when content script is loaded
+  },
+});
+```
+
+> All manifest options default to `undefined`.
+
+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.
+
+## CSS
+
+To include CSS with your content script, import the CSS file at the top of your entrypoint.
+
+```
+
+<srcDir>/
+└─ entrypoints/
+   └─ overlay.content/
+      ├─ index.ts
+      └─ style.css
+```
+
+```ts
+// entrypoints/overlay.content/index.ts
+import './style.css';
+
+export default defineContentScript({
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+
+  main(ctx) {
+    // ...
+  },
+});
+```
+
+Any styles imported in your content script will be added to that content script's `css` array in your `manifest.json`:
+
+```json
+// .output/chrome-mv3/manifest.json
+{
+  "content_scripts": [
+    {
+      "matches": ["*://google.com/*", "*://duckduckgo.com/*"],
+      "js": ["content-scripts/overlay.js"],
+      "css": ["content-scripts/overlay.css"]
+    }
+  ]
+}
+```
+
+To disable this behavior, set `cssInjectionMode` to `"manual"` or `"ui"`.
+
+```ts
+export default defineContentScript({
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+  cssInjectionMode: 'manual',
+
+  main(ctx) {
+    // ...
+  },
+});
+```
+
+See [Content Script UI](/guide/key-concepts/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](/entrypoints/content-scripts#css) documentation for the recomended approach to include CSS with a content script.
+See [Content Script CSS](/guide/directory-structure/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/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/reference/wxt/interfaces/InlineConfig#transformmanifest) to manually add your CSS file to the manifest.
 :::

 ## Filenames
@@ -13,15 +13,12 @@

 ## Definition

-Plain old HTML file.
-
 ```html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
    <!-- Set include/exclude if the page should be removed from some builds -->
    <meta name="manifest.include" content="['chrome', ...]" />
    <meta name="manifest.exclude" content="['chrome', ...]" />
@@ -31,3 +28,13 @@ Plain old HTML file.
  </body>
 </html>
 ```
+
+## Adding UI Elements
+
+Chrome extensions allow you to add panels and side panes to the devtools window.
+
+![DevTools window showing Elements panel and Styles sidebar pane.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd_1920.png)
+
+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)
@@ -10,10 +10,10 @@ Firefox does not support sandboxed pages.

 <EntrypointPatterns
  :patterns="[
-    ['entrypoints/sandbox.html', 'sandbox.html'],
-    ['entrypoints/sandbox/index.html', 'sandbox.html'],
-    ['entrypoints/<name>.sandbox.html', '<name>.html` '],
-    ['entrypoints/<name>.sandbox/index.html', '<name>.html` '],
+    ['sandbox.html', 'sandbox.html'],
+    ['sandbox/index.html', 'sandbox.html'],
+    ['<name>.sandbox.html', '<name>.html'],
+    ['<name>.sandbox/index.html', '<name>.html'],
  ]"
 />

@@ -0,0 +1,49 @@
+# Side Panel
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/sidePanel/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars)
+
+In Chrome, side panels use the "side_panel" API, while Firefox uses the "sidebar_action" API.
+
+:::warning
+Chrome added support for sidepanels in Manifest V3, they are not available in Manifest V2.
+:::
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['sidepanel.html', 'sidepanel.html'],
+    ['sidepanel/index.html', 'sidepanel.html'],
+    ['<name>.sidepanel.html', '<name>.html` '],
+    ['<name>.sidepanel/index.html', '<name>.html` '],
+  ]"
+/>
+
+## Definition
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Side Panel Title</title>
+    <meta
+      name="manifest.default_icon"
+      content="{
+        16: '/icon-16.png',
+        24: '/icon-24.png',
+        ...
+      }"
+    />
+    <meta name="manifest.open_at_install" content="true|false" />
+    <meta name="manifest.browser_style" content="true|false" />
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -1,6 +1,8 @@
 # Unlisted Pages

-HTML pages that are built by Vite, but are not included in the manifest.
+HTML pages that are bundled and shipped with the extension, but are not included in the manifest.
+
+If you plan on using the page in an iframe, don't forget to add the page to [`web_accessible_resources`](https://developer.chrome.com/docs/extensions/reference/manifest/web-accessible-resources).

 ### Examples

@@ -22,7 +24,7 @@ HTML pages that are built by Vite, but are not included in the manifest.
 Pages are accessible at `'/<name>.html'`:

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

 console.log(url); // "chrome-extension://<id>/<name>.html"
 ```
@@ -1,8 +1,8 @@
 # Unlisted Scripts

-TypeScript files that are built, but are not included in the manifest.
+TypeScript files that are bundled and shipped with the extension, but are not included in the manifest.

-You are responsible for loading/running these scripts where needed.
+You are responsible for loading/running these scripts where needed. If necessary, don't forget to add the script and/or any related stylesheets to [`web_accessible_resources`](https://developer.chrome.com/docs/extensions/reference/manifest/web-accessible-resources).

 ## Filenames

@@ -0,0 +1,5 @@
+# `<root>/.env`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `<srcDir>/hooks`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `<root>/.output`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `<root>/package.json`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,35 @@
+# `public/`
+
+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);
+  },
+});
+```
+
+:::
@@ -0,0 +1,5 @@
+# `public/_locales/`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `<root>/tsconfig.json`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `<srcDir>/utils`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,65 @@
+# `web-ext.config.ts`
+
+This file lets you configure the browser startup when running `wxt dev`.
+
+```ts
+import { defineRunnerConfig } from 'wxt';
+
+export default defineRunnerConfig({
+  startUrls: ['https://google.com', 'https://youtube.com'],
+});
+```
+
+There are three places you can customize the runner:
+
+- `<root>/wxt.config.ts` - Use the `runner` option. Changes here will be committed and shared with everyone developing the project.
+- `<root>/web-ext.config.ts` - A gitignored file for you to customize the startup behavior to your liking without effecting others
+- `$HOME/web-ext.config.ts` - Stores system-wide config effecting all projects running on your machine.
+
+See below examples on how to accomplish common configuration:
+
+[[toc]]
+
+## Configuring 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.
+
+```ts
+import { defineRunnerConfig } from 'wxt';
+
+export default defineRunnerConfig({
+  binaries: {
+    chrome: '/path/to/chrome-beta', // Use Chrome Beta instead of regular Chrome
+    firefox: 'firefoxdeveloperedition', // Use Firefox Developer Edition instead of regular Firefox
+    edge: '/path/to/edge', // Open MS Edge when running "wxt -b edge"
+  },
+});
+```
+
+## Disable Opening Browser
+
+Disabling the browser can be useful if it's difficult to develop your extension with fresh profiles. Maybe you need to sign into a website to see a content script run, and a fresh profile isn't helpful because it doesn't save your login info.
+
+To disable opening the extension automatically in a new window, just disable the runner:
+
+```ts
+export default defineRunnerConfig({
+  disabled: true,
+});
+```
+
+## Profile Customization
+
+Another option, instead of disabling the runner, to stay logged into websites is to use a custom profile.
+
+`web-ext` comes with some built-in ways of using an existing profile, but it's not really using the same profile. It copies the profile to a temp directory, and uses that.
+
+Instead, I've found it's better to pass Chrome's `--user-data-dir` argument. This let's you use a fresh profile initially, and customize it to your liking. You can install devtool extensions, set custom flags, and log into websites. Next time you run the extension in dev mode, all that will be remembered!
+
+```ts
+export default defineRunnerConfig({
+  chromiumArgs: ['--user-data-dir=./chrome-data'],
+});
+```
+
+> This only works for Chrome. You'll have to use `firefoxProfile` option instead, which has the same limitations mentioned above, where you won't be signed into websites automatically.
@@ -0,0 +1,5 @@
+# `<root>/wxt.config.ts`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# `.wxt/`
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -1,88 +0,0 @@
-# Defining Entrypoints
-
-An "entrypoint" is any HTML, JS, or CSS file that needs to be bundled and included with the extension.
-
-Entrypoints may or may not be listed in the extension's `manifest.json`.
-
-## `/entrypoints` Directory
-
-In WXT, entrypoints are defined by adding a file to the `entrypoints/` directory.
-
-For example, a project that looks like this:
-
-```
-<rootDir>
-└─ entrypoints/
-   ├─ background.ts
-   ├─ content.ts
-   ├─ injected.ts
-   └─ popup.html
-```
-
-would result in the following `manifest.json`:
-
-```json
-{
-  // ...
-  "manifest_version": 3,
-  "action": {
-    // ...
-    "default_popup": "popup.html"
-  },
-  "background": {
-    // ...
-    "service_worker": "background.js"
-  },
-  "content_scripts": [
-    {
-      // ...
-      "js": ["content-scripts/content.js"]
-    }
-  ]
-}
-```
-
-If a file uses a special name recognized by WXT, it will be added to the manifest. In this case:
-
- `popup.html` &rarr; `action.default_popup`
- `content.ts` &rarr; `content_scripts.0.js.0`
- `background.ts` &rarr; `background.service_worker`
-
-But not all entrypoints are added to the `manifest.json`. If the filename is not recognized by WXT, they are still built and included in the extension, but they are considered "unlisted" and are not apart of the manifest.
-
-In this case, `injected.ts` gets output to `<outdir>/injected.js` and is accessible via `browser.runtime.getURL("/injected.js")`.
-
-:::info
-See [`/entrypoints` folder](/entrypoints/background) documentation for a full list of recognized entrypoint filenames.
-:::
-
-## Entrypoint Options
-
-Some entrypoints, like content scripts, actions, or the background, can recieve additional options.
-
-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
-For a full list of entrypoints and each of their options, see the [`/entrypoints` folder](/entrypoints/background) documentation.
-:::
@@ -1,96 +0,0 @@
-# Extension APIs
-
-WXT is built on top of [`webextension-polyfill`](https://www.npmjs.com/package/webextension-polyfill), which uses the standard `browser` global.
-
-If you're used to Chrome's `chrome` global, its a simple switch:
-
-1. Replace `chrome` with `browser`
-2. [Replace callbacks with async/await](https://developer.chrome.com/docs/extensions/mv3/promises/)
-
-And that's it! Your extension now supports Chrome, Firefox, Safari, Edge, and other Chromium browsers.
-
-## Basic Usage
-
-The `browser` variable is available globally via [auto-imports](/guide/auto-imports), or it can be imported manually.
-
-```ts
-import { browser } from 'wxt/browser';
-```
-
-The `wxt/browser` module exports a customized version of `webextension-polyfill`'s browser with improved typing.
-
-### Example
-
-Let's save the date the extension was installed. Just like `chrome`, some APIs require the permission is added to your manifest before the API is defined. Here, we need to add the `storage` permission to your manifest.
-
-```ts
-// wxt.config.ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  manifest: {
-    permissions: ['storage'],
-  },
-});
-```
-
-Then we can use `browser.storage` to save the install date to local storage.
-
-```ts
-// background.ts
-export default defineBackground(() => {
-  browser.runtime.onInstall.addEventListener(({ reason }) => {
-    if (reason === 'install') {
-      browser.storage.local.setItem({ installDate: Date.now() });
-    }
-  });
-});
-```
-
-## Messaging
-
-Follow [Chrome's message passing guide](https://developer.chrome.com/docs/extensions/mv3/messaging/) to understand how message passing works in web extensions. In Google's examples, just replace `chrome` with `browser`, and it will work in WXT.
-
-Here's a basic request/response example:
-
-```ts
-// popup/main.ts
-const res = await browser.runtime.sendMessage('ping');
-
-console.log('res'); // "pong"
-```
-
-```ts
-// background.ts
-export default defineBackground(() => {
-  browser.runtime.onMessage.addEventListener(
-    (message, sender, sendResponse) => {
-      console.log(message); // "ping"
-
-      // Wait 1 second and respond with "pong"
-      setTimeout(() => sendResponse('pong'), 1000);
-      return true;
-    },
-  );
-});
-```
-
-There are a number of message passing libraries you can use to improve the message passing experience.
-
-Here are some that are compatible with WXT (because they are based off `webextension-polyfill` as well):
-
- [`@webext-core/messaging`](https://webext-core.aklinker1.io/guide/messaging/) - "A light-weight, type-safe wrapper around the `browser.runtime` messaging APIs"
- [`@webext-core/proxy-service`](https://webext-core.aklinker1.io/guide/proxy-service/) - "Create TRPC-like services that can be called from anywhere but run in the background"
- [`webext-bridge`](https://github.com/zikaari/webext-bridge) - "Messaging in Web Extensions made super easy. Out of the box."
-
-## Browser Differences
-
-Some APIs are only available on certain browsers or manifest versions. You will have to check if an API exists at runtime if it is not in the `browser` standard.
-
-```ts
-if ('session' in browser.storage) {
-  // Do something with the non-standard session storage API
-}
-```
-
-> If you're using TypeScript, knowing what is non-standard is easy! APIs that are not typed are non-standard.
@@ -0,0 +1,36 @@
+# Messaging
+
+## Overview
+
+Follow [Chrome's message passing guide](https://developer.chrome.com/docs/extensions/mv3/messaging/) to understand how message passing works in web extensions. In Google's examples, just replace `chrome` with `browser`, and it will work in WXT.
+
+Here's a basic request/response example:
+
+```ts
+// popup/main.ts
+const res = await browser.runtime.sendMessage('ping');
+
+console.log(res); // "pong"
+```
+
+```ts
+// background.ts
+export default defineBackground(() => {
+  browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    console.log(message); // "ping"
+
+    // Wait 1 second and respond with "pong"
+    setTimeout(() => sendResponse('pong'), 1000);
+    return true;
+  });
+});
+```
+
+## Third Party Libraries
+
+There are a number of message passing libraries you can use to improve the message passing experience.
+
+- [`@webext-core/messaging`](https://webext-core.aklinker1.io/guide/messaging/) - "A light-weight, type-safe wrapper around the `browser.runtime` messaging APIs"
+- [`@webext-core/proxy-service`](https://webext-core.aklinker1.io/guide/proxy-service/) - "Create RPC-like services that can be called from anywhere but run in the background"
+- [`webext-bridge`](https://github.com/zikaari/webext-bridge) - "Messaging in Web Extensions made super easy. Out of the box."
+- [`trpc-chrome`](https://www.npmjs.com/package/trpc-chrome) - "tRPC adapter for Web Extensions 🧩"
@@ -0,0 +1,5 @@
+# All Other APIs
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,26 @@
+# `browser.scripting`
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/api/scripting) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting)
+
+Refer to the browser docs above for basics on how the API works.
+
+## Execute Script Return Values
+
+When using `browser.scripting.executeScript`, you can execute content scripts or unlisted scripts. To return a value, just return a value from the script's main function.
+
+```ts
+// entrypoints/background.ts
+const res = await browser.scripting.executeScript({
+  target: { tabId },
+  files: ['injected.js'],
+});
+console.log(res); // "Hello John!"
+```
+
+```ts
+// entrypoints/injected.js
+export default defineContentScript(() => {
+  console.log('Script was injected!');
+  return 'Hello John!';
+});
+```
@@ -0,0 +1,281 @@
+---
+outline: deep
+---
+
+# Storage API
+
+WXT provides a simplified API to replace the `browser.storage.*` APIs. Use the `storage` auto-import from `wxt/storage` or import it manually to get started:
+
+```ts
+import { storage } from 'wxt/storage';
+```
+
+:::warning
+To use the `wxt/storage` API, the `"storage"` permission must be added to the manifest:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  manifest: {
+    permissions: ['storage'],
+  },
+});
+```
+
+More info on permissions [here](/guide/key-concepts/manifest#permissions).
+:::
+
+[[toc]]
+
+## Basic Usage
+
+All storage keys must be prefixed by their storage area.
+
+```ts
+// ❌ This will throw an error
+await storage.getItem('installDate');
+
+// ✅ This is good
+await storage.getItem('local:installDate');
+```
+
+You can use `local:`, `session:`, `sync:`, or `managed:`.
+
+If you use TypeScript, you can add a type parameter to most methods to specify the expected type of the key's value:
+
+```ts
+await storage.getItem<number>('local:installDate');
+await storage.watch<number>(
+  'local:installDate',
+  (newInstallDate, oldInstallDate) => {
+    // ...
+  },
+);
+await storage.getMeta<{ v: number }>('local:installDate');
+```
+
+For a full list of methods available, see the [API reference](/api/reference/wxt/storage/interfaces/WxtStorage).
+
+## Watchers
+
+To listen for storage changes, use the `storage.watch` function. It lets you setup a listener for a single key:
+
+```ts
+const unwatch = storage.watch<number>('local:counter', (newCount, oldCount) => {
+  console.log('Count changed:', { newCount, oldCount });
+});
+```
+
+To remove the listener, call the returned `unwatch` function:
+
+```ts
+const unwatch = storage.watch(...);
+
+// Some time later...
+unwatch();
+```
+
+## Metadata
+
+`wxt/storage` also supports setting metadata for keys, stored at `key + "$"`. Metadata is a collection of properties associated with a key. It might be a version number, last modified date, etc.
+
+[Other than versioning](#versioning), you are responsible for managing a field's metadata:
+
+```ts
+await Promise.all([
+  storage.setItem('local:preference', true),
+  storage.setMeta('local:preference', { lastModified: Date.now() }),
+]);
+```
+
+When setting different properties of metadata from multiple calls, the properties are combined instead of overwritten:
+
+```ts
+await storage.setMeta('local:preference', { lastModified: Date.now() });
+await storage.setMeta('local:preference', { v: 2 });
+
+await storage.getMeta('local:preference'); // { v: 2, lastModified: 1703690746007 }
+```
+
+You can remove all metadata associated with a key, or just specific properties:
+
+```ts
+// Remove all properties
+await storage.removeMeta('local:preference');
+
+// Remove one property
+await storage.removeMeta('local:preference', 'lastModified');
+
+// Remove multiple properties
+await storage.removeMeta('local:preference', ['lastModified', 'v']);
+```
+
+## Defining Storage Items
+
+Writing the key and type parameter for the same key over and over again can be annoying. As an alternative, you can use `storage.defineItem` to create a "storage item".
+
+Storage items contain the same APIs as the `storage` variable, but you can configure its type, default value, and more in a single place:
+
+```ts
+// utils/storage.ts
+const showChangelogOnUpdate = storage.defineItem<boolean>(
+  'local:showChangelogOnUpdate',
+  {
+    defaultValue: true,
+  },
+);
+```
+
+Now, instead of using the `storage` variable, you can use the helper functions on the storage item you created:
+
+```ts
+await showChangelogOnUpdate.getValue();
+await showChangelogOnUpdate.setValue(false);
+await showChangelogOnUpdate.removeValue();
+const unwatch = showChangelogOnUpdate.watch((newValue) => {
+  // ...
+});
+```
+
+For a full list of properties and methods available, see the [API reference](/api/reference/wxt/storage/interfaces/WxtStorageItem).
+
+### Versioning
+
+You can add versioning to storage items if you expect them to grow or change over time. When defining the first version of an item, start with version 1.
+
+For example, consider a storage item that stores a list of websites that are ignored by an extension.
+
+:::code-group
+
+```ts [v1]
+type IgnoredWebsiteV1 = string;
+
+export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV1[]>(
+  'local:ignoredWebsites',
+  {
+    defaultValue: [],
+    version: 1,
+  },
+);
+```
+
+<!-- prettier-ignore -->
+```ts [v2]
+import { nanoid } from 'nanoid'; // [!code ++]
+
+type IgnoredWebsiteV1 = string;
+interface IgnoredWebsiteV2 { // [!code ++]
+  id: string; // [!code ++]
+  website: string; // [!code ++]
+} // [!code ++]
+
+export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV1[]>( // [!code --]
+export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV2[]>( // [!code ++]
+  'local:ignoredWebsites',
+  {
+    defaultValue: [],
+    version: 1, // [!code --]
+    version: 2, // [!code ++]
+    migrations: { // [!code ++]
+      // Ran when migrating from v1 to v2 // [!code ++]
+      2: (websites: IgnoredWebsiteV1[]): IgnoredWebsiteV2[] => { // [!code ++]
+        return websites.map((website) => ({ id: nanoid(), website })); // [!code ++]
+      }, // [!code ++]
+    }, // [!code ++]
+  },
+);
+```
+
+<!-- prettier-ignore -->
+```ts [v3]
+import { nanoid } from 'nanoid';
+
+type IgnoredWebsiteV1 = string;
+interface IgnoredWebsiteV2 {
+  id: string;
+  website: string;
+}
+interface IgnoredWebsiteV3 { // [!code ++]
+  id: string; // [!code ++]
+  website: string; // [!code ++]
+  enabled: boolean; // [!code ++]
+} // [!code ++]
+
+export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV2[]>( // [!code --]
+export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV3[]>( // [!code ++]
+  'local:ignoredWebsites',
+  {
+    defaultValue: [],
+    version: 2, // [!code --]
+    version: 3, // [!code ++]
+    migrations: {
+      // Ran when migrating from v1 to v2
+      2: (websites: IgnoredWebsiteV1[]): IgnoredWebsiteV2[] => {
+        return websites.map((website) => ({ id: nanoid(), website }));
+      },
+      // Ran when migrating from v2 to v3 // [!code ++]
+      3: (websites: IgnoredWebsiteV2[]): IgnoredWebsiteV3[] => { // [!code ++]
+        return websites.map((website) => ({ ...website, enabled: true })); // [!code ++]
+      }, // [!code ++]
+    },
+  },
+);
+```
+
+:::
+
+:::info
+Internally, this uses a metadata property called `v` to track the value's current version.
+:::
+
+In this case, we thought that the ignored website list might change in the future, and were able to setup a versioned storage item from the start.
+
+Realistically, you won't know a item needs versioned until you need to change it's schema. Thankfully, it's simple to add versioning to an unversioned storage item.
+
+When a previous version isn't found, WXT assumes the version was `1`. That means you just need to set `version: 2` and add a migration for `2`, and it will just work!
+
+Lets look at the same ignored websites example from before, but start with an unversioned item this time:
+
+:::code-group
+
+```ts [Unversioned]
+export const ignoredWebsites = storage.defineItem<string[]>(
+  'local:ignoredWebsites',
+  {
+    defaultValue: [],
+  },
+);
+```
+
+<!-- prettier-ignore -->
+```ts [v2]
+import { nanoid } from 'nanoid'; // [!code ++]
+
+// Retroactively add a type for the first version // [!code ++]
+type IgnoredWebsiteV1 = string; // [!code ++]
+interface IgnoredWebsiteV2 { // [!code ++]
+  id: string; // [!code ++]
+  website: string; // [!code ++]
+} // [!code ++]
+
+export const ignoredWebsites = storage.defineItem<string[]>( // [!code --]
+export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV2[]>( // [!code ++]
+  'local:ignoredWebsites',
+  {
+    defaultValue: [],
+    version: 2, // [!code ++]
+    migrations: { // [!code ++]
+      // Ran when migrating from v1 to v2 // [!code ++]
+      2: (websites: IgnoredWebsiteV1[]): IgnoredWebsiteV2[] => { // [!code ++]
+        return websites.map((website) => ({ id: nanoid(), website })); // [!code ++]
+      }, // [!code ++]
+    }, // [!code ++]
+  },
+);
+```
+
+:::
+
+### Running Migrations
+
+As soon as `storage.defineItem` is called, WXT checks if migrations need to be ran, and if so, runs them. Calls to get or update the storage item's value or metadata (`getValue`, `setValue`, `removeValue`, `getMeta`, etc) will automatically wait for the migration process to finish before actually reading or writing values.
@@ -0,0 +1,5 @@
+# Custom Events
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,5 @@
+# Debugging
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -0,0 +1,52 @@
+# Entrypoint Side Effects
+
+You cannot use imported variables outside the `main` function in JS entrypoints. This includes options, as shown below:
+
+```ts
+// entrypoints/content.ts
+import { GOOGLE_MATCHES } from '~/utils/match-patterns';
+
+export default defineContentScript({
+  matches: GOOGLE_MATCHES,
+  main() {
+    // ...
+  },
+});
+```
+
+```
+$ wxt build
+wxt build
+
+WXT 0.14.1
+ℹ Building chrome-mv3 for production with Vite 5.0.5
+✖ Command failed after 360 ms
+
+[8:55:54 AM]  ERROR  entrypoints/content.ts: Cannot use imported variable "GOOGLE_MATCHES" before main function. See https://wxt.dev/guide/entrypoints.html#side-effects
+```
+
+This throws an error because WXT needs to import each entrypoint during the build process to extract its definition (containing the `match`, `runAt`, `include`/`exclude`, etc.) to render the `manifest.json` correctly. Before loading an entrypoint, a transformation is applied to remove all imports. This prevents imported modules (local or NPM) with side-effects from running during the build process, potentially throwing an error.
+
+:::details Why?
+
+When importing your entrypoint to get its definition, the file is imported in a **_node environment_**, and doesn't have access to the `window`, `chrome`, or `browser` globals a web extension usually has access to. If WXT doesn't remove all the imports from the file, the imported modules could try and access one of these variables, throwing an error.
+
+:::
+
+:::warning
+See [`wxt-dev/wxt#336`](https://github.com/wxt-dev/wxt/issues/336) to track the status of this bug.
+:::
+
+Usually, this error occurs when you try to extract options into a shared file or try to run code outside the `main` function. To fix the example from above, use literal values when defining an entrypoint instead of importing them:
+
+```ts
+import { GOOGLE_MATCHES } from '~/utils/match-patterns'; // [!code --]
+
+export default defineContentScript({
+  matches: GOOGLE_MATCHES, // [!code --]
+  matches: ['*//*.google.com/*'], // [!code ++]
+  main() {
+    // ...
+  },
+});
+```
@@ -0,0 +1,38 @@
+# ES Modules
+
+Configure entrypoints to use ESM at runtime.
+
+Currently, ESM entrypoints are opt-in, so you must configure each entrypoint with that in mind.
+
+## HTML Pages <Badge type="warning" text="≥0.0.1" />
+
+In general, you should always make HTML pages import ESM scripts, unless you need to support old browsers.
+
+To make a script ESM, add `type="module"`:
+
+<!-- prettier-ignore -->
+```html
+<script src="./main.ts"></script> <!-- [!code --] -->
+<script src="./main.ts" type="module"></script> <!-- [!code ++] -->
+```
+
+## Background <Badge type="warning" text="≥0.16.0" />
+
+In your background script, set `type: "module"`:
+
+```ts
+export default defineBackground({
+  type: 'module', // !code ++
+  main() {
+    // ...
+  },
+});
+```
+
+:::warning
+Only MV3 support ESM background scripts/service workers. When targeting MV2, the `type` option is ignored and the background is always bundled into a single file as IIFE.
+:::
+
+## Content Scripts
+
+Coming soon. Follow [Content Script ESM Support #357](https://github.com/wxt-dev/wxt/issues/357) for updates.
@@ -0,0 +1,116 @@
+# Handling Extension Updates
+
+When releasing an update to your extension, there's a couple of things you need to keep in mind:
+
+[[toc]]
+
+## Content Script Cleanup
+
+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 each content script.
+
+When your extension updates or reloads, the context will become invalidated, and will trigger any `ctx.onInvalidated` listeners you add:
+
+```ts
+export default defineContentScript({
+  main(ctx) {
+    ctx.onInvalidated(() => {
+      // Do something
+    });
+  },
+)
+```
+
+The `ctx` also provides other convenient APIs for stopping your content script without manually calling `onInvalidated` to add a listener:
+
+1. Setting timers:
+   ```ts
+   ctx.setTimeout(() => { ... }, ...);
+   ctx.setInterval(() => { ... }, ...);
+   ctx.requestAnimationFrame(() => { ... });
+   ```
+1. Adding DOM events:
+   ```ts
+   ctx.addEventListener(window, "mousemove", (event) => { ... });
+   ```
+1. Implements [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) for canceling standard APIs:
+   ```ts
+   fetch('...', {
+     signal: ctx.signal,
+   });
+   ```
+
+Other WXT APIs require a `ctx` object so they can clean themselves up. For example, [`createIntegratedUi`](/guide/key-concepts/content-script-ui#integrated), [`createShadowRootUi`](/guide/key-concepts/content-script-ui#shadow-root), and [`createIframeUi`](/guide/key-concepts/content-script-ui#iframe) automatically unmount and stop a UI when the script is 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 being logged to the console in production.
+:::
+
+## Testing Permission Changes
+
+When `permissions`/`host_permissions` change during an update, depending on what exactly changed, Chrome will disable your extension until the user accepts the new permissions.
+
+It is possible to test this before you release an update, but it's not a simple process:
+
+1. Get 2 ZIPs of your extension, both generated by `wxt zip`. The first contains a previous version of your extension, the second contains the latest version. Make sure the second ZIP's version is higher than the first's.
+2. Unzip the two ZIP files somewhere next to each other that's easy to locate.
+3. In Chrome, open `chrome://extensions` and make sure developer mode is enabled
+4. Pack the first extension into a CRX, generating a new private key:
+   1. Click "Pack Extension" in the top left
+   2. For "Extension root directory", enter the path to the first extracted zip directory. The directory should contain a `manifest.json` file
+   3. Leave "Private key file" blank
+   4. Click "Pack Extension". This will generate a `.crx` and `.pem` file
+5. Pack the second extension into a CRX, reusing the private key generated by the previous step
+   1. Click "Pack Extension" in the top left
+   2. For "Extension root directory", enter the path to the second extracted zip directory.
+   3. For "Private key file", enter the path to the generated `.pem` private key file
+   4. Click "Pack Extension". This will generate a second `.crx` file.
+6. Install the first CRX file by dragging and dropping it onto the `chrome://extensions` page
+7. Install the second CRX file by dragging and dropping it onthe the `chrome://extensions` page
+
+If a new permission must be accepted, you'll be prompted to accept it after dropping the second CRX file onto the page.
+
+:::Info Note
+Note: Chrome no longer allows self-signed CRX extensions to run, but that's OK for this test case. We're still prompted to accept new permissions, even if we can't interact with the installed extension.
+
+To validate this, you can create a third ZIP file with a rare permission like `geolocation` in the manifest, that's guarenteed to reprompt permissions when added.
+:::
+
+## Update Event
+
+You can setup a callback that runs after your extension updates like so:
+
+```ts
+browser.runtime.onInstalled.addListener(({ reason }) => {
+  if (reason === 'update') {
+    // Do something
+  }
+});
+```
+
+If the logic is simple, write a unit test to cover this logic. If you feel the need to manually test this callback, you can either:
+
+1. In dev mode, remove the `if` statement and reload the extension from `chrome://extensions`
+2. Build two ZIPs with the same runtime ID and actually update the extension
+
+The first approach is very straightforward. The second is more complicated...
+
+Here are the steps:
+
+So the steps:
+
+1. Checkout an old commit.
+2. [Add a `key`](https://developer.chrome.com/docs/extensions/reference/manifest/key#keep-consistent-id) to the `manifest` in your `wxt.config.ts`.
+3. Run `wxt zip` to create the first ZIP.
+4. Stash or reset changes and checkout your latest code.
+5. Add back the same `key` to your manifest.
+6. Make sure the extension's version is higher than the first zip. It can be any version that's higher, since you won't be releasing this version.
+7. Run `wxt zip` to create the second ZIP.
+8. In a fresh chrome profile, go to `chrome://extensions`, enable dev mode, and drag and drop the first zip onto the page to install it.
+9. In the extension, play around and setup your test case.
+10. Back on `chrome://extensions`, drag and drop your second zip onto the page.
+
+If you setup the `key` correctly, it will cause the extension to act like it was updated instead of installing a second version of your extension.
@@ -0,0 +1,5 @@
+# How WXT Works
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -1,10 +1,10 @@
 # Remote Code

-WXT will automatically download and bundle imports with the `url:` prefix so the extension does not depend of remote code, [a requirement from Google for MV3](https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code).
+WXT will automatically download and bundle imports with the `url:` prefix so the extension does not depend on remote code, [a requirement from Google for MV3](https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code).

 ## Google Analytics

-For example, you can import google analytics:
+For example, you can import Google Analytics:

 ```ts
 // utils/google-analytics.ts
@@ -0,0 +1,186 @@
+---
+outline: deep
+---
+
+# Reusable Modules
+
+## Overview
+
+WXT provides a "module" API that lets you modify the build process. This API lets you add entrypoints, inject runtime code, add vite plugins, and more!
+
+What's more, these modules can be shared on NPM and re-used between projects!
+
+## Adding a Module
+
+There are two ways to add a module to your project:
+
+1. **Local file**: Any file present in the `modules/` directory will be treated as a module and loaded at build-time by WXT. You can use `modules/*.ts` or `modules/*/index.ts`, similar to entrypoints.
+
+   ```ts
+   // modules/example.ts
+   import { defineWxtModule } from 'wxt/modules';
+
+   export default defineWxtModule((wxt) => {
+     // ...
+   });
+   ```
+
+2. **NPM package**: By convention, any package on NPM that starts with `@wxt-dev/module-*` or `wxt-module-*` can be installed and included in your project:
+   ```ts
+   // wxt.config.ts
+   export default defineConfig({
+     // Add the module to your project
+     modules: ['wxt-module-example'],
+   });
+   ```
+
+## Writing Modules
+
+Modules contain a setup function that is executed at the beginning of the build process.
+
+:::code-group
+
+```ts [Function Definition]
+import { defineWxtModule } from 'wxt/modules';
+
+export default defineWxtModule((wxt) => {
+  // ...
+});
+```
+
+```ts [Object Definition]
+import { defineWxtModule } from 'wxt/modules';
+
+export default defineWxtModule({
+  // Add metadata...
+  setup(wxt) {
+    // ...
+  },
+});
+```
+
+:::
+
+### Module Options
+
+You can define custom options for your module by setting the `configKey`:
+
+```ts
+// modules/analytics.ts
+import { defineWxtModule } from 'wxt/modules';
+
+export default defineWxtModule<AnalyticsModuleOptions>({
+  configKey: 'analytics',
+  setup(wxt, options) {
+    console.log(options); // { clientId: "..." }
+  },
+});
+
+// Define the option types
+export interface AnalyticsModuleOptions {
+  clientId: string;
+}
+
+// Use "module augmentation" to add types for the new key
+declare module 'wxt' {
+  export interface InlineConfig {
+    analytics: AnalyticsModuleOptions;
+  }
+}
+```
+
+Now, when the user provides options to the `analytics` key in their `wxt.config.ts`, those options are passed into the setup function as the second argument.
+
+```ts
+export default defineConfig({
+  analytics: { clientId: '...' },
+});
+```
+
+### Actually Doing Something
+
+The first argument of the setup function, `wxt`, provides full access to the current build's context. You can access the resolved configuration via `wxt.config`, or setup hooks to manipulate the build at different steps of the build process.
+
+Here's an example that shows you how to update the `outDir` based on the build mode. It does a good job showing how to access config, set up a hook, and do something when the hook is called.
+
+```ts
+export default defineWxtModule((wxt) => {
+  if (wxt.config.mode === 'development') {
+    // Use the "ready" hook to update wxt.config
+    wxt.hooks.hook('ready', (wxt) => {
+      wxt.config.outDir = wxt.config.outDir.replace('.output', '.output/dev');
+    });
+  }
+});
+```
+
+:::info Async Modules
+Both the `setup` function and hook callbacks can be async. Don't forget to add `await`!
+:::
+
+It's important to understand the basics of how hooks work. Make sure to read the [API reference](/api/reference/wxt/interfaces/WxtHooks.html) for the full list of hooks and what they should be used for. They are the key to modifying your extension.
+
+### Module Utils
+
+Additionally, WXT provides several helper functions that setup hooks behind the scenes to streamline common operations.
+
+For example, if you want to include an entrypoint from inside a module, you can use the `addEntrypoint` util:
+
+```ts
+// modules/changelog.ts
+import { defineWxtModule, addEntrypoint } from 'wxt/modules';
+import { resolve } from 'node:path';
+
+export default defineWxtModule({
+  name: 'changelog',
+  setup(wxt) {
+    addEntrypoint(wxt, {
+      type: 'unlisted-page',
+      name: 'changelog',
+      // Point to the "modules/changelog.html" file
+      inputPath: resolve(__dirname, 'changelog.html'),
+      outputDir: wxt.config.outputDir,
+      options: {},
+    });
+  },
+});
+```
+
+Refer to the [API reference](/api/reference/wxt/modules/#functions) for the full list of the utilities.
+
+## Plugins
+
+Whereas modules are executed at build-time, plugins are executed at runtime. As of now, the only way to add a plugin is with the `addWxtPlugin` helper inside a module.
+
+Here's a minimal example to execute something at runtime.
+
+:::code-group
+
+```ts [modules/example/index.ts]
+import { defineWxtModule, addWxtPlugin } from 'wxt/modules';
+import { resolve } from 'node:path';
+
+export default defineWxtModule((wxt) => {
+  addWxtPlugin(wxt, resolve(__dirname, 'plugin.ts'));
+});
+```
+
+```ts [modules/example/plugin.ts]
+import { defineWxtPlugin } from 'wxt/sandbox';
+
+export default defineWxtPlugin(() => {
+  console.log('Executing plugin!');
+});
+```
+
+:::
+
+:::warning Async Plugins
+Unlike modules, **_plugins cannot be async_**!! If you need to do some async work and expose that result to the rest of the extension, wrap it in an object and handle awaiting the promise internally.
+:::
+
+## Publishing to NPM
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
--- a/Show More
+++ b/Show More