From 3cf858fd6da9e0844dad4e3a96267037338cbcce Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Sun, 21 Dec 2025 16:57:45 +0100
Subject: [PATCH 01/11] clean: remove unnecessary/unused code, create real
 const UPPER_CASE and fix vitepress vite version conflict

---
 docs/.vitepress/components/BlogHome.vue       |  9 ++--
 docs/.vitepress/components/BlogLayout.vue     | 25 +++++++---
 .../.vitepress/components/BlogPostPreview.vue |  6 +--
 .../components/EntrypointPatterns.vue         |  8 +--
 docs/.vitepress/components/ExampleSearch.vue  | 50 ++++---------------
 .../components/ExampleSearchFilterByItem.vue  |  5 +-
 .../components/ExampleSearchResult.vue        |  5 +-
 docs/.vitepress/components/Icon.vue           |  8 +--
 docs/.vitepress/config.ts                     | 38 +++++++-------
 docs/.vitepress/loaders/blog.data.ts          | 21 +++++++-
 docs/.vitepress/utils/head.ts                 |  2 +-
 docs/.vitepress/utils/menus.ts                | 11 +---
 package.json                                  |  5 ++
 13 files changed, 90 insertions(+), 103 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index 35aadf90e..23a421d16 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-// @ts-expect-error: Vitepress data-loader magic, this import is correct
-import { data } from '../loaders/blog.data';
+import { data, type Post } from '../loaders/blog.data';
 import BlogPostPreview from './BlogPostPreview.vue';
 
-const posts = computed(() =>
+const posts = computed<Post[]>(() =>
   data
     .map((post) => ({
       ...post,
@@ -60,11 +59,11 @@ li {
 ul li {
   padding-top: 16px;
   margin-top: 16px;
-  border-top: 1px solid var(--vp-c-default);
+  border-top: 1px solid var(--vp-c-default-2);
 }
 ul li:last-child {
   padding-bottom: 16px;
   margin-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-default);
+  border-bottom: 1px solid var(--vp-c-default-1);
 }
 </style>
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 3fb56be7a..1450d1fb0 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -1,23 +1,27 @@
 <script lang="ts" setup>
 import useBlogDate from '../composables/useBlogDate';
-import { useData } from 'vitepress';
+import { Content, useData } from 'vitepress';
+import type { PostFrontmatter } from '../loaders/blog.data';
 
-const { frontmatter } = useData();
+const { frontmatter } = useData<PostFrontmatter>();
 const date = useBlogDate(() => frontmatter.value.date);
 </script>
 
 <template>
   <div class="vp-doc">
     <main class="container-content">
-      <h1 v-html="$frontmatter.title" />
+      <h1 v-html="frontmatter.title" />
       <p class="meta-row">
         <a
-          class="author"
-          v-for="author of $frontmatter.authors"
+          v-for="author of frontmatter.authors"
           :key="author.github"
           :href="`https://github.com/${author.github}`"
+          class="author"
         >
-          <img :src="`https://github.com/${author.github}.png?size=96`" />
+          <img
+            :src="`https://github.com/${author.github}.png?size=96`"
+            alt="author avatar"
+          />
           <span>{{ author.name }}</span>
         </a>
         <span>&bull;</span>
@@ -29,9 +33,10 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-vp-doc {
+.vp-doc {
   display: flex;
 }
+
 main {
   max-width: 1080px;
   padding: 32px;
@@ -42,6 +47,7 @@ main {
     padding: 64px;
   }
 }
+
 .meta-row {
   display: flex;
   color: var(--vp-c-text-2);
@@ -49,9 +55,11 @@ main {
   overflow: hidden;
   padding-bottom: 32px;
 }
+
 .meta-row > * {
   flex-shrink: 0;
 }
+
 .author {
   display: flex;
   gap: 8px;
@@ -60,15 +68,18 @@ main {
   font-weight: normal;
   text-decoration: none;
 }
+
 .author img {
   width: 24px;
   height: 24px;
   border-radius: 100%;
 }
+
 .author span {
   padding: 0;
   margin: 0;
 }
+
 .author:hover {
   text-decoration: underline;
   color: var(--vp-c-text-2);
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 405822189..fdef7caba 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -39,6 +39,7 @@ li {
 p {
   margin: 0;
 }
+
 h3 {
   margin: 0;
   padding: 0;
@@ -48,15 +49,14 @@ h3 {
 li > a > div {
   display: flex;
   flex-direction: column;
-  margin: 0 -16px;
   padding: 16px;
   border-radius: 16px;
 }
 li > a > div:hover {
-  background: var(--vp-c-default);
+  background: var(--vp-c-default-3);
 }
 li .title {
-  color: var(--vp-c-text);
+  color: var(--vp-c-text-1);
   margin-bottom: 12px;
 }
 li .description {
diff --git a/docs/.vitepress/components/EntrypointPatterns.vue b/docs/.vitepress/components/EntrypointPatterns.vue
index 8f73d7c28..56a376ca6 100644
--- a/docs/.vitepress/components/EntrypointPatterns.vue
+++ b/docs/.vitepress/components/EntrypointPatterns.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = defineProps<{
+defineProps<{
   patterns: Array<[intput: string, output: string]>;
 }>();
 </script>
@@ -20,14 +20,14 @@ const props = defineProps<{
         </td>
         <td style="padding: 6px; opacity: 50%">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
             height="20"
             viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill="currentColor"
               d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
+              fill="currentColor"
             />
           </svg>
         </td>
diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 03b319c2d..be0be22e1 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { ref, onMounted, computed, toRaw, Ref } from 'vue';
+import { computed, onMounted, ref, Ref, toRaw } from 'vue';
 import ExampleSearchFilterByItem from './ExampleSearchFilterByItem.vue';
 import ExampleSearchResult from './ExampleSearchResult.vue';
 import { ExamplesMetadata, KeySelectedObject } from '../utils/types';
 
-const props = defineProps<{
+defineProps<{
   tag?: string;
 }>();
 
@@ -48,7 +48,7 @@ function doesExampleMatchSelected(
 
 const filteredExamples = computed(() => {
   const text = searchText.value.toLowerCase();
-  return exampleMetadata.value.examples.filter((example) => {
+  return exampleMetadata.value?.examples.filter((example) => {
     const matchesText = example.searchText.toLowerCase().includes(text);
     const matchesApis = doesExampleMatchSelected(example.apis, requiredApis);
     const matchesPermissions = doesExampleMatchSelected(
@@ -72,19 +72,19 @@ const filteredExamples = computed(() => {
 
     <div class="filters">
       <ExampleSearchFilterByItem
-        label="APIs"
-        :items="exampleMetadata?.allApis"
         v-model="selectedApis"
+        :items="exampleMetadata?.allApis"
+        label="APIs"
       />
       <ExampleSearchFilterByItem
-        label="Permissions"
-        :items="exampleMetadata?.allPermissions"
         v-model="selectedPermissions"
+        :items="exampleMetadata?.allPermissions"
+        label="Permissions"
       />
       <ExampleSearchFilterByItem
-        label="Packages"
-        :items="exampleMetadata?.allPackages"
         v-model="selectedPackages"
+        :items="exampleMetadata?.allPackages"
+        label="Packages"
       />
     </div>
 
@@ -98,7 +98,7 @@ const filteredExamples = computed(() => {
             :example
           />
         </ul>
-        <p v-if="filteredExamples.length === 0">No matching examples</p>
+        <p v-if="!filteredExamples?.length">No matching examples</p>
       </template>
     </div>
   </div>
@@ -149,38 +149,12 @@ const filteredExamples = computed(() => {
   grid-area: results;
 }
 
-.box {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
 .search input {
   min-width: 0;
   flex: 1;
   font-size: 16px;
 }
 
-.checkbox-col {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 200px;
-  font-size: 14px;
-  gap: 4px;
-}
-
-.filter-btn {
-  color: var(--vp-c-brand-1);
-}
-
-.checkbox-col .header {
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-
 .checkbox-col p {
   display: flex;
   gap: 4px;
@@ -200,10 +174,6 @@ span {
   flex-shrink: 0;
 }
 
-.checkbox-col-container {
-  display: flex;
-}
-
 .search-results {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index 23b387bec..ed5c7e895 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -2,7 +2,7 @@
 import { computed, toRaw } from 'vue';
 import { KeySelectedObject } from '../utils/types';
 
-const props = defineProps<{
+defineProps<{
   label: string;
   items?: string[];
 }>();
@@ -33,8 +33,8 @@ function toggleItem(pkg: string) {
         <li v-for="item in items">
           <label :title="item">
             <input
-              type="checkbox"
               :checked="selectedItems[item]"
+              type="checkbox"
               @input="toggleItem(item)"
             />
             <span>{{ item }}</span>
@@ -83,7 +83,6 @@ label {
   display: flex;
   gap: 4px;
   align-items: flex-start;
-  text-wrap: wrap;
   overflow-wrap: anywhere;
   line-height: 140%;
   cursor: pointer;
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index b46c6d1ea..4ad881f7f 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Example } from '../utils/types';
 
-const props = defineProps<{
+defineProps<{
   example: Example;
 }>();
 </script>
@@ -36,9 +36,6 @@ a:hover {
 .name {
   font-size: 16px;
   font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   flex-shrink: 0;
 
   text-overflow: ellipsis;
diff --git a/docs/.vitepress/components/Icon.vue b/docs/.vitepress/components/Icon.vue
index 7daa37369..fc8ccadd3 100644
--- a/docs/.vitepress/components/Icon.vue
+++ b/docs/.vitepress/components/Icon.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-const props = defineProps<{
+const { name, icon } = 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`;
+  if (icon) return icon;
+  return `https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${name.toLowerCase()}.svg`;
 });
 </script>
 
 <template>
-  <img :src="src" :alt="`${name} Logo`" />
+  <img :alt="`${name} Logo`" :src="src" />
 </template>
 
 <style scoped>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6b2e9041b..592b1b379 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -8,6 +8,7 @@ import {
   prepareTypedocSidebar,
 } from './utils/menus';
 import { meta, script } from './utils/head';
+// @ts-expect-error; it isn't TypeScript lib
 import footnote from 'markdown-it-footnote';
 import { version as wxtVersion } from '../../packages/wxt/package.json';
 import { version as i18nVersion } from '../../packages/i18n/package.json';
@@ -28,15 +29,14 @@ import { writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import llmstxt from 'vitepress-plugin-llms';
 
-const origin = 'https://wxt.dev';
-
-const title = 'Next-gen Web Extension Framework';
-const titleSuffix = ' – WXT';
-const description =
+const ORIGIN = 'https://wxt.dev';
+const TITLE = 'Next-gen Web Extension Framework';
+const TITLE_SUFFIX = ' – WXT';
+const DESCRIPTION =
   "WXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
-const ogTitle = `${title}${titleSuffix}`;
-const ogUrl = origin;
-const ogImage = `${origin}/social-preview.png`;
+const OG_TITLE = `${TITLE}${TITLE_SUFFIX}`;
+const OG_URL = ORIGIN;
+const OG_IMAGE = `${ORIGIN}/social-preview.png`;
 
 const otherPackages = {
   analytics: analyticsVersion,
@@ -68,9 +68,9 @@ const knowledge = addKnowledge<DefaultTheme.Config>({
 export default defineConfig({
   extends: knowledge,
 
-  titleTemplate: `:title${titleSuffix}`,
+  titleTemplate: `:title${TITLE_SUFFIX}`,
   title: 'WXT',
-  description,
+  description: DESCRIPTION,
   vite: {
     clearScreen: false,
     plugins: [
@@ -87,7 +87,7 @@ export default defineConfig({
   },
   lastUpdated: true,
   sitemap: {
-    hostname: origin,
+    hostname: ORIGIN,
   },
 
   async buildEnd(site) {
@@ -101,27 +101,25 @@ export default defineConfig({
       copyright: 'MIT',
       id: 'wxt',
       title: 'WXT Blog',
-      link: `${origin}/blog`,
+      link: `${ORIGIN}/blog`,
     });
     posts.forEach((post) => {
       feed.addItem({
-        date: post.frontmatter.date,
-        link: new URL(post.url, origin).href,
+        date: new Date(post.frontmatter.date),
+        link: new URL(post.url, ORIGIN).href,
         title: post.frontmatter.title,
         description: post.frontmatter.description,
       });
     });
-    // console.log('rss.xml:');
-    // console.log(feed.rss2());
     await writeFile(join(site.outDir, 'rss.xml'), feed.rss2(), 'utf8');
   },
 
   head: [
     meta('og:type', 'website'),
-    meta('og:title', ogTitle),
-    meta('og:image', ogImage),
-    meta('og:url', ogUrl),
-    meta('og:description', description),
+    meta('og:title', OG_TITLE),
+    meta('og:image', OG_IMAGE),
+    meta('og:url', OG_URL),
+    meta('og:description', DESCRIPTION),
     meta('twitter:card', 'summary_large_image', { useName: true }),
     script('https://umami.aklinker1.io/script.js', {
       'data-website-id': 'c1840c18-a12c-4a45-a848-55ae85ef7915',
diff --git a/docs/.vitepress/loaders/blog.data.ts b/docs/.vitepress/loaders/blog.data.ts
index 980fd820f..411bb4f78 100644
--- a/docs/.vitepress/loaders/blog.data.ts
+++ b/docs/.vitepress/loaders/blog.data.ts
@@ -1,3 +1,20 @@
-import { createContentLoader } from 'vitepress';
+import { type ContentData, createContentLoader } from 'vitepress';
 
-export default createContentLoader('blog/*.md');
+export interface PostFrontmatter {
+  title: string;
+  description?: string;
+  date: string;
+  authors: { name: string; github: string }[];
+}
+
+export interface Post
+  extends Omit<ContentData, 'frontmatter'>, Omit<PostFrontmatter, 'date'> {
+  date: Date;
+}
+
+declare const data: Array<ContentData & { frontmatter: PostFrontmatter }>;
+export { data };
+
+export default createContentLoader<
+  Array<ContentData & { frontmatter: PostFrontmatter }>
+>('blog/*.md');
diff --git a/docs/.vitepress/utils/head.ts b/docs/.vitepress/utils/head.ts
index 5c776c965..d6d8adf91 100644
--- a/docs/.vitepress/utils/head.ts
+++ b/docs/.vitepress/utils/head.ts
@@ -1,4 +1,4 @@
-import { HeadConfig } from 'vitepress/types/shared';
+import type { HeadConfig } from 'vitepress';
 
 export function meta(
   property: string,
diff --git a/docs/.vitepress/utils/menus.ts b/docs/.vitepress/utils/menus.ts
index 31ec4044d..39ecec92e 100644
--- a/docs/.vitepress/utils/menus.ts
+++ b/docs/.vitepress/utils/menus.ts
@@ -1,8 +1,6 @@
 import { DefaultTheme } from 'vitepress';
 
 type SidebarItem = DefaultTheme.SidebarItem;
-type NavItem = DefaultTheme.NavItem;
-type NavItemWithLink = DefaultTheme.NavItemWithLink;
 type NavItemWithChildren = DefaultTheme.NavItemWithChildren;
 type NavItemChildren = DefaultTheme.NavItemChildren;
 
@@ -19,7 +17,7 @@ export function navItem(text: string, arg2?: unknown): any {
 }
 
 export function menuRoot(items: SidebarItem[]) {
-  return items.map((item, index) => {
+  return items.map((item) => {
     // item.collapsed = false; // uncomment to expand all level-0 items
     return item;
   });
@@ -60,12 +58,6 @@ export function menuGroup(
   throw Error('Unknown overload');
 }
 
-export function menuItems(items: SidebarItem[]) {
-  return {
-    items,
-  };
-}
-
 export function menuItem(
   text: string,
   link: string,
@@ -100,6 +92,5 @@ export function prepareTypedocSidebar(items: SidebarItem[]) {
   // process
   prepareItems(filtered);
 
-  // return
   return filtered;
 }
diff --git a/package.json b/package.json
index 6afa0d449..507b81618 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,11 @@
     "vue": "^3.5.29",
     "wxt": "workspace:*"
   },
+  "pnpm": {
+    "overrides": {
+      "vite": "7.3.0"
+    }
+  },
   "simple-git-hooks": {
     "pre-commit": "./node_modules/.bin/nano-staged"
   },

From 4eba1028668cdfb6113795e28b2e656b2adade26 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Sun, 21 Dec 2025 17:00:34 +0100
Subject: [PATCH 02/11] fix(vitepress): add missing type for theme context

---
 docs/.vitepress/theme/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index e616c58a7..1c45031e5 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,10 +6,11 @@ import ExampleSearch from '../components/ExampleSearch.vue';
 import BlogLayout from '../components/BlogLayout.vue';
 import './custom.css';
 import 'virtual:group-icons.css';
+import type { EnhanceAppContext } from 'vitepress/client';
 
 export default {
   extends: DefaultTheme,
-  enhanceApp(ctx) {
+  enhanceApp(ctx: EnhanceAppContext) {
     ctx.app
       .component('Icon', Icon)
       .component('EntrypointPatterns', EntrypointPatterns)

From d7416f04ed163a1af6a6c9fb488edd5a004e500e Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Mon, 22 Dec 2025 22:42:26 +0100
Subject: [PATCH 03/11] clean: remove unnecessary/unused code of Blog
 components

---
 docs/.vitepress/components/BlogHome.vue       |  8 ++------
 docs/.vitepress/components/BlogLayout.vue     | 14 +-------------
 .../.vitepress/components/BlogPostPreview.vue | 19 ++++---------------
 docs/.vitepress/theme/custom.css              |  6 ++++++
 4 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index 23a421d16..9ce43a54f 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -34,11 +34,11 @@ const posts = computed<Post[]>(() =>
   flex-direction: column;
   align-items: center;
 }
+
 .container > div {
   padding: 32px;
   max-width: 900px;
   width: 100%;
-  min-width: 0;
 }
 
 h1 {
@@ -50,17 +50,13 @@ ul {
   flex-direction: column;
   list-style: none;
 }
-ul,
-li {
-  padding: 0;
-  margin: 0;
-}
 
 ul li {
   padding-top: 16px;
   margin-top: 16px;
   border-top: 1px solid var(--vp-c-default-2);
 }
+
 ul li:last-child {
   padding-bottom: 16px;
   margin-bottom: 16px;
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 1450d1fb0..bec48ad55 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -33,15 +33,12 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-.vp-doc {
-  display: flex;
-}
-
 main {
   max-width: 1080px;
   padding: 32px;
   margin: auto;
 }
+
 @media (min-width: 768px) {
   main {
     padding: 64px;
@@ -56,10 +53,6 @@ main {
   padding-bottom: 32px;
 }
 
-.meta-row > * {
-  flex-shrink: 0;
-}
-
 .author {
   display: flex;
   gap: 8px;
@@ -75,11 +68,6 @@ main {
   border-radius: 100%;
 }
 
-.author span {
-  padding: 0;
-  margin: 0;
-}
-
 .author:hover {
   text-decoration: underline;
   color: var(--vp-c-text-2);
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index fdef7caba..ff0d5d40e 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -31,39 +31,28 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-li {
-  padding: 0;
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-
-h3 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
 li > a > div {
   display: flex;
   flex-direction: column;
   padding: 16px;
   border-radius: 16px;
 }
+
 li > a > div:hover {
   background: var(--vp-c-default-3);
 }
+
 li .title {
   color: var(--vp-c-text-1);
   margin-bottom: 12px;
 }
+
 li .description {
   font-size: 16px;
   color: var(--vp-c-text-2);
   margin-bottom: 8px;
 }
+
 li .meta {
   font-weight: 400;
   font-size: 12px;
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 275cd0c36..e0c071501 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -33,6 +33,12 @@
   border: 1px solid var(--vp-c-divider);
 }
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
   overflow-y: scroll;
 }

From e5483547009ec3eccb502ab748af8167380f1e8d Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 12:22:54 +0100
Subject: [PATCH 04/11] clean: remove unnecessary/unused code of Example
 components and simplify code

---
 docs/.vitepress/components/ExampleSearch.vue  | 35 ++++---------------
 .../components/ExampleSearchFilterByItem.vue  | 20 ++++-------
 .../components/ExampleSearchResult.vue        | 16 +++------
 3 files changed, 17 insertions(+), 54 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index be0be22e1..af8d17209 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -114,6 +114,7 @@ const filteredExamples = computed(() => {
     'results';
   gap: 16px;
 }
+
 @media only screen and (min-width: 720px) {
   .example-layout {
     grid-template-columns: 256px 1fr;
@@ -123,62 +124,40 @@ const filteredExamples = computed(() => {
       'filters results';
   }
 }
+
 .search {
   grid-area: search;
   background: var(--vp-c-bg-soft);
   padding: 20px;
-  width: 100%;
-  display: flex;
   border-radius: 16px;
 }
+
 .filters {
-  display: none;
   grid-area: filters;
 }
+
 @media only screen and (min-width: 720px) {
   .filters {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 10px;
     border-radius: 16px;
-    overflow: hidden;
-    align-self: flex-start;
   }
 }
+
 .results {
   grid-area: results;
 }
 
 .search input {
-  min-width: 0;
-  flex: 1;
   font-size: 16px;
 }
 
-.checkbox-col p {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-}
-
-span {
-  padding-top: 1px;
-}
-
-.checkbox-col input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
 .search-results {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
   gap: 16px;
 }
+
 @media only screen and (min-width: 800px) {
   .search-results {
     grid-template-columns: repeat(2, 1fr);
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index ed5c7e895..30746cdcf 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -55,22 +55,18 @@ function toggleItem(pkg: string) {
 
 .scroll-container {
   flex: 1;
-  overflow: hidden;
   position: relative;
 }
 
 .scroll-container ul {
   position: absolute;
   overflow-y: auto;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: small;
-  padding: 8px 16px 16px 16px;
+  padding: 8px 16px 16px;
 }
 
 .header {
@@ -79,18 +75,14 @@ function toggleItem(pkg: string) {
   font-weight: bold;
   opacity: 50%;
 }
+
 label {
   display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  overflow-wrap: anywhere;
-  line-height: 140%;
+  align-items: center;
+  gap: 6px;
   cursor: pointer;
-  text-wrap: nowrap;
-}
-span {
-  padding-top: 1px;
 }
+
 input[type='checkbox'] {
   width: 16px;
   height: 16px;
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index 4ad881f7f..afd529fbb 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -17,39 +17,30 @@ defineProps<{
 </template>
 
 <style scoped>
-* {
-  min-width: 0;
-}
 a {
   padding: 16px;
   display: flex;
   flex-direction: column;
   border: 2px solid var(--vp-c-bg-soft);
   border-radius: 16px;
-  color: var(--vp-c-text-1) !important;
   gap: 8px;
 }
 
 a:hover {
   outline: 2px solid var(--vp-c-brand-2);
 }
+
 .name {
-  font-size: 16px;
   font-weight: 500;
-  flex-shrink: 0;
-
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
+
 .description {
-  height: 53px;
   opacity: 70%;
   font-size: 14px;
-  font-weight: normal;
-  line-height: 120%;
-  min-height: 0;
-
+  line-height: 130%;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -63,6 +54,7 @@ a:hover {
   font-weight: bold;
   text-align: right;
 }
+
 a:hover .link {
   opacity: 100%;
 }

From db73a8004fd161f10aea22eb221b2b70377f8e7c Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 12:43:40 +0100
Subject: [PATCH 05/11] clean: remove unnecessary/unused code of
 UsingWxtSection and improve readability of each extension statistics

---
 .../.vitepress/components/UsingWxtSection.vue | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/docs/.vitepress/components/UsingWxtSection.vue b/docs/.vitepress/components/UsingWxtSection.vue
index 40bc082ad..9d1126956 100644
--- a/docs/.vitepress/components/UsingWxtSection.vue
+++ b/docs/.vitepress/components/UsingWxtSection.vue
@@ -6,7 +6,7 @@ import useListExtensionDetails, {
 
 // Add extension IDs to end of the list. On the website, extensions will be sorted by a combination of weekly active users and rating.
 // Change the commit message or PR title to: "docs: Added "[extension name]" to the homepage"
-const chromeExtensionIds = [
+const CHROME_EXTENSIONS_ID = [
   'ocfdgncpifmegplaglcnglhioflaimkd', // GitHub: Better Line Counts
   'mgmdkjcljneegjfajchedjpdhbadklcf', // Anime Skip Player
   'bfbnagnphiehemkdgmmficmjfddgfhpl', // UltraWideo
@@ -125,7 +125,7 @@ const chromeExtensionIds = [
   'pmgehhllikbjmadpenhabejhpemplhmd', // Extension Rank Checker - Extension Ranker
 ];
 
-const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
+const { data, err, isLoading } = useListExtensionDetails(CHROME_EXTENSIONS_ID);
 const sortedExtensions = computed(() => {
   if (!data.value?.length) return [];
 
@@ -159,35 +159,36 @@ function getStoreUrl(extension: ChromeExtension) {
     <li
       v-for="extension of sortedExtensions"
       :key="extension.id"
-      class="relative"
+      style="position: relative"
     >
       <img
-        :src="extension.iconUrl"
         :alt="`${extension.name} icon`"
+        :src="extension.iconUrl"
         referrerpolicy="no-referrer"
       />
-      <div class="relative">
+      <div style="position: relative">
         <a
           :href="getStoreUrl(extension)"
-          target="_blank"
           :title="extension.name"
           class="extension-name"
+          target="_blank"
           >{{ extension.name }}</a
         >
-        <p class="description" :title="extension.shortDescription">
+        <p :title="extension.shortDescription" class="description">
           {{ extension.shortDescription }}
         </p>
       </div>
       <p class="user-count">
-        <span>{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
+        <span style="color: limegreen"
+          >{{ extension.weeklyActiveUsers.toLocaleString() }} users</span
         ><template v-if="extension.rating != null"
           >,
-          <span>{{ extension.rating }} stars</span>
+          <span style="color: gold">{{ extension.rating }} stars</span>
         </template>
       </p>
     </li>
   </ul>
-  <p class="centered pr">
+  <p class="pr">
     <a
       href="https://github.com/wxt-dev/wxt/edit/main/docs/.vitepress/components/UsingWxtSection.vue"
       target="_blank"
@@ -208,13 +209,11 @@ li img {
 
 ul {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  align-items: stretch;
-  gap: 16px;
-  list-style: none;
+  gap: 10px;
   margin: 16px 0;
   padding: 0;
 }
+
 @media (min-width: 960px) {
   ul {
     grid-template-columns: repeat(2, 1fr);
@@ -222,32 +221,31 @@ ul {
 }
 
 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;
+
+  span {
+    font-weight: bold;
+  }
 }
 
 li a {
@@ -260,6 +258,7 @@ li a {
   margin: 0;
   text-decoration: none;
 }
+
 li a:hover {
   text-decoration: underline;
 }
@@ -282,10 +281,7 @@ li .extension-name {
 }
 
 .pr {
+  text-align: center;
   opacity: 70%;
 }
-
-.relative {
-  position: relative;
-}
 </style>

From 7f0029173275e09452d87034d863169253b9bb6f Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 12:57:13 +0100
Subject: [PATCH 06/11] clean: simplify css code of Blog

---
 docs/.vitepress/components/BlogLayout.vue      | 6 ++----
 docs/.vitepress/components/BlogPostPreview.vue | 6 +++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index bec48ad55..7e4a23bc8 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -33,14 +33,12 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-main {
+.container-content {
   max-width: 1080px;
   padding: 32px;
   margin: auto;
-}
 
-@media (min-width: 768px) {
-  main {
+  @media (min-width: 768px) {
     padding: 64px;
   }
 }
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index ff0d5d40e..1ecc4ab82 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -36,10 +36,10 @@ li > a > div {
   flex-direction: column;
   padding: 16px;
   border-radius: 16px;
-}
 
-li > a > div:hover {
-  background: var(--vp-c-default-3);
+  &:hover {
+    background: var(--vp-c-default-3);
+  }
 }
 
 li .title {

From 0bda71a474bf0c0afba7ccbcd178cff75bb321ea Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 13:33:18 +0100
Subject: [PATCH 07/11] fix: displaying filters on width < 720px

---
 docs/.vitepress/components/ExampleSearch.vue | 32 ++++++--------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index af8d17209..aa112e85d 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -107,21 +107,14 @@ const filteredExamples = computed(() => {
 <style scoped>
 .example-layout {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   grid-template-areas:
-    'search'
-    'results';
+    'filters search'
+    'filters results';
   gap: 16px;
-}
 
-@media only screen and (min-width: 720px) {
-  .example-layout {
+  @media only screen and (min-width: 720px) {
     grid-template-columns: 256px 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'filters search'
-      'filters results';
   }
 }
 
@@ -134,13 +127,11 @@ const filteredExamples = computed(() => {
 
 .filters {
   grid-area: filters;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 
-@media only screen and (min-width: 720px) {
-  .filters {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  @media only screen and (min-width: 720px) {
     border-radius: 16px;
   }
 }
@@ -156,15 +147,12 @@ const filteredExamples = computed(() => {
 .search-results {
   display: grid;
   gap: 16px;
-}
 
-@media only screen and (min-width: 800px) {
-  .search-results {
+  @media only screen and (min-width: 800px) {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-@media only screen and (min-width: 1024px) {
-  .search-results {
+
+  @media only screen and (min-width: 1024px) {
     grid-template-columns: repeat(3, 1fr);
   }
 }

From 8fbdcaaef34ab4d7335a5c581cff844269bd0f61 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 13:37:58 +0100
Subject: [PATCH 08/11] clean: remove unnecessary Command interface of
 cli.data.ts

---
 docs/.vitepress/loaders/cli.data.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/.vitepress/loaders/cli.data.ts b/docs/.vitepress/loaders/cli.data.ts
index 77327e703..f2bb8d2d3 100644
--- a/docs/.vitepress/loaders/cli.data.ts
+++ b/docs/.vitepress/loaders/cli.data.ts
@@ -54,8 +54,3 @@ async function getPublishExtensionHelp(command: string): Promise<string> {
   );
   return res.replace(/\$ publish-extension/g, '$ wxt submit');
 }
-
-export interface Command {
-  name: string;
-  docs: string;
-}

From a474625e710d06b6c9d08cc7744af2c1ce8392a9 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 13:58:49 +0100
Subject: [PATCH 09/11] style: adjust badge of API Reference menu options, for
 be more circular and simplify custom.css overall

---
 docs/.vitepress/theme/custom.css | 49 +++++++++++++-------------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index e0c071501..8fde4b238 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,9 +1,21 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
 /* Colors */
 :root {
   --wxt-c-green-1: #0b8a00;
   --wxt-c-green-2: #096600;
   --wxt-c-green-3: #096600;
   --wxt-c-green-soft: rgba(11, 138, 0, 0.14);
+
+  --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-c-brand-soft: var(--wxt-c-green-soft);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .dark {
@@ -13,17 +25,7 @@
   --wxt-c-green-soft: rgba(103, 212, 94, 0.14);
 }
 
-/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
-
-:root {
-  --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-c-brand-soft: var(--wxt-c-green-soft);
-}
-
 /* Customize Individual Components */
-
 .vp-doc .no-vertical-dividers th,
 .vp-doc .no-vertical-dividers td {
   border: none;
@@ -33,30 +35,19 @@
   border: 1px solid var(--vp-c-divider);
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 body {
   overflow-y: scroll;
 }
 
-.VPSidebar {
-  user-select: none;
-}
-
 .VPSidebarItem .badge {
-  display: inline-block;
-  min-width: 1.6em;
-  padding: 0.3em 0.4em 0.2em;
-  border-radius: 1rem;
-  font-size: 0.75em;
-  line-height: 1;
-  margin-left: 0.5rem;
-  text-align: center;
-  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.75em;
+  height: 1.75em;
+  border-radius: 10rem;
+  font-size: 0.8em;
+  margin-left: 0.25rem;
   background-color: var(--vp-c-default-2);
 }
 

From 0dcf2ec5f2fdfabd14045ce694170efbbc78b2a7 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 14:07:14 +0100
Subject: [PATCH 10/11] fix: remove vite overwrite from main package.json and
 add @ts-expect-error to groupIconVitePlugin

---
 docs/.vitepress/config.ts | 1 +
 package.json              | 5 -----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 592b1b379..df3307e15 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -75,6 +75,7 @@ export default defineConfig({
     clearScreen: false,
     plugins: [
       llmstxt(),
+      // @ts-expect-error: Vite version mismatch between this project and the plugin
       groupIconVitePlugin({
         customIcon: {
           'wxt.config.ts': localIconLoader(
diff --git a/package.json b/package.json
index 507b81618..6afa0d449 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,6 @@
     "vue": "^3.5.29",
     "wxt": "workspace:*"
   },
-  "pnpm": {
-    "overrides": {
-      "vite": "7.3.0"
-    }
-  },
   "simple-git-hooks": {
     "pre-commit": "./node_modules/.bin/nano-staged"
   },

From 485cc93144ca9dad234726965b6430b54bdf2eb0 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Sun, 8 Feb 2026 10:22:31 +0100
Subject: [PATCH 11/11] add @ts-expect-error for llmstxt() plugin of
 .vitepress/config

---
 docs/.vitepress/config.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index df3307e15..c67ab4dfd 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -8,7 +8,7 @@ import {
   prepareTypedocSidebar,
 } from './utils/menus';
 import { meta, script } from './utils/head';
-// @ts-expect-error; it isn't TypeScript lib
+// @ts-expect-error It isn't TypeScript lib
 import footnote from 'markdown-it-footnote';
 import { version as wxtVersion } from '../../packages/wxt/package.json';
 import { version as i18nVersion } from '../../packages/i18n/package.json';
@@ -73,7 +73,9 @@ export default defineConfig({
   description: DESCRIPTION,
   vite: {
     clearScreen: false,
+    //TODO: REMOVE THIS @TS-EXPECT-ERROR AFTER BUMP VITEPRESS TO V2.0
     plugins: [
+      // @ts-expect-error: Vite version mismatch between this project and the plugin
       llmstxt(),
       // @ts-expect-error: Vite version mismatch between this project and the plugin
       groupIconVitePlugin({