chore(release): wxt v0.18.15

fix: Externalize app config during dependency optimization (#833 )
fix: Build latest version of package before packing
2024-07-21 13:43:02 +00:00 · 2024-07-21 08:37:09 -05:00 · 2024-07-21 08:36:45 -05:00 · 2024-07-21 07:53:38 -05:00 · 2024-07-20 11:33:17 -05:00 · 2024-07-17 07:40:34 -05:00
237 changed files with 8421 additions and 3027 deletions
@@ -4,9 +4,7 @@ runs:
  using: composite
  steps:
    - name: Setup PNPM
-      uses: pnpm/action-setup@v3
-      with:
-        version: 8
+      uses: pnpm/action-setup@v4
    - name: Setup NodeJS
      uses: actions/setup-node@v4
      with:
@@ -1,6 +1,17 @@
 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:
@@ -22,17 +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
-        working-directory: packages/wxt

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

      - name: GitHub Release
-        run: pnpx changelogen@latest gh release --token ${{ secrets.GITHUB_TOKEN }}
-        working-directory: packages/wxt
+        run: pnpm tsx scripts/create-github-release.ts ${{ inputs.package }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -1,23 +1,24 @@
 name: Sync Releases
 on:
  workflow_dispatch:
-  push:
-    branches:
-      - main
-    paths:
-      - packages/wxt/CHANGELOG.md
+    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: pnpm/action-setup@v3
-        with:
-          version: 8
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-          cache: pnpm
-      - run: pnpm sync-releases all --token ${{ secrets.GITHUB_TOKEN }}
-        working-directory: packages/wxt
+      - uses: ./.github/actions/setup
+      - run: pnpm tsx scripts/sync-releases.ts ${{ inputs.package }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -13,6 +13,12 @@ jobs:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
      - run: pnpm check
+  builds:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - run: pnpm buildc all
  build-demo:
    runs-on: ubuntu-22.04
    steps:
@@ -27,7 +33,7 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: ./.github/actions/setup
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
      - name: pnpm test:coverage
        run: pnpm test:coverage --reporter=default --reporter=hanging-process
      - uses: codecov/codecov-action@v4
@@ -42,6 +48,7 @@ jobs:
  template:
    runs-on: ubuntu-22.04
    strategy:
+      fail-fast: false
      matrix:
        template:
          - react
@@ -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
@@ -112,3 +112,20 @@ 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>

@@ -22,18 +22,18 @@
 </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>
+  <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

@@ -33,7 +33,7 @@ For production builds, none of the above modifications will be applied, and you'

 ## Configure Browser Startup

-WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
+WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/reference/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.

 :::code-group

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

 ### Browser Binaries

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

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

 ## Reload the Extension

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue';
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const examples = ref();
-onMounted(async () => {
-  const res = await fetch(
-    'https://raw.githubusercontent.com/wxt-dev/wxt-examples/main/examples.json',
-  );
-  examples.value = await res.json();
-});
-
-const filteredExamples = computed(() => {
-  if (props.tag == null) return examples.value;
-
-  return examples.value.filter((example) => {
-    return example.tags?.includes(props.tag);
-  });
-});
-</script>
-
-<template>
-  <ul>
-    <li v-if="examples == null">Loading...</li>
-    <template v-else>
-      <li v-for="example of filteredExamples">
-        <a :href="example.url" target="_blank">{{ example.name }}</a>
-      </li>
-    </template>
-  </ul>
-</template>
@@ -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>
@@ -27,6 +27,13 @@ const chromeExtensionIds = [
  '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, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
@@ -52,90 +59,56 @@ function getStoreUrl(extension: ChromeExtension) {
 </script>

 <template>
-  <section class="vp-doc">
-    <div class="container">
-      <h2 id="whos-using-wxt">Who's Using WXT?</h2>
-      <p>
-        Battle tested and ready for production. Explore chrome extensions made
-        with WXT.
-      </p>
-      <p v-if="isLoading" style="text-align: center; opacity: 50%">
-        Loading...
-      </p>
-      <p
-        v-else-if="err || sortedExtensions.length === 0"
-        style="text-align: center; opacity: 50%"
-      >
-        Failed to load extension details.
-      </p>
-      <ul v-else>
-        <li
-          v-for="extension of sortedExtensions"
-          :key="extension.id"
-          class="relative"
-        >
-          <img
-            :src="extension.iconUrl"
-            :alt="`${extension.name} icon`"
-            referrerpolicy="no-referrer"
-          />
-          <div class="relative">
-            <a
-              :href="getStoreUrl(extension)"
-              target="_blank"
-              :title="extension.name"
-              class="extension-name"
-              >{{ extension.name }}</a
-            >
-            <p class="description" :title="extension.shortDescription">
-              {{ extension.shortDescription }}
-            </p>
-          </div>
-          <p class="user-count">
-            <span>{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
-            ><template v-if="extension.rating != null"
-              >,
-              <span>{{ extension.rating }} stars</span>
-            </template>
-          </p>
-        </li>
-      </ul>
-      <p class="centered pr">
+  <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;
@@ -1,23 +1,16 @@
-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 utilities for building, zipping, and publishing your extension, it's easy to get started.";
 const ogTitle = `${title}${titleSuffix}`;
@@ -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,95 +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',
    },

-    nav: [
-      { text: 'Guide', link: '/guide/installation.md' },
-      { text: 'Entrypoints', link: '/entrypoints/background.md' },
-      { text: 'Examples', link: '/examples.md' },
-      { text: 'API', link: '/api/cli.md' },
-    ],
-
-    sidebar: {
-      '/guide/': [
-        {
-          text: 'Guide',
-          items: [
-            { text: 'Introduction', link: '/guide/introduction.md' },
-            { text: 'Installation', link: '/guide/installation.md' },
-            { text: 'Configuration', link: '/guide/configuration.md' },
-            { text: 'Entrypoints', link: '/guide/entrypoints.md' },
-            { text: 'Manifest.json', link: '/guide/manifest.md' },
-            { text: 'Extension APIs', link: '/guide/extension-apis.md' },
-            { text: 'Storage', link: '/guide/storage.md' },
-            { text: 'Assets', link: '/guide/assets.md' },
-            { text: 'Content Script UI', link: '/guide/content-script-ui.md' },
-            { text: 'Multiple Browsers', link: '/guide/multiple-browsers.md' },
-            { text: 'ES Modules', link: '/guide/esm.md' },
-            { text: 'Auto-imports', link: '/guide/auto-imports.md' },
-            { text: 'Vite', link: '/guide/vite.md' },
-            { text: 'Remote Code', link: '/guide/remote-code.md' },
-            { text: 'Publishing', link: '/guide/publishing.md' },
-            { text: 'Handling Updates', link: '/guide/handling-updates.md' },
-            { text: 'Development', link: '/guide/development.md' },
-            { text: 'Testing', link: '/guide/testing.md' },
-          ],
-        },
-        {
-          text: 'Other',
-          items: [
-            { text: 'Migrate to WXT', link: '/guide/migrate-to-wxt.md' },
-            { text: 'Compare', link: '/guide/compare.md' },
-          ],
-        },
-      ],
-      '/entrypoints/': [
-        {
-          text: 'Entrypoints',
-          items: [
-            { text: 'Background', link: '/entrypoints/background.md' },
-            { text: 'Bookmarks', link: '/entrypoints/bookmarks.md' },
-            {
-              text: 'Content Scripts',
-              link: '/entrypoints/content-scripts.md',
-            },
-            { text: 'CSS', link: '/entrypoints/css.md' },
-            { text: 'Devtools', link: '/entrypoints/devtools.md' },
-            { text: 'History', link: '/entrypoints/history.md' },
-            { text: 'Newtab', link: '/entrypoints/newtab.md' },
-            { text: 'Options', link: '/entrypoints/options.md' },
-            { text: 'Popup', link: '/entrypoints/popup.md' },
-            { text: 'Sandbox', link: '/entrypoints/sandbox.md' },
-            { text: 'Side Panel', link: '/entrypoints/sidepanel.md' },
-            { text: 'Unlisted Pages', link: '/entrypoints/unlisted-pages.md' },
-            {
-              text: 'Unlisted Scripts',
-              link: '/entrypoints/unlisted-scripts.md',
-            },
-          ].sort((l, r) => l.text.localeCompare(r.text)),
-        },
-      ],
-      '/api/': [
-        {
-          items: [
-            { text: 'CLI', link: '/api/cli.md' },
-            {
-              text: 'Modules',
-              items: filteredTypedocSidebar,
-            },
-          ],
-        },
-      ],
-    },
-
    socialLinks: [
      { icon: 'discord', link: 'https://discord.gg/ZFsZqGery9' },
      { icon: 'github', link: 'https://github.com/wxt-dev/wxt' },
    ],
+
+    nav: [
+      navItem('Get Started', '/get-started/introduction'),
+      navItem('Guide', '/guide/key-concepts/manifest'),
+      navItem('API', '/api/reference/wxt'),
+      navItem('Examples', '/examples'),
+    ],
+
+    sidebar: {
+      '/get-started/': menuRoot([
+        menuGroup('Get Started', '/get-started/', [
+          menuItem('Introduction', 'introduction'),
+          menuItem('Installation', 'installation'),
+          menuItem('Configuration', 'configuration'),
+          menuItem('Entrypoints', 'entrypoints'),
+          menuItem('Assets', 'assets'),
+          menuItem('Publishing', 'publishing'),
+          menuItem('Migrate to WXT', 'migrate-to-wxt'),
+          menuItem('Compare', 'compare'),
+        ]),
+      ]),
+      '/guide/': menuRoot([
+        menuGroup('Key Concepts', '/guide/key-concepts/', [
+          menuItem('Manifest', 'manifest'),
+          menuItem('Auto-imports', 'auto-imports'),
+          menuItem('Web Extension Polyfill', 'web-extension-polyfill'),
+          menuItem('Frontend Frameworks', 'frontend-frameworks'),
+          menuItem('Content Script UI', 'content-script-ui'),
+        ]),
+        menuGroup('Directory Structure', '/guide/directory-structure/', [
+          // Folders
+          menuItem('.output/', 'output'),
+          menuItem('.wxt/', 'wxt'),
+          menuItem('assets/', 'assets'),
+          menuItem('components/', 'components'),
+          menuItem('composables/', 'composables'),
+          menuGroup('entrypoints/', '/guide/directory-structure/entrypoints/', [
+            menuItem('background', 'background.md'),
+            menuItem('bookmarks', 'bookmarks.md'),
+            menuItem('*.content.ts', 'content-scripts.md'),
+            menuItem('*.css', 'css.md'),
+            menuItem('devtools', 'devtools.md'),
+            menuItem('history', 'history.md'),
+            menuItem('newtab', 'newtab.md'),
+            menuItem('options', 'options.md'),
+            menuItem('popup', 'popup.md'),
+            menuItem('sandbox', 'sandbox.md'),
+            menuItem('sidepanel', 'sidepanel.md'),
+            menuItem('*.html', 'unlisted-pages.md'),
+            menuItem('*.ts', 'unlisted-scripts.md'),
+          ]),
+          menuItem('hooks/', 'hooks'),
+          menuItem('public/', 'public/', [
+            menuItem('_locales/', 'public/locales'),
+          ]),
+          menuItem('utils/', 'utils'),
+
+          // Files
+          menuItem('.env', 'env'),
+          menuItem('app.config.ts', 'app-config'),
+          menuItem('package.json', 'package'),
+          menuItem('tsconfig.json', 'tsconfig'),
+          menuItem('web-ext.config.ts', 'web-ext-config'),
+          menuItem('wxt.config.ts', 'wxt-config'),
+        ]),
+        menuGroup('Extension APIs', '/guide/extension-apis/', [
+          menuItem('Storage', 'storage'),
+          menuItem('Messaging', 'messaging'),
+          menuItem('Scripting', 'scripting'),
+          menuItem('Others', 'others'),
+        ]),
+        menuGroup('Go Further', '/guide/go-further/', [
+          menuItem('Testing', 'testing'),
+          menuItem('ES Modules', 'es-modules'),
+          menuItem('Debugging', 'debugging'),
+          menuItem('Handling Updates', 'handling-updates'),
+          menuItem('Vite', 'vite'),
+          menuItem('Custom Events', 'custom-events'),
+          menuItem('Reusable Modules', 'reusable-modules'),
+          menuItem('Remote Code', 'remote-code'),
+          menuItem('Entrypoint 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,118 +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('packages/wxt/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', {
-        cwd: 'packages/wxt',
-      });
-      const dev = splitInfo(res.stdout);
-      const lines: Array<string | string[]> = [
-        `## \`wxt\``,
-        '```sh',
-        dev.rest,
-        '```',
-      ];
-
-      const commands = await Promise.allSettled(
-        extractCommands(dev.info).map(async (command) => {
-          const res = await execaCommand(`pnpm -s wxt ${command} --help`, {
-            cwd: 'packages/wxt',
-          });
-          const { rest: docs } = splitInfo(res.stdout);
-          return [`## \`wxt ${command}\``, '```sh', docs, '```'];
-        }),
-      );
-      lines.push(
-        ...commands
-          .filter((res) => res.status === 'fulfilled')
-          .map(
-            (res) => (res as unknown as PromiseFulfilledResult<string>).value,
-          ),
-      );
-
-      const text = await format(
-        PREFACE +
-          '\n\n' +
-          readFileSync(cliTemplatePath, 'utf-8').replace(
-            '{{ DOCS }}',
-            lines.flat().join('\n'),
-          ),
-        { parser: 'markdown' },
-      );
-
-      writeFileSync(cliPath, text);
-      consola.success(`Generated ${relative(process.cwd(), cliPath)}`);
-    } catch (err) {
-      consola.fail(`Failed to generate ${relative(process.cwd(), cliPath)}`);
-      consola.error(err.message);
-    }
-  };
-
-  return {
-    name: 'docs:generate-cli-docs',
-    async config() {
-      if (!hasGenerated) {
-        hasGenerated = true;
-        await generateDocs();
-      }
-    },
-    configureServer(server: any) {
-      server.watcher.add(cliDirGlob);
-    },
-    async handleHotUpdate(ctx: { file: string }) {
-      if (ctx.file === cliTemplatePath || ctx.file.includes(cliDir)) {
-        await generateDocs();
-      }
-    },
-  };
-}
-
-function splitInfo(text: string): { info: string; rest: string } {
-  const infoStart = text.indexOf('For more info,');
-  const infoEnd = text.indexOf('\n\nOptions:');
-
-  if (infoStart === -1 || infoEnd === -1) {
-    return { info: '', rest: text };
-  }
-
-  const info = text.substring(infoStart, infoEnd).trim();
-  const rest = text.replace(info, '').trim().replace('\n\n\n\n', '\n\n');
-
-  return { info, rest };
-}
-
-function extractCommands(info: string): string[] {
-  const commands: string[] = [];
-
-  // Split the info by line and iterate through each line
-  info.split('\n').forEach((line) => {
-    // Use regex to capture the command after "$ wxt " and before "--help"
-    const match = line.match(/\$ wxt (\w+) --help/);
-    if (match && match[1]) {
-      commands.push(match[1]);
-    }
-  });
-
-  return commands;
-}
@@ -72,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,7 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import Icon from '../components/Icon.vue';
 import EntrypointPatterns from '../components/EntrypointPatterns.vue';
 import UsingWxtSection from '../components/UsingWxtSection.vue';
-import ExampleList from '../components/ExampleList.vue';
+import ExampleSearch from '../components/ExampleSearch.vue';
 import './custom.css';

 export default {
@@ -11,6 +11,6 @@ export default {
    ctx.app.component('Icon', Icon);
    ctx.app.component('EntrypointPatterns', EntrypointPatterns);
    ctx.app.component('UsingWxtSection', UsingWxtSection);
-    ctx.app.component('ExampleList', ExampleList);
+    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,7 +1,19 @@
-# Examples
+---
+layout: page
+---

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

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

-> Full code available at [`wxt-dev/wxt-examples`](https://github.com/wxt-dev/wxt-examples)
+  <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
+```
@@ -0,0 +1,33 @@
+# Compare
+
+Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework) (another framework) and [CRXJS](https://crxjs.dev/vite-plugin) (a bundler plugin).
+
+## Overview
+
+| Features                                             |             WXT             |                  Plasmo                  |                  CRXJS                  |
+| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | :-------------------------------------: |
+| Supports all browsers                                |             ✅              |                    ✅                    |        ✅ 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        |       🟡 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,6 +1,6 @@
 # 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

@@ -15,7 +15,14 @@ npx wxt@latest init <project-name>
 ```

 ```sh [bun]
-bunx wxt@latest init <project-name>
+# 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>
 ```

 :::
@@ -36,54 +43,27 @@ 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
-```
-
-```sh [bun]
-mkdir project-name
-cd project-name
-bun 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
 ```

@@ -98,7 +78,7 @@ export default defineBackground(() => {
 });
 ```

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

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

-## Migrate an Existing Project
-
-Before starting the migration, it is recommended to run `pnpm dlx 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 several `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
- Configure your entrypoints to [use ESM](./esm) at runtime
+- 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 perform common tasks with WXT
+- Checkout [example projects](https://github.com/wxt-dev/examples) to see how to perform common tasks with WXT
@@ -7,6 +7,8 @@ head:

 # Introduction

+## 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.
@@ -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

@@ -17,16 +17,16 @@ 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. Use [Google's update testing tool](https://github.com/GoogleChromeLabs/extension-update-testing-tool) if your extension is already live on the Chrome Web Store<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!

@@ -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.
+:::
+-->
@@ -20,8 +20,8 @@ For specific details about each store, see the stores sections below.

 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)
- `wxt submit init`: Help setup all the required secrets and options for the `wxt submit` command

 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.

@@ -78,9 +78,7 @@ jobs:
    steps:
      - uses: actions/checkout@v4

-      - uses: pnpm/action-setup@v3
-        with:
-          version: 'latest'
+      - uses: pnpm/action-setup@v4

      - uses: actions/setup-node@v4
        with:
@@ -181,7 +179,7 @@ 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/wxt/interfaces/InlineConfig#includesources) option. Be careful to not include any secrets in your `.env` files.
+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.
 :::
@@ -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="~/assets/illustration.svg" />
-    <!-- ... -->
-  </body>
-</html>
-```
-
-```ts [content.ts]
-import '~/assets/style.css';
-import illustration from '~/assets/style.svg';
-
-defineContentScript({
-  main() {
-    const image = document.createElement('img');
-    image.src = illustration;
-    document.body.append(image);
-  },
-});
-```
-
-:::
@@ -1,80 +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/sandbox/functions/defineContentScript) from `wxt/sandbox`
- [`defineBackground`](/api/wxt/sandbox/functions/defineBackground) from `wxt/sandbox`
- [`defineUnlistedScript`](/api/wxt/sandbox/functions/defineUnlistedScript) from `wxt/sandbox`
- [`createIntegratedUi`](/api/wxt/client/functions/createIntegratedUi) from `wxt/client`
- [`createShadowRootUi`](/api/wxt/client/functions/createShadowRootUi) from `wxt/client`
- [`createIframeUi`](/api/wxt/client/functions/createIframeUi) from `wxt/client`
- [`fakeBrowser`](/api/wxt/testing/variables/fakeBrowser) from `wxt/testing`
-
-And more!
-
-## Project Auto-imports
-
-In addition WXT APIs, default and named exports from inside the following directories can be used without listing them in imports.
-
- `<srcDir>/components/*`
- `<srcDir>/composables/*`
- `<srcDir>/hooks/*`
- `<srcDir>/utils/*`
-
-To add auto-imports from subdirectories, like `utils/api/some-file.ts`, re-export them from the base directory:
-
-```ts
-// utils/index.ts
-export * from './api/some-file.ts';
-```
-
-Alternatively, you could add the directory to the list of auto-import directories in your config file.
-
-## TypeScript
-
-For TypeScript to work, you need to run the `wxt prepare` command. This will ensure types are generated for auto-imports.
-
-This should be added to your `postinstall` script:
-
-```json
-// package.json
-{
-  "scripts": {
-    "postinstall": "wxt prepare" // [!code ++]
-  }
-}
-```
-
-## Customization
-
-You can override the default auto-import behavior in your `wxt.config.ts` file.
-
-See [`unimport`'s documentation](https://github.com/unjs/unimport#configurations) for a complete list of options.
-
-```ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  imports: {
-    // Add auto-imports for vue functions like createApp, ref, computed, watch, toRaw, etc...
-    presets: ['vue'],
-  },
-});
-```
-
-To disable auto-imports, set `imports: false`
-
-```ts
-export default defineConfig({
-  imports: false,
-});
-```
@@ -1,50 +0,0 @@
-# Compare
-
-Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework) (another web extension framework) and [CRXJS](https://crxjs.dev/vite-plugin) (the most popular bundler plugin).
-
-## Overview
-
-| Features                                             |             WXT             |                  Plasmo                  |                                  CRXJS                                  |
-| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | :---------------------------------------------------------------------: |
-| Supports all browsers                                |             ✅              |                    ✅                    | ❌ See [#56](https://github.com/crxjs/chrome-extension-tools/issues/56) |
-| MV2 Support                                          |             ✅              |                    ✅                    |                          🟡 Either MV2 or MV3                           |
-| MV3 Support                                          |             ✅              |                    ✅                    |                          🟡 Either MV2 or MV3                           |
-| Create Extension ZIPs                                |             ✅              |                    ✅                    |                                   ❌                                    |
-| Create Firefox Sources ZIP                           |             ✅              |                    ❌                    |                                   ❌                                    |
-| First-class TypeScript support                       |             ✅              |                    ✅                    |                                   ✅                                    |
-| Entrypoint discovery                                 |         File based          |                File based                |                                   ❌                                    |
-| Inline entrypoint config                             |             ✅              |                    ✅                    |                             Manifest based                              |
-| Auto-imports                                         |             ✅              |                    ❌                    |                                   ❌                                    |
-| Supports all frontend frameworks                     |             ✅              |      🟡 Only React, Vue, and Svelte      |                                   ✅                                    |
-| Framework specific entrypoints (like `Popup.tsx`)    |   🟡 `.html` `.ts` `.tsx`   | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` |                                   ❌                                    |
-| Automated publishing                                 |             ✅              |                    ✅                    |                                   ❌                                    |
-| Remote Code Bundling (Google Analytics)              |             ✅              |                    ✅                    |                                   ❌                                    |
-| <strong style="opacity: 50%">Dev Mode</strong>       |                             |                                          |
-| `.env` Files                                         |             ✅              |                    ✅                    |                                   ✅                                    |
-| Opens browser and install extension                  |             ✅              |                    ❌                    |                                   ❌                                    |
-| HMR for UIs                                          |             ✅              |              🟡 React only               |                                   ✅                                    |
-| Reload HTML Files on Change                          |             ✅              |       🟡 Reloads entire extension        |                                   ✅                                    |
-| Reload Content Scripts on Change                     |             ✅              |       🟡 Reloads entire extension        |                                   ✅                                    |
-| Reload Background on Change                          | 🟡 Reloads entire extension |       🟡 Reloads entire extension        |                       🟡 Reloads entire extension                       |
-| Respects Content Script `run_at`                     |             ✅              |                    ✅                    |                 ❌ ESM-style loaders run asynchronously                 |
-| <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |                                                                         |
-| Storage                                              |             ✅              |                    ✅                    |                                   ❌                                    |
-| Messaging                                            |             ❌              |                    ✅                    |                                   ❌                                    |
-| Content Script UI                                    |             ✅              |                    ✅                    |                                   ❌                                    |
-
-## Why use WXT?
-
-WXT's main goal is improving the development experience (DX) of creating web extensions, while not sacrificing support. There are two things WXT does differently:
-
-1. Automatically opens a browser with the extension installed when starting development
-2. Reload each part of the extension individually rather than reloading the entire extension
-
-Opening a browser automatically makes it super easy to start and stop development without having to manually load the extension in your browser.
-
-Reloading each part of the extension individually improves your iteration speed while developing UIs. This is because reloading the entire extension on every change will close the popup and any tabs open to an extension page, like options. If you save a file associated with a UI and a content script while working on the UI, it will randomly close because it needed to reload the extension when the content script changed. This interrupts your development flow and is really annoying.
-
-WXT solves this problem by reloading HTML pages and content scripts individually (when possible) to keep your UIs open while you develop them. This is a MV3 feature, so if you're developing a MV2 extension, you'll get the same dev experience as Plasmo.
-
-:::info
-Unfortunately, there isn't an API for reloading the background page/service worker individually, so if you change a file used by the background, the entire extension will reload. See [Issue #53](https://github.com/wxt-dev/wxt/issues/53) for more details.
-:::
@@ -1,99 +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 structure of your project, and set fields on your `manifest.json`.
-
-## Config File
-
-To configure WXT, create a `wxt.config.ts` file in your project root. It should have the following contents:
-
-```ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  // My WXT config
-});
-```
-
-:::info
-See the [Config reference](/api/wxt/interfaces/InlineConfig) for a full list of options.
-:::
-
-## Directory Config
-
-WXT allows you to edit several directories to your liking:
-
- `root` (default: `process.cwd()`) - Root of the WXT project
- `srcDir` (default: `<rootDir>`) - Location of all your source code
- `entrypointsDir` (default: `<srcDir>/entrypoints`) - Folder containing all the entrypoints.
- `publicDir` (default: `<srcDir>/public`) - Folder containing [public assets](/guide/assets)
-
-### Example
-
-You want a `src/` directory to contain all your source code, and you want to rename `entrypoints/` &rarr; `entries/`:
-
-```
-<rootDir>
-├─ src/
-│  └─ entries/
-│     ├─ background.ts
-│     └─ ...
-└─ wxt.config.ts
-```
-
-Your config would look like this:
-
-```ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  srcDir: 'src',
-  entrypointsDir: 'entries',
-});
-```
-
-## Frontend Frameworks
-
-Adding a framework like Vue, React, or Svelte is easy!
-
-In the `wxt.config.ts` file, install and add the framework's Vite plugin to the config.
-
-:::code-group
-
-```ts [Vue]
-import { defineConfig } from 'wxt';
-import vue from '@vitejs/plugin-vue';
-
-export default defineConfig({
-  vite: () => ({
-    plugins: [vue()],
-  }),
-});
-```
-
-```ts [React]
-import { defineConfig } from 'wxt';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  vite: () => ({
-    plugins: [react()],
-  }),
-});
-```
-
-```ts [Svelte]
-import { defineConfig } from 'wxt';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-
-export default defineConfig({
-  vite: () => ({
-    plugins: [svelte()],
-  }),
-});
-```
-
-:::
-
-:::info
-Internally, WXT runs `vite build` multiple times during a single build. It can't share the same instance of some plugins between each build, so a function is used to return completely new instances of each plugin for each build.
-:::
@@ -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!
+:::
@@ -104,4 +104,4 @@ export default defineContentScript({
 });
 ```

-See [Content Script UI](/guide/content-script-ui) for more info on creating UIs and including CSS in content scripts.
+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 recommended 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
@@ -37,4 +37,4 @@ Chrome extensions allow you to add panels and side panes to the devtools window.

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

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

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

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

 console.log(url); // "chrome-extension://<id>/<name>.html"
 ```
@@ -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,141 +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 receive 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.
-:::
-
-### 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() {
-    // ...
-  },
-});
-```
@@ -1,94 +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.onInstalled.addListener(({ reason }) => {
-    if (reason === 'install') {
-      browser.storage.local.set({ 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.addListener((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!';
+});
+```
@@ -22,7 +22,7 @@ export default defineConfig({
 });
 ```

-More info on permissions [here](/guide/manifest#permissions).
+More info on permissions [here](/guide/key-concepts/manifest#permissions).
 :::

 [[toc]]
@@ -54,7 +54,7 @@ await storage.watch<number>(
 await storage.getMeta<{ v: number }>('local:installDate');
 ```

-For a full list of methods available, see the [API reference](/api/wxt/storage/interfaces/WxtStorage).
+For a full list of methods available, see the [API reference](/api/reference/wxt/storage/interfaces/WxtStorage).

 ## Watchers

@@ -137,7 +137,7 @@ const unwatch = showChangelogOnUpdate.watch((newValue) => {
 });
 ```

-For a full list of properties and methods available, see the [API reference](/api/wxt/storage/interfaces/WxtStorageItem).
+For a full list of properties and methods available, see the [API reference](/api/reference/wxt/storage/interfaces/WxtStorageItem).

 ### Versioning

@@ -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() {
+    // ...
+  },
+});
+```
@@ -41,7 +41,7 @@ The `ctx` also provides other convenient APIs for stopping your content script w
   });
   ```

-Other WXT APIs require a `ctx` object so they can clean themselves up. For example, [`createIntegratedUi`](/guide/content-script-ui#integrated), [`createShadowRootUi`](/guide/content-script-ui#shadow-root), and [`createIframeUi`](/guide/content-script-ui#iframe) automatically unmount and stop a UI when the script is invalidated.
+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.**
@@ -0,0 +1,5 @@
+# How WXT Works
+
+:::warning 🚧 Under construction
+These docs will be coming soon!
+:::
@@ -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!
+:::
@@ -6,7 +6,9 @@ WXT officially supports [Vitest](https://vitest.dev/) for unit tests and either

 For details setting up each testing framework, see the official examples:

-<ExampleList tag="testing" />
+- [Vitest](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-vitest#readme)
+- [Playwright](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-playwright#readme)
+- [Puppeteer](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-puppeteer#readme)

 ### Unofficial Frameworks

@@ -18,7 +20,7 @@ If you want to try to use a different framework for unit tests, you will need to

 - **Auto-imports**: Add `unimport` to your test environment or disable them by setting `imports: false` in your `wxt.config.ts` file
 - **`browser` mock**: Mock the `webextension-polyfill` module globally with `wxt/dist/virtual/mock-browser.js`
- **[Remote Code Bundling](/guide/remote-code)**: If you use it, configure your environment to handle the `url:` module prefix
+- **[Remote Code Bundling](/guide/go-further/remote-code)**: If you use it, configure your environment to handle the `url:` module prefix
 - **Global Variables**: If you consume them, manually define globals provided by WXT (like `import.meta.env.BROWSER`) by adding them to the global scope before accessing them (`import.meta.env.BROWSER = "chrome"`)
 - **Import paths**: If you use the `@/` or `~/` path aliases, add them to your test environment

@@ -18,9 +18,7 @@ export default defineConfig({

 ## Using Plugins

-Plugins can be passed into the `vite` configuration in you `wxt.config.ts` file, just like any other option.
-
-All plugins should work in WXT, but it is worth pointing out that since WXT orchestrates multiple vite builds to bundle an extension, plugins will be executed multiple times if necessary.
+Plugins can be passed into the `vite` configuration in your `wxt.config.ts` file, just like any other option.

 ```ts
 import { defineConfig } from 'wxt';
@@ -33,3 +31,9 @@ export default defineConfig({
  }),
 });
 ```
+
+:::warning UNEXPECTED BEHAVIOR
+Due to the way WXT orchestrates Vite builds, some plugins may not work as expected. Search [GitHub issues](https://github.com/wxt-dev/wxt/issues?q=is%3Aissue+label%3A%22vite+plugin%22) if you run into issues with a specific plugin.
+
+If one doesn't exist, please open a [new issue](https://github.com/wxt-dev/wxt/issues/new/choose)!
+:::
@@ -0,0 +1,117 @@
+# Auto-imports
+
+WXT uses the same tool as Nuxt for auto-imports, [`unimport`](https://github.com/unjs/unimport).
+
+## WXT Auto-imports
+
+Some WXT APIs can be used without importing them:
+
+- [`browser`](/api/reference/wxt/browser/variables/browser) from `wxt/browser`, a small wrapper around `webextension-polyfill`
+- [`defineContentScript`](/api/reference/wxt/sandbox/functions/defineContentScript) from `wxt/sandbox`
+- [`defineBackground`](/api/reference/wxt/sandbox/functions/defineBackground) from `wxt/sandbox`
+- [`defineUnlistedScript`](/api/reference/wxt/sandbox/functions/defineUnlistedScript) from `wxt/sandbox`
+- [`createIntegratedUi`](/api/reference/wxt/client/functions/createIntegratedUi) from `wxt/client`
+- [`createShadowRootUi`](/api/reference/wxt/client/functions/createShadowRootUi) from `wxt/client`
+- [`createIframeUi`](/api/reference/wxt/client/functions/createIframeUi) from `wxt/client`
+- [`fakeBrowser`](/api/reference/wxt/testing/variables/fakeBrowser) from `wxt/testing`
+
+And more!
+
+## Project Auto-imports
+
+In addition WXT APIs, default and named exports from inside the following directories can be used without listing them in imports.
+
+- `<srcDir>/components/*`
+- `<srcDir>/composables/*`
+- `<srcDir>/hooks/*`
+- `<srcDir>/utils/*`
+
+To add auto-imports from subdirectories, like `utils/api/some-file.ts`, re-export them from the base directory:
+
+```ts
+// utils/index.ts
+export * from './api/some-file.ts';
+```
+
+Alternatively, you could add the directory to the list of auto-import directories in your config file.
+
+## TypeScript
+
+For TypeScript to work, you need to run the `wxt prepare` command. This will ensure types are generated for auto-imports.
+
+This should be added to your `postinstall` script so your editor has everything it needs to report type errors after installing dependencies:
+
+```json
+// package.json
+{
+  "scripts": {
+    "postinstall": "wxt prepare" // [!code ++]
+  }
+}
+```
+
+## Customization
+
+You can override the default auto-import behavior in your `wxt.config.ts` file.
+
+See [`unimport`'s documentation](https://github.com/unjs/unimport#configurations) for a complete list of options.
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  imports: {
+    // Add auto-imports for vue functions like createApp, ref, computed, watch, toRaw, etc...
+    presets: ['vue'],
+  },
+});
+```
+
+## Disabling Auto-imports
+
+To disable auto-imports, set `imports: false`
+
+```ts
+export default defineConfig({
+  imports: false,
+});
+```
+
+## ESLint
+
+ESLint doesn't know about the auto-imported variables unless they are explicitly defined in the `globals` config. By default, WXT will generate the config if it detects ESLint is installed in your project. If the config isn't generated automatically, you can manually tell WXT to generate it.
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  imports: {
+    eslintrc: {
+      enabled: 8, // Generate ESLint v8 compatible config
+      // or
+      enabled: 9, // Generate ESLint v9 compatible config
+    },
+  },
+});
+```
+
+### ESLint 9 and above
+
+WXT supports the new "flat config" file format. Just import the generated file and add it to the array of config to extend.
+
+```js
+// eslint.config.mjs
+import autoImports from './.wxt/eslint-auto-imports.mjs';
+
+export default [autoImports];
+```
+
+### ESLint 8 and below
+
+Just extend the generated file:
+
+```js
+// .eslintrc.mjs
+export default {
+  extends: ['./.wxt/eslintrc-auto-import.json'],
+};
+```
@@ -155,20 +155,20 @@ export default defineContentScript({

 :::

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

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

 ## Shadow Root

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

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

 To use `createShadowRootUi`, follow these steps:

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

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

 :::

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

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

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

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

 1. Create an HTML page that will be loaded into your IFrame
   ```html
@@ -405,4 +405,4 @@ WXT provides a helper function, [`createIframeUi`](/api/wxt/client/functions/cre
   });
   ```

-See the [API Reference](/api/wxt/client/functions/createIframeUi) for the complete list of options.
+See the [API Reference](/api/reference/wxt/client/functions/createIframeUi) for the complete list of options.
@@ -0,0 +1,112 @@
+# Frontend Frameworks
+
+## Built-in Modules
+
+WXT has preconfigured modules for 4 frameworks:
+
+- [`@wxt-dev/module-react`](https://github.com/wxt-dev/wxt/tree/main/packages/module-react)
+- [`@wxt-dev/module-vue`](https://github.com/wxt-dev/wxt/tree/main/packages/module-vue)
+- [`@wxt-dev/module-svelte`](https://github.com/wxt-dev/wxt/tree/main/packages/module-svelte)
+- [`@wxt-dev/module-solid`](https://github.com/wxt-dev/wxt/tree/main/packages/module-solid)
+
+Install the module for your framework, then add it to your config:
+
+:::code-group
+
+```ts [React]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-react'],
+});
+```
+
+```ts [Vue]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-vue'],
+});
+```
+
+```ts [Svelte]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-svelte'],
+});
+```
+
+```ts [Solid]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-solid'],
+});
+```
+
+:::
+
+## Adding Vite Plugins
+
+If your framework doesn't have an official WXT module, no worries! WXT supports any framework with a Vite plugin.
+
+Just add the Vite plugin to your config and you're good to go! Use the framework in HTML pages or content scripts, it will just work 👍
+
+```ts
+import { defineConfig } from 'wxt';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  vite: () => ({
+    plugins: [react()],
+  }),
+});
+```
+
+The WXT modules just simplify the configuration and add auto-imports. They're not much different than the above.
+
+## Multiple Apps
+
+Since web extensions usually contain multiple UIs as separate HTML files (popup, options, changelog, side panel, etc), you'll need to create individual app instances, one per HTML page.
+
+Usually, this means each entrypoint should be a directory with it's own files inside it:
+
+```
+<root>/
+  ├ assets/  <------------------ Put shared assets here
+  │   ├ style.css  <------------ Like styles all your pages share
+  │   └ ...
+  ├ components/  <-------------- Put shared components here
+  │   └ ...
+  └ entrypoints/
+      ├ popup/  <--------------- Use a folder with an index.html file in it
+      │   ├ index.html
+      │   ├ main.tsx  <--------- Create and mount your app here
+      │   ├ style.css  <-------- Have some global styles to apply?
+      │   └ ... <--------------- Rest of the files can be named whatever
+      └ options/
+          ├ pages/  <------------ A good place to put your router pages
+          │   ├ [id]/
+          │   │   └ details.tsx
+          │   ├ index.tsx
+          │   └...
+          ├ index.html
+          ├ App.vue
+          ├ main.ts
+          ├ style.css
+          └ rotuer.ts
+```
+
+## Configuring Routers
+
+Lots of frameworks come with routers for building a multi-page app using the URL's path. Chrome extensions don't don't work like this. Since HTML files are static, `chrome-extension://{id}/popup.html`, there's no way to change the entire path for routing.
+
+Instead, you need to configure the router to run in "hash" mode, where the routing information is apart of the URL's hash, not the path (ie: `popup.html#/` and `popup.html#/account/settings`)
+
+Refer to your router's docs for information about hash mode and how to enable it. Here's a non-extensive list of a few popular routers:
+
+- [`react-router`](https://reactrouter.com/en/main/routers/create-hash-router)
+- [`vue-router`](https://router.vuejs.org/guide/essentials/history-mode.html#Hash-Mode)
+- [`svelte-spa-router`](https://www.npmjs.com/package/svelte-spa-router#hash-based-routing)
+- [`solid-router`](https://github.com/solidjs/solid-router?tab=readme-ov-file#hash-mode-router)
@@ -0,0 +1,277 @@
+# Manifest
+
+## Overview
+
+Sometimes, you'll need to make manual changes to how the `manifest.json` is generated. You can do this by using the `manifest` configuration:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  manifest: {
+    // Put manual changes here
+  },
+});
+```
+
+## Manifest Version Compatibility
+
+When defining options in the manifest, always define them for MV3 when possible. WXT will either convert them to their MV2 equivalents or remove them from the generated manifest if there is not MV2 equivalent.
+
+So for fields like `web_accessible_resources` or `content_security_policy`, you just need to list them in their MV3 forms. Other fields, like `side_panel`, which doesn't exist in MV2, will be removed automatically.
+
+Here's an example `wxt.config.ts` file:
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  manifest: {
+    action: {
+      default_title: 'Some Title',
+    },
+    web_accessible_resources: [
+      {
+        matches: ['*://*.google.com/*'],
+        resources: ['icon/*.png'],
+      },
+    ],
+  },
+});
+```
+
+And here's the different `manifest.json` files generated:
+
+:::code-group
+
+```json [MV2]
+{
+  "manifest_version": 2,
+  // ...
+  "browser_action": {
+    "default_title": "Some Title"
+  },
+  "web_accessible_resources": ["icon/*.png"]
+}
+```
+
+```json [MV3]
+{
+  "manifest_version": 3,
+  // ...
+  "action": {
+    "default_title": "Some Title"
+  },
+  "web_accessible_resources": [
+    {
+      "matches": ["*://*.google.com/*"],
+      "resources": ["icon/*.png"]
+    }
+  ]
+}
+```
+
+:::
+
+## Name
+
+If not provided via the `manifest` config, the [manifest's `name`](https://developer.chrome.com/docs/extensions/mv3/manifest/name/) defaults to your `package.json`'s `name` property.
+
+## Version
+
+The [manifest's `version` and `version_name`](https://developer.chrome.com/docs/extensions/mv3/manifest/version/) properties are based on the `version` field listed in your `package.json` or `wxt.config.ts`.
+
+- `version_name` is the exact string listed in your `package.json` or `wxt.config.ts` file
+- `version` is the string cleaned up, with any invalid suffixes removed
+
+If a version is not found, a warning is logged and the version defaults to `"0.0.0"`.
+
+#### Example
+
+```json
+// package.json
+{
+  "version": "1.3.0-alpha2"
+}
+```
+
+```json
+// .output/<dir>/manifest.json
+{
+  "version": "1.3.0",
+  "version_name": "1.3.0-alpha2"
+}
+```
+
+### `icons`
+
+By default, WXT will discover icons in your [`public` directory](/guide/directory-structure/public/) and use them for the [manifest's `icons`](https://developer.chrome.com/docs/extensions/mv3/manifest/icons/).
+
+```
+public/
+├─ icon-16.png
+├─ icon-24.png
+├─ icon-48.png
+├─ icon-96.png
+└─ icon-128.png
+```
+
+Icon files need to match the following regex to be automatically included in the manifest. Most design software can output icons in one of these formats
+
+<<< @/../packages/wxt/src/core/utils/manifest.ts#snippet
+
+If you prefer to use filenames in a different format, you can add the icons manually in your `wxt.config.ts` file:
+
+```ts
+export default defineConfig({
+  manifest: {
+    icons: {
+      16: '/extension-icon-16.png',
+      24: '/extension-icon-24.png',
+      48: '/extension-icon-48.png',
+      96: '/extension-icon-96.png',
+      128: '/extension-icon-128.png',
+    },
+  },
+});
+```
+
+### Permissions
+
+[Permissions](https://developer.chrome.com/docs/extensions/reference/permissions/) must be listed in the manifest config.
+
+```ts
+export default defineConfig({
+  manifest: {
+    permissions: ['storage', 'tabs'],
+  },
+});
+```
+
+### Host Permissions
+
+[Host Permissions](https://developer.chrome.com/docs/extensions/develop/concepts/declare-permissions#host-permissions) must be listed in the manifest config.
+
+```ts
+export default defineConfig({
+  manifest: {
+    host_permissions: ['*://*.google.com/*'],
+  },
+});
+```
+
+:::warning
+If you use host permissions and target both MV2 and MV3, make sure to only include the required host permissions for each version:
+
+```ts
+export default defineConfig({
+  manifest: ({ manifestVersion }) => ({
+    host_permissions: manifestVersion === 2 ? [...] : [...],
+  }),
+});
+```
+
+:::
+
+## Localization
+
+Similar to the icon, the [`_locales` directory](https://developer.chrome.com/docs/extensions/reference/i18n/) should be placed inside the the WXT's [`public` directory](/guide/directory-structure/public/).
+
+```
+public/
+└─ _locales/
+   ├─ en/
+   │  └─ messages.json
+   ├─ es/
+   │  └─ messages.json
+   └─ ko/
+      └─ messages.json
+```
+
+Then you'll need to explicitly override the `name` and `description` properties in your config for them to be localized.
+
+```ts
+export default defineConfig({
+  manifest: {
+    name: '__MSG_extName__',
+    description: '__MSG_extDescription__',
+    default_locale: 'en',
+  },
+});
+```
+
+See the official localization examples for more details:
+
+- [I18n](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-i18n#readme)
+- [Vue I18n](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vue-i18n#readme)
+
+## Actions
+
+In MV2, you had two options: [`browser_action`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) and [`page_action`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action). In MV3, they were merged into a single [`action`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action) API.
+
+By default, whenever an action is generated, WXT falls back to `browser_action` when targetting MV2.
+
+### Action With Popup
+
+To generate a manifest where a UI appears after clicking the icon, just create a [popup entrypoint](/guide/directory-structure/entrypoints/popup).
+
+If you want to use a `page_action` for MV2, add the following `meta` tag to the HTML document's head:
+
+```html
+<meta name="manifest.type" content="page_action" />
+```
+
+### Action Without Popup
+
+If you want to use the `activeTab` permission or the `browser.action.onClick` event, but don't want to show a popup UI:
+
+1. Delete the [popup entrypoint](/guide/directory-structure/entrypoints/popup) if it exists
+2. Add the `action` key to your manifest:
+   ```ts
+   // wxt.config.ts
+   export default defineConfig({
+     manifest: {
+       action: {},
+     },
+   });
+   ```
+
+Same as an action with a popup, WXT will fallback on using `browser_action` for MV2. To use a `page_action` instead, add that key as well:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  manifest: {
+    action: {},
+    page_action: {},
+  },
+});
+```
+
+## Full Control
+
+The `manifest` option can also be set equal to a function, letting you use logical statements to determine what should be output.
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  manifest: ({ manifestVersion, browser, mode, command }) => {
+    return { ... }
+  }
+})
+```
+
+Or, you can use the `build:manifestGenerated` hook to transform the manifest before it is written to the output directory.
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  hooks: {
+    build: {
+      manifestGenerated(manifest) {
+        // Update the manifest variable by reference
+        manifest.name = 'Overriden name';
+      },
+    },
+  },
+});
+```
@@ -33,7 +33,7 @@ By default, it will build for `chrome`. When excluding the [manifest version fla
 | Any other string |            3             |

 :::tip
-To configure which browser is opened when running dev mode via `wxt -b <browser>`, see the [Development docs](/guide/development#configure-browser-startup) docs.
+To configure which browser is opened when running dev mode via `wxt -b <browser>`, see the [`web-ext.config.ts` docs](/guide/directory-structure/web-ext-config).
 :::

 ## Target Manifest Version
@@ -0,0 +1,108 @@
+# Web Extension Polyfill
+
+## Overview
+
+WXT is built on top [`webextension-polyfill` by Mozilla](https://www.npmjs.com/package/webextension-polyfill). The polyfill standardizes much of web extension APIs so they behave the same across different browsers and manifest versions.
+
+Unlike with Chrome Extension development, which uses a `chrome` global, you need to import the `browser` variable from WXT to use the polyfill:
+
+```ts
+import { browser } from 'wxt/browser';
+
+console.log(browser.runtime.id);
+```
+
+If you use auto-imports (enabled by default), you don't need to import this variable, it will work just like the `chrome` global:
+
+```ts
+console.log(browser.runtime.id);
+```
+
+## Handling Differences
+
+Web extensions behave **_VERY_** differently between browsers and manifest versions. You will have to handle these API differences yourself.
+
+:::info
+MDN has great compatibility tables for tracking which browsers support which APIs: [Web Extension Browser Support for JavaScript APIs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs)
+:::
+
+Lets go over a few approaches:
+
+1. **Feature detection**: If an API isn't available, it is `undefined`. So check if that's the case before using it.
+
+   ```ts
+   if (browser.runtime.onStartup) {
+     browser.runtime.onStartup.addListener(...);
+   }
+   ```
+
+   If there's a similar API you can fallback on, you can do something like this:
+
+   ```ts
+   (browser.action ?? browser.browserAction).setBadgeColor('red');
+   ```
+
+2. **Check the browser**: WXT provides environment variables about which browser is being targeted.
+   ```ts
+   if (!import.meta.env.SAFARI) {
+     // Safari doesn't implement `onStartup` correctly, so we need a custom solution
+     // ...
+   } else {
+     browser.runtime.onStartup.addListener(...)
+   }
+   ```
+3. **Check the manifest version**: WXT provides environment variables about which manifest version is being targeted.
+   ```ts
+   if (import.meta.env.MANIFEST_VERSION === 3) {
+     // MV3 only code...
+   } else {
+     // MV2 only code...
+   }
+   ```
+
+### Environment Variables
+
+| Name                               | Type      | Description                                           |
+| ---------------------------------- | --------- | ----------------------------------------------------- |
+| `import.meta.env.BROWSER`          | `string`  | The target browser                                    |
+| `import.meta.env.MANIFEST_VERSION` | `2 │ 3`   | The target manifest version                           |
+| `import.meta.env.CHROME`           | `boolean` | equivalent to `import.meta.env.BROWSER === "chrome"`  |
+| `import.meta.env.FIREFOX`          | `boolean` | equivalent to `import.meta.env.BROWSER === "firefox"` |
+| `import.meta.env.SAFARI`           | `boolean` | equivalent to `import.meta.env.BROWSER === "safari"`  |
+| `import.meta.env.EDGE`             | `boolean` | equivalent to `import.meta.env.BROWSER === "edge"`    |
+| `import.meta.env.OPERA`            | `boolean` | equivalent to `import.meta.env.BROWSER === "opera"`   |
+
+WXT uses Vite, so all of Vite's `import.meta.env` variables are also available:
+
+<https://vitejs.dev/guide/env-and-mode#env-variables>
+
+## Augmented Types
+
+Based on the files in your project, WXT will modify some of the polyfill's types to be type-safe.
+
+For example, `browser.runtime.getURL` will be typed to only allow getting the URL of known files.
+
+## Missing Types
+
+Some newer APIs that Chrome provides are missing types. But don't worry, the APIs are present at runtime! The polyfill only provides types for standard and stable APIs that work on all browsers, so just be careful when you use them.
+
+If you're using TypeScript, you can use `@ts-expect-error` to ignore any errors when using an API that doesn't have any types.
+
+```ts
+// @ts-expect-error: desktopCapture is not typed
+browser.desktopCapture.chooseDesktopMedia(...)
+```
+
+Note that when running this code in a different browser that doesn't support the `desktopCapture` API, `browser.desktopCapture` will evaluate to `undefined` and an error will be thrown.
+
+## Missing Permissions
+
+Just like with the `chrome` global, you need to request the required permissions to use each API. Otherwise, `browser.{apiName}` will be `undefined`.
+
+For example, if you try to use `browser.storage.local.getItem(...)` without requesting the `storage` permission, the extension will throw an error:
+
+```
+Cannot access property "local" of undefined.
+```
+
+You can request permissions using the [`wxt.config.ts` file](/guide/directory-structure/wxt-config#permissions).
@@ -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>
@@ -1,237 +0,0 @@
---
-outline: deep
---
-
-# Manifest.json
-
-The manifest.json is generated at build-time based on files in the `entrypoints/` directory and `wxt.config.ts`.
-
-## Configuration
-
-While entrypoints are generated and added to the manifest at build-time, you can customize or add to your `manifest.json` in the config file.
-
-```ts
-// wxt.config.ts entrypoint of your extension
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  manifest: {
-    host_permissions: ['*://google.com/*'],
-    content_security_policy: {
-      // ...
-    },
-  },
-});
-```
-
-### `name`
-
-If not provided via the `manifest` config, the [manifest's `name`](https://developer.chrome.com/docs/extensions/mv3/manifest/name/) defaults to your package.json's `name` property.
-
-### `version` and `version_name`
-
-The [manifest's `version` and `version_name`](https://developer.chrome.com/docs/extensions/mv3/manifest/version/) properties are based on the `version` field listed in your `package.json` or `wxt.config.ts`.
-
- `version_name` is the exact string listed in your `package.json` or `wxt.config.ts` file
- `version` is the string cleaned up, with any invalid suffixes removed
-
-If a version is not found, a warning is logged and the version defaults to `"0.0.0"`.
-
-#### Example
-
-```json
-// package.json
-{
-  "version": "1.3.0-alpha2"
-}
-```
-
-```json
-// .output/<dir>/manifest.json
-{
-  "version": "1.3.0",
-  "version_name": "1.3.0-alpha2"
-}
-```
-
-### `icons`
-
-By default, WXT will discover icons in your [`public` directory](/guide/assets#public-directory) and use them for the [manifest's `icons`](https://developer.chrome.com/docs/extensions/mv3/manifest/icons/).
-
-```
-public/
-├─ icon-16.png
-├─ icon-24.png
-├─ icon-48.png
-├─ icon-96.png
-└─ icon-128.png
-```
-
-Icon files need to match the following regex to be automatically included in the manifest. Most design software can output icons in one of these formats
-
-<<< @/../packages/wxt/src/core/utils/manifest.ts#snippet
-
-If you prefer to use filenames in a different format, you can add the icons manually in your `wxt.config.ts` file:
-
-```ts
-export default defineConfig({
-  manifest: {
-    icons: {
-      16: '/extension-icon-16.png',
-      24: '/extension-icon-24.png',
-      48: '/extension-icon-48.png',
-      96: '/extension-icon-96.png',
-      128: '/extension-icon-128.png',
-    },
-  },
-});
-```
-
-### `permissions`
-
-[Permissions](https://developer.chrome.com/docs/extensions/reference/permissions/) must be listed in the manifest config.
-
-```ts
-export default defineConfig({
-  manifest: {
-    permissions: ['storage', 'tabs'],
-  },
-});
-```
-
-## Localization
-
-Similar to the icon, the [`_locales` directory](https://developer.chrome.com/docs/extensions/reference/i18n/) should be placed inside the the WXT's [`public` directory](/guide/assets#public-directory).
-
-```
-public/
-└─ _locales/
-   ├─ en/
-   │  └─ messages.json
-   ├─ es/
-   │  └─ messages.json
-   └─ ko/
-      └─ messages.json
-```
-
-Then you'll need to explicitly override the `name` and `description` properties in your config for them to be localized.
-
-```ts
-export default defineConfig({
-  manifest: {
-    name: '__MSG_extName__',
-    description: '__MSG_extDescription__',
-    default_locale: 'en',
-  },
-});
-```
-
-See the official localization examples for more details:
-
-<ExampleList tag="i18n" />
-
-## Per-Manifest Version Config
-
-WXT applies several transformations to your manifest to simplify managing both MV2 and MV3 keys in your `wxt.config.ts` file:
-
-1. Top level MV2-only or MV3-only keys are stripped from the final manifest when targeting the other manifest version
-2. Some keys, are automatically converted between versions when possible:
-   - Define `web_accessible_resources` in it's MV3 style and it will be converted to the MV2 style automatically
-   - `action` will automatically be converted to `browser_action` for MV3. To use `page_action` instead, add both `action` and `page_action` entries to your manifest
-
-For example, a `wxt.config.ts` file that looks like this:
-
-```ts
-import { defineConfig } from 'wxt';
-
-export default defineConfig({
-  mainfest: {
-    action: {
-      default_title: 'Some Title',
-    },
-    web_accessible_resources: [
-      {
-        matches: ['*://*.google.com/*'],
-        resources: ['icon/*.png'],
-      },
-    ],
-  },
-});
-```
-
-Will be output differently for each manifest version:
-
-:::code-group
-
-```json [MV2]
-{
-  "manifest_version": 2,
-  // ...
-  "browser_action": {
-    "default_title": "Some Title"
-  },
-  "web_accessible_resources": ["icon/*.png"]
-}
-```
-
-```json [MV3]
-{
-  "manifest_version": 3,
-  // ...
-  "action": {
-    "default_title": "Some Title"
-  },
-  "web_accessible_resources": [
-    {
-      "matches": ["*://*.google.com/*"],
-      "resources": ["icon/*.png"]
-    }
-  ]
-}
-```
-
-:::
-
-:::tip
-If this isn't enough control for your use-case, remember you can use a function for the `manifest` key and generate it however you'd like, or you can use the `build:manifestGenerated` hook to apply additional transformations.
-:::
-
-## Per-Browser Configuration
-
-The `manifest` field can be a function. If you are building and extension for multiple browsers, and need to modify the manifest per browser, using a function instead of an object is very useful.
-
-```ts
-export default defineConfig({
-  manifest: ({ browser, manifestVersion, mode, command }) => {
-    return {
-      // Your manifest
-    };
-  },
-});
-```
-
-:::info
-The first argument is of type `ConfigEnv`. See the [API reference](/api/wxt/interfaces/ConfigEnv) for info about each property.
-:::
-
-For example, say you use OAuth, and you need to provide a different `oauth.client_id` for each browser:
-
-```ts
-const clientIds = {
-  chrome: '<your-chrome-client-id>',
-  edge: '<your-edge-client-id>',
-  firefox: '<your-firefox-client-id>',
-  opera: '<your-opera-client-id>',
-};
-
-export default defineConfig({
-  manifest: ({ browser }) => ({
-    oauth: {
-      client_id: clientIds[browser],
-      scopes: [
-        // ...
-      ],
-    },
-  }),
-});
-```
@@ -13,31 +13,29 @@ hero:
  actions:
    - theme: brand
      text: Get Started
-      link: /guide/installation
+      link: /get-started/installation
    - theme: alt
      text: Learn More
-      link: /guide/introduction
+      link: /get-started/introduction

 features:
  - icon: 🌐
    title: Supported Browsers
    details: WXT will build extensions for Chrome, Firefox, Edge, Safari, and any Chromium based browser.
-    link: /guide/multiple-browsers
+    link: /guide/key-concepts/web-extension-polyfill
    linkText: Read docs
  - icon: ✅
    title: MV2 and MV3
    details: Build Manifest V2 or V3 extensions for any browser using the same codebase.
-    link: /guide/multiple-browsers#target-manifest-version
+    link: /guide/key-concepts/manifest
    linkText: Read docs
  - icon: ⚡
    title: Fast Dev Mode
    details: Lighting fast HMR for UI development and fast reloads for content/background scripts enables faster iterations.
-    link: /guide/development.html
-    linkText: Learn more
  - icon: 📂
    title: File Based Entrypoints
    details: Manifest is generated based on files in the project with inline configuration.
-    link: /guide/entrypoints
+    link: /get-started/entrypoints
    linkText: See project structure
  - icon: 🚔
    title: TypeScript
@@ -45,7 +43,7 @@ features:
  - icon: 🦾
    title: Auto-imports
    details: Nuxt-like auto-imports to speed up development.
-    link: /guide/auto-imports
+    link: /guide/key-concepts/auto-imports
    linkText: Read docs
  - icon: 🤖
    title: Automated Publishing
@@ -53,12 +51,12 @@ features:
  - icon: 🎨
    title: Frontend Framework Agnostic
    details: Works with any front-end framework with a Vite plugin.
-    link: /guide/configuration#frontend-frameworks
+    link: /guide/key-concepts/frontend-frameworks
    linkText: Add a framework
  - icon: 🖍️
    title: Bootstrap a New Project
    details: Get started quickly with several awesome project templates.
-    link: /guide/installation#bootstrap-project
+    link: /get-started/installation#bootstrap-project
    linkText: See templates
  - icon: 📏
    title: Bundle Analysis
@@ -66,33 +64,26 @@ features:
  - icon: ⬇️
    title: Bundle Remote Code
    details: Downloads and bundles remote code imported from URLs.
-    link: /guide/remote-code
+    link: /guide/go-further/remote-code
    linkText: Read docs
 ---

-<section class="vp-doc" style="padding: 0 48px">
-  <div class="container">
-    <h2>Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First</h2>
-    <p>
-      WXT's simplifies the chrome extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
-    </p>
-    <div style="margin: auto; width: 100%; max-width: 900px; text-align: center">
-      <video src="https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94" controls></video>
-      <br />
-      <small>
-        And who doesn't appreciate a beautiful CLI?
-      </small>
-    </div>
-  </div>
-</section>
+## Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First
+
+WXT's simplifies the chrome extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
+
+<div style="margin: auto; width: 100%; max-width: 900px; text-align: center">
+  <video src="https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94" controls></video>
+  <br />
+  <small>
+    And who doesn't appreciate a beautiful CLI?
+  </small>
+</div>
+
+## Who's Using WXT?
+
+Battle tested and ready for production. Explore chrome extensions made with WXT.

 <ClientOnly>
  <UsingWxtSection />
 </ClientOnly>
-
-<style scoped>
-.container {
-  margin: 0 auto;
-  max-width: 1152px;
-}
-</style>
@@ -2,16 +2,14 @@
 # https://docs.netlify.com/routing/redirects/

 # Old URLs -> New URLs
-/config.html                    /api/wxt/interfaces/InlineConfig.html
-/api/config.html                /api/wxt/interfaces/InlineConfig.html
+/config.html                    /api/reference/wxt/interfaces/InlineConfig.html
+/api/config.html                /api/reference/wxt/interfaces/InlineConfig.html
 /entrypoints                    /entrypoints/background.html
 /get-started/assets.html        /guide/assets.html
 /get-started/build-targets.html /guide/multiple-browsers.html
 /get-started/compare.html       /guide/compare.html
 /get-started/configuration.html /guide/configuration.html
 /get-started/entrypoints.html   /guide/entrypoints.html
-/get-started/installation.html  /guide/installation.html
-/get-started/introduction.html  /guide/introduction.html
 /get-started/publishing.html    /guide/publishing.html
 /get-started/testing.html       /guide/testing.html
 /guide/background.html          /entrypoints/background.html
@@ -29,3 +27,5 @@
 /guide/unlisted-pages.html      /entrypoints/unlisted-pages.html
 /guide/unlisted-scripts.html    /entrypoints/unlisted-scripts.html
 /guide/build-targets.html       /guide/multiple-browsers.html
+/guide/installation.html        /get-started/installation.html
+/guide/introduction.html        /get-started/introduction.html
@@ -3,7 +3,7 @@
  "entryPointStrategy": "packages",
  "entryPoints": ["../packages/wxt"],
  "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],
-  "out": "./api",
+  "out": "./api/reference",
  "githubPages": false,
  "excludePrivate": true,
  "excludeProtected": true,
@@ -2,12 +2,12 @@
  "private": true,
  "type": "module",
  "engines": {
-    "node": ">=18",
-    "pnpm": ">=8"
+    "node": ">=18.20.3",
+    "pnpm": "^8.6.3"
  },
-  "packageManager": "pnpm@8.6.3",
+  "packageManager": "pnpm@8.15.8",
  "scripts": {
-    "check": "check && pnpm -r run check",
+    "check": "check && pnpm -r --sequential run check",
    "test": "vitest",
    "test:coverage": "vitest run --coverage.enabled \"--coverage.include=packages/wxt/src/**\" \"--coverage.exclude=packages/wxt/src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\" \"--coverage.exclude=**/fixtures/**\"",
    "prepare": "simple-git-hooks",
@@ -18,24 +18,33 @@
    "docs:preview": "pnpm -s docs:gen && vitepress preview docs"
  },
  "devDependencies": {
-    "@aklinker1/check": "^1.1.1",
-    "@vitest/coverage-v8": "^1.0.1",
+    "@aklinker1/buildc": "^1.0.10",
+    "@aklinker1/check": "^1.3.1",
+    "@types/fs-extra": "^11.0.4",
+    "@vitest/coverage-v8": "^1.6.0",
+    "changelogen": "^0.5.5",
    "consola": "^3.2.3",
-    "execa": "^8.0.1",
-    "lint-staged": "^15.2.0",
+    "dependency-graph": "^1.0.0",
+    "execa": "^9.3.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.2.0",
+    "hasha": "^6.0.0",
+    "lint-staged": "^15.2.7",
    "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.0",
-    "simple-git-hooks": "^2.9.0",
+    "prettier": "^3.3.2",
+    "simple-git-hooks": "^2.11.1",
+    "tsx": "4.15.7",
    "typedoc": "^0.25.4",
    "typedoc-plugin-markdown": "4.0.0-next.23",
    "typedoc-vitepress-theme": "1.0.0-next.3",
-    "typescript": "^5.3.2",
-    "vitepress": "1.0.0-rc.34",
-    "vitest": "^1.5.3",
+    "typescript": "^5.5.2",
+    "vitepress": "^1.2.3",
+    "vitest": "^1.6.0",
    "vitest-mock-extended": "^1.3.1",
-    "vitest-plugin-random-seed": "^1.0.2",
-    "vue": "^3.3.10",
-    "wxt": "workspace:*"
+    "vitest-plugin-random-seed": "^1.1.0",
+    "vue": "^3.4.31",
+    "wxt": "workspace:*",
+    "yaml": "^2.4.5"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
@@ -50,5 +59,10 @@
        "search-insights"
      ]
    }
+  },
+  "changelog": {
+    "excludeAuthors": [
+      "aaronklinker1@gmail.com"
+    ]
  }
 }
@@ -0,0 +1,24 @@
+# Changelog
+
+## v1.1.0
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-react-v1.0.0...module-react-v1.1.0)
+
+### 🚀 Enhancements
+
+- Enable auto-imports for JSX/TSX files ([#773](https://github.com/wxt-dev/wxt/pull/773))
+
+### 🩹 Fixes
+
+- Upgrade wxt peer to >= 0.18.6 ([7edf1c8](https://github.com/wxt-dev/wxt/commit/7edf1c8))
+- Use `prepare` instead of `postinstall` for local dev setup ([#788](https://github.com/wxt-dev/wxt/pull/788))
+
+### 🏡 Chore
+
+- Add changelog ([21e8ca0](https://github.com/wxt-dev/wxt/commit/21e8ca0))
+- Extract build cache script to NPM package ([#737](https://github.com/wxt-dev/wxt/pull/737))
+- **deps:** Upgrade non-major deps ([#778](https://github.com/wxt-dev/wxt/pull/778))
+
+## v1.0.0
+
+Initial release 🎉
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
GitHub Actions	a7963e23db	chore(release): wxt v0.18.15	2024-07-21 13:43:02 +00:00
Aaron	069bd6c435	fix: Externalize app config during dependency optimization (#833 )	2024-07-21 08:37:09 -05:00
Aaron	88a1244ca9	fix: Build latest version of package before packing	2024-07-21 08:36:45 -05:00
Aaron	7ee391f688	fix: Don't throw error if localization file is missing (#832 )	2024-07-21 07:53:38 -05:00
Aaron	2b3eab9c2a	docs: Add link to google's update testing tool in migration guide and improve host permission docs	2024-07-20 11:33:17 -05:00
eetann	a3fc9e1e18	docs: fix link to unimport (#826 )	2024-07-17 07:40:34 -05:00
Aaron	559d32e6eb	Update README.md	2024-07-12 08:19:59 -05:00
Aaron	f904b79367	Update README.md	2024-07-12 08:19:33 -05:00
eetann	9cd7cca81c	docs: fix links to Guide pages (#821 )	2024-07-12 07:25:11 -05:00
GitHub Actions	3366c1e35f	chore(release): wxt v0.18.14	2024-07-09 16:03:18 +00:00
Aaron	82be31a408	fix(modules): Add types from all wxt node_modules, not just ones with config (#817 )	2024-07-09 10:58:41 -05:00
GitHub Actions	d767f3f598	chore(release): wxt v0.18.13	2024-07-09 15:07:38 +00:00
Ayub Kokabi	48967c7c5f	feat: add XPath support to getAnchor() (#813 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-07-09 10:02:00 -05:00
Aaron	6c4da7225d	fix: Add debug logs for vite builder (#816 )	2024-07-09 09:58:59 -05:00
多吃点	e9025fb13e	docs: Update manifest.md (#815 )	2024-07-09 08:12:38 -05:00
jy00566722	8db6b3187b	docs: Add "Exchange Rate Converter" extensions to homepage (#808 )	2024-07-07 14:41:48 -05:00
Aaron	a19f9e12c4	feat(config): `dev.server.hostname` (#807 )	2024-07-07 09:31:38 -05:00
Farzad Soltani	a82eb46511	docs: fix grammar (#806 )	2024-07-07 09:16:03 -05:00
GitHub Actions	e50f2b047a	chore(release): wxt v0.18.12	2024-07-07 14:10:47 +00:00
Aaron	1b41cd26ee	chore(deps): Upgrade `web-ext-run` (0.2.0 to 0.2.1) (#804 )	2024-07-07 08:57:29 -05:00
Aaron	e32fbed1b7	docs: Update README (#802 )	2024-07-06 08:29:23 -05:00
sacrosanctic	f8acdd6352	doc: detail issues with vite plugins (#799 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-07-06 08:01:22 -05:00
ntnyq	9ea89c6340	fix: Add missing name to ESLint v9 autoImports config (#801 )	2024-07-06 08:01:10 -05:00
Margarita Balkheeva	a521a80d43	docs: Add "MaxFocus" extension to homepage (#795 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-07-04 14:38:44 -05:00
sacrosanctic	4c6a57dd33	docs: rephrase a paragraph (#797 )	2024-07-03 16:16:41 -05:00
Florian Metz	3ce8c8b1f4	perf: create zip using streams (#793 )	2024-07-03 01:37:58 -05:00
deyu	4ee8f7837e	docs: Add "Vanilla Pudding" extension to homepage (#794 )	2024-07-03 01:36:32 -05:00
Aaron	1e8e5488af	feat: Support runtime config in `app.config.ts` (#792 )	2024-07-02 17:19:54 -05:00
GitHub Actions	5704765cc4	chore(release): wxt v0.18.11	2024-07-02 16:40:05 +00:00
GitHub Actions	8c7adbf463	chore(release): @wxt-dev/module-react v1.1.0	2024-07-02 16:34:30 +00:00
Aaron	8c4436efe8	Update solid template to `@wxt-dev/module-solid` v1.1.1 (#789 )	2024-07-02 11:29:53 -05:00
GitHub Actions	5e361c0085	chore(release): @wxt-dev/module-solid v1.1.1	2024-07-02 16:23:54 +00:00
Aaron	ccfc207e92	fix: Use `prepare` instead of `postinstall` for local dev setup (#788 )	2024-07-02 11:18:44 -05:00
GitHub Actions	36be4ce771	chore(release): @wxt-dev/module-solid v1.1.0	2024-07-02 15:37:46 +00:00
KnightYoshi	18f8a387b0	feat: add eslint 9 config support (#762 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-07-02 10:32:32 -05:00
C.C	48c2c07557	docs: Fix manifest typo (#787 )	2024-07-02 07:09:07 -05:00
Aaron	61548a9478	fix(dev): Catch error when attempting to reload a tab in a saved tab group (#786 )	2024-07-01 16:11:00 -05:00
dependabot[bot]	fd678e9572	chore(deps): bump oven-sh/setup-bun from 1 to 2 (#785 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-07-01 15:40:10 -05:00
Aaron	63fb913f76	docs: New example search (#751 )	2024-06-30 09:01:42 -05:00
Aaron	faffe20a62	chore(deps): Upgrade non-major deps (#778 )	2024-06-29 15:00:15 -05:00
Aaron	3ed8bd10fd	chore: Upgrade `buildc` to v1.0.10 (#780 )	2024-06-29 14:09:56 -05:00
Asakura Mizu	6f3f270573	fix: Respect custom `outDir` when cleaning and zipping (#774 )	2024-06-28 09:05:40 -05:00
Aaron	5347cb4626	chore: Replace consola with wxt.logger (#776 )	2024-06-28 09:04:21 -05:00
Aaron	d6b4d2d1f6	chore(dev-deps): Upgrade buildc to v1.0.9	2024-06-27 16:47:35 -05:00
Aaron	0d7ae287da	chore(dev-deps): Upgrade buildc to v1.0.8	2024-06-27 16:38:40 -05:00
Aaron	90cb3bd3bf	feat: Enable auto-imports for JSX/TSX files (#773 )	2024-06-27 00:05:45 -05:00
Prakhar 🔱 Man of Creativity	60eb97c4b2	docs: Update examples URL (#768 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-06-26 13:52:10 -05:00
Aaron	0ffc6eae3e	Fix comment typo	2024-06-25 15:12:59 -05:00
GitHub Actions	06a8c5fb0e	chore(release): wxt v0.18.10	2024-06-25 20:03:59 +00:00
Aaron	eb86413f35	chore: Consolidate `unimport` code into a built-in module (#771 )	2024-06-25 14:59:28 -05:00
Aaron	b29d49cbf1	fix: Await `prepare:types` hook	2024-06-24 10:04:44 -05:00
Aaron	c0a0edb30c	feat(modules): Allow adding generated public files (#769 )	2024-06-24 08:46:45 -05:00
Aaron	b15a933c75	feat: Add `prepare:types` hook to extend `.wxt/` directory generation (#767 )	2024-06-23 15:12:28 -05:00
Malix	1851be22a7	docs: Update CRXJS Firefox Compatibility (#764 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-06-23 10:32:09 -05:00
Aaron	39f6c29e4f	chore: Refactor package manager test fixtures	2024-06-21 09:10:22 -05:00
GitHub Actions	936e89fbfb	chore(release): wxt v0.18.9	2024-06-20 15:34:16 +00:00
Aaron	ad365ecde4	feat(experimental): Replace `viteRuntime` option with `entrypointImporter` option, and implement `vite-node` importer (#761 )	2024-06-20 10:27:19 -05:00
GitHub Actions	b4283e37bd	chore(release): wxt v0.18.8	2024-06-20 14:03:16 +00:00
Aaron	b467ad760a	fix(modules): `addViteConfig` ignored user vite config (#760 )	2024-06-20 08:59:46 -05:00
Aaron	9fc6408ef9	chore: Add E2E test for `addImportPreset`	2024-06-20 08:52:45 -05:00
Aaron	394cb1a520	docs: Add 'WorkFlowy MultiFlow' to homepage	2024-06-19 14:16:58 -05:00
Aaron	ffec88549b	fix: Ignore .wxt file changes in dev (#755 )	2024-06-19 08:33:52 -05:00
Ziheng Xun	4758bea187	docs: update sandbox.md (#754 )	2024-06-19 08:06:08 -05:00
Aaron	6671471f75	feat(dev): Reload extension when public files change (#752 )	2024-06-19 08:05:56 -05:00
Aaron	ae78dc7fb3	chore: Refactor client web socket util (#753 )	2024-06-18 22:47:30 -05:00
Aaron	b62af3d007	chore(dev-deps): Upgrade @aklinker1/buildc to 1.0.7 (#748 )	2024-06-18 00:11:14 -05:00
Aaron	43ae44ecd5	fix: Don't load plugins twice in HTML pages (#746 )	2024-06-17 23:41:39 -05:00
Aaron	5bab9d2f59	chore: Fix build script flags (#745 )	2024-06-17 23:41:10 -05:00
Aaron	7edf1c8103	fix: Upgrade wxt peer to >= 0.18.6 This closes https://github.com/wxt-dev/wxt/issues/743	2024-06-17 14:42:24 -05:00
Aaron	53b4eac955	docs: Update wxt init command for bun	2024-06-17 14:39:41 -05:00
GitHub Actions	f9a10c2c52	chore(release): wxt v0.18.7	2024-06-17 16:17:42 +00:00
Aaron	8206ca9164	fix(zip): Revert dotfile changes from #674 (#742 )	2024-06-17 11:10:06 -05:00
Aaron	1a823cc008	chore: Extract build cache script to NPM package (#737 )	2024-06-17 11:09:18 -05:00
Aaron	efc011eb81	ci: Fix release 422 failure	2024-06-14 00:36:03 -05:00
GitHub Actions	35f6d28977	chore(release): @wxt-dev/module-solid v1.0.1	2024-06-14 05:29:40 +00:00
Aaron	43fcbec0eb	fix: Add `target: esnext` by default (#733 )	2024-06-14 00:25:11 -05:00
Aaron	a0d56b4d27	chore: Update templates to use new modules (#732 )	2024-06-14 00:19:13 -05:00
Aaron	38ccb6ace6	docs: Update frontend framework docs with new modules (#731 )	2024-06-14 00:06:23 -05:00
Aaron	aaf75f1de1	ci: Only mark wxt releases as latest	2024-06-14 00:02:41 -05:00
Aaron	21e8ca0a2c	chore: Add changelog	2024-06-13 23:52:58 -05:00
Aaron	55444858bc	ci: Add new modules as release targets	2024-06-13 23:44:28 -05:00
Aaron	771ea03069	feat: Add `@wxt-dev/module-solid` package (#730 )	2024-06-13 23:23:32 -05:00
Aaron	38b71d1350	chore: Remove extra dependencies	2024-06-13 23:08:17 -05:00
Aaron	cb781aceb5	chore: Remove extra dependencies	2024-06-13 23:05:48 -05:00
Aaron	d53c792218	chore: Remove dependencies from vue module	2024-06-13 23:03:16 -05:00
Aaron	907f4d3672	feat: Add `@wxt-dev/module-react` package (#729 )	2024-06-13 22:53:40 -05:00
Aaron	8432d73a6b	fix: Generalize react-refresh preamble logic to virtualize all inline scripts (#728 )	2024-06-13 19:17:23 -05:00
Aaron	94a5435089	docs: Add missing vue install step	2024-06-13 16:39:09 -05:00
Aaron	edf3cf3f17	feat: Add `@wxt-dev/module-vue` package (#726 )	2024-06-13 16:36:37 -05:00
Aaron	48783baec3	chore(deps): Upgrade and sync all dependencies (#725 )	2024-06-13 15:44:00 -05:00
Aaron	c70f047696	chore: Add taze to project (#724 )	2024-06-13 15:17:21 -05:00
Aaron	e6e0c713bc	feat: Add `@wxt-dev/module-vue` package (#716 )	2024-06-13 15:16:45 -05:00
Aaron	3691554a73	docs: Update contributor docs with release steps	2024-06-13 14:58:57 -05:00
Aaron	1a3436606b	fix(dev): Fix CSP error loading HTML plugins (#723 )	2024-06-13 14:49:50 -05:00
GitHub Actions	2c9e7750ec	chore(release): wxt v0.18.6	2024-06-13 17:28:34 +00:00
Aaron	fa67910007	fix(modules): Add modules to TS project so type augmentation works (#722 )	2024-06-13 12:25:18 -05:00
Aaron	c77773eb20	feat(modules): Add new `addImportPreset` helper function (#720 )	2024-06-13 12:20:09 -05:00
Aaron	148f3d53a6	fix(modules): Re-export `WxtModule` type from `wxt/modules` to prevent TS2742 (#721 )	2024-06-13 12:19:15 -05:00
Aaron	c7af789173	fix(types): Module `options` param is optional, but types did not reflect that (#719 )	2024-06-13 11:20:59 -05:00
Aaron	274d39b9a4	chore(dev-deps): Upgrade typescript to 5.4 (#718 )	2024-06-13 00:38:11 -05:00
Aaron	d1edb2da0e	chore: Cache workspace dependency builds (#715 )	2024-06-12 22:34:08 -05:00
Aaron	ed860027ef	ci: Fix sync-releases script	2024-06-12 00:51:11 -05:00
Aaron	488fa6e773	ci: Fix sync-releases workflow	2024-06-12 00:48:40 -05:00
Aaron	ea51cc04a9	Fix changelog	2024-06-12 00:46:23 -05:00
Aaron	6d1761533f	ci: Fix compare url generation	2024-06-12 00:45:39 -05:00
GitHub Actions	e35b540a3b	chore(release): wxt v0.18.5	2024-06-12 05:42:26 +00:00
Aaron	7080b36173	ci: Add support for managing multiple changelogs (#712 )	2024-06-12 00:36:28 -05:00
Aaron	4437dc404b	chore(deps): Upgrade braces to 3.0.3 (#711 )	2024-06-11 19:45:07 -05:00
Aaron	b3ddab7bcb	feat: Module system (#672 )	2024-06-11 17:45:34 -05:00
Aaron Klinker	eb3b9bc334	chore: Remove log in tests	2024-06-11 17:43:21 -05:00
Dave Stewart	34ea23030b	docs: Simplify menu configuration (#709 ) Co-authored-by: Dave Stewart <dev@davestewart.co.uk> Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-06-10 16:10:27 -05:00
Aaron	a25721708f	chore: Fix flakey TS config	2024-06-09 10:00:45 -05:00
Aaron	6427e74edb	chore: Fix engine requirements for PNPM	2024-06-09 10:00:31 -05:00
TheOnlyTails	15395a8c46	fix(storage): Add storage area typing for storage keys (#708 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-06-09 09:20:32 -05:00
Aaron	454b076eaf	docs: Add eslintrc info to auto-imports page	2024-06-08 13:40:14 -05:00
Aaron	00597f6790	docs: Fill out web-ext.config.ts docs	2024-06-08 08:20:38 -05:00
rxliuli	ca29feaecf	fix: To fix the issue with Entrypoint Side Effects link errors (#705 )	2024-06-05 19:24:58 -07:00
Aaron	f6420e5fdf	docs: Fix more homepage links	2024-06-04 12:12:25 -05:00
Aaron	78e0646043	docs: Fix home page links and redirects	2024-06-04 08:41:04 -05:00
dependabot[bot]	c15e75e6ab	chore(deps): bump pnpm/action-setup from 3 to 4 (#689 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-06-03 23:06:38 -05:00
Aaron	863a006ee7	docs: Restructure wxt.dev (#701 )	2024-06-03 18:43:25 -05:00
dependabot[bot]	9fd54cfa73	chore(deps-dev): bump execa from 8.0.1 to 9.1.0 (#691 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-06-02 22:35:29 -07:00
Durgaprasad	3535fb77fa	docs: Add SmartEReply to homepage (#697 )	2024-06-02 22:25:24 -07:00
dependabot[bot]	be22fc43cb	chore(deps-dev): bump prettier from 3.1.1 to 3.3.0 (#693 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-06-02 22:25:07 -07:00
dependabot[bot]	3fd09edd25	chore(deps-dev): bump tsx from 4.7.0 to 4.11.2 (#699 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-06-02 22:23:40 -07:00
dependabot[bot]	d36007b453	chore(deps): bump nypm from 0.3.6 to 0.3.8 (#692 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-06-02 22:14:05 -07:00
dependabot[bot]	9eda887fd8	chore(deps): bump linkedom from 0.16.8 to 0.18.2 (#690 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-06-02 22:13:21 -07:00
John Wheeler	b79220dbd1	docs: Adds demo.fun to homepage (#688 ) Co-authored-by: John Wheeler <jwheeler@dinesh.local>	2024-05-31 11:31:44 -07:00
Aaron	927d29535f	fix: Previous version of WXT printed on startup	2024-05-31 08:33:48 -05:00