diff --git a/package.json b/package.json
index 08e6c4f2b..be81eba43 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
     "test:e2e": "pnpm -C e2e run test",
     "test": "vitest",
     "typecheck": "vue-tsc -b",
-    "watch": "turbo watch build"
+    "watch": "turbo watch build",
+    "zip": "pnpm run zip:webext",
+    "zip:webext": "turbo run build --filter=@vitejs/devtools-webext && pnpm --filter @vitejs/devtools-webext run zip"
   },
   "scripts-info": {
     "actionspack": "Update pinned GitHub Actions versions",
@@ -53,7 +55,9 @@
     "test:e2e": "Run end-to-end tests",
     "test": "Run unit tests with Vitest",
     "typecheck": "Type-check all packages with vue-tsc",
-    "watch": "Rebuild changed packages on file change via turbo watch"
+    "watch": "Rebuild changed packages on file change via turbo watch",
+    "zip": "Build and package the browser extension",
+    "zip:webext": "Build and package the browser extension as a zip file"
   },
   "devDependencies": {
     "@antfu/eslint-config": "catalog:devtools",
diff --git a/packages/kit/src/client/remote.test.ts b/packages/kit/src/client/remote.test.ts
deleted file mode 100644
index 09ccc0423..000000000
--- a/packages/kit/src/client/remote.test.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { RemoteConnectionInfo } from '../types'
-import { Buffer } from 'node:buffer'
-import { REMOTE_CONNECTION_KEY } from 'devframe/constants'
-import { describe, expect, it } from 'vitest'
-import { parseRemoteConnection } from './remote'
-
-function encode(payload: Partial<RemoteConnectionInfo>): string {
-  return Buffer.from(JSON.stringify(payload), 'utf8')
-    .toString('base64')
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '')
-}
-
-const VALID_PAYLOAD: RemoteConnectionInfo = {
-  v: 1,
-  backend: 'websocket',
-  websocket: 'ws://localhost:7812',
-  authToken: 'happy-lion-7',
-  origin: 'http://localhost:5173',
-}
-
-describe('parseRemoteConnection', () => {
-  it('returns null when the URL carries no descriptor', () => {
-    expect(parseRemoteConnection('https://example.com/page')).toBeNull()
-  })
-
-  it('parses a fragment-transport descriptor', () => {
-    const encoded = encode(VALID_PAYLOAD)
-    const url = `https://example.com/page#${REMOTE_CONNECTION_KEY}=${encoded}`
-    expect(parseRemoteConnection(url)).toEqual(VALID_PAYLOAD)
-  })
-
-  it('parses a query-transport descriptor', () => {
-    const encoded = encode(VALID_PAYLOAD)
-    const url = `https://example.com/page?${REMOTE_CONNECTION_KEY}=${encoded}`
-    expect(parseRemoteConnection(url)).toEqual(VALID_PAYLOAD)
-  })
-
-  it('prefers fragment over query when both are present', () => {
-    const fragPayload = { ...VALID_PAYLOAD, authToken: 'from-fragment' }
-    const queryPayload = { ...VALID_PAYLOAD, authToken: 'from-query' }
-    const url = `https://example.com/page`
-      + `?${REMOTE_CONNECTION_KEY}=${encode(queryPayload)}`
-      + `#${REMOTE_CONNECTION_KEY}=${encode(fragPayload)}`
-    expect(parseRemoteConnection(url)?.authToken).toBe('from-fragment')
-  })
-
-  it('accepts a raw fragment string', () => {
-    const encoded = encode(VALID_PAYLOAD)
-    expect(parseRemoteConnection(`#${REMOTE_CONNECTION_KEY}=${encoded}`)).toEqual(VALID_PAYLOAD)
-  })
-
-  it('accepts a raw query string', () => {
-    const encoded = encode(VALID_PAYLOAD)
-    expect(parseRemoteConnection(`?${REMOTE_CONNECTION_KEY}=${encoded}`)).toEqual(VALID_PAYLOAD)
-  })
-
-  it('throws on malformed base64', () => {
-    const url = `https://example.com/page#${REMOTE_CONNECTION_KEY}=not@valid!base64`
-    expect(() => parseRemoteConnection(url)).toThrow(/Failed to decode/)
-  })
-
-  it('throws on version mismatch', () => {
-    const encoded = encode({ ...VALID_PAYLOAD, v: 2 as 1 })
-    const url = `https://example.com/page#${REMOTE_CONNECTION_KEY}=${encoded}`
-    expect(() => parseRemoteConnection(url)).toThrow(/Unsupported remote connection descriptor version/)
-  })
-
-  it('throws when required fields are missing', () => {
-    const encoded = encode({ v: 1, backend: 'websocket' })
-    const url = `https://example.com/page#${REMOTE_CONNECTION_KEY}=${encoded}`
-    expect(() => parseRemoteConnection(url)).toThrow(/websocket URL/)
-  })
-
-  it('throws when payload is not an object', () => {
-    const encoded = encode(null as unknown as RemoteConnectionInfo)
-    const url = `https://example.com/page#${REMOTE_CONNECTION_KEY}=${encoded}`
-    expect(() => parseRemoteConnection(url)).toThrow(/must be an object/)
-  })
-})
diff --git a/packages/webext/app/background/background.html b/packages/webext/app/background/background.html
new file mode 100644
index 000000000..c31d2da99
--- /dev/null
+++ b/packages/webext/app/background/background.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Vite DevTools Background</title>
+  </head>
+  <body>
+    <script src="../../dist/devtools-bg.js" type="module"></script>
+  </body>
+</html>
diff --git a/packages/webext/app/panel/App.vue b/packages/webext/app/panel/App.vue
new file mode 100644
index 000000000..5ad47fb9c
--- /dev/null
+++ b/packages/webext/app/panel/App.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { getInspectedWindowConnection } from './inspected-window'
+
+const viewerUrl = ref<string | null>(null)
+const errorMessage = ref<string | null>(null)
+const status = ref<'loading' | 'unavailable'>('loading')
+const METADATA_RETRY_COUNT = 50
+const METADATA_RETRY_DELAY = 100
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+const statusText = computed(() => {
+  return status.value === 'loading'
+    ? 'Connecting to Vite DevTools...'
+    : 'Vite DevTools unavailable'
+})
+
+async function resolveInspectedWindowConnection() {
+  for (let i = 0; i < METADATA_RETRY_COUNT; i++) {
+    const connection = await getInspectedWindowConnection()
+    if (connection)
+      return connection
+
+    await sleep(METADATA_RETRY_DELAY)
+  }
+}
+
+async function initialize() {
+  status.value = 'loading'
+  errorMessage.value = null
+
+  try {
+    const connection = await resolveInspectedWindowConnection()
+    if (!connection)
+      throw new Error('Unable to reconnect to the inspected page.')
+
+    viewerUrl.value = new URL('./', connection.metaBaseUrl).href
+  }
+  catch (err) {
+    status.value = 'unavailable'
+    errorMessage.value = err instanceof Error ? err.message : String(err)
+  }
+}
+
+function handleInspectedWindowNavigated() {
+  location.reload()
+}
+
+onMounted(() => {
+  chrome.devtools.network.onNavigated.addListener(handleInspectedWindowNavigated)
+  initialize()
+})
+
+onUnmounted(() => {
+  chrome.devtools.network.onNavigated.removeListener(handleInspectedWindowNavigated)
+})
+</script>
+
+<template>
+  <iframe
+    v-if="viewerUrl"
+    :src="viewerUrl"
+    title="Vite DevTools"
+    class="h-screen w-screen border-0"
+  />
+  <div v-else class="h-screen w-screen flex items-center justify-center bg-[#1e1e1e] px-4 py-3 text-center text-[#cccccc]">
+    <div>
+      <p class="m0 text-base">
+        {{ statusText }}
+      </p>
+      <p v-if="status === 'unavailable'" class="mb0 mt1 text-sm text-[#999999]">
+        {{ errorMessage }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/packages/webext/app/panel/devtools-panel.html b/packages/webext/app/panel/devtools-panel.html
new file mode 100644
index 000000000..574d748f4
--- /dev/null
+++ b/packages/webext/app/panel/devtools-panel.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite DevTools Panel</title>
+    <meta name="description" content="Vite DevTools browser extension panel" />
+  </head>
+  <body class="font-sans">
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/packages/webext/app/panel/inspected-window.test.ts b/packages/webext/app/panel/inspected-window.test.ts
new file mode 100644
index 000000000..e84aad6b8
--- /dev/null
+++ b/packages/webext/app/panel/inspected-window.test.ts
@@ -0,0 +1,53 @@
+import type { DevframeConnection } from 'devframe/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { connectionEval, getInspectedWindowConnection } from './inspected-window'
+
+function stubInspectedWindow(result: DevframeConnection | null) {
+  vi.stubGlobal('chrome', {
+    devtools: {
+      inspectedWindow: {
+        eval: vi.fn((_expression, callback) => callback(result)),
+      },
+    },
+  })
+}
+
+describe('inspected window metadata', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('reads the standard Devframe connection from the inspected page', async () => {
+    const connection: DevframeConnection = {
+      connectionMeta: {
+        backend: 'websocket',
+        websocket: { path: '__ws' },
+      },
+      metaBaseUrl: 'http://localhost:5173/__devtools/__connection.json',
+      authToken: 'trusted-token',
+    }
+    stubInspectedWindow(connection)
+
+    await expect(getInspectedWindowConnection()).resolves.toBe(connection)
+    expect(connectionEval).toContain('__DEVFRAME_CONNECTION__')
+  })
+
+  it('returns null until the injected client publishes the connection', async () => {
+    stubInspectedWindow(null)
+
+    await expect(getInspectedWindowConnection()).resolves.toBeNull()
+  })
+
+  it('rejects an incomplete connection snapshot', async () => {
+    stubInspectedWindow({
+      connectionMeta: {
+        backend: 'websocket',
+        websocket: 7812,
+      },
+      metaBaseUrl: '',
+    })
+
+    await expect(getInspectedWindowConnection()).resolves.toBeNull()
+  })
+})
diff --git a/packages/webext/app/panel/inspected-window.ts b/packages/webext/app/panel/inspected-window.ts
new file mode 100644
index 000000000..5a2039752
--- /dev/null
+++ b/packages/webext/app/panel/inspected-window.ts
@@ -0,0 +1,21 @@
+import type { DevframeConnection } from 'devframe/client'
+import { DEVFRAME_CONNECTION_KEY } from 'devframe/constants'
+
+export const connectionEval
+  = `window[${JSON.stringify(DEVFRAME_CONNECTION_KEY)}] || undefined`
+
+function inspectWindow(): Promise<DevframeConnection | null> {
+  return new Promise((resolve) => {
+    chrome.devtools.inspectedWindow.eval<DevframeConnection>(connectionEval, (connection, exceptionInfo) => {
+      resolve(exceptionInfo || !connection ? null : connection)
+    })
+  })
+}
+
+export async function getInspectedWindowConnection(): Promise<DevframeConnection | null> {
+  const connection = await inspectWindow()
+  if (!connection?.connectionMeta || !connection.metaBaseUrl)
+    return null
+
+  return connection
+}
diff --git a/packages/webext/app/panel/main.ts b/packages/webext/app/panel/main.ts
new file mode 100644
index 000000000..9e0856075
--- /dev/null
+++ b/packages/webext/app/panel/main.ts
@@ -0,0 +1,15 @@
+import { createApp, h, Suspense } from 'vue'
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+const app = createApp({
+  render: () => h(Suspense, {}, {
+    default: () => h(App),
+    fallback: () => h('div', 'Loading...'),
+  }),
+})
+
+app.mount('#app')
diff --git a/packages/webext/app/panel/styles/main.css b/packages/webext/app/panel/styles/main.css
new file mode 100644
index 000000000..62167ab0f
--- /dev/null
+++ b/packages/webext/app/panel/styles/main.css
@@ -0,0 +1,13 @@
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/packages/webext/app/popup/App.vue b/packages/webext/app/popup/App.vue
new file mode 100644
index 000000000..20faafd3f
--- /dev/null
+++ b/packages/webext/app/popup/App.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+type DetectionStatus = 'checking' | 'detected' | 'vite-detected' | 'not-detected' | 'restricted' | 'error'
+
+interface StatusContent {
+  description: string
+  label: string
+  tone: 'ready' | 'active' | 'muted'
+}
+
+const STATUS_CONTENT: Record<DetectionStatus, StatusContent> = {
+  'checking': {
+    label: 'Checking',
+    description: 'Checking current page\u2026',
+    tone: 'muted',
+  },
+  'detected': {
+    label: 'Ready',
+    description: 'Open DevTools and select the Vite tab.',
+    tone: 'ready',
+  },
+  'vite-detected': {
+    label: 'Vite app detected',
+    description: 'Enable Vite DevTools to inspect this app.',
+    tone: 'active',
+  },
+  'not-detected': {
+    label: 'Not detected',
+    description: 'Open an app running on the Vite dev server.',
+    tone: 'muted',
+  },
+  'restricted': {
+    label: 'Restricted',
+    description: 'Chrome doesn\u2019t allow extensions to inspect this page.',
+    tone: 'muted',
+  },
+  'error': {
+    label: 'Unavailable',
+    description: 'Refresh the page and try again.',
+    tone: 'muted',
+  },
+}
+
+const status = ref<DetectionStatus>('checking')
+const statusContent = computed(() => STATUS_CONTENT[status.value])
+const statusBadgeClass = computed(() => ({
+  'status-ready': statusContent.value.tone === 'ready',
+  'bg-active color-active': statusContent.value.tone === 'active',
+  'bg-active color-base': statusContent.value.tone === 'muted',
+}))
+const logoUrl = chrome.runtime.getURL('icons/48.png')
+
+onMounted(async () => {
+  try {
+    const result = await chrome.runtime.sendMessage({
+      type: 'vite-devtools:detect-active-tab',
+    })
+
+    status.value = typeof result === 'string' && result in STATUS_CONTENT
+      ? result as DetectionStatus
+      : 'error'
+  }
+  catch {
+    status.value = 'error'
+  }
+})
+</script>
+
+<template>
+  <main class="w-80 bg-base font-sans color-base">
+    <header class="flex items-center px-3.5 pb-3 pt-3.5">
+      <img :src="logoUrl" alt="" class="h-6 w-6" width="24" height="24">
+      <h1 class="m-0 ml-2 text-sm font-600 leading-5">
+        Vite DevTools
+      </h1>
+
+      <span
+        class="ml-auto inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-600 leading-none"
+        :class="statusBadgeClass"
+      >
+        <span class="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true" />
+        {{ statusContent.label }}
+      </span>
+    </header>
+
+    <section
+      class="px-3.5 pb-4 pt-1"
+      role="status"
+      aria-live="polite"
+    >
+      <p class="m-0 text-xs leading-4.5 op55">
+        {{ statusContent.description }}
+      </p>
+    </section>
+
+    <nav class="flex justify-end gap-3 border-t border-base px-3.5 py-2.5" aria-label="Resources">
+      <a
+        href="https://devtools.vite.dev/"
+        target="_blank"
+        rel="noreferrer"
+        class="flex items-center gap-1.5 rounded color-base no-underline op55 outline-none transition hover:op100 focus-visible:ring-2 focus-visible:ring-primary-500/40"
+      >
+        <span class="i-ph-book-open-text h-3.5 w-3.5" aria-hidden="true" />
+        <span class="text-xs">Docs</span>
+      </a>
+      <a
+        href="https://github.com/vitejs/devtools"
+        target="_blank"
+        rel="noreferrer"
+        class="flex items-center gap-1.5 rounded color-base no-underline op55 outline-none transition hover:op100 focus-visible:ring-2 focus-visible:ring-primary-500/40"
+      >
+        <span class="i-ph-github-logo h-3.5 w-3.5" aria-hidden="true" />
+        <span class="text-xs">GitHub</span>
+      </a>
+    </nav>
+  </main>
+</template>
diff --git a/packages/webext/app/popup/main.ts b/packages/webext/app/popup/main.ts
new file mode 100644
index 000000000..92163ac0d
--- /dev/null
+++ b/packages/webext/app/popup/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+createApp(App).mount('#app')
diff --git a/packages/webext/app/popup/popup.html b/packages/webext/app/popup/popup.html
new file mode 100644
index 000000000..6c456871b
--- /dev/null
+++ b/packages/webext/app/popup/popup.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite DevTools</title>
+    <meta name="description" content="Vite DevTools status for the current page" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
+
diff --git a/packages/webext/app/popup/styles/main.css b/packages/webext/app/popup/styles/main.css
new file mode 100644
index 000000000..a06371fe7
--- /dev/null
+++ b/packages/webext/app/popup/styles/main.css
@@ -0,0 +1,15 @@
+html {
+  color-scheme: light dark;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  min-height: 100%;
+  padding: 0;
+}
+
+body {
+  min-width: 320px;
+}
diff --git a/packages/webext/app/scripts/background.ts b/packages/webext/app/scripts/background.ts
new file mode 100644
index 000000000..fadbd7aab
--- /dev/null
+++ b/packages/webext/app/scripts/background.ts
@@ -0,0 +1,128 @@
+import { DEVFRAME_CONNECTION_KEY } from 'devframe/constants'
+import { setActionIcon } from '../shared/action-icon'
+
+type DetectionStatus = 'detected' | 'vite-detected' | 'not-detected' | 'restricted' | 'error'
+
+const DETECTION_TIMEOUT = 10_000
+const DETECTION_INTERVAL = 500
+const RESTRICTED_PROTOCOLS = new Set([
+  'about:',
+  'chrome:',
+  'chrome-extension:',
+  'devtools:',
+  'edge:',
+])
+const DETECTION_STATUSES = new Set<DetectionStatus>([
+  'detected',
+  'vite-detected',
+  'not-detected',
+])
+
+function isRestrictedUrl(url: string | undefined): boolean {
+  if (!url)
+    return false
+
+  try {
+    const parsed = new URL(url)
+    return RESTRICTED_PROTOCOLS.has(parsed.protocol)
+      || parsed.hostname === 'chromewebstore.google.com'
+      || (parsed.hostname === 'chrome.google.com' && parsed.pathname.startsWith('/webstore'))
+  }
+  catch {
+    return true
+  }
+}
+
+async function detectPage(
+  connectionKey: string,
+  timeout: number,
+  interval: number,
+): Promise<DetectionStatus> {
+  const sleep = (duration: number) => new Promise(resolve => setTimeout(resolve, duration))
+  const isViteDevToolsEnabled = () => {
+    const connection = (globalThis as Record<string, unknown>)[connectionKey]
+    return Boolean(
+      connection
+      && typeof connection === 'object'
+      && typeof (connection as { metaBaseUrl?: unknown }).metaBaseUrl === 'string'
+      && (connection as { metaBaseUrl: string }).metaBaseUrl,
+    )
+  }
+
+  const viteDetected = Array.from(
+    document.querySelectorAll<HTMLScriptElement>('script[type="module"][src]'),
+  ).some((script) => {
+    const url = new URL(script.src, document.baseURI)
+    return url.pathname.endsWith('/@vite/client')
+  })
+
+  if (isViteDevToolsEnabled())
+    return 'detected'
+  if (!viteDetected)
+    return 'not-detected'
+
+  const attempts = Math.ceil(timeout / interval)
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    await sleep(interval)
+
+    if (isViteDevToolsEnabled())
+      return 'detected'
+  }
+
+  return 'vite-detected'
+}
+
+async function detectTab(
+  tab: chrome.tabs.Tab,
+  timeout = 0,
+): Promise<DetectionStatus> {
+  if (!tab.id)
+    return 'error'
+  if (isRestrictedUrl(tab.url))
+    return 'restricted'
+
+  try {
+    const [injection] = await chrome.scripting.executeScript({
+      args: [DEVFRAME_CONNECTION_KEY, timeout, DETECTION_INTERVAL],
+      func: detectPage,
+      target: { tabId: tab.id },
+      world: 'MAIN',
+    })
+    const status = injection?.result
+    return status && DETECTION_STATUSES.has(status) ? status : 'error'
+  }
+  catch {
+    return isRestrictedUrl(tab.url) ? 'restricted' : 'error'
+  }
+}
+
+async function updateTabIcon(tab: chrome.tabs.Tab, timeout = 0): Promise<DetectionStatus> {
+  const status = await detectTab(tab, timeout)
+  if (tab.id)
+    await setActionIcon(tab.id, status === 'detected')
+  return status
+}
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status === 'loading') {
+    setActionIcon(tabId, false)
+  }
+  else if (changeInfo.status === 'complete') {
+    updateTabIcon(tab, DETECTION_TIMEOUT)
+  }
+})
+
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message?.type !== 'vite-devtools:detect-active-tab')
+    return
+
+  chrome.tabs.query({ active: true, currentWindow: true })
+    .then(async ([tab]) => {
+      if (!tab)
+        return 'error' satisfies DetectionStatus
+      return updateTabIcon(tab)
+    })
+    .then(sendResponse, () => sendResponse('error'))
+
+  return true
+})
diff --git a/packages/webext/app/scripts/devtools-bg.ts b/packages/webext/app/scripts/devtools-bg.ts
new file mode 100644
index 000000000..1742a00df
--- /dev/null
+++ b/packages/webext/app/scripts/devtools-bg.ts
@@ -0,0 +1,62 @@
+import { DEVFRAME_CONNECTION_KEY } from 'devframe/constants'
+import { setActionIcon } from '../shared/action-icon'
+
+const META_CHECK_INTERVAL = 1000
+const META_CHECK_ATTEMPTS = 10
+const META_CHECK_EVAL = `Boolean(window[${JSON.stringify(DEVFRAME_CONNECTION_KEY)}]?.metaBaseUrl)`
+const PANEL_TITLE = 'Vite'
+const PANEL_ICON = 'icons/128.png'
+const PANEL_PAGE = 'dist/app/panel/devtools-panel.html'
+
+let isPanelCreated = false
+let checkId = 0
+
+function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+function checkConnectionMeta(): Promise<boolean> {
+  return new Promise((resolve) => {
+    chrome.devtools.inspectedWindow.eval<boolean>(META_CHECK_EVAL, (result, exceptionInfo) => {
+      resolve(!exceptionInfo && Boolean(result))
+    })
+  })
+}
+
+function createPanel() {
+  if (isPanelCreated)
+    return
+
+  isPanelCreated = true
+  chrome.devtools.panels.create(PANEL_TITLE, PANEL_ICON, PANEL_PAGE, () => {})
+}
+
+async function checkPanel() {
+  if (isPanelCreated)
+    return
+
+  const currentCheckId = ++checkId
+
+  for (let attempt = 0; attempt < META_CHECK_ATTEMPTS; attempt++) {
+    if (await checkConnectionMeta()) {
+      if (currentCheckId === checkId) {
+        setActionIcon(chrome.devtools.inspectedWindow.tabId, true)
+        createPanel()
+      }
+      return
+    }
+
+    if (attempt < META_CHECK_ATTEMPTS - 1)
+      await sleep(META_CHECK_INTERVAL)
+
+    if (currentCheckId !== checkId)
+      return
+  }
+}
+
+chrome.devtools.network.onNavigated.addListener(() => {
+  setActionIcon(chrome.devtools.inspectedWindow.tabId, false)
+  checkPanel()
+})
+
+checkPanel()
diff --git a/packages/webext/app/shared/action-icon.ts b/packages/webext/app/shared/action-icon.ts
new file mode 100644
index 000000000..36436d42b
--- /dev/null
+++ b/packages/webext/app/shared/action-icon.ts
@@ -0,0 +1,23 @@
+const ACTIVE_ICONS = {
+  16: '/icons/16.png',
+  48: '/icons/48.png',
+  128: '/icons/128.png',
+}
+
+const INACTIVE_ICONS = {
+  16: '/icons/16-inactive.png',
+  48: '/icons/48-inactive.png',
+  128: '/icons/128-inactive.png',
+}
+
+export async function setActionIcon(tabId: number, active: boolean): Promise<void> {
+  try {
+    await chrome.action.setIcon({
+      tabId,
+      path: active ? ACTIVE_ICONS : INACTIVE_ICONS,
+    })
+  }
+  catch {
+    // Ignore expected tab-close races.
+  }
+}
diff --git a/packages/webext/icons/128-gray.png b/packages/webext/icons/128-gray.png
deleted file mode 100644
index 2ee4a68dd..000000000
Binary files a/packages/webext/icons/128-gray.png and /dev/null differ
diff --git a/packages/webext/icons/128-inactive.png b/packages/webext/icons/128-inactive.png
new file mode 100644
index 000000000..0f1e9ea88
Binary files /dev/null and b/packages/webext/icons/128-inactive.png differ
diff --git a/packages/webext/icons/128.png b/packages/webext/icons/128.png
index 060608745..6b170155a 100644
Binary files a/packages/webext/icons/128.png and b/packages/webext/icons/128.png differ
diff --git a/packages/webext/icons/16-gray.png b/packages/webext/icons/16-gray.png
deleted file mode 100644
index 8f9b39da4..000000000
Binary files a/packages/webext/icons/16-gray.png and /dev/null differ
diff --git a/packages/webext/icons/16-inactive.png b/packages/webext/icons/16-inactive.png
new file mode 100644
index 000000000..79a9a30ac
Binary files /dev/null and b/packages/webext/icons/16-inactive.png differ
diff --git a/packages/webext/icons/16.png b/packages/webext/icons/16.png
index 74516e9cf..66fc1a7c2 100644
Binary files a/packages/webext/icons/16.png and b/packages/webext/icons/16.png differ
diff --git a/packages/webext/icons/48-gray.png b/packages/webext/icons/48-gray.png
deleted file mode 100644
index b730a901b..000000000
Binary files a/packages/webext/icons/48-gray.png and /dev/null differ
diff --git a/packages/webext/icons/48-inactive.png b/packages/webext/icons/48-inactive.png
new file mode 100644
index 000000000..43d32bbcb
Binary files /dev/null and b/packages/webext/icons/48-inactive.png differ
diff --git a/packages/webext/icons/48.png b/packages/webext/icons/48.png
index baadcfdb2..67a464e74 100644
Binary files a/packages/webext/icons/48.png and b/packages/webext/icons/48.png differ
diff --git a/packages/webext/manifest.json b/packages/webext/manifest.json
index d1ae8fb23..c925776a4 100644
--- a/packages/webext/manifest.json
+++ b/packages/webext/manifest.json
@@ -1,57 +1,35 @@
 {
   "action": {
+    "default_title": "Vite DevTools",
+    "default_popup": "dist/app/popup/popup.html",
     "default_icon": {
-      "16": "icons/16-gray.png",
-      "48": "icons/48-gray.png",
-      "128": "icons/128-gray.png"
-    },
-    "default_popup": "popups/not-found.html",
-    "default_title": "Vite DevTools"
+      "16": "icons/16-inactive.png",
+      "48": "icons/48-inactive.png",
+      "128": "icons/128-inactive.png"
+    }
   },
   "background": {
     "service_worker": "dist/background.js",
     "type": "module"
   },
-  "content_scripts": [
-    {
-      "js": [
-        "dist/proxy.js"
-      ],
-      "matches": [
-        "<all_urls>"
-      ]
-    }
-  ],
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'"
   },
   "description": "DevTools browser extension for Vite",
-  "devtools_page": "pages/devtools-background.html",
-  "host_permissions": [
-    "<all_urls>"
-  ],
+  "devtools_page": "app/background/background.html",
   "icons": {
     "16": "icons/16.png",
     "48": "icons/48.png",
     "128": "icons/128.png"
   },
+  "host_permissions": [
+    "<all_urls>"
+  ],
   "manifest_version": 3,
   "name": "Vite DevTools",
   "permissions": [
     "scripting"
   ],
   "version": "0.0.0",
-  "version_name": "0.0.0",
-  "web_accessible_resources": [
-    {
-      "extension_ids": [],
-      "matches": [
-        "<all_urls>"
-      ],
-      "resources": [
-        "dist/*",
-        "pages/*"
-      ]
-    }
-  ]
+  "version_name": "0.0.0"
 }
diff --git a/packages/webext/package.json b/packages/webext/package.json
index 03e86fcec..9fc830ef0 100644
--- a/packages/webext/package.json
+++ b/packages/webext/package.json
@@ -20,15 +20,26 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build:extension": "tsx scripts/build-app.ts && tsdown",
-    "watch": "tsdown --watch",
-    "prepack": "pnpm build:extension"
+    "build": "pnpm run build:scripts && pnpm run build:client",
+    "build:scripts": "tsdown",
+    "build:client": "vite build",
+    "watch": "turbo watch build --filter=@vitejs/devtools-webext",
+    "prepack": "pnpm build",
+    "zip": "tsx scripts/zip.ts"
   },
   "dependencies": {
+    "devframe": "catalog:deps",
     "webext-bridge": "catalog:deps"
   },
   "devDependencies": {
+    "@types/archiver": "catalog:types",
+    "@types/chrome": "catalog:types",
+    "@vitejs/plugin-vue": "catalog:build",
+    "archiver": "catalog:build",
     "tsdown": "catalog:build",
-    "tsx": "catalog:build"
+    "tsx": "catalog:build",
+    "unocss": "catalog:build",
+    "vite": "catalog:build",
+    "vue": "catalog:deps"
   }
 }
diff --git a/packages/webext/pages/devtools-background.html b/packages/webext/pages/devtools-background.html
deleted file mode 100644
index 7596585ad..000000000
--- a/packages/webext/pages/devtools-background.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <title></title>
-  </head>
-  <body>
-    <script src="../dist/devtools-background.js"></script>
-  </body>
-</html>
diff --git a/packages/webext/pages/devtools-panel.html b/packages/webext/pages/devtools-panel.html
deleted file mode 100644
index 11ad59586..000000000
--- a/packages/webext/pages/devtools-panel.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en" class="bg-dots">
-  <head>
-    <link rel="stylesheet" href="../dist/app/devtools-app.css" />
-  </head>
-  <body>
-    <div id="__nuxt"></div>
-    <div id="teleports"></div>
-    <script type="module" src="../dist/devtools-panel.js"></script>
-  </body>
-</html>
diff --git a/packages/webext/popups/not-found.html b/packages/webext/popups/not-found.html
deleted file mode 100644
index 081a0ee45..000000000
--- a/packages/webext/popups/not-found.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<meta charset="utf-8" />
-
-<p>
-  <strong>Vite not detected</strong>
-</p>
diff --git a/packages/webext/scripts/build-app.ts b/packages/webext/scripts/build-app.ts
deleted file mode 100644
index f7fa0e4a6..000000000
--- a/packages/webext/scripts/build-app.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { buildNuxt, loadNuxt, useNuxt, writeTypes } from '@nuxt/kit'
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
-const root = path.resolve(__dirname, '../../devtools-rolldown/src')
-const buildDir = path.resolve(__dirname, '../dist/nuxt')
-const distDir = path.resolve(__dirname, '../dist')
-
-async function prepareTypes() {
-  const nuxt = await loadNuxt({
-    cwd: root,
-    dev: false,
-    overrides: {
-      _prepare: true,
-    },
-  })
-
-  await writeTypes(nuxt)
-}
-
-export async function buildDevToolsApp(buildDir: string): Promise<void> {
-  fs.rmSync(distDir, { recursive: true, force: true })
-  await prepareTypes()
-
-  const nuxt = await loadNuxt({
-    cwd: root,
-    dev: false,
-    overrides: {
-      buildDir,
-      ssr: false,
-      router: {
-        options: { hashMode: true },
-      },
-      experimental: {
-        appManifest: false,
-      },
-      vite: {
-        plugins: [
-          {
-            name: 'mount-app-dynamically',
-            enforce: 'pre',
-            transform(code, id) {
-              if (/nuxt(?:3|-nightly)?\/.*\/entry\./.test(id)) {
-                return `${code
-                  .replace(/vueAppPromise = entry\(\)\.catch\(\(error\) => \{[\s\S]*?\}\);/g, '')
-                  .replace(/export default \(ssrContext\) => entry\(ssrContext\)/g, '')
-                }export const mountApp = entry;`
-              }
-            },
-          },
-        ],
-      },
-      nitro: {
-        preset: '',
-      },
-      hooks: {
-        // skip build nitro server
-        'vite:compiled': function () {
-          const nuxt = useNuxt()
-          nuxt.hooks.removeAllHooks()
-        },
-      },
-    },
-  })
-
-  return new Promise<void>((resolve, reject) => {
-    nuxt.hooks.hook('vite:extend', ({ config }) => {
-      config.build = {
-        ...config.build,
-        lib: {
-          // @ts-expect-error skip type check
-          entry: config.build.rollupOptions.input.entry,
-          name: 'devtools-app',
-          fileName: () => `devtools-app.js`,
-          cssFileName: `devtools-app.css`,
-          formats: ['es'],
-        },
-        rollupOptions: {
-          ...config.build?.rollupOptions,
-          output: {
-            assetFileNames: 'devtools-app.[ext]',
-          },
-        },
-      }
-    })
-
-    buildNuxt(nuxt).then(() => {
-      resolve()
-      fs.renameSync(path.resolve(buildDir, 'dist/client'), path.resolve(buildDir, '..', 'app'))
-      fs.rmSync(path.resolve(distDir, 'nuxt'), { recursive: true, force: true })
-    }).catch((err) => {
-      console.error('build devtools app failed:', err)
-      if (!err.toString().includes('_stop_')) {
-        reject(err)
-      }
-    })
-  }).finally(() => nuxt.close())
-}
-
-buildDevToolsApp(buildDir)
diff --git a/packages/webext/scripts/zip.ts b/packages/webext/scripts/zip.ts
new file mode 100644
index 000000000..8fdcb229f
--- /dev/null
+++ b/packages/webext/scripts/zip.ts
@@ -0,0 +1,125 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import archiver from 'archiver'
+
+type ManifestFileCollection = string[] | Record<string, string>
+
+interface ExtensionManifest {
+  devtools_page?: string
+  background?: { service_worker?: string }
+  action?: { default_icon?: ManifestFileCollection, default_popup?: string }
+  icons?: ManifestFileCollection
+  content_scripts?: Array<{ js?: string[], css?: string[] }>
+}
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const rootDir = path.resolve(packageDir, '../..')
+const outDir = path.join(rootDir, 'dist')
+const outFile = path.join(outDir, 'vite-devtools-chrome.zip')
+const include = [
+  'app/background/**',
+  'dist/**',
+  'icons/**',
+  'manifest.json',
+  'package.json',
+]
+const ignore = [
+  '**/.DS_Store',
+  '**/node_modules/**',
+  '**/*.d.cts',
+  '**/*.d.mts',
+  '**/*.d.ts',
+  '**/*.map',
+  '**/*.tsbuildinfo',
+]
+
+const manifest = JSON.parse(fs.readFileSync(path.join(packageDir, 'manifest.json'), 'utf8')) as ExtensionManifest
+const requiredFiles = collectManifestFiles(manifest)
+
+fs.rmSync(outFile, { force: true })
+fs.mkdirSync(outDir, { recursive: true })
+
+const output = fs.createWriteStream(outFile)
+const archive = archiver('zip', { zlib: { level: 9 } })
+const entries = new Set<string>()
+
+const done = new Promise<void>((resolve, reject) => {
+  output.on('close', resolve)
+  output.on('error', reject)
+  archive.on('entry', entry => entries.add(entry.name))
+  archive.on('error', reject)
+  archive.on('warning', (error) => {
+    if (error.code === 'ENOENT')
+      return
+    reject(error)
+  })
+})
+
+archive.pipe(output)
+for (const pattern of include) {
+  archive.glob(pattern, {
+    cwd: packageDir,
+    ignore,
+  })
+}
+
+await archive.finalize()
+await done
+
+const size = archive.pointer()
+if (size < 1000)
+  throw new Error(`Zip file is unexpectedly small: ${size} bytes`)
+
+for (const file of requiredFiles) {
+  if (!entries.has(file))
+    throw new Error(`Manifest file is missing from zip: ${file}`)
+}
+
+console.log(`Created ${path.relative(rootDir, outFile)} (${formatBytes(size)}, ${entries.size} files)`)
+
+function collectManifestFiles(manifest: ExtensionManifest): Set<string> {
+  const files = new Set(['manifest.json'])
+
+  add(files, manifest.devtools_page)
+  add(files, manifest.background?.service_worker)
+  add(files, manifest.action?.default_popup)
+  addAll(files, manifest.action?.default_icon)
+  addAll(files, manifest.icons)
+
+  for (const contentScript of manifest.content_scripts ?? []) {
+    addAll(files, contentScript.js)
+    addAll(files, contentScript.css)
+  }
+
+  return files
+}
+
+function add(files: Set<string>, value: string | undefined): void {
+  if (typeof value === 'string')
+    files.add(value)
+}
+
+function addAll(files: Set<string>, value: ManifestFileCollection | undefined): void {
+  if (Array.isArray(value)) {
+    for (const entry of value)
+      add(files, entry)
+    return
+  }
+
+  if (value && typeof value === 'object') {
+    for (const entry of Object.values(value))
+      add(files, entry)
+  }
+}
+
+function formatBytes(bytes: number): string {
+  const units = ['B', 'KB', 'MB', 'GB']
+  let size = bytes
+  let unit = 0
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024
+    unit += 1
+  }
+  return `${size.toFixed(unit === 0 ? 0 : 2)} ${units[unit]}`
+}
diff --git a/packages/webext/src/background.ts b/packages/webext/src/background.ts
deleted file mode 100644
index fe44b7bd3..000000000
--- a/packages/webext/src/background.ts
+++ /dev/null
@@ -1 +0,0 @@
-import 'webext-bridge/background'
diff --git a/packages/webext/src/devtools-background.ts b/packages/webext/src/devtools-background.ts
deleted file mode 100644
index 7693ba1db..000000000
--- a/packages/webext/src/devtools-background.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-const checkInfo = {
-  viteDetected: false,
-  checkCount: 0,
-}
-const checkViteInterval = window.setInterval(() => {
-  if (checkInfo.viteDetected || checkInfo.checkCount > 10) {
-    clearInterval(checkViteInterval)
-    return
-  }
-
-  createDevToolsPanel()
-  checkInfo.checkCount++
-}, 1000)
-
-function createDevToolsPanel() {
-  // TODO (hold-off): detect vite env
-  chrome.devtools.inspectedWindow.eval('true', (detected) => {
-    if (!detected || checkInfo.viteDetected) {
-      return
-    }
-
-    checkInfo.viteDetected = true
-    clearInterval(checkViteInterval)
-
-    chrome.devtools.panels.create('Vite', 'icons/128.png', 'pages/devtools-panel.html', (panel) => {
-      panel.onShown.addListener(() => {
-        // update devtools panel state here
-      })
-      panel.onHidden.addListener(() => {
-        // update devtools panel state here
-      })
-    })
-  })
-}
diff --git a/packages/webext/src/devtools-panel.ts b/packages/webext/src/devtools-panel.ts
deleted file mode 100644
index 0c14cb55f..000000000
--- a/packages/webext/src/devtools-panel.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { sendMessage } from 'webext-bridge/devtools'
-import { ViteDevToolsEvent } from './event'
-
-function injectScript(scriptName: string, cb: () => void) {
-  const src = `
-    (function() {
-      var script = document.constructor.prototype.createElement.call(document, 'script');
-      script.src = "${scriptName}";
-      script.type = "module";
-      document.documentElement.appendChild(script);
-      script.parentNode.removeChild(script);
-    })()
-  `
-  let timeoutId: number = null!
-  function execute() {
-    clearTimeout(timeoutId)
-    chrome.devtools.inspectedWindow.eval(src, (res, err) => {
-      if (err) {
-        // @ts-expect-error skip type check
-        timeoutId = setTimeout(() => {
-          execute()
-        }, 100)
-        return
-      }
-
-      cb()
-    })
-  }
-  execute()
-}
-
-async function getMetadata() {
-  return await sendMessage(ViteDevToolsEvent.GET_METADATA, {}, 'content-script')
-}
-
-async function connectToDevToolsApp() {
-  const metadata = await getMetadata()
-  window.__NUXT__ = {}
-  window.__NUXT__.config = { public: {}, app: { baseURL: '/', buildAssetsDir: '/_nuxt/', cdnURL: '', metadata } }
-  // @ts-expect-error skip type check
-  const appModule = await import('./app/devtools-app.js')
-  appModule.mountApp()
-}
-
-function init() {
-  // inject script to window
-  injectScript(chrome.runtime.getURL('dist/window.js'), async () => {
-    connectToDevToolsApp()
-  })
-
-  chrome.devtools.network.onNavigated.addListener(() => {
-    // unmount current devtools client
-    injectScript(chrome.runtime.getURL('dist/window.js'), () => {
-      // reconnect to new devtools client
-    })
-  })
-}
-
-init()
diff --git a/packages/webext/src/event.ts b/packages/webext/src/event.ts
deleted file mode 100644
index 785d296db..000000000
--- a/packages/webext/src/event.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const VITE_DEVTOOLS_NAMESPACE = 'VITE_DEVTOOLS'
-export enum ViteDevToolsEvent {
-  GET_METADATA = 'vite-devtools:get-metadata',
-}
diff --git a/packages/webext/src/proxy.ts b/packages/webext/src/proxy.ts
deleted file mode 100644
index 2b0f0029f..000000000
--- a/packages/webext/src/proxy.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { allowWindowMessaging, onMessage, sendMessage } from 'webext-bridge/content-script'
-import { VITE_DEVTOOLS_NAMESPACE, ViteDevToolsEvent } from './event'
-
-allowWindowMessaging(VITE_DEVTOOLS_NAMESPACE)
-onMessage(ViteDevToolsEvent.GET_METADATA, async () => {
-  return await sendMessage(ViteDevToolsEvent.GET_METADATA, {}, 'window')
-})
diff --git a/packages/webext/src/window.ts b/packages/webext/src/window.ts
deleted file mode 100644
index 1c9c0c8da..000000000
--- a/packages/webext/src/window.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { onMessage, setNamespace } from 'webext-bridge/window'
-import { VITE_DEVTOOLS_NAMESPACE, ViteDevToolsEvent } from './event'
-
-setNamespace(VITE_DEVTOOLS_NAMESPACE)
-onMessage(ViteDevToolsEvent.GET_METADATA, () => {
-  // TODO (hold-off): get metadata from api endpoint
-  return {
-    backend: 'websocket',
-    websocket: `${location.protocol.replace('http', 'ws')}//${location.hostname}:7812`,
-  }
-})
diff --git a/packages/webext/tsconfig.json b/packages/webext/tsconfig.json
index 14381f3d1..666430e14 100644
--- a/packages/webext/tsconfig.json
+++ b/packages/webext/tsconfig.json
@@ -1,11 +1,17 @@
 {
   "compilerOptions": {
     "composite": true,
+    "target": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable"],
     "module": "esnext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
+    "types": ["chrome", "vite/client"],
     "noEmit": true,
-    "isolatedDeclarations": true,
     "skipLibCheck": true
-  }
+  },
+  "include": [
+    "./**/*.ts",
+    "./app/**/*.vue"
+  ]
 }
diff --git a/packages/webext/tsdown.config.ts b/packages/webext/tsdown.config.ts
index a5ee3e8ca..f302e992e 100644
--- a/packages/webext/tsdown.config.ts
+++ b/packages/webext/tsdown.config.ts
@@ -1,20 +1,16 @@
 import { defineConfig } from 'tsdown'
 
-export default defineConfig([{
+export default defineConfig({
   entry: [
-    'src/*.ts',
-    '!src/proxy.ts',
+    'app/scripts/*.ts',
   ],
-  clean: false,
-  external: ['./app/devtools-app.js'],
-  noExternal: [/^webext-bridge\/.*/],
-}, {
-  entry: ['src/proxy.ts'],
-  clean: false,
-  format: 'iife',
-  outputOptions: {
-    entryFileNames: '[name].js',
+  tsconfig: './tsconfig.json',
+  target: 'esnext',
+  deps: {
+    alwaysBundle: [
+      /^devframe(?:\/.*)?$/,
+    ],
   },
-  noExternal: [/^webext-bridge\/.*/],
-  inlineOnly: false,
-}])
+  platform: 'browser',
+  clean: true,
+})
diff --git a/packages/webext/uno.config.ts b/packages/webext/uno.config.ts
new file mode 100644
index 000000000..fc4742b1e
--- /dev/null
+++ b/packages/webext/uno.config.ts
@@ -0,0 +1,36 @@
+import { sharedShortcuts } from '@vitejs/devtools-ui/unocss/shared-shortcuts'
+import { theme } from '@vitejs/devtools-ui/unocss/theme'
+import {
+  defineConfig,
+  presetIcons,
+  presetWind3,
+  transformerDirectives,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    ...sharedShortcuts,
+    {
+      'status-ready': 'bg-green-500/10 color-green-600 dark:color-green-400',
+    },
+  ],
+  transformers: [
+    transformerDirectives(),
+  ],
+  theme: {
+    colors: theme.colors,
+  },
+  presets: [
+    presetWind3({
+      dark: 'media',
+      variablePrefix: 'vdt-',
+    }),
+    presetIcons({
+      warn: true,
+      collections: {
+        logos: () => import('@iconify-json/logos').then(i => i.icons),
+        ph: () => import('@iconify-json/ph').then(i => i.icons),
+      },
+    }),
+  ],
+})
diff --git a/packages/webext/vite.config.ts b/packages/webext/vite.config.ts
new file mode 100644
index 000000000..3c54089bc
--- /dev/null
+++ b/packages/webext/vite.config.ts
@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'node:url'
+import Vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+
+const rootDir = fileURLToPath(new URL('.', import.meta.url))
+const workspaceDir = fileURLToPath(new URL('..', import.meta.url))
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    Vue(),
+    UnoCSS(),
+  ],
+  server: {
+    fs: {
+      allow: [
+        workspaceDir,
+      ],
+    },
+  },
+  build: {
+    outDir: fileURLToPath(new URL('./dist', import.meta.url)),
+    emptyOutDir: false,
+    rolldownOptions: {
+      input: {
+        'devtools-panel': fileURLToPath(new URL('./app/panel/devtools-panel.html', import.meta.url)),
+        'popup': fileURLToPath(new URL('./app/popup/popup.html', import.meta.url)),
+      },
+    },
+  },
+  resolve: {
+    dedupe: ['vue'],
+  },
+  root: rootDir,
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c54222ddf..1ec9491a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ catalogs:
     '@vueuse/nuxt':
       specifier: ^14.4.0
       version: 14.4.0
+    archiver:
+      specifier: ^7.0.1
+      version: 7.0.1
     magic-string:
       specifier: ^1.1.0
       version: 1.1.0
@@ -403,6 +406,9 @@ catalogs:
       specifier: ^4.1.10
       version: 4.1.10
   types:
+    '@types/archiver':
+      specifier: ^7.0.0
+      version: 7.0.0
     '@types/chrome':
       specifier: ^0.2.5
       version: 0.2.5
@@ -1319,16 +1325,40 @@ importers:
 
   packages/webext:
     dependencies:
+      devframe:
+        specifier: catalog:deps
+        version: 0.9.0-beta.2(cac@7.0.0)(srvx@0.12.4)
       webext-bridge:
         specifier: catalog:deps
         version: 6.0.1
     devDependencies:
+      '@types/archiver':
+        specifier: catalog:types
+        version: 7.0.0
+      '@types/chrome':
+        specifier: catalog:types
+        version: 0.2.5
+      '@vitejs/plugin-vue':
+        specifier: catalog:build
+        version: 6.0.8(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))
+      archiver:
+        specifier: catalog:build
+        version: 7.0.1
       tsdown:
         specifier: catalog:build
         version: 0.22.14(@vitejs/devtools@0.4.12)(@volar/typescript@2.4.28(typescript@6.0.3))(oxc-resolver@11.24.2)(publint@0.3.21)(tsx@4.23.9)(typescript@6.0.3)(unrun@0.3.1(synckit@0.11.13))(vue-tsc@3.3.9(typescript@6.0.3))
       tsx:
         specifier: catalog:build
         version: 4.23.9
+      unocss:
+        specifier: catalog:build
+        version: 66.7.5(@unocss/webpack@66.7.5(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))(vite@8.2.1)
+      vite:
+        specifier: ^8.2.1
+        version: 8.2.1(@types/node@25.0.3)(@vitejs/devtools@0.4.12)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.44.1)(tsx@4.23.9)(yaml@2.9.0)
+      vue:
+        specifier: catalog:deps
+        version: 3.5.41(typescript@6.0.3)
 
   playgrounds/core:
     dependencies:
@@ -4150,6 +4180,9 @@ packages:
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
+  '@types/archiver@7.0.0':
+    resolution: {integrity: sha512-/3vwGwx9n+mCQdYZ2IKGGHEFL30I96UgBlk8EtRDDFQ9uxM1l4O5Ci6r00EMAkiDaTqD9DQ6nVrWRICnBPtzzg==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -4350,6 +4383,9 @@ packages:
   '@types/react@19.2.18':
     resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
 
+  '@types/readdir-glob@1.1.5':
+    resolution: {integrity: sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -11749,7 +11785,7 @@ snapshots:
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 4.5.2(magic-string@1.1.0)(magicast@0.5.4)(oxc-parser@0.142.0)(rolldown@1.2.3)(unplugin@3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))
-      '@unhead/vue': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.11.22)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.40(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@unhead/vue': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.11.22)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))
       '@vue/shared': 3.5.40
       consola: 3.4.2
       defu: 6.1.7
@@ -11773,7 +11809,7 @@ snapshots:
       ufo: 1.6.4
       unctx: 3.0.0(magic-string@1.1.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(unplugin@3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))
       unstorage: 1.17.5(db0@0.3.4)(idb-keyval@6.3.0)(ioredis@5.10.1(supports-color@10.2.2))
-      vue: 3.5.40(typescript@6.0.3)
+      vue: 3.5.41(typescript@6.0.3)
       vue-bundle-renderer: 2.3.1
       vue-devtools-stub: 0.1.0
     optionalDependencies:
@@ -11833,7 +11869,7 @@ snapshots:
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 4.5.2(magic-string@1.1.0)(magicast@0.5.4)(oxc-parser@0.142.0)(rolldown@1.2.3)(unplugin@3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))
-      '@unhead/vue': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.12.4)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.40(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@unhead/vue': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.12.4)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))
       '@vue/shared': 3.5.40
       consola: 3.4.2
       defu: 6.1.7
@@ -11857,7 +11893,7 @@ snapshots:
       ufo: 1.6.4
       unctx: 3.0.0(magic-string@1.1.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(unplugin@3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))
       unstorage: 1.17.5(db0@0.3.4)(idb-keyval@6.3.0)(ioredis@5.10.1(supports-color@10.2.2))
-      vue: 3.5.40(typescript@6.0.3)
+      vue: 3.5.41(typescript@6.0.3)
       vue-bundle-renderer: 2.3.1
       vue-devtools-stub: 0.1.0
     optionalDependencies:
@@ -11917,7 +11953,7 @@ snapshots:
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 4.5.2(magic-string@1.1.0)(magicast@0.5.4)(oxc-parser@0.142.0)(rolldown@1.2.3)(unplugin@3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))
-      '@unhead/vue': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@packages+kit)(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.40(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@unhead/vue': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@packages+kit)(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))
       '@vue/shared': 3.5.40
       consola: 3.4.2
       defu: 6.1.7
@@ -11941,7 +11977,7 @@ snapshots:
       ufo: 1.6.4
       unctx: 3.0.0(magic-string@1.1.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(unplugin@3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))
       unstorage: 1.17.5(db0@0.3.4)(idb-keyval@6.3.0)(ioredis@5.10.1(supports-color@10.2.2))
-      vue: 3.5.40(typescript@6.0.3)
+      vue: 3.5.41(typescript@6.0.3)
       vue-bundle-renderer: 2.3.1
       vue-devtools-stub: 0.1.0
     optionalDependencies:
@@ -13275,6 +13311,10 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/archiver@7.0.0':
+    dependencies:
+      '@types/readdir-glob': 1.1.5
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -13509,6 +13549,10 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/readdir-glob@1.1.5':
+    dependencies:
+      '@types/node': 25.0.3
+
   '@types/resolve@1.20.2': {}
 
   '@types/splitpanes@2.2.6':
@@ -13718,6 +13762,30 @@ snapshots:
       - rollup
       - unloader
 
+  '@unhead/vue@3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.11.22)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      '@unhead/bundler': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.11.22)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(unhead@3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      hookable: 6.1.1
+      unhead: 3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      unplugin: 3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      vue: 3.5.41(typescript@6.0.3)
+    optionalDependencies:
+      vite: 8.2.1(@types/node@25.0.3)(@vitejs/devtools@0.4.12)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.44.1)(tsx@4.23.9)(yaml@2.9.0)
+      webpack: 5.104.1(esbuild@0.28.1)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@oxc-project/types'
+      - '@rspack/core'
+      - '@unhead/cli'
+      - '@vitejs/devtools-kit'
+      - bun-types-no-globals
+      - esbuild
+      - lightningcss
+      - oxc-parser
+      - rolldown
+      - rollup
+      - unloader
+
   '@unhead/vue@3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.12.4)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.40(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))':
     dependencies:
       '@unhead/bundler': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.12.4)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(unhead@3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
@@ -13742,6 +13810,30 @@ snapshots:
       - rollup
       - unloader
 
+  '@unhead/vue@3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.12.4)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      '@unhead/bundler': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@0.4.12(cac@7.0.0)(srvx@0.12.4)(vite@8.2.1))(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(unhead@3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      hookable: 6.1.1
+      unhead: 3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      unplugin: 3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      vue: 3.5.41(typescript@6.0.3)
+    optionalDependencies:
+      vite: 8.2.1(@types/node@25.0.3)(@vitejs/devtools@0.4.12)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.44.1)(tsx@4.23.9)(yaml@2.9.0)
+      webpack: 5.104.1(esbuild@0.28.1)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@oxc-project/types'
+      - '@rspack/core'
+      - '@unhead/cli'
+      - '@vitejs/devtools-kit'
+      - bun-types-no-globals
+      - esbuild
+      - lightningcss
+      - oxc-parser
+      - rolldown
+      - rollup
+      - unloader
+
   '@unhead/vue@3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@packages+kit)(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.40(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))':
     dependencies:
       '@unhead/bundler': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@packages+kit)(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(unhead@3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
@@ -13766,6 +13858,30 @@ snapshots:
       - rollup
       - unloader
 
+  '@unhead/vue@3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@packages+kit)(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(vue@3.5.41(typescript@6.0.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      '@unhead/bundler': 3.3.1(@oxc-project/types@0.143.0)(@vitejs/devtools-kit@packages+kit)(esbuild@0.28.1)(lightningcss@1.33.0)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.60.2)(unhead@3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1)))(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      hookable: 6.1.1
+      unhead: 3.3.1(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      unplugin: 3.3.0(esbuild@0.28.1)(rolldown@1.2.3)(rollup@4.60.2)(vite@8.2.1)(webpack@5.104.1(esbuild@0.28.1))
+      vue: 3.5.41(typescript@6.0.3)
+    optionalDependencies:
+      vite: 8.2.1(@types/node@25.0.3)(@vitejs/devtools@0.4.12)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.44.1)(tsx@4.23.9)(yaml@2.9.0)
+      webpack: 5.104.1(esbuild@0.28.1)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@oxc-project/types'
+      - '@rspack/core'
+      - '@unhead/cli'
+      - '@vitejs/devtools-kit'
+      - bun-types-no-globals
+      - esbuild
+      - lightningcss
+      - oxc-parser
+      - rolldown
+      - rollup
+      - unloader
+
   '@unocss/cli@66.7.5':
     dependencies:
       '@jridgewell/remapping': 2.3.5
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 0ffcaf6e5..251011c30 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -59,6 +59,7 @@ catalogs:
     '@unocss/nuxt': *unocss
     '@vitejs/plugin-vue': ^6.0.8
     '@vueuse/nuxt': ^14.4.0
+    archiver: ^7.0.1
     esbuild: ^0.28.1
     magic-string: ^1.1.0
     nitropack: ^2.13.4
@@ -207,6 +208,7 @@ catalogs:
     tsnapi: ^1.2.0
     vitest: ^4.1.10
   types:
+    '@types/archiver': ^7.0.0
     '@types/chrome': ^0.2.5
     '@types/connect': ^3.4.38
     '@types/d3': ^7.4.3
diff --git a/tsconfig.json b/tsconfig.json
index 07aae2601..5da949215 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,8 @@
   "references": [
     { "path": "./packages/oxc/src/tsconfig.json" },
     { "path": "./packages/rolldown/src/tsconfig.json" },
-    { "path": "./packages/vite/src/tsconfig.json" }
+    { "path": "./packages/vite/src/tsconfig.json" },
+    { "path": "./packages/webext/tsconfig.json" }
   ],
   "files": []
 }
diff --git a/turbo.json b/turbo.json
index 2a79e323f..49540c0bc 100644
--- a/turbo.json
+++ b/turbo.json
@@ -56,6 +56,9 @@
     },
     "@vitejs/devtools-webext#build": {
       "outputLogs": "new-only",
+      "dependsOn": [
+        "^build"
+      ],
       "outputs": [
         "dist/**"
       ]