chore(release): v0.12.1

BREAKING CHANGE: `defineContentScript` and `defineBackground` are now exported from `wxt/sandbox` instead of `wxt/client`. If you use auto-imports, no changes are required. If you have disabled auto-imports, you'll need to manually update your import statements.

.codecov.yml

@@ -0,0 +1,8 @@
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,42 @@
+---
+name: Bug report
+about: Report an issue with WXT
+title: ''
+labels: triage
+assignees: ''
+---
+
+### Describe the bug
+
+A clear and concise description of what the bug is.
+
+### To Reproduce
+
+Upload a ZIP or share a link to a repo representing the minimal reproduction. **_If you don't upload a minimal reproduction, you bug report will be closed._**
+
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+### Expected behavior
+
+A clear and concise description of what you expected to happen.
+
+### Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+### Environment
+
+<!--- Run `npx envinfo --system --browsers --binaries --npmPackages wxt,vite` and paste the output below -->
+
+```
+Paste output here
+```
+
+### Additional context
+
+Add any other context about the problem here, otherwise you can delete this section.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for WXT
+title: ''
+labels: feature
+assignees: ''
+---
+
+### Feature Request
+
+Please describe your feature, be clear and concise. If you have a proposal for required type or API changes, list them here.
+
+#### Is your feature request related to a bug?
+
+If so, add a link here. If not, write "N/A"
+
+### What are the alternatives?
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+### Additional context
+
+Add any other context or screenshots about the feature request here.

.github/actions/setup/action.yml

@@ -0,0 +1,17 @@
+name: Basic Setup
+description: Install PNPM, Node, and dependencies
+runs:
+  using: composite
+  steps:
+    - name: Setup PNPM
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+    - name: Setup NodeJS
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: pnpm
+    - name: Install Dependencies
+      shell: bash
+      run: pnpm install

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'monthly'

.github/workflows/publish-docs.yml

@@ -0,0 +1,27 @@
+name: Publish Docs
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Docker Image Tag
+        required: true
+        default: latest
+
+jobs:
+  publish:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: docker/login-action@v3
+        with:
+          registry: https://${{ secrets.DOCKER_REGISTRY_HOSTNAME }}
+          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
+          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+      - run: pnpm docs:build
+      - run: docker build docs/.vitepress -t ${{ secrets.DOCKER_REGISTRY_HOSTNAME }}/wxt/docs:${{ github.event.inputs.tag || 'latest' }}
+      - run: docker push ${{ secrets.DOCKER_REGISTRY_HOSTNAME }}/wxt/docs:${{ github.event.inputs.tag || 'latest' }}
+      - run: curl -X POST -i ${{ secrets.UPDATE_DOCS_WEBHOOK }}

.github/workflows/release.yml

@@ -7,31 +7,15 @@ jobs:
     uses: './.github/workflows/validate.yml'
 
   publish:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs:
       - validate
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - name: Setup NodeJS
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: |
-          pnpm install --ignore-scripts
-          pnpm build
-          pnpm install
+      - uses: ./.github/actions/setup
 
       - name: Bump and Tag
         run: |

.github/workflows/sync-releases.yml

@@ -0,0 +1,22 @@
+name: Sync Releases
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - CHANGELOG.md
+
+jobs:
+  sync:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: pnpm
+      - run: pnpm sync-releases all --token ${{ secrets.GITHUB_TOKEN }}

.github/workflows/validate.yml

@@ -7,42 +7,79 @@ on:
       - main
 
 jobs:
-  validate:
-    runs-on: ubuntu-20.04
+  formatting:
+    runs-on: ubuntu-22.04
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - name: Setup NodeJS
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: |
-          pnpm install --ignore-scripts
-          pnpm build
-          pnpm install
-
-      - name: Formatting
-        run: pnpm format:check
-
-      - name: Type Check
-        run: pnpm compile
-
-      - name: Build Demo
-        run: |
-          pnpm build:all:chrome-mv2
-          pnpm build:all:chrome-mv3
-          pnpm build:all:firefox-mv2
-          pnpm build:all:firefox-mv3
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm format:check
+  lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm lint
+  type-check:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm compile
+  validate-demo:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm build:all
         working-directory: demo
-
-      - name: Tests
-        run: pnpm test:coverage
+      - run: pnpm tsc --noEmit
+        working-directory: demo
+      - run: pnpm wxt zip
+        working-directory: demo
+      - run: pnpm vitest run
+        working-directory: demo
+  tests:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - name: pnpm test:coverage
+        run: pnpm test:coverage --reporter=default --reporter=hanging-process
+      - uses: codecov/codecov-action@v3
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  windows-tests:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm test run
+  template:
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        template:
+          - react
+          - solid
+          - svelte
+          - vanilla
+          - vue
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: pnpm pack
+      - run: npm i
+        working-directory: templates/${{ matrix.template }}
+      - run: npm i -D ../../wxt-*.tgz
+        working-directory: templates/${{ matrix.template }}
+      - run: pnpm compile
+        if: matrix.template != 'svelte'
+        working-directory: templates/${{ matrix.template }}
+      - run: pnpm check
+        if: matrix.template == 'svelte'
+        working-directory: templates/${{ matrix.template }}
+      - run: pnpm build
+        working-directory: templates/${{ matrix.template }}
+        env:
+          # Debug Vite 5's deprecated CJS support
+          VITE_CJS_TRACE: true

.gitignore

@@ -10,7 +10,6 @@
 /docs/.vitepress/cache
 coverage
 dist
-e2e/project
 node_modules
 TODOs.md
 web-ext.config.js
@@ -18,3 +17,6 @@ web-ext.config.ts
 templates/*/pnpm-lock.yaml
 templates/*/yarn.lock
 templates/*/package-lock.json
+docs/api
+stats.html
+.tool-versions

.prettierignore

@@ -1,7 +1,7 @@
 .output
 coverage
 dist
-e2e/project
 .wxt
 docs/.vitepress/cache
 pnpm-lock.yaml
+CHANGELOG.md

.prettierrc.yml

@@ -1,3 +1,2 @@
 singleQuote: true
-trailingComma: all
 endOfLine: lf

CONTRIBUTING.md

@@ -0,0 +1,106 @@
+# Contributing
+
+Everyone is welcome to contribute to WXT!
+
+If you are changing the docs or fixing a bug, feel free to fork and open a PR.
+
+If you want to add a new feature, please create an issue or discussion first so we can decide if the feature is inline with the vision for WXT.
+
+## Conventional Commits
+
+This project uses [Conventional Commits](https://www.conventionalcommits.org/en) to automate versioning. If you're a new contributor, don't worry about this. When you open a PR, a maintainer will change the PR's title so it's in the style of conventional commits, but that's all.
+
+Maintainers, commits to the `main` branch (either directly or via PRs) must be valid conventional commits.
+
+## Setup
+
+WXT uses `pnpm`, so make sure you have it installed.
+
+```sh
+corepack enable
+```
+
+Then, simply run the install command:
+
+```sh
+pnpm i
+```
+
+## Development
+
+Here are some helpful commands:
+
+```sh
+# Build WXT package
+pnpm build
+```
+
+```sh
+# Build WXT package, then build demo extension
+cd demo
+pnpm build
+```
+
+```sh
+# Build WXT package, then start the demo extension in dev mode
+cd demo
+pnpm dev
+```
+
+```sh
+# Run unit and E2E tests
+pnpm test
+```
+
+```sh
+# Start the docs website locally
+pnpm docs:dev
+```
+
+## Testing
+
+WXT has unit and E2E tests. When making a change or adding a feature, make sure to update the tests or add new ones.
+
+To run tests for a specific file, add the filename at the end of the test command:
+
+```sh
+pnpm test manifest-contents
+```
+
+Unit and E2E tests are ran together via [Vitest workspaces](https://vitest.dev/guide/#workspaces-support).
+
+If you want to manually test a change, you can modify the demo project for your test, but please don't leave those changes committed once you open a PR.
+
+## Templates
+
+Each directory inside `templates/` is it's own standalone project. Simply `cd` into the directory you're updating, install dependencies with `npm` (NOT `pnpm`), and run the relevant commands
+
+```sh
+cd templates/vue
+npm i
+npm run dev
+npm run build
+```
+
+Note that templates are hardcoded to a specific version of `wxt` from NPM, they do not use the local version. PR checks will test your changes against the templates, but if you want to manually do it, update the package.json dependency:
+
+```diff
+  "devDependencies": {
+    "typescript": "^5.3.2",
+    "vite-plugin-solid": "^2.7.0",
+-   "wxt": "^0.8.0"
++   "wxt": "../.."
+  }
+```
+
+Then run `npm i` again.
+
+### Adding Templates
+
+To add a template, copy the vanilla template and give it a new name.
+
+```sh
+cp -r templates/vailla 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.

README.md

@@ -1,32 +1,72 @@
-<h1 align="center">WXT</h1>
+<h1 align="center">
+  <img style="vertical-align:middle" width="44" src="./docs/public/hero-logo.svg" alt="WXT Logo">
+  <span>WXT</span>
+</h1>
 
-<p align="center"><i>Next gen framework for developing web extensions.<br/>Powered by <a href="https://vitejs.dev/" target="_blank">Vite</a>. Inspired by <a href="https://nuxt.com/" target="_blank">Nuxt</a>.</i></p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/wxt?labelColor=black&color=%234fa048"></a>
+  <span> </span>
+  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048"></a>
+  <span> </span>
+  <a href="https://github.com/wxt-dev/wxt/blob/main/LICENSE" target="_blank"><img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048"></a>
+  <!-- Hide code coverage while it's broken -->
+  <!-- <span> </span>
+  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a> -->
+</p>
+
+<p align="center">
+  <span>Next-gen framework for developing web extensions.</span>
+  <br/>
+  <span>⚡</span>
+  <br/>
+  <q><i>It's like Nuxt, but for Chrome Extensions</i></q>
+</p>
+
+<p align="center">
+  <a href="https://wxt.dev" target="_blank">Get Started</a>
+  &bull;
+  <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
+  &bull;
+  <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
+  &bull;
+  <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
+</p>
 
 ![Example CLI Output](./docs/assets/cli-output.png)
 
+## Demo
+
+https://github.com/wxt-dev/wxt/assets/10101283/07359e53-f491-43b6-8e8f-fae94aec8063
+
+## Quick Start
+
+Bootstrap a new project:
+
+```sh
+pnpx wxt@latest init <project-name>
+```
+
+Or see the [installation guide](https://wxt.dev/guide/installation.html) to get started with WXT.
+
 ## Features
 
 - 🌐 Supports all browsers
 - ✅ Supports both MV2 and MV3
-- ⚡ Dev mode with HMR & auto-reload
+- ⚡ Dev mode with HMR & fast reload
 - 📂 File based entrypoints
 - 🚔 TypeScript
 - 🦾 Auto-imports
 - ⬇️ Download and bundle remote URL imports
 - 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
-
-### Todo
-
 - 🖍️ Quickly bootstrap a new project
 - 📏 Bundle analysis
+
+### Coming Soon
+
 - 🤖 Automated publishing
 
-## Get Started
-
-Checkout the [installation guide](https://wxt.dev/get-started/installation.html) to get started with WXT.
-
 ## Contributors
 
-<a href="https://github.com/aklinker1/wxt/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=aklinker1/wxt" />
+<a href="https://github.com/wxt-dev/wxt/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=wxt-dev/wxt" />
 </a>

bin/wxt.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/cli.js';

demo/package.json

@@ -1,24 +1,32 @@
 {
-  "name": "WXT Demo",
+  "name": "demo",
   "version": "1.0.0",
   "description": "Demo extension for WXT",
   "type": "module",
   "scripts": {
     "dev": "pnpm -w build && wxt",
     "build": "pnpm -w build && wxt build",
-    "build:all": "pnpm -w build && run-s -s build:all:*",
+    "build:all": "pnpm -w build && run-s -s 'build:all:*'",
     "build:all:chrome-mv3": "wxt build",
     "build:all:chrome-mv2": "wxt build --mv2",
     "build:all:firefox-mv3": "wxt build -b firefox --mv3",
     "build:all:firefox-mv2": "wxt build -b firefox",
+    "test": "pnpm -w build && vitest",
     "zip": "pnpm -w build && wxt zip",
+    "compile": "pnpm -w build && tsc --noEmit",
     "postinstall": "pnpm -w build && wxt prepare"
   },
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vitest": "^0.34.6",
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@types/webextension-polyfill": "^0.10.0",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "@types/webextension-polyfill": "^0.10.5",
+    "sass": "^1.69.5",
     "wxt": "workspace:*"
   }
 }

demo/src/entrypoints/__tests__/background.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it, vi } from 'vitest';
+import background from '../background';
+
+browser.i18n.getMessage = () => 'fake-message';
+
+const logMock = vi.fn();
+console.log = logMock;
+
+describe('Background Entrypoint', () => {
+  it("should log the extenion's runtime ID", () => {
+    const id = 'some-id';
+    fakeBrowser.runtime.id = id;
+
+    background.main();
+
+    expect(logMock).toBeCalledWith(id);
+  });
+});

demo/src/entrypoints/background.ts

@@ -1,3 +1,5 @@
+import messages from 'public/_locales/en/messages.json';
+
 export default defineBackground(() => {
   console.log(browser.runtime.id);
   logId();
@@ -6,5 +8,26 @@ export default defineBackground(() => {
     chrome: __IS_CHROME__,
     firefox: __IS_FIREFOX__,
     manifestVersion: __MANIFEST_VERSION__,
+    messages,
   });
+
+  // @ts-expect-error: should only accept entrypoints or public assets
+  browser.runtime.getURL('/');
+  browser.runtime.getURL('/background.js');
+  browser.runtime.getURL('/icon/128.png');
+
+  // @ts-expect-error: should only accept known message names
+  browser.i18n.getMessage('test');
+  browser.i18n.getMessage('prompt_for_name');
+  browser.i18n.getMessage('hello', 'Aaron');
+  browser.i18n.getMessage('bye', ['Aaron']);
+  browser.i18n.getMessage('@@extension_id');
+
+  console.log('WXT MODE:', {
+    MODE: import.meta.env.MODE,
+    DEV: import.meta.env.DEV,
+    PROD: import.meta.env.PROD,
+  });
+
+  storage.setItem('session:startTime', Date.now());
 });

demo/src/entrypoints/example-2.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}

demo/src/entrypoints/example-tsx.content.tsx

@@ -0,0 +1,29 @@
+import ReactDOM from 'react-dom/client';
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  async main(ctx) {
+    console.log(browser.runtime.id);
+    logId();
+
+    console.log('WXT MODE:', {
+      MODE: import.meta.env.MODE,
+      DEV: import.meta.env.DEV,
+      PROD: import.meta.env.PROD,
+    });
+
+    const n = (Math.random() * 100).toFixed(1);
+    ctx.setInterval(() => {
+      console.log(n, browser.runtime.id);
+    }, 1e3);
+
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    ReactDOM.createRoot(container).render(<SomeComponent />);
+  },
+});
+
+function SomeComponent() {
+  return <div>Some component</div>;
+}

demo/src/entrypoints/example.sandbox/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

demo/src/entrypoints/iframe-src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Iframe Example</title>
+  </head>
+  <body>
+    <p>Hello iframe page!</p>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

demo/src/entrypoints/iframe-src/main.ts

@@ -0,0 +1 @@
+console.log('iframe 2');

demo/src/entrypoints/iframe.content.ts

@@ -0,0 +1,13 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+
+  main(ctx) {
+    const ui = createContentScriptIframe(ctx, {
+      page: '/iframe-src.html',
+      type: 'overlay',
+      anchor: 'form[action="/search"]',
+    });
+    ui.mount();
+    console.log('Mounted iframe');
+  },
+});

demo/src/entrypoints/injected.content/index.css

@@ -0,0 +1,3 @@
+body {
+  color: blue;
+}

demo/src/entrypoints/location-change.content.ts

@@ -0,0 +1,11 @@
+export default defineContentScript({
+  // Site that uses HTML5 history
+  matches: ['*://*.crunchyroll.com/*'],
+
+  main(ctx) {
+    ctx.addEventListener(window, 'wxt:locationchange', ({ newUrl, oldUrl }) => {
+      console.log('Location changed:', newUrl.href, oldUrl.href);
+    });
+    console.log('Watching for location change...');
+  },
+});

demo/src/entrypoints/main-world.content.ts

@@ -0,0 +1,8 @@
+export default defineContentScript({
+  matches: ['*://*/*'],
+  world: 'MAIN',
+
+  main() {
+    console.log(`Hello from ${location.hostname}!`);
+  },
+});

demo/src/entrypoints/options/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

demo/src/entrypoints/options/main.ts

@@ -1,5 +1,11 @@
-import 'url:https://stats.aklinker1.io/umami.js';
+import 'url:https://code.jquery.com/jquery-3.7.1.slim.min.js';
 
 console.log(browser.runtime.id);
 logId();
 console.log(2);
+
+console.log('WXT MODE:', {
+  MODE: import.meta.env.MODE,
+  DEV: import.meta.env.DEV,
+  PROD: import.meta.env.PROD,
+});

demo/src/entrypoints/overlay.content/index.ts

@@ -1,10 +0,0 @@
-import '../../common/style.css';
-
-export default defineContentScript({
-  matches: ['*://*/*'],
-  async main() {
-    console.log(browser.runtime.id);
-    logId();
-    mountContentScriptUi();
-  },
-});

demo/src/entrypoints/popup.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

demo/src/entrypoints/sandbox.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

demo/src/entrypoints/sidepanel.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sidebar</title>
+  </head>
+  <body>
+    <p>Example</p>
+  </body>
+</html>

demo/src/entrypoints/ui.content/index.ts

@@ -0,0 +1,24 @@
+import '../../common/style.css';
+import './style.css';
+
+export default defineContentScript({
+  matches: ['https://*.duckduckgo.com/*'],
+  cssInjectionMode: 'ui',
+
+  async main(ctx) {
+    const ui = await createContentScriptUi(ctx, {
+      name: 'demo-ui',
+      type: 'inline',
+      append: 'before',
+      anchor: 'form[role=search]',
+      mount: (container) => {
+        const app = document.createElement('div');
+        app.textContent = 'Custom content script UI';
+        container.append(app);
+      },
+    });
+    ui.mount();
+
+    setTimeout(ui.remove, 5000);
+  },
+});

demo/src/entrypoints/ui.content/style.css

@@ -0,0 +1,11 @@
+:root {
+  color-scheme: dark;
+  color: indianred;
+}
+html {
+  background-color: black;
+}
+
+div {
+  padding: 16px;
+}

demo/src/entrypoints/unlisted.ts

@@ -0,0 +1,3 @@
+export default defineUnlistedScript(() => {
+  console.log('injected');
+});

demo/src/public/_locales/en/messages.json

@@ -0,0 +1,29 @@
+{
+  "prompt_for_name": {
+    "message": "What's your name?",
+    "description": "Ask for the user's name"
+  },
+  "hello": {
+    "message": "Hello, $USER$",
+    "description": "Greet the user",
+    "placeholders": {
+      "user": {
+        "content": "$1",
+        "example": "Cira"
+      }
+    }
+  },
+  "bye": {
+    "message": "Goodbye, $USER$. Come back to $OUR_SITE$ soon!",
+    "description": "Say goodbye to the user",
+    "placeholders": {
+      "our_site": {
+        "content": "Example.com"
+      },
+      "user": {
+        "content": "$1",
+        "example": "Cira"
+      }
+    }
+  }
+}

demo/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["../tsconfig.base.json", "./src/.wxt/tsconfig.json"]
+  "extends": ["../tsconfig.base.json", "./.wxt/tsconfig.json"],
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx"
+  }
 }

demo/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import { WxtVitest } from 'wxt/testing';
+
+export default defineConfig({
+  test: {
+    mockReset: true,
+    restoreMocks: true,
+  },
+  plugins: [WxtVitest()],
+});

demo/wxt.config.ts

@@ -2,16 +2,17 @@ import { defineConfig } from 'wxt';
 
 export default defineConfig({
   srcDir: 'src',
-  storeIds: {
-    chrome: '123',
-  },
   manifest: {
-    icons: {
-      '16': 'icon/16.png',
-      '32': 'icon/32.png',
-      '48': 'icon/48.png',
-      '96': 'icon/96.png',
-      '128': 'icon/128.png',
-    },
+    permissions: ['storage'],
+    default_locale: 'en',
+    web_accessible_resources: [
+      {
+        resources: ['/iframe-src.html'],
+        matches: ['*://*.google.com/*'],
+      },
+    ],
+  },
+  alias: {
+    public: 'src/public',
   },
 });

docs/.vitepress/Dockerfile

@@ -0,0 +1,2 @@
+FROM lipanski/docker-static-website:latest
+COPY dist .

docs/.vitepress/components/EntrypointPatterns.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  patterns: Array<[intput: string, output: string]>;
+}>();
+</script>
+
+<template>
+  <table class="no-vertical-dividers">
+    <thead>
+      <tr>
+        <th>Input Pattern</th>
+        <th></th>
+        <th>Output Path</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="pattern of patterns">
+        <td style="white-space: nowrap">
+          <code>entrypoints/{{ pattern[0] }}</code>
+        </td>
+        <td style="padding: 6px; opacity: 50%">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
+            />
+          </svg>
+        </td>
+        <td style="white-space: nowrap">
+          <code>/{{ pattern[1] }}</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

docs/.vitepress/components/Icon.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   name: string;
   icon?: string;
 }>();
+
+const src = computed(() => {
+  if (props.icon) return props.icon;
+  return `https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${props.name.toLowerCase()}.svg`;
+});
 </script>
 
 <template>
-  <img
-    :src="`https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${
-      name?.toLowerCase() ?? icon
-    }.svg`"
-    :alt="`${name} Logo`"
-  />
+  <img :src="src" :alt="`${name} Logo`" />
 </template>
 
 <style scoped>

docs/.vitepress/components/UsingWxtSection.vue

@@ -0,0 +1,203 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useListExtensionDetails, {
+  ChromeExtension,
+} from '../composables/useListExtensionDetails';
+
+// Add extension IDs here. Order doesn't matter, will be sorted by weekly active users
+const chromeExtensionIds = [
+  'ocfdgncpifmegplaglcnglhioflaimkd', // GitHub: Better Line Counts
+  'mgmdkjcljneegjfajchedjpdhbadklcf', // Anime Skip Player
+  'bfbnagnphiehemkdgmmficmjfddgfhpl', // UltraWideo
+  'elfaihghhjjoknimpccccmkioofjjfkf', // StayFree - Website Blocker & Web Analytics
+  'okifoaikfmpfcamplcfjkpdnhfodpkil', // Doozy: Ai Made Easy
+  'lknmjhcajhfbbglglccadlfdjbaiifig', // tl;dv - Record, Transcribe & ChatGPT for Google Meet
+];
+
+const { data } = useListExtensionDetails(chromeExtensionIds);
+const sortedExtensions = computed(() => {
+  if (!data.value?.length) return [];
+
+  return [...data.value]
+    .map((item) => ({
+      ...item,
+      // Sort based on the user count weighted by the rating
+      sortKey: ((item.rating ?? 5) / 5) * item.weeklyActiveUsers,
+    }))
+    .sort((l, r) => r.sortKey - l.sortKey);
+});
+
+function getStoreUrl(extension: ChromeExtension) {
+  const url = new URL(extension.storeUrl);
+  url.searchParams.set('utm_source', 'wxt.dev');
+  return url.href;
+}
+</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>
+      <ul>
+        <li
+          v-for="extension of sortedExtensions"
+          :key="extension.id"
+          class="relative"
+        >
+          <img
+            :src="extension.iconUrl"
+            :alt="`${extension.name} icon`"
+            referrerpolicy="no-referrer"
+          />
+          <div class="relative">
+            <a
+              :href="getStoreUrl(extension)"
+              target="_blank"
+              :title="extension.name"
+              class="extension-name"
+              >{{ extension.name }}</a
+            >
+            <p class="description" :title="extension.shortDescription">
+              {{ extension.shortDescription }}
+            </p>
+          </div>
+          <p class="user-count">
+            <span>{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
+            ><template v-if="extension.rating != null"
+              >,
+              <span>{{ extension.rating }} stars</span>
+            </template>
+          </p>
+        </li>
+      </ul>
+      <p class="centered pr">
+        <a
+          href="https://github.com/wxt-dev/wxt/edit/main/docs/.vitepress/components/UsingWxtSection.vue"
+          target="_blank"
+          >Open a PR</a
+        >
+        to add your extension to the list!
+      </p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.vp-doc {
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .vp-doc {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-doc {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  max-width: 1152px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+li img {
+  width: 116px;
+  height: 116px;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: var(--vp-c-default-soft);
+}
+
+ul {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  align-items: stretch;
+  gap: 16px;
+  list-style: none;
+  margin: 16px 0;
+  padding: 0;
+}
+@media (min-width: 960px) {
+  ul {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+li {
+  margin: 0 !important;
+  padding: 16px;
+  display: flex;
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  flex: 1;
+  gap: 24px;
+  align-items: center;
+}
+
+.centered {
+  text-align: center;
+}
+
+li a,
+li .user-count,
+li .description {
+  padding: 0;
+  margin: 0;
+}
+li .user-count {
+  opacity: 70%;
+  font-size: small;
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
+}
+
+li a {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+}
+li a:hover {
+  text-decoration: underline;
+}
+
+li div {
+  flex: 1;
+}
+
+li .description {
+  opacity: 90%;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+li .extension-name {
+  font-size: large;
+}
+
+.pr {
+  opacity: 70%;
+}
+
+.relative {
+  position: relative;
+}
+</style>

docs/.vitepress/composables/useListExtensionDetails.ts

@@ -0,0 +1,55 @@
+import { ref } from 'vue';
+
+export interface ChromeExtension {
+  id: string;
+  name: string;
+  iconUrl: string;
+  weeklyActiveUsers: number;
+  shortDescription: string;
+  storeUrl: string;
+  rating: number | undefined;
+}
+
+const operationName = 'WxtDocsUsedBy';
+const query = `query ${operationName}($ids:[String!]!) {
+  chromeExtensions(ids: $ids) {
+    id
+    name
+    iconUrl
+    weeklyActiveUsers
+    shortDescription
+    storeUrl
+    rating
+  }
+}`;
+
+export default function (ids: string[]) {
+  const data = ref<ChromeExtension[]>();
+  const err = ref<unknown>();
+
+  fetch('https://queue.wxt.dev/api', {
+    method: 'POST',
+    body: JSON.stringify({
+      operationName,
+      query,
+      variables: { ids },
+    }),
+  })
+    .then(async (res) => {
+      const {
+        data: { chromeExtensions },
+      } = await res.json();
+      data.value = chromeExtensions;
+      err.value = undefined;
+    })
+    .catch((error) => {
+      console.error(error);
+      data.value = undefined;
+      err.value = error;
+    });
+
+  return {
+    data,
+    err,
+  };
+}

docs/.vitepress/config.ts

@@ -1,72 +1,150 @@
-import { defineConfig } from 'vitepress';
+import { DefaultTheme, defineConfig } from 'vitepress';
+import { generateCliDocs } from './plugins/generate-cli-docs';
+import typedocSidebar from '../api/typedoc-sidebar.json';
+
+const filteredTypedocSidebar = typedocSidebar.filter(
+  (item) => item.text !== 'API',
+);
+// Typedoc's markdown theme adds collapse: true to all our items, event ones without any children,
+// so they need to be removed.
+function removeCollapsedWithNoItems(items: DefaultTheme.SidebarItem[]) {
+  for (const item of items) {
+    if (item.items) removeCollapsedWithNoItems(item.items);
+    else delete item.collapsed;
+  }
+}
+removeCollapsedWithNoItems(filteredTypedocSidebar);
+
+const title = 'Next-gen Web Extension Framework';
+const titleSuffix = ' – WXT';
+
+const description =
+  "WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilties for building, zipping, and publishing your extension, it's easy to get started.";
+const ogTitle = `${title}${titleSuffix}`;
+const ogUrl = 'https://wxt.dev';
+const ogImage = 'https://wxt.dev/social-preview.png';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  titleTemplate: `:title${titleSuffix}`,
   title: 'WXT',
-  description: 'Next gen framework for developing web extensions',
+  description,
+  vite: {
+    clearScreen: false,
+    plugins: [generateCliDocs()],
+  },
   lastUpdated: true,
+  sitemap: {
+    hostname: 'https://wxt.dev',
+  },
+
+  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',
+      },
+    ],
+  ],
 
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
-    // logo: '/logo.svg',
+    logo: {
+      src: '/logo.svg',
+      alt: 'WXT logo',
+    },
     editLink: {
-      pattern: 'https://github.com/aklinker1/wxt/edit/main/docs/:path',
+      pattern: 'https://github.com/wxt-dev/wxt/edit/main/docs/:path',
     },
     search: {
       provider: 'local',
     },
 
     nav: [
-      { text: 'Get Started', link: '/get-started/installation.md' },
-      { text: 'Guide', link: '/guide/auto-imports.md' },
-      { text: 'Config', link: '/config.md' },
-      { text: 'API', link: '/api.md' },
+      { text: 'Guide', link: '/guide/installation.md' },
+      { text: 'Entrypoints', link: '/entrypoints/background.md' },
+      { text: 'Examples', link: '/examples.md' },
+      { text: 'API', link: '/api/cli.md' },
     ],
 
     sidebar: {
-      '/get-started/': [
-        {
-          text: 'Get Started',
-          items: [
-            { text: 'Introduction', link: '/get-started/introduction.md' },
-            { text: 'Installation', link: '/get-started/installation.md' },
-            { text: 'Configuration', link: '/get-started/configuration.md' },
-            { text: 'Entrypoints', link: '/get-started/entrypoints.md' },
-            { text: 'Assets', link: '/get-started/assets.md' },
-            { text: 'Build Targets', link: '/get-started/build-targets.md' },
-            { text: 'Publishing', link: '/get-started/publishing.md' },
-            { text: 'Testing', link: '/get-started/testing.md' },
-          ],
-        },
-      ],
       '/guide/': [
         {
           text: 'Guide',
           items: [
+            { text: 'Introduction', link: '/guide/introduction.md' },
+            { text: 'Installation', link: '/guide/installation.md' },
+            { text: 'Configuration', link: '/guide/configuration.md' },
+            { text: 'Entrypoints', link: '/guide/entrypoints.md' },
+            { text: 'Assets', link: '/guide/assets.md' },
+            { text: 'Multiple Browsers', link: '/guide/multiple-browsers.md' },
+            { text: 'Publishing', link: '/guide/publishing.md' },
             { text: 'Auto-imports', link: '/guide/auto-imports.md' },
             { text: 'Manifest.json', link: '/guide/manifest.md' },
             { text: 'Extension APIs', link: '/guide/extension-apis.md' },
+            { text: 'Storage', link: '/guide/storage.md' },
+            { text: 'Content Script UI', link: '/guide/content-script-ui.md' },
+            { text: 'Remote Code', link: '/guide/remote-code.md' },
+            { text: 'Development', link: '/guide/development.md' },
+            { text: 'Testing', link: '/guide/testing.md' },
+            { text: 'Vite', link: '/guide/vite.md' },
           ],
         },
+        {
+          text: 'Other',
+          items: [
+            { text: 'Migrate to WXT', link: '/guide/migrate-to-wxt.md' },
+            { text: 'Compare', link: '/guide/compare.md' },
+          ],
+        },
+      ],
+      '/entrypoints/': [
         {
           text: 'Entrypoints',
           items: [
-            { text: 'Background', link: '/guide/background.md' },
-            { text: 'Bookmarks', link: '/guide/bookmarks.md' },
-            { text: 'Content Scripts', link: '/guide/content-scripts.md' },
-            { text: 'Devtools', link: '/guide/devtools.md' },
-            { text: 'History', link: '/guide/history.md' },
-            { text: 'Newtab', link: '/guide/newtab.md' },
-            { text: 'Options', link: '/guide/options.md' },
-            { text: 'Popup', link: '/guide/popup.md' },
-            { text: 'Sandbox', link: '/guide/sandbox.md' },
-            { text: 'Unlisted Pages', link: '/guide/unlisted-pages.md' },
-            { text: 'Unlisted Scripts', link: '/guide/unlisted-scripts.md' },
+            { text: 'Background', link: '/entrypoints/background.md' },
+            { text: 'Bookmarks', link: '/entrypoints/bookmarks.md' },
+            {
+              text: 'Content Scripts',
+              link: '/entrypoints/content-scripts.md',
+            },
+            { text: 'CSS', link: '/entrypoints/css.md' },
+            { text: 'Devtools', link: '/entrypoints/devtools.md' },
+            { text: 'History', link: '/entrypoints/history.md' },
+            { text: 'Newtab', link: '/entrypoints/newtab.md' },
+            { text: 'Options', link: '/entrypoints/options.md' },
+            { text: 'Popup', link: '/entrypoints/popup.md' },
+            { text: 'Sandbox', link: '/entrypoints/sandbox.md' },
+            { text: 'Sidepanel', link: '/entrypoints/sidepanel.md' },
+            { text: 'Unlisted Pages', link: '/entrypoints/unlisted-pages.md' },
+            {
+              text: 'Unlisted Scripts',
+              link: '/entrypoints/unlisted-scripts.md',
+            },
+          ].sort((l, r) => l.text.localeCompare(r.text)),
+        },
+      ],
+      '/api/': [
+        {
+          items: [
+            { text: 'CLI', link: '/api/cli.md' },
+            {
+              text: 'Modules',
+              items: filteredTypedocSidebar,
+            },
           ],
         },
       ],
     },
 
-    socialLinks: [{ icon: 'github', link: 'https://github.com/aklinker1/wxt' }],
+    socialLinks: [{ icon: 'github', link: 'https://github.com/wxt-dev/wxt' }],
   },
 });

docs/.vitepress/plugins/cli.tpl.md

@@ -0,0 +1,5 @@
+# CLI Reference
+
+> Reference generated from `wxt <command> --help`
+
+{{ DOCS }}

docs/.vitepress/plugins/generate-cli-docs.ts

@@ -0,0 +1,108 @@
+import { relative, resolve } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { format } from 'prettier';
+import consola from 'consola';
+import { execaCommand } from 'execa';
+
+let hasGenerated = false;
+
+const cliDir = resolve('src/cli/commands');
+const cliDirGlob = resolve(cliDir, '**');
+const cliTemplatePath = resolve('docs/.vitepress/plugins/cli.tpl.md');
+const cliPath = resolve('docs/api/cli.md');
+
+const PREFACE = `<!--
+DO NOT EDIT
+Generated by \`wxt/docs/.vitepress/plugins/generate-config-docs.ts\`
+To make changes to the config reference, update the JSDoc in \`src/core/types/external.ts\`.
+-->`;
+
+export function generateCliDocs() {
+  writeFileSync(cliPath, '');
+
+  const generateDocs = async () => {
+    consola.info(`Generating ${relative(process.cwd(), cliPath)}`);
+    try {
+      const res = await execaCommand('pnpm -s wxt --help');
+      const dev = splitInfo(res.stdout);
+      const lines: Array<string | string[]> = [
+        `## \`wxt\``,
+        '```sh',
+        dev.rest,
+        '```',
+      ];
+
+      const commands = await Promise.all(
+        extractCommands(dev.info).map(async (command) => {
+          const res = await execaCommand(`pnpm -s wxt ${command} --help`);
+          const { rest: docs } = splitInfo(res.stdout);
+          return [`## \`wxt ${command}\``, '```sh', docs, '```'];
+        }),
+      );
+      lines.push(...commands);
+
+      const text = await format(
+        PREFACE +
+          '\n\n' +
+          readFileSync(cliTemplatePath, 'utf-8').replace(
+            '{{ DOCS }}',
+            lines.flat().join('\n'),
+          ),
+        { parser: 'markdown' },
+      );
+
+      writeFileSync(cliPath, text);
+      consola.success(`Generated ${relative(process.cwd(), cliPath)}`);
+    } catch (err) {
+      consola.fail(`Failed to generate ${relative(process.cwd(), cliPath)}`);
+      consola.error(err.message);
+    }
+  };
+
+  return {
+    name: 'docs:generate-cli-docs',
+    async config() {
+      if (!hasGenerated) {
+        hasGenerated = true;
+        await generateDocs();
+      }
+    },
+    configureServer(server: any) {
+      server.watcher.add(cliDirGlob);
+    },
+    async handleHotUpdate(ctx: { file: string }) {
+      if (ctx.file === cliTemplatePath || ctx.file.includes(cliDir)) {
+        await generateDocs();
+      }
+    },
+  };
+}
+
+function splitInfo(text: string): { info: string; rest: string } {
+  const infoStart = text.indexOf('For more info,');
+  const infoEnd = text.indexOf('\n\nOptions:');
+
+  if (infoStart === -1 || infoEnd === -1) {
+    return { info: '', rest: text };
+  }
+
+  const info = text.substring(infoStart, infoEnd).trim();
+  const rest = text.replace(info, '').trim().replace('\n\n\n\n', '\n\n');
+
+  return { info, rest };
+}
+
+function extractCommands(info: string): string[] {
+  const commands: string[] = [];
+
+  // Split the info by line and iterate through each line
+  info.split('\n').forEach((line) => {
+    // Use regex to capture the command after "$ wxt " and before "--help"
+    const match = line.match(/\$ wxt (\w+) --help/);
+    if (match && match[1]) {
+      commands.push(match[1]);
+    }
+  });
+
+  return commands;
+}

docs/.vitepress/theme/custom.css

@@ -0,0 +1,77 @@
+/* Colors */
+:root {
+  --wxt-c-green: #53bc4a;
+  --wxt-c-green-1: #67d45e;
+  --wxt-c-green-2: #4fa048;
+  --wxt-c-green-3: #447e3f;
+}
+
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+
+:root {
+  --vp-c-brand: var(--wxt-c-green);
+  --vp-c-brand-1: var(--wxt-c-green-1);
+  --vp-c-brand-2: var(--wxt-c-green-2);
+  --vp-c-brand-3: var(--wxt-c-green-3);
+
+  --vp-button-brand-bg: var(--wxt-c-green);
+  --vp-button-brand-hover-bg: var(--wxt-c-green-2);
+  --vp-button-brand-active-bg: var(--wxt-c-green-3);
+
+  --vp-code-link-color: var(--wxt-c-green);
+
+  /* --vp-c-text-1: var(--wxt-c-green-1); */
+
+  --vp-button-brand-text: var(--vp-c-black);
+  --vp-button-brand-hover-text: var(--vp-c-black);
+  --vp-button-brand-active-text: var(--vp-c-black);
+
+  --vp-custom-block-tip-border: var(--wxt-c-green);
+  --vp-custom-block-tip-text: var(--wxt-c-green);
+
+  /* --vp-code-block-bg: #222422;
+  --vp-code-copy-code-bg: #313431;
+  --vp-code-copy-code-hover-bg: #3c403c; */
+
+  --vp-custom-block-tip-bg: var(--vp-code-block-bg);
+  --vp-custom-block-info-bg: var(--vp-code-block-bg);
+
+  --vp-code-color: #476582;
+}
+
+.vp-doc a {
+  color: var(--wxt-c-green);
+}
+
+.dark {
+  --vp-c-bg: #131413;
+
+  --vp-c-bg-soft: #1a1b1a;
+  --vp-c-bg-soft-up: #1f201f;
+  --vp-c-bg-soft-down: #262926;
+  --vp-c-bg-soft-mute: #242424;
+
+  --vp-c-bg-alt: #171817;
+
+  --vp-c-default: #313136;
+  --vp-c-default-1: #3a3a3c;
+  --vp-c-default-2: #505053;
+  --vp-c-default-3: #2c2c30;
+  --vp-c-default-soft: #252529;
+
+  --vp-code-block-bg: #191a19;
+  --vp-code-copy-code-bg: #212321;
+  --vp-code-copy-code-hover-bg: #292d29;
+
+  --vp-custom-block-info-bg: #191a19;
+
+  --vp-code-color: #c9def1;
+}
+
+.vp-doc .no-vertical-dividers th,
+.vp-doc .no-vertical-dividers td {
+  border: none;
+}
+.vp-doc .no-vertical-dividers tr {
+  border: 1px solid var(--vp-c-divider);
+}

docs/.vitepress/theme/index.ts

@@ -1,9 +1,14 @@
 import DefaultTheme from 'vitepress/theme';
 import Icon from '../components/Icon.vue';
+import EntrypointPatterns from '../components/EntrypointPatterns.vue';
+import UsingWxtSection from '../components/UsingWxtSection.vue';
+import './custom.css';
 
 export default {
   extends: DefaultTheme,
   enhanceApp(ctx) {
     ctx.app.component('Icon', Icon);
+    ctx.app.component('EntrypointPatterns', EntrypointPatterns);
+    ctx.app.component('UsingWxtSection', UsingWxtSection);
   },
 };

docs/api.md

@@ -1,5 +0,0 @@
-# API Reference
-
-:::warning 🚧 Under construction
-This documentation does not exist yet.
-:::

docs/config.md

@@ -1,5 +0,0 @@
-# Config
-
-:::warning 🚧 Under construction
-This documentation does not exist yet.
-:::

docs/entrypoints/background.md

@@ -6,7 +6,12 @@ For MV2, the background is added as a script to the background page. For MV3, th
 
 ## Filenames
 
-`entrypoints/background.ts` is the only recoginzed filename for the background script.
+<EntrypointPatterns
+  :patterns="[
+    ['background.[jt]s', 'background.js'],
+    ['background/index.[jt]s', 'background.js'],
+  ]"
+/>
 
 ## Definition
 
@@ -28,6 +33,10 @@ export default defineBackground({
   persistent: undefined | true | false,
   type: undefined | 'module',
 
+  // Set include/exclude if the background should be removed from some builds
+  include: undefined | string[],
+  exclude: undefined | string[],
+
   // Executed when background is loaded
   main() {
     // ...

docs/entrypoints/bookmarks.md

@@ -4,20 +4,25 @@
 
 ## Filenames
 
-- `entrypoints/bookmarks.html`
-- `entrypoints/bookmarks/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['bookmarks.html', 'bookmarks.html'],
+    ['bookmarks/index.html', 'bookmarks.html'],
+  ]"
+/>
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/content-scripts.md

@@ -0,0 +1,139 @@
+# Content Scripts
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) • [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)
+
+When creating content script entrypoints, they are automatically included in the `manifest.json` along with any CSS files they import.
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['content.[jt]sx?', 'content-scripts/content.js'],
+    ['content/index.[jt]sx?', 'content-scripts/content.js'],
+    ['<name>.content.[jt]sx?', 'content-scripts/<name>.js'],
+    ['<name>.content/index.[jt]sx?', 'content-scripts/<name>.js'],
+  ]"
+/>
+
+## Definition
+
+```ts
+export default defineContentScript({
+  // Set manifest options
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+  excludeMatches: undefined | [],
+  includeGlobs: undefined | [],
+  excludeGlobs: undefined | [],
+  allFrames: undefined | [],
+  runAt: undefined | 'document_start' | 'document_end' | 'document_idle',
+  matchAboutBlank: undefined | true | false,
+  matchOriginAsFallback: undefined | true | false,
+  world: undefined | 'ISOLATED' | 'MAIN',
+
+  // Set include/exclude if the background should be removed from some builds
+  include: undefined | string[],
+  exclude: undefined | string[],
+
+  // Configure how CSS is injected onto the page
+  cssInjectionMode: undefined | "manifest" | "manual" | "ui",
+
+  main(ctx) {
+    // Executed when content script is loaded
+  },
+});
+```
+
+> All manifest options default to `undefined`.
+
+When defining multiple content scripts, content script entrypoints that have the same set of options will be merged into a single `content_script` item in the manifest.
+
+## Context
+
+Old content scripts are not automatically stopped when an extension updates and reloads. Often, this leads to "Invalidated context" errors in production when a content script from an old version of your extension tries to use a extension API.
+
+WXT provides a utility for managing this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
+
+```ts
+export default defineContentScript({
+  // ...
+  main(ctx: ContentScriptContext) {
+    // Add custom listeners for stopping work
+    ctx.onInvalidated(() => {
+      // ...
+    });
+
+    // Stop fetch requests
+    fetch('...url', { signal: ctx.signal });
+
+    // Timeout utilities
+    ctx.setTimeout(() => {
+      // ...
+    }, 5e3);
+    ctx.setInterval(() => {
+      // ...
+    }, 60e3);
+  },
+});
+```
+
+The class extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) and provides other utilities for stopping a content script's logic once it becomes invalidated.
+
+:::tip
+When working with content scripts, **you should always use the `ctx` object to stop any async or future work.**
+
+This prevents old content scripts from interfering with new content scripts, and prevents error messages from the console in production.
+:::
+
+## CSS
+
+To include CSS with your content script, import the CSS file at the top of your entrypoint.
+
+```
+
+<srcDir>
+└─ entrypoints/
+   └─ overlay.content/
+      ├─ index.ts
+      └─ style.css
+```
+
+```ts
+// entrypoints/overlay.content/index.ts
+import './style.css';
+
+export default defineContentScript({
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+
+  main(ctx) {
+    // ...
+  },
+});
+```
+
+Any styles imported in your content script will be added to that content script's `css` array in your `manifest.json`:
+
+```json
+// .output/chrome-mv3/manifest.json
+{
+  "content_scripts": [
+    {
+      "matches": ["*://google.com/*", "*://duckduckgo.com/*"],
+      "js": ["content-scripts/overlay.js"],
+      "css": ["content-scripts/overlay.css"]
+    }
+  ]
+}
+```
+
+To disable this behavior, set `cssInjectionMode` to `"manual"` or `"ui"`.
+
+```ts
+export default defineContentScript({
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+  cssInjectionMode: 'manual',
+
+  main(ctx) {
+    // ...
+  },
+});
+```

docs/entrypoints/css.md

@@ -0,0 +1,44 @@
+# CSS
+
+WXT can build CSS entrypoints individually. CSS entrypoints are always unlisted.
+
+See [Content Script CSS](/entrypoints/content-scripts#css) documentation for the recomended approach to include CSS with a content script.
+
+:::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.
+:::
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['<name>.(css|scss|sass|less|styl|stylus)', '<name>.css'],
+    ['<name>/index.(css|scss|sass|less|styl|stylus)', '<name>.css'],
+    ['content.(css|scss|sass|less|styl|stylus)', 'content-scripts/content.css'],
+    ['content/index.(css|scss|sass|less|styl|stylus)', 'content-scripts/content.css'],
+    ['<name>.content.(css|scss|sass|less|styl|stylus)', 'content-scripts/<name>.css'],
+    ['<name>.content/index.(css|scss|sass|less|styl|stylus)', 'content-scripts/<name>.css'],
+  ]"
+/>
+
+## Definition
+
+```css
+body {
+  /* Plain CSS file */
+}
+```
+
+Follow Vite's guide to setup a preprocessor: https://vitejs.dev/guide/features.html#css-pre-processors
+
+```sh
+pnpm i sass
+```
+
+```scss
+body {
+  h1 {
+    /* ...*/
+  }
+}
+```

docs/entrypoints/devtools.md

@@ -4,20 +4,27 @@
 
 ## Filenames
 
-- `entrypoints/devtools.html`
-- `entrypoints/devtools/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['devtools.html', 'devtools.html'],
+    ['devtools/index.html', 'devtools.html'],
+  ]"
+/>
 
 ## Definition
 
 Plain old HTML file.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/history.md

@@ -4,20 +4,25 @@
 
 ## Filenames
 
-- `entrypoints/history.html`
-- `entrypoints/history/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['history.html', 'history.html'],
+    ['history/index.html', 'history.html'],
+  ]"
+/>
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/newtab.md

@@ -4,20 +4,25 @@
 
 ## Filenames
 
-- `entrypoints/newtab.html`
-- `entrypoints/newtab/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['newtab.html', 'newtab.html'],
+    ['newtab/index.html', 'newtab.html'],
+  ]"
+/>
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/options.md

@@ -4,15 +4,17 @@
 
 ## Filenames
 
-- `entrypoints/options.html`
-- `entrypoints/options/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['options.html', 'options.html'],
+    ['options/index.html', 'options.html'],
+  ]"
+/>
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -21,6 +23,9 @@ Plain old HTML file.
     <meta name="manifest.open_in_tab" content="true|false" />
     <meta name="manifest.chrome_style" content="true|false" />
     <meta name="manifest.browser_style" content="true|false" />
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/popup.md

@@ -4,15 +4,17 @@
 
 ## Filenames
 
-- `entrypoints/popup.html`
-- `entrypoints/popup/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['popup.html', 'popup.html'],
+    ['popup/index.html', 'popup.html'],
+  ]"
+/>
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -27,6 +29,10 @@ Plain old HTML file.
       }"
     />
     <meta name="manifest.type" content="page_action|browser_action" />
+    <meta name="manifest.browser_style" content="true|false" />
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/sandbox.md

@@ -0,0 +1,37 @@
+# Sandbox
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/)
+
+:::tip Chromium Only
+Firefox does not support sandboxed pages.
+:::
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['entrypoints/sandbox.html', 'sandbox.html'],
+    ['entrypoints/sandbox/index.html', 'sandbox.html'],
+    ['entrypoints/<name>.sandbox.html', '<name>.html` '],
+    ['entrypoints/<name>.sandbox/index.html', '<name>.html` '],
+  ]"
+/>
+
+## Definition
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```

docs/entrypoints/sidepanel.md

@@ -0,0 +1,37 @@
+# Side Panel
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/sidePanel/) • [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars)
+
+:::warning
+Chrome added support for sidepanels in Manifest V3, they are not available in Manfiest V2.
+:::
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['entrypoints/sidepanel.html', 'sidepanel.html'],
+    ['entrypoints/sidepanel/index.html', 'sidepanel.html'],
+    ['entrypoints/<name>.sidepanel.html', '<name>.html` '],
+    ['entrypoints/<name>.sidepanel/index.html', '<name>.html` '],
+  ]"
+/>
+
+## Definition
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```

docs/entrypoints/unlisted-pages.md

@@ -12,8 +12,12 @@ HTML pages that are built by Vite, but are not included in the manifest.
 
 ## Filenames
 
-- `entrypoints/<name>.html`
-- `entrypoints/<name>/index.html`
+<EntrypointPatterns
+  :patterns="[
+    ['<name>.html', '<name>.html'],
+    ['<name>/index.html', '<name>.html'],
+  ]"
+/>
 
 Pages are accessible at `'/<name>.html'`:
 
@@ -25,15 +29,16 @@ console.log(url); // "chrome-extension://<id>/<name>.html"
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Title</title>
+    <!-- Set include/exclude if the page should be removed from some builds -->
+    <meta name="manifest.include" content="['chrome', ...]" />
+    <meta name="manifest.exclude" content="['chrome', ...]" />
   </head>
   <body>
     <!-- ... -->

docs/entrypoints/unlisted-scripts.md

@@ -0,0 +1,37 @@
+# Unlisted Scripts
+
+TypeScript files that are built, but are not included in the manifest.
+
+You are responsible for loading/running these scripts where needed.
+
+## Filenames
+
+<EntrypointPatterns
+  :patterns="[
+    ['<name>.[jt]sx?', '<name>.js'],
+    ['<name>/index.[jt]sx?', '<name>.js'],
+  ]"
+/>
+
+## Definition
+
+```ts
+export default defineUnlistedScript(() => {
+  // Executed when script is loaded
+});
+```
+
+or
+
+```ts
+export default defineUnlistedScript({
+  // Set include/exclude if the script should be removed from some builds
+  include: undefined | string[],
+  exclude: undefined | string[],
+
+  // Executed when script is loaded
+  main() {
+    // ...
+  },
+});
+```

docs/examples.md

@@ -0,0 +1,27 @@
+# Examples
+
+Simple walkthroughs to accomplish common tasks or patterns with WXT.
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+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();
+})
+
+</script>
+
+<ul>
+    <li v-if="examples == null">
+        Loading...
+    </li>
+    <template v-else>
+        <li v-for="example of examples">
+        <a :href="example.url" target="_blank">{{ example.name }}</a>
+        </li>
+    </template>
+</ul>
+
+> Full code available at [`wxt-dev/wxt-examples`](https://github.com/wxt-dev/wxt-examples)

docs/get-started/build-targets.md

@@ -1,46 +0,0 @@
-# Build Targets
-
-You can build an extension for any combination of browser and manifest verison. Different browsers and manifest versions support different APIs and entrypoints, so be sure to check that your extension functions as expected for each target.
-
-Separate build targets are written to their own output directories:
-
-```
-<root>
-└─ .output
-   ├─ chrome-mv3
-   ├─ firefox-mv2
-   ├─ edge-mv3
-   └─ ...
-```
-
-## Target Browser
-
-To build for a specific browser, pass the `-b --browser` flag from the CLI:
-
-```
-
-wxt --browser firefox
-wxt build --browser firefox
-
-```
-
-By default, it will build for `chrome`. When excluding the [`--mv2` or `--mv3` flags](#target-manifest-version), it will default to the commonly accepted manifest version used with that browser.
-
-| Browser          | Default Manifest Version |
-| ---------------- | :----------------------: |
-| `chrome`         |            3             |
-| `firefox`        |            2             |
-| `safari`         |            2             |
-| `edge`           |            3             |
-| Any other string |            3             |
-
-## Target Manifest Version
-
-To build for a specific manifest version, pass either the `--mv2` flag or `--mv3` flag from the CLI.
-
-```sh
-wxt --mv2
-wxt build --mv2
-```
-
-When the `-b --browser` flag is not passed, it defaults to `chrome`. So here, we're targetting MV2 for Chrome.

docs/get-started/installation.md

@@ -1,121 +0,0 @@
-# Installation
-
-Bootstrap a new project or start from scratch.
-
-## Bootstrap Project
-
-:::warning 🚧 The `wxt init` command is not implemented yet.
-
-See [From Scratch](#from-scratch) or reference one of the templates below.
-
-:::
-
-:::code-group
-
-```sh [pnpm]
-pnpx wxt@latest init <project-name>
-```
-
-```sh [npm]
-npx wxt@latest init <project-name>
-```
-
-:::
-
-There are several starting templates available.
-
-| TypeScript                                                                                           |
-| ---------------------------------------------------------------------------------------------------- |
-| <Icon name="TypeScript" /> [`vanilla`](https://github.com/aklinker1/wxt/tree/main/templates/vanilla) |
-| <Icon name="Vue" /> [`vue`](https://github.com/aklinker1/wxt/tree/main/templates/vue)                |
-| <Icon name="React" /> [`react`](https://github.com/aklinker1/wxt/tree/main/templates/react)          |
-| <Icon name="Svelte" /> [`svelte`](https://github.com/aklinker1/wxt/tree/main/templates/svelte)       |
-
-> All templates are in TypeScript. WXT does not support JS at this time.
-
-## From Scratch
-
-Create a new NPM project:
-
-:::code-group
-
-```sh [pnpm]
-pnpm init <project-name>
-cd <project-name>
-echo 'shamefully-hoist=true' >> .npmrc
-```
-
-```sh [npm]
-npm init <project-name>
-cd <project-name>
-```
-
-```sh [yarn]
-yarn init <project-name>
-cd <project-name>
-```
-
-:::
-
-Then install `wxt`:
-
-:::code-group
-
-```sh [pnpm]
-pnpm add wxt
-```
-
-```sh [npm]
-npm i --save wxt
-```
-
-```sh [yarn]
-yarn add wxt
-```
-
-:::
-
-Add your first entrypoint:
-
-```ts
-// entrypoints/background.ts
-export default defineBackground(() => {
-  console.log(`Hello from ${browser.runtime.id}!`);
-});
-```
-
-Finally, add scripts to your `package.json`:
-
-```json
-{
-  "scripts": {
-    "dev": "wxt", // [!code ++]
-    "dev:firefox": "wxt --browser firefox", // [!code ++]
-    "build": "wxt build", // [!code ++]
-    "build:firefox": "wxt build --browser firefox", // [!code ++]
-    "postinstall": "wxt prepare" // [!code ++]
-  }
-}
-```
-
-> You can skip `*:firefox` scripts if you don't want to support Firefox
-
-## Development
-
-Once you've installed WXT, 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.
-:::
-
-## Next Steps
-
-You're ready to build a out your web extension!
-
-- Learn how to [add entrypoints](./entrypoints.md) like the popup, background, or content scripts
-- [Configure WXT](./configuration.md) by creating a `wxt.config.ts` file

docs/get-started/publishing.md

@@ -1,5 +0,0 @@
-# Publishing
-
-:::warning 🚧 Not implemented yet!
-For now, manually zip the output directory and upload to stores by hand.
-:::

docs/get-started/testing.md

@@ -1,5 +0,0 @@
-# Testing
-
-:::warning 🚧 Testing utils are not implemented yet!
-Eventually, the plan is to have an integration with Vitest.
-:::

docs/guide/auto-imports.md

@@ -3,27 +3,39 @@
 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](/get-started/testing.md).
+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`](/config.md#browser) from `webextension-polyfill`
-- [`defineContentScript`](/config.md#defiencontentscript) from `wxt/client`
-- [`defineBackground`](/config.md#definebackgroundscript) from `wxt/client`
+- [`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`
+- [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi) from `wxt/client`
+- [`fakeBrowser`](/api/wxt/testing/variables/fakeBrowser) from `wxt/testing`
 
-And more. All [`wxt/client`](/config.md#wxtclient) APIs can be used without imports.
+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/**/*`
+- `<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
 
@@ -52,7 +64,7 @@ import { defineConfig } from 'wxt';
 export default defineConfig({
   imports: {
     // Add auto-imports for vue fuctions like createApp, ref, computed, watch, toRaw, etc...
-    preset: ['vue'],
+    presets: ['vue'],
   },
 });
 ```

docs/guide/compare.md

@@ -0,0 +1,49 @@
+# Compare
+
+Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework), another web extension framework.
+
+## Overview
+
+| Features                                             |             WXT             |                  Plasmo                  |
+| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: |
+| Supports all browsers                                |             ✅              |                    ✅                    |
+| MV2 Support                                          |             ✅              |                    ✅                    |
+| MV3 Support                                          |             ✅              |                    ✅                    |
+| Create Extension ZIPs                                |             ✅              |                    ✅                    |
+| Create Firefox Sources ZIP                           |             ✅              |                    ❌                    |
+| First-class TypeScript support                       |             ✅              |                    ✅                    |
+| File based entrypoint discovery                      |             ✅              |                    ✅                    |
+| Inline entrypoint config                             |             ✅              |                    ✅                    |
+| Auto-imports                                         |             ✅              |                    ❌                    |
+| Supports all frontend frameworks                     |             ✅              |      🟡 Only React, Vue, and Svelte      |
+| Framework specific entrypoints (like `Popup.tsx`)    |   🟡 `.html` `.ts` `.tsx`   | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` |
+| Automated publishing                                 |       🟡 Coming soon        |                    ✅                    |
+| Remote Code Bundling (Google Analytics)              |             ✅              |                    ✅                    |
+| <strong style="opacity: 50%">Dev Mode</strong>       |                             |                                          |
+| `.env` Files                                         |             ✅              |                    ✅                    |
+| Opens browser and install extension                  |             ✅              |                    ❌                    |
+| HMR for UIs                                          |             ✅              |              🟡 React only               |
+| Reload HTML Files on Change                          |             ✅              |       🟡 Reloads entire extension        |
+| Reload Content Scripts on Change                     |             ✅              |       🟡 Reloads entire extension        |
+| Reload Background on Change                          | 🟡 Reloads entire extension |       🟡 Reloads entire extension        |
+| <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |
+| Storage                                              |             ✅              |                    ✅                    |
+| Messaging                                            |       🟡 Coming soon        |                    ✅                    |
+| Content Script UI                                    |             ✅              |                    ✅                    |
+
+## Dev Mode
+
+WXT's main goal is improving the development experience (DX) of creating web extensions. There are two things WXT does differently:
+
+1. Automatically opens a browser with the extension installed when starting development
+2. Reload each part of the extension individually rather than reloading the entire extension
+
+Opening a browser automatically makes it super easy to start and stop development without having to manually load the extension in your browser.
+
+Reloading each part of the extension individually improves your iteration speed while developing UIs. This is because reloading the entire extension on every change will close the popup and any tabs open to an extension page, like options. If you save a file associated with a UI and a content script while working on the UI, it will randomly close because it needed to reload the extension when the content script changed. This interupts your development flow and is really annoying.
+
+WXT solves this problem by reloading HTML pages and content scripts individually (when possible) to keep your UIs open while you develop them. This is a MV3 feature, so if you're developing a MV2 extension, you'll get the same dev experience as Plasmo.
+
+:::info
+Unfortunately, there isn't an API for reloading the background page/service worker individually, so if you change a file used by the background, the entire extension will reload. See [Issue #53](https://github.com/wxt-dev/wxt/issues/53) for more details.
+:::

docs/guide/configuration.md

@@ -1,8 +1,6 @@
 # Configuration
 
-WXT's behavior can be configured via the `wxt.config.ts` file. In this file, you can add Vite plugins, change the directory strucutre of your project, and provide permissions or other fields to the `<outdir>/manifest.json`.
-
-However, since WXT is an opinionated framework, some things cannot be configured.
+WXT's behavior can be configured via the `wxt.config.ts` file. In this file, you can add Vite plugins, change the directory strucutre of your project, and set fields on your `manifest.json`.
 
 ## Config File
 
@@ -17,7 +15,7 @@ export default defineConfig({
 ```
 
 :::info
-See the [API reference](/api.md) for a full list of options.
+See the [Config reference](/api/wxt/interfaces/InlineConfig) for a full list of options.
 :::
 
 ## Directory Config
@@ -25,13 +23,24 @@ See the [API reference](/api.md) for a full list of options.
 WXT allows you to edit several directories to your liking:
 
 - `root` (default: `process.cwd()`) - Root of the WXT project
-- `srcDir` (default: `<root>`) - Location of all your source code
+- `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](/get-started/assets.md)
+- `publicDir` (default: `<srcDir>/public`) - Folder containing [public assets](/guide/assets)
 
 ### Example
 
-If you want a `src/` directory to contain all your source code, and you want to rename `entrypoints/` to `entries/`, your config would look like this:
+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';

docs/guide/content-script-ui.md

@@ -0,0 +1,326 @@
+# Content Script UI
+
+There are three ways to mount a UI inside a content script:
+
+[[toc]]
+
+Each has their own set of advantages and disadvantages.
+
+| Method     | Isolated Styles | HMR | Use page's context |
+| ---------- | :-------------: | :-: | :----------------: |
+| Integrated |       ❌        | ❌  |         ✅         |
+| ShadowRoot |       ✅        | ❌  |         ✅         |
+| IFrame     |       ✅        | ✅  |         ❌         |
+
+## Integrated
+
+Integrated content script UIs are injected alongside the content of a page. This means that they are affected by CSS on that page.
+
+You can control how CSS is injected for an integrated content script UI with the [`cssInjectionMode`](/api/wxt/interfaces/ContentScriptBaseDefinition#cssinjectionmode) property.
+
+:::code-group
+
+```ts [Vanilla]
+// entrypoints/example-ui.content.ts
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      container.remove();
+    });
+  },
+});
+```
+
+```ts [Vue]
+// entrypoints/example-ui.content/index.ts
+import { createApp } from 'vue';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Create the app and mount it to the UI container
+    const app = createApp(...);
+    app.mount(container);
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Unmount the app and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      app.unmount();
+      container.remove();
+    });
+  },
+});
+```
+
+```tsx [React]
+// entrypoints/example-ui.content/index.tsx
+import ReactDOM from 'react-dom/client';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Create a root on the UI container and render a component
+    const root = ReactDOM.createRoot(container);
+    root.render(...);
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Unmount the root and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      root.unmount();
+      container.remove();
+    });
+  },
+});
+```
+
+```ts [Svelete]
+// entrypoints/example-ui.content/index.ts
+import App from './App.svelte';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Create the Svelte app inside the UI container
+    const app = new App({
+      target: ui,
+    });
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Destroy the app and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      app.$destroy();
+      container.remove();
+    });
+  },
+});
+```
+
+```tsx [Solid]
+// entrypoints/example-ui.content/index.ts
+import { render } from 'solid-js/web';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Render your app to the UI container
+    const unmount = render(() => ..., container)
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Unmount the app and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      unmount();
+      container.remove();
+    });
+  },
+});
+```
+
+:::
+
+## ShadowRoot
+
+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 provides a helper function, [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi), that abstracts all the `ShadowRoot` setup away, making it easy to create UIs with isolated CSS.
+
+To use `createContentScriptUi`, follow these steps:
+
+1. Import your CSS file at the top of your content script
+2. Set [`cssInjectionMode: "ui"`](/api/wxt/interfaces/ContentScriptBaseDefinition#cssinjectionmode) inside `defineContentScript`
+3. Define your UI with `createContentScriptUi()`
+4. Mount the UI so it is visible to users
+
+```ts
+// 1. Import the style
+import './style.css';
+
+export default defineContentScript({
+  // 2. Set cssInjectionMode
+  cssInjectionMode: 'ui',
+
+  async main(ctx) {
+    // 3. Define your UI
+    const ui = await createContentScriptUi(ctx, {
+      name: 'example-ui',
+      anchor: '#anchor',
+      type: 'inline',
+      mount(container) {
+        // Define how your UI will be mounted inside the container
+        const app = document.createElement('p');
+        app.textContent = 'Hello world!';
+        container.append(app);
+      },
+    });
+
+    // 4. Mount the UI
+    ui.mount();
+  },
+});
+```
+
+> `createContentScriptUi` will automatically remove the UI from the page when the content script is invalidated.
+
+See the [API Reference](/api/wxt/client/functions/createContentScriptUi) for the complete list of options.
+
+:::info TailwindCSS
+`createContentScriptUi` 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:.
+:::
+
+When using a frontend framework for your UI, you'll need to unmount the app when the UI is removed. This is accomplished by returning an app reference from the `mount` option and by passing in a custom `onRemoved` option:
+
+:::code-group
+
+```ts [Vue]
+import { createApp } from 'vue';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    const app = createApp(App);
+    app.mount(container);
+    return app;
+  },
+  onRemove(app) {
+    app.unmount();
+  },
+});
+```
+
+```tsx [React]
+import ReactDOM from 'react-dom/client';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    const root = ReactDOM.createRoot(container);
+    root.render(...);
+    return root;
+  },
+  onRemove(root) {
+    root.unmount();
+  },
+});
+```
+
+```ts [Svelte]
+import App from './App.svelte';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    return new App({ target: container });
+  },
+  onRemove(app) {
+    app.$destry();
+  },
+});
+```
+
+```tsx [Solid]
+import { render } from 'solid-js/web';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    return render(() => ..., container);
+  },
+  onRemove(unmount) {
+    unmount();
+  },
+});
+```
+
+:::
+
+:::warning
+The `mount(container)` and `onRemove(app)` options passed into `createContentScriptUi` **_are different from_** the `ui.mount()` and `ui.remove()` functions available on the returned UI object.
+
+You don't need to pass anything into `ui.mount()` and `ui.remove()` because **_you already defined how and where the UI will be mounted_** in the options passed into `createContentScriptUi`.
+:::
+
+## IFrame
+
+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, [`createContentScriptIframe`](/api/wxt/client/functions/createContentScriptUi), which simplifies setting up the IFrame.
+
+1. Create an HTML page that will be loaded into your IFrame
+   ```html
+   <!-- entrypoints/example-iframe.html -->
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="UTF-8" />
+       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+       <title>Your Content Script IFrame</title>
+     </head>
+     <body>
+       <!-- ... -->
+     </body>
+   </html>
+   ```
+1. Add the page to the manifest's `web_accessible_resouces`
+   ```ts
+   // wxt.config.ts
+   export default defineConfig({
+     manifest: {
+       web_accessible_resources: [
+         {
+           resources: ['example-iframe.html'],
+           matches: [...],
+         },
+       ],
+     },
+   });
+   ```
+1. Create and mount the IFrame
+
+   ```ts
+   export default defineContentScript({
+     // ...
+     async main(ctx) {
+       // Define the UI
+       const ui = await createContentScriptIframe(ctx, {
+         page: '/example-iframe.html',
+         anchor: '#anchor',
+         type: 'inline',
+       });
+
+       // Add styles to the iframe like width
+       ui.iframe.width = 123;
+
+       // Show UI to user
+       ui.mount();
+     },
+   });
+   ```
+
+See the [API Reference](/api/wxt/client/functions/createContentScriptUi) for the complete list of options.

docs/guide/content-scripts.md

@@ -1,60 +0,0 @@
-# Content Scripts
-
-[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) • [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)
-
-## Filenames
-
-When a filename matches the pattern below, it is added as a content script in the `manifest.json`.
-
-- `entrypoints/content.tsx?`
-- `entrypoints/<name>.content.tsx?`
-- `entrypoints/content/index.tsx?`
-- `entrypoints/<name>.content/index.tsx?`
-
-## Definition
-
-```ts
-export default defineContentScript({
-  // Set manifest options
-  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-  excludeMatches: undefined | [],
-  includeGlobs: undefined | [],
-  excludeGlobs: undefined | [],
-  allFrames: undefined | [],
-  runAt: undefined | 'document_start' | 'document_end' | 'document_idle',
-  matchAboutBlank: undefined | true | false,
-  matchOriginAsFallback: undefined | true | false,
-  world: undefined | 'ISOLATED' | 'MAIN',
-
-  main() {
-    // Executed when content script is loaded
-  },
-});
-```
-
-> All manifest options default to `undefined`.
-
-## CSS
-
-To include CSS with your content script, import the CSS file at the top of your entrypoint:
-
-```
-
-<srcDir>
-└─ entrypoints/
-   └─ overlay.content/
-      ├─ index.ts
-      └─ style.css
-```
-
-```ts
-// entrypoints/overlay.content/index.ts
-import './style.css';
-
-export default defineContentScript({
-  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-  main() {
-    // ...
-  },
-});
-```

docs/guide/development.md

@@ -0,0 +1,59 @@
+# Development
+
+WXT's main goal is providing the best DX it possibly can. When running your extension in dev mode, each part of your extension is reloaded separately when possible.
+
+|                     | HMR | Reloaded individually | Reload extension |                    Restart browser                     |
+| ------------------- | :-: | :-------------------: | :--------------: | :----------------------------------------------------: |
+| HTML File           |     |          ✅           |
+| HTML Dependency     | ✅  |
+| MV3 Content Script  |     |          ✅           |
+| MV2 Content Script  |     |                       |        ✅        |
+| Background          |     |                       |        ✅        |
+| manifest.json       |     |                       |                  | 🟡 See [#16](https://github.com/wxt-dev/wxt/issues/16) |
+| `wxt.config.ts`     |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
+| `web-ext.config.ts` |     |                       |                  | 🟡 See [#10](https://github.com/wxt-dev/wxt/issues/10) |
+
+## Configure Browser Startup
+
+WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
+
+:::code-group
+
+```ts [wxt.config.ts]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  runner: {
+    // Runner config
+  },
+});
+```
+
+```ts [web-ext.config.ts]
+import { defineRunnerConfig } from 'wxt';
+
+export default defineRunnerConfig({
+  // Runner config
+});
+```
+
+:::
+
+`web-ext`'s browser discovery is very limitted. By default, it only guesses at where Chrome and Firefox are installed. If you've customized your install locations, you may need to tell `web-ext` where the binaries/executables are located using the [`binaries` option](/api/wxt/interfaces/ExtensionRunnerConfig#binaries). For other Chromium based browsers, like Edge or Opera, you'll need to explicitly list them in the `binaries` option as well, otherwise they will open in Chrome by default.
+
+```ts
+// ~/web-ext.config.ts
+import { defineRunnerConfig } from 'wxt';
+
+export default defineRunnerConfig({
+  binaries: {
+    chrome: '/path/to/chrome-beta', // Use Chrome Beta instead of regular Chrome
+    firefox: 'firefoxdeveloperedition', // Use Firefox Developer Edition instead of regular Firefox
+    edge: '/path/to/edge', // Open MS Edge when running "wxt -b edge"
+  },
+});
+```
+
+:::tip
+When configuring browser binaries, it's helpful to put them in `~/web-ext.config.ts` instead of the project directory's `web-ext.config.ts` file. When placed in your home directory (`~/`), this config will be used by all WXT projects, so you only need to configure the binaries once.
+:::

docs/guide/entrypoints.md

@@ -1,8 +1,8 @@
 # Defining Entrypoints
 
-Entrypoints are any HTML, JS, or CSS file that needs to be bundled and included with the extension.
+An "entrypoint" is any HTML, JS, or CSS file that needs to be bundled and included with the extension.
 
-They may or may not be listed in the extension's `manifest.json`.
+Entrypoints may or may not be listed in the extension's `manifest.json`.
 
 ## `/entrypoints` Directory
 
@@ -11,13 +11,12 @@ In WXT, entrypoints are defined by adding a file to the `entrypoints/` directory
 For example, a project that looks like this:
 
 ```
-<root>
-├─ entrypoints/
-│  ├─ background.ts
-│  ├─ content.ts
-│  ├─ injected.ts
-│  └─ popup.html
-└─ wxt.config.ts
+<rootDir>
+└─ entrypoints/
+   ├─ background.ts
+   ├─ content.ts
+   ├─ injected.ts
+   └─ popup.html
 ```
 
 would result in the following `manifest.json`:
@@ -43,18 +42,18 @@ would result in the following `manifest.json`:
 }
 ```
 
-If a file uses a [special name recognized by WXT](/get-started/entrypoints.md), it will be added to the manifest. In this case:
+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.*.js`
+- `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 they have a name that is not recognized by WXT, they are still built and included in the extension, but they are unlisted and do not show up in the manifest.
+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 bundled to `<outdir>/injected.js` and is accessible via `browser.runtime.getURL("/injected.js")`.
+In this case, `injected.ts` gets output to `<outdir>/injected.js` and is accessible via `browser.runtime.getURL("/injected.js")`.
 
 :::info
-See [`/entrypoints` folder](/get-started/entrypoints.md) documentation for a full list of recognized entrypoint filenames.
+See [`/entrypoints` folder](/entrypoints/background) documentation for a full list of recognized entrypoint filenames.
 :::
 
 ## Entrypoint Options
@@ -85,5 +84,5 @@ export default defineContentScript({
 ```
 
 :::info
-For a full list of entrypoints and each of their options, see the [`/entrypoints` folder](/get-started/entrypoints.md) documentation.
+For a full list of entrypoints and each of their options, see the [`/entrypoints` folder](/entrypoints/background) documentation.
 :::

docs/guide/extension-apis.md

@@ -11,12 +11,14 @@ And that's it! Your extension now supports Chrome, Firefox, Safari, Edge, and ot
 
 ## Basic Usage
 
-The `browser` variable is available globally via [auto-imports](/guide/auto-imports.md), or it can be imported manually.
+The `browser` variable is available globally via [auto-imports](/guide/auto-imports), or it can be imported manually.
 
 ```ts
-import browser from 'webextension-polyfill';
+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.
@@ -51,6 +53,13 @@ Follow [Chrome's message passing guide](https://developer.chrome.com/docs/extens
 
 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(() => {
@@ -66,19 +75,12 @@ export default defineBackground(() => {
 });
 ```
 
-```ts
-// popup/main.ts
-const res = await browser.runtime.sendMessage('ping');
-
-console.log('res'); // "pong"
-```
-
 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/proxy-service/) - "A light-weight, type-safe wrapper around the `browser.runtime` messaging APIs"
-- [`@webext-core/proxy-service`](https://webext-core.aklinker1.io/guide/messaging/) - "Create TRPC-like services that can be called from anywhere but run in the background"
+- [`@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

docs/guide/installation.md

@@ -0,0 +1,149 @@
+# Installation
+
+Bootstrap a new project, start from scratch, or [migrate an existing project](/guide/migrate-to-wxt).
+
+## Bootstrap Project
+
+:::code-group
+
+```sh [pnpm]
+pnpx wxt@latest init <project-name>
+```
+
+```sh [npm]
+npx wxt@latest init <project-name>
+```
+
+:::
+
+There are several starting templates available.
+
+| TypeScript                                                                                                                                              |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <Icon name="TypeScript" /> [`vanilla`](https://github.com/wxt-dev/wxt/tree/main/templates/vanilla)                                                      |
+| <Icon name="Vue" /> [`vue`](https://github.com/wxt-dev/wxt/tree/main/templates/vue)                                                                     |
+| <Icon name="React" /> [`react`](https://github.com/wxt-dev/wxt/tree/main/templates/react)                                                               |
+| <Icon name="Svelte" /> [`svelte`](https://github.com/wxt-dev/wxt/tree/main/templates/svelte)                                                            |
+| <Icon name="Solid" icon="https://www.solidjs.com/img/favicons/favicon-32x32.png" /> [`solid`](https://github.com/wxt-dev/wxt/tree/main/templates/solid) |
+
+:::info
+All templates default to TypeScript. Rename the file extensions to `.js` to use JavaScript instead.
+:::
+
+## From Scratch
+
+Create a new NPM project:
+
+:::code-group
+
+```sh [pnpm]
+mkdir project-name
+cd project-name
+pnpm init
+echo 'shamefully-hoist=true' >> .npmrc
+```
+
+```sh [npm]
+mkdir project-name
+cd project-name
+npm init
+```
+
+```sh [yarn]
+mkdir project-name
+cd project-name
+yarn init
+```
+
+:::
+
+Then install `wxt`:
+
+:::code-group
+
+```sh [pnpm]
+pnpm add -D wxt
+```
+
+```sh [npm]
+npm i --save-dev wxt
+```
+
+```sh [yarn]
+yarn add --dev wxt
+```
+
+:::
+
+Add your first entrypoint:
+
+```ts
+// entrypoints/background.ts
+export default defineBackground(() => {
+  console.log(`Hello from ${browser.runtime.id}!`);
+});
+```
+
+Finally, add scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "wxt", // [!code ++]
+    "dev:firefox": "wxt --browser firefox", // [!code ++]
+    "build": "wxt build", // [!code ++]
+    "build:firefox": "wxt build --browser firefox", // [!code ++]
+    "zip": "wxt zip", // [!code ++]
+    "zip:firefox": "wxt zip --browser firefox", // [!code ++]
+    "postinstall": "wxt prepare" // [!code ++]
+  }
+}
+```
+
+## Migrate an Existing Project
+
+Before starting the migration, it is recommended to run `pnpx wxt@latest init` to see what a basic project looks like. Once you have an understanding of how WXT projects are structured, you're ready to convert the project, using the initialized project as a reference.
+
+Migrating a project to WXT comes down to a few steps:
+
+1. Install WXT and remove any old build tools: `pnpm i -D wxt`
+1. Refactoring/move your entrypoints to the `entrypoints` directory
+1. Moving public assets to the `public` directory
+1. Update the dev and build scripts to use WXT
+1. Ensure project is compatible with Vite, which is used under the hood to bundle your extension
+
+:::info
+Since projects vary greatly in setup, [start a discussion on GitHub](https://github.com/wxt-dev/wxt/discussions/new/choose) if you need help migrating your project to WXT.
+:::
+
+## Development
+
+Once you've installed WXT, you can start the development server using the `dev` script.
+
+```sh
+pnpm dev
+```
+
+:::tip 🎉&ensp;Well done!
+
+The dev command will build the extension for development, open the browser, and reload the different parts of the extension when you save changes.
+:::
+
+:::details Development Manifest
+When running the dev command, WXT will make several changes to your `manifest.json` to improve your development experience:
+
+- If missing, add a background script/service worker to enable fast reloads
+- Add serveral `permissions` and `host_permissions` to enable HMR and fast reloads
+- Modify the CSP to allow connections with the dev server
+- Remove `content_scripts` and register them at runtime so they can be easily reloaded when you save a file
+
+If you're an experienced web extension developer and think the dev manifest looks wrong, this is why. Run a production build with `wxt build` to see the unmodified `manifest.json`.
+:::
+
+## Next Steps
+
+You're ready to build your web extension!
+
+- Learn how to [add entrypoints](./entrypoints) like the popup, options page, or content scripts
+- [Configure WXT](./configuration) by creating a `wxt.config.ts` file
+- Checkout [example projects](https://github.com/wxt-dev/wxt-examples) to see how to perfom common tasks with WXT

docs/guide/introduction.md

@@ -1,8 +1,15 @@
+---
+head:
+  - - link
+    - rel: canonical
+      href: https://wxt.dev
+---
+
 # Introduction
 
 WXT is a free and open source framework for building web extensions in an conventional, intuative, and safe way **_for all browsers_**.
 
-WXT comes with full TypeScript support and auto-imports. Sounds familiar? That's right, **_WXT was based off of Nuxt_** and aims to provide the same greate DX and features.
+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.
 
 ![Example build output](../assets/cli-output.png)
 
@@ -28,5 +35,5 @@ Production builds are optimized for store review, changing as few files as possi
 In addition, WXT fully supports Firefox's source code requirements when using a bundler. It will automatically create and upload a ZIP file of your source code.
 
 :::info
-See [Publishing](./publishing.md) for more info around production builds.
+See [Publishing](./publishing) for more info around production builds.
 :::

docs/guide/manifest.md

@@ -2,7 +2,7 @@
 
 The manifest.json is generated at build-time based on files in your `entrypoints` directory and your `wxt.config.ts`.
 
-## Customization
+## 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.
 
@@ -47,9 +47,9 @@ The [manifest's `version` and `version_name`](https://developer.chrome.com/docs/
 }
 ```
 
-### `icons`
+## `icons`
 
-The [manifest's `icons`](https://developer.chrome.com/docs/extensions/mv3/manifest/icons/) property needs to be set in the config file. The files should be added to WXT's [`public` directory](/get-started/assets#public-directory).
+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/
@@ -60,21 +60,27 @@ public/
 └─ 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
+
+<<< @/../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: '/icon-16.png',
-      24: '/icon-24.png',
-      48: '/icon-48.png',
-      96: '/icon-96.png',
-      128: '/icon-128.png',
+      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`
 
 [Permissions](https://developer.chrome.com/docs/extensions/reference/permissions/) must be listed in the manifest config.
 
@@ -86,9 +92,9 @@ export default defineConfig({
 });
 ```
 
-### Localization
+## 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](/get-started/assets#public-directory).
+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/

docs/guide/migrate-to-wxt.md

@@ -0,0 +1,57 @@
+---
+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)!
+
+## Overview
+
+Always start by generating a new vanilla project and merging it into your project one file at a time.
+
+```sh
+cd path/to/your/project
+pnpx 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 />
+
+Every project is different, so there's no one-solution-fits-all to migrating your project. Just make sure `wxt dev` runs, `wxt build` results in a working extension, and the list of permissions in the `manifest.json` hasn't changed. If all that looks good, you've finished migrating your extension!
+
+## Popular Tools/Frameworks
+
+Here's specific steps for other popuplar frameworks/build tools.
+
+### `vite-plugin-web-extension`
+
+Since you're already using Vite, it's a simple refactor.
+
+1. Install `wxt`
+2. Move and refactor your entrypoints to WXT's style (with a default export)
+3. Update package.json scripts to use `wxt`
+4. Add `"postinstall": "wxt prepare"` script
+5. Move the `manifest.json` into `wxt.config.ts`
+6. Move any custom settings from `vite.config.ts` into `wxt.config.ts`'s
+7. Compare `dist/manifest.json` to `.output/*/manifest.json`, they should have the same content as before. If not, tweak your entrypoints and config to get as close as possible.
+
+### `plasmo`
+
+1. Install `wxt`
+2. Move entrypoints into `entrypoints/` directory, merging the named exports used to configure your JS entrypoints into WXT's default export
+3. Move public `assets/*` into the `public/` directory
+4. If you use CSUI, migrate to WXT's `createContentScriptUi`
+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.

docs/guide/multiple-browsers.md

@@ -0,0 +1,114 @@
+# Multiple Browsers
+
+You can build an extension for any combination of browser and manifest verison. Different browsers and manifest versions support different APIs and entrypoints, so be sure to check that your extension functions as expected for each target.
+
+Separate build targets are written to their own output directories:
+
+```
+<rootDir>
+└─ .output
+   ├─ chrome-mv3
+   ├─ firefox-mv2
+   ├─ edge-mv3
+   └─ ...
+```
+
+## Target Browser
+
+To build for a specific browser, pass the `-b --browser` flag from the CLI:
+
+```
+
+wxt --browser firefox
+wxt build --browser firefox
+
+```
+
+By default, it will build for `chrome`. When excluding the [manifest version flags](#target-manifest-version), it will default to the commonly accepted manifest version for that browser.
+
+| Browser          | Default Manifest Version |
+| ---------------- | :----------------------: |
+| `chrome`         |            3             |
+| `firefox`        |            2             |
+| `safari`         |            2             |
+| `edge`           |            3             |
+| 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.
+:::
+
+## Target Manifest Version
+
+To build for a specific manifest version, pass either the `--mv2` flag or `--mv3` flag from the CLI.
+
+```sh
+wxt --mv2
+wxt build --mv2
+```
+
+When the `-b --browser` flag is not passed, it defaults to `chrome`. So here, we're targetting MV2 for Chrome.
+
+## Customizing Entrypoints
+
+There are several ways to customize entrypoint definitions per browser.
+
+First, you can use either the `include` or `exclude` option to include or exclude the entrypoint from specific browsers. Here are some examples
+
+:::code-group
+
+```ts [Background]
+export default defineBackground({
+  // Only include a background script when targeting chrome
+  include: ['chrome'],
+});
+```
+
+```ts [Content Script]
+export default defineContentScript({
+  // Do not add this content script to the manifest when targeting firefox
+  exclude: ['firefox'],
+});
+```
+
+```html [HTML page]
+<!-- entrypoints/options.html -->
+<html>
+  <head>
+    <!-- Don't include the options page for safari -->
+    <meta name="manifest.exclude" content="['safari']" />
+  </head>
+</html>
+```
+
+:::
+
+Second, you can change individual options per-browser:
+
+:::code-group
+
+```ts [Background]
+export default defineBackground({
+  persistent: {
+    // Use a non-persistent background script for just safari
+    safari: false,
+  },
+});
+```
+
+```ts [Content Script]
+export default defineContentScript({
+  matches: {
+    // Run the content script on different pages for each browser
+    chrome: ['*://*.google.com/*'],
+    firefox: ['*://*.duckduckgo.com/*'],
+    edge: ['*://*.bing.com/*'],
+  },
+});
+```
+
+:::
+
+:::warning
+Only `defineBackground` and `defineContentScript` support per-browser options right now.
+:::

docs/guide/publishing.md

@@ -0,0 +1,178 @@
+# Publishing
+
+WXT offers several utilities that simplify the publishing process.
+
+## First Time Publishing
+
+If you're publishing an extension to a store for the first time, it's recommended that you manually navigate the process. Each store has unique steps and requirements that you need to familiarize yourself with.
+
+Each store requires that a ZIP file be uploaded. You can generate these using the `wxt zip` command:
+
+```sh
+wxt zip
+wxt zip -b firefox
+# etc
+```
+
+Generated ZIP files are stored in the `.output` directory.
+
+## Automation
+
+To automate releasing updates, use the [`publish-browser-extension`](https://www.npmjs.com/package/publish-browser-extension) package.
+
+:::info
+🚧 WXT plans to eventually incorporate the `publish-browser-extension` package into its own `wxt submit` command.
+:::
+
+1. Install the necessary dependencies:
+
+   ```sh
+   pnpm add -D publish-browser-extension env-cmd
+   ```
+
+2. Add scripts to your `package.json` file:
+
+   ```json
+   {
+     "scripts": {
+       "submit": "env-cmd -f .env.submit -- publish-extension",
+       "submit:dry": "env-cmd -f .env.submit -- publish-extension --dry-run"
+     }
+   }
+   ```
+
+3. Create a `.env.submit` file and include the code below. If you're not publishing to certain stores, simply ignore their respective variables.
+
+   ```txt
+   CHROME_EXTENSION_ID=""
+   CHROME_CLIENT_ID=""
+   CHROME_CLIENT_SECRET=""
+   CHROME_REFRESH_TOKEN=""
+
+   FIREFOX_EXTENSION_ID=""
+   FIREFOX_JWT_ISSUER=""
+   FIREFOX_JWT_SECRET=""
+
+   EDGE_PRODUCT_ID=""
+   EDGE_CLIENT_ID=""
+   EDGE_CLIENT_SECRET=""
+   EDGE_ACCESS_TOKEN_URL=""
+   ```
+
+   > Each value will be filled in during the next step.
+
+4. Run `npx publish-extension --help` for assistance with filling out all the values. Insert the obtained values within the double quotes.
+
+5. ZIP all the targets you plan to publish, in this case Chrome and Firefox.
+
+   ```sh
+   wxt zip
+   wxt zip -b firefox
+   ```
+
+6. Test your credentials by running the `submit:dry` command:
+
+   ```sh
+   pnpm submit:dry \
+     --chrome-zip .output/your-extension-X.Y.Z-chrome.zip \
+     --firefox-zip .output/your-extension-X.Y.Z-firefox.zip \
+     --firefox-sources-zip .output/your-extension-X.Y.Z-sources.zip \
+     --edge-zip .output/your-extension-X.Y.Z-chrome.zip
+   ```
+
+7. Upload and submit your extension for review:
+
+   ```sh
+   pnpm submit \
+     --chrome-zip .output/your-extension-X.Y.Z-chrome.zip \
+     --firefox-zip .output/your-extension-X.Y.Z-firefox.zip \
+     --firefox-sources-zip .output/your-extension-X.Y.Z-sources.zip \
+     --edge-zip .output/your-extension-X.Y.Z-chrome.zip
+   ```
+
+## GitHub Action
+
+Here's an example of a GitHub Action to automate submiting new versions of your extension for review. Ensure that you've added all required secrets used in the workflow to the repo's settings.
+
+```yml
+# TODO
+```
+
+## Chrome Web Store
+
+✅ Automated • [Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard) • [Publishing Docs](https://developer.chrome.com/docs/webstore/publish/)
+
+To create a ZIP for Chrome:
+
+```sh
+wxt zip
+```
+
+## Firefox Addon Store
+
+✅ Automated • [Developer Dashboard](https://addons.mozilla.org/developers/) • [Publishing Docs](https://extensionworkshop.com/documentation/publish/submitting-an-add-on/)
+
+Firefox requires you to upload a ZIP of your source code. This allows them to rebuild your extension and review the code in a readable way. More details can be found in [Firefox's docs](https://extensionworkshop.com/documentation/publish/source-code-submission/).
+
+WXT and `publish-browser-extension` both fully support generating and automatically submitting a source code ZIP.
+
+When you run `wxt zip -b firefox`, your sources are zipped into the `.output` directory along with your built extension. WXT is configured to exclude certain files such as config files, hidden files, and tests. However, it's important to manually check the ZIP to ensure it only contains the files necessary to rebuild your extension.
+
+To customize which files are zipped, add the `zip` option to your config file.
+
+```ts
+// wxt.config.ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  zip: {
+    // ...
+  },
+});
+```
+
+If it's your first time submitting to the Firefox Addon Store, or if you've updated your project layout, always test your sources ZIP! The commands below should allow you to rebuild your extension from inside the extracted ZIP.
+
+:::code-group
+
+```sh [pnpm]
+pnpm i
+pnpm zip:firefox
+```
+
+```sh [npm]
+npm i
+npm run zip:firefox
+```
+
+```sh [yarn]
+yarn
+yarn zip:firefox
+```
+
+:::
+
+Ensure that you have a `README.md` or `SOURCE_CODE_REVIEW.md` file with the above commands so that the Firefox team knows how to build your extension.
+
+## Safari
+
+🚧 Not automated at this time
+
+:::warning
+🚧 WXT does not currently support automated publishing for Safari. Safari extensions require a native MacOS or iOS app wrapper, which WXT cannot create at this time. For now, if you want to publish to Safari, follow this guide:
+
+https://developer.apple.com/documentation/safariservices/safari_web_extensions/distributing_your_safari_web_extension
+
+:::
+
+## Edge Addons
+
+✅ Automated • [Developer Dashboard](https://aka.ms/PartnerCenterLogin) • [Publishing Docs](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension)
+
+No need to create a specific ZIP for Edge. If you're already publishing to the Chrome Web Store, you can reuse your Chrome ZIP.
+
+However, if you have features specifically for Edge, create a separate ZIP with:
+
+```sh
+wxt zip -b edge
+```

docs/guide/remote-code.md

@@ -0,0 +1,31 @@
+# Remote Code
+
+WXT will automatically download and bundle imports with the `url:` prefix so the extension does not depend of remote code, [a requirement from Google for MV3](https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code).
+
+## Google Analytics
+
+For example, you can import google analytics:
+
+```ts
+// utils/google-analytics.ts
+import 'url:https://www.googletagmanager.com/gtag/js?id=G-XXXXXX';
+
+window.dataLayer = window.dataLayer || [];
+// NOTE: This line is different from Google's documentation
+window.gtag = function () {
+  dataLayer.push(arguments);
+};
+gtag('js', new Date());
+gtag('config', 'G-XXXXXX');
+```
+
+Then you can import this in your HTML files to enable Google Analytics:
+
+```ts
+// popup/main.ts
+import '~/utils/google-analytics';
+
+gtag('event', 'event_name', {
+  key: 'value',
+});
+```

docs/guide/sandbox.md

@@ -1,32 +0,0 @@
-# Sandbox
-
-[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/)
-
-:::tip Chromium Only
-Firefox does not support sandboxed pages.
-:::
-
-## Filenames
-
-- `entrypoints/sandbox.html`
-- `entrypoints/<name>.sandbox.html`
-- `entrypoints/sandbox/index.html`
-- `entrypoints/<name>.sandbox/index.html`
-
-## Definition
-
-Plain old HTML file.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
-  </head>
-  <body>
-    <!-- ... -->
-  </body>
-</html>
-```

docs/guide/sidepanel.md

@@ -1,32 +0,0 @@
-# Side Panel
-
-[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/sidePanel/)
-
-:::tip Chromium Only
-Firefox does not support sandboxed pages.
-:::
-
-## Filenames
-
-- `entrypoints/sidepanel.html`
-- `entrypoints/<name>.sidepanel.html`
-- `entrypoints/sidepanel/index.html`
-- `entrypoints/<name>.sidepanel/index.html`
-
-## Definition
-
-Plain old HTML file.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
-  </head>
-  <body>
-    <!-- ... -->
-  </body>
-</html>
-```

docs/guide/storage.md

@@ -0,0 +1,36 @@
+# Storage API
+
+WXT's storage API is powered by `unstorage`. See [their docs](https://unstorage.unjs.io/usage#usage-1) for more details.
+
+## Overview
+
+:::code-group
+
+```ts [native]
+const { installDate } = await browser.storage.local.get('installDate');
+await browser.storage.local.set({ key: 'value' });
+```
+
+```ts [wxt/browser]
+const installDate = await storage.get('local:installDate');
+await storage.setItem('key', 'value');
+```
+
+:::
+
+Use the `"local:"`, `"session:"`, `"sync:"`, and `"managed:"` prefixes to specify which storage area to use.
+
+## Customization
+
+WXT also provides a driver for `unstorage`. To customize the `storage` object's setup, like removing the prefixes and using a single storage area, you can create your own storage:
+
+```ts
+// storage.ts
+export default createStorage({
+  driver: webExtensionDriver({ storageArea: 'local' }),
+});
+```
+
+:::note
+`wxt/browser` re-exports all of `unstorage`, which is where `createStorage` comes from.
+:::

docs/guide/testing.md

@@ -0,0 +1,162 @@
+# Testing
+
+WXT provides several utils for writing tests.
+
+## Unit tests
+
+If you're using auto-imports (enabled by default), [Vitest](https://vitest.dev/) is the only testing framework that supports them.
+
+If you want to use a different testing library/framework (like Jest, mocha, node:test, etc), you can keep using it, but you have two options:
+
+1. Switch to Vitest (recommended)
+2. Configure the testing library manually
+   - Disable auto-imports by setting `imports: false` in your `wxt.config.ts` file
+   - Manually add globals normally provided by WXT (like `__BROWSER__`) that you consume to the global scope before accessing them (`globalThis.__BROWSER__ = "chrome"`)
+
+### Vitest Setup
+
+Install vitest and add the `WxtVitest` plugin to your `vitest.config.ts` file.
+
+```sh
+pnpm i -D vitest
+```
+
+```ts
+// <root>/vitest.config.ts
+import { defineConfig } from 'vitest/config';
+import { WxtVitest } from 'wxt/testing';
+
+export default defineConfig({
+  plugins: [WxtVitest()],
+  test: {
+    server: {
+      deps: {
+        // Add any dependencies that import webextension-polyfill here, otherwise tests will attempt to import the real polyfill, breaking the
+        // TODO: Auto-detect these dependencies inside `WxtVitest` so maintaining this list manually isn't necessary
+        inline: [...],
+      },
+    },
+  },
+});
+```
+
+And that's it. You're ready to start writing tests.
+
+### Writing Tests
+
+Here's a very basic test, written with a few different testing libraries, with a few different approaches for mocking the `browser` global.
+
+:::code-group
+
+```ts [Vitest]
+import { describe, it, expect, vi } from 'vitest';
+
+function logRuntimeId() {
+  // Vitest automatically mocks "browser" with "fakeBrowser"
+  console.log(browser.runtime.id);
+}
+
+describe('logRuntimeId', () => {
+  it("should log the extension's runtime ID", () => {
+    // Set a known ID on fakeBrowser for the test
+    const id = 'some-runtime-id';
+    fakeBrowser.runtime.id = id;
+    const logSpy = vi.spyOn(console, 'log');
+
+    logRuntimeId();
+
+    expect(logSpy).toBeCalledWith(id);
+  });
+});
+```
+
+```ts [Jest - Manual Mock]
+import { fakeBrowser } from 'wxt/testing';
+import { browser } from 'wxt/browser';
+
+function logRuntimeId() {
+  console.log(browser.runtime.id);
+}
+
+// Manually mock
+jest.mock('wxt/browser', () => {
+  const { fakeBrowser } = require('wxt/testing');
+  return { browser: fakeBrowser };
+});
+
+describe('logRuntimeId', () => {
+  it("should log the extension's runtime ID", () => {
+    // Set a known ID on fakeBrowser for the test
+    const id = 'some-runtime-id';
+    fakeBrowser.runtime.id = id;
+    const logSpy = jest.spyOn(console, 'log');
+
+    logRuntimeId();
+
+    expect(logSpy).toBeCalledWith(id);
+  });
+});
+```
+
+```ts [node:test - Parameterized]
+import { describe, it, mock } from 'node:test';
+import { assert } from 'node:assert';
+import { fakeBrowser } from 'wxt/testing';
+import { browser } from 'wxt/browser';
+
+// Add browser as a parameter so fakeBrowser can be passed instead of browser
+function logRuntimeId(browser = browser) {
+  console.log(browser.runtime.id);
+}
+
+describe('logRuntimeId', () => {
+  it("should log the extension's runtime ID", () => {
+    // Set a known ID on fakeBrowser for the test
+    const id = 'some-runtime-id';
+    fakeBrowser.runtime.id = id;
+    console.log = mock.fn();
+
+    // pass in fakeBrowser during tests
+    logRuntimeId(fakeBrowser);
+
+    assert.deepStrictEqual(console.log.mock.calls[0].arguments, [id]);
+  });
+});
+```
+
+:::
+
+:::warning
+Without mocking the `browser` variable, you'll see errors like this:
+
+```
+This script should only be loaded in a browser extension.
+```
+
+:::
+
+WXT provides an in-memory, partial implementation of `browser`, [`fakeBrowser`](/api/wxt/testing/variables/fakeBrowser), from the [`@webext-core/fake-browser`](https://webext-core.aklinker1.io/guide/fake-browser/) package. `fakeBrowser` works with all testing frameworks/libraries. See their docs for a list of [implemented APIs](https://webext-core.aklinker1.io/guide/fake-browser/implemented-apis.html) and more example tests.
+
+## E2E Tests
+
+WXT does not provide any utils for running E2E tests. There are two libraries you can use to run E2E tests for any chrome extension.
+
+- [`playwright`](https://playwright.dev/docs/chrome-extensions) (recommended) - "A high-level API to automate web browsers"
+- [`puppeteer`](https://pptr.dev/guides/chrome-extensions) - "A high-level API to control headless Chrome over the DevTools Protocol"
+
+:::info
+Note that both only support running tests on Chrome.
+:::
+
+Before running tests with either of these tools, you must build the extension with `wxt build` and then load the extension from the output directory in a new tab.
+
+To test an extension's UI, like the popup or options page, you'll need to know the extension's ID to open the URL directly.
+
+> _chrome-extension://`browser.runtime.id`/popup.html_
+
+- Playwright provides an API to get your extension ID after it has been installed. [See their docs](https://playwright.dev/docs/chrome-extensions#testing).
+- Puppeteer requires you know the ID before installing the extension, so you can hard code it into the URLs you open. Follow [Chrome's guide](https://developer.chrome.com/docs/extensions/mv3/manifest/key/) to setup a consistent runtime id.
+
+:::info
+You cannot test popups in their normal popup window, you have to open them in a tab.
+:::

docs/guide/unlisted-scripts.md

@@ -1,16 +0,0 @@
-# Unlisted Scripts
-
-TypeScript files that are built, but are not included in the manifest.
-
-## Filenames
-
-- `entrypoints/<name>.tsx?`
-- `entrypoints/<name>/index.tsx?`
-
-## Definition
-
-Unlike the background and content scripts, you can define this script's logic in the main scope.
-
-```ts
-// Code goes here
-```

docs/guide/vite.md

@@ -0,0 +1,35 @@
+# Vite
+
+Under the hood, WXT uses Vite to bundle your web extension.
+
+## Basic Vite Configuration
+
+All of Vite's config can be customized by setting the `vite` configuration in your `wxt.config.ts` file.
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  vite: () => ({
+    // Same as `defineConfig({ ... })` inside vite.config.ts
+  }),
+});
+```
+
+## 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.
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  vite: () => ({
+    plugins: [
+      // ...
+    ],
+  }),
+});
+```

docs/index.md

@@ -1,49 +1,98 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
-titleTemplate: 'Next Generation Web Extension Framework'
+title: Next-gen Web Extension Framework
 
 hero:
   name: WXT
-  text: Next gen framework for web extensions
-  tagline: Powered by Vite, inspired by Nuxt.
+  text: Next-gen Web Extension Framework
+  tagline: An open source tool that makes Chrome Extension devlopment faster than ever before.
+  image:
+    src: /hero-logo.svg
+    alt: WXT
   actions:
     - theme: brand
       text: Get Started
-      link: /get-started/installation
+      link: /guide/installation
     - theme: alt
       text: Learn More
-      link: /get-started/introduction
+      link: /guide/introduction
 
 features:
   - icon: 🌐
     title: Supported Browsers
-    details: Chrome, Firefox, Edge, Safari, and any Chromium based browser.
+    details: WXT will build extensions for Chrome, Firefox, Edge, Safari, and any Chromium based browser.
+    link: /guide/multiple-browsers
+    linkText: Read docs
   - icon: ✅
     title: MV2 and MV3
-    details: Supports both manifest versions for each browser.
+    details: Build Manifest V2 or V3 extensions for any browser using the same codebase.
+    link: /guide/multiple-browsers#target-manifest-version
+    linkText: Read docs
   - icon: ⚡
     title: Fast Dev Mode
-    details: HMR for UIs and fast reload for background and content scripts.
+    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 inside the project.
+    details: Manifest is generated based on files in the project with inline configuration.
+    link: /guide/entrypoints
+    linkText: See project structure
   - icon: 🚔
     title: TypeScript
-    details: Scale projects with full TS support.
+    details: Create large projects with confidence using TS by default.
   - icon: 🦾
     title: Auto-imports
     details: Nuxt-like auto-imports to speed up development.
+    link: /guide/auto-imports
+    linkText: Read docs
   - icon: ⬇️
     title: Bundle Remote Code
     details: Downloads and bundles remote code imported from URLs.
+    link: /guide/remote-code
+    linkText: Read docs
   - icon: 🎨
-    title: Frontend framework agnostic
+    title: Frontend Framework Agnostic
     details: Works with any front-end framework with a Vite plugin.
+    link: /guide/configuration#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
+    linkText: See templates
+  - icon: 📏
+    title: Bundle Analysis
+    details: Tools for analyizing the final extension bundle and minimizing your extension's size.
   - icon: 🤖
     title: Automated Publishing
-    details: 'TODO: Automatically zip, upload, and release extensions.'
-  - icon: 📏
-    title: Bundle analysis
-    details: 'TODO: Tools for analyizing the final extension bundle.'
+    details: 'Coming soon. Automatically zip, upload, and release extensions.'
 ---
+
+<section class="vp-doc">
+  <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/b32e6766-ec11-45a4-9677-226ee4718e1c" controls></video>
+      <br />
+      <small>
+        And who doesn't appreciate a beautiful CLI?
+      </small>
+    </div>
+  </div>
+</section>
+
+<ClientOnly>
+  <UsingWxtSection />
+</ClientOnly>
+
+<style scoped>
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+</style>