diff --git a/.eslintignore b/.eslintignore
index a8db16f4..99e0829e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,4 @@ dist
 node_modules
 public
 extension
+extension-firefox
diff --git a/.gitignore b/.gitignore
index 89e3cdde..fe7e78ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@
 dist
 dist-ssr
 extension/
+extension-firefox/
 node_modules
 src/auto-imports.d.ts
 src/components.d.ts
diff --git a/package.json b/package.json
index d32eb2dc..a9d2dd8b 100644
--- a/package.json
+++ b/package.json
@@ -14,18 +14,20 @@
     "dev:js": "npm run build:js -- --mode development",
     "dev:bg": "tsup --watch ./src",
     "build": "cross-env NODE_ENV=production run-s clear build:web build:prepare build:js build:bg",
-    "build-firefox": "cross-env NODE_ENV=production FIREFOX=true run-s clear build:web build:prepare build:js build:bg",
+    "build-firefox": "cross-env NODE_ENV=production FIREFOX=true run-s clear-firefox build:web build:prepare build:js build:bg",
     "build:prepare": "esno scripts/prepare.ts",
     "build:web": "vite build",
     "build:js": "vite build --config vite.config.content.ts",
     "build:bg": "tsup",
     "pack": "cross-env NODE_ENV=production run-p pack:*",
     "pack:zip": "rimraf extension.zip && jszip-cli add extension/* -o ./extension.zip",
+    "pack:firefox-zip": "rimraf extension-firefox.zip && jszip-cli add extension-firefox/* -o ./extension-firefox.zip",
     "pack:crx": "crx pack extension -o ./extension.crx",
-    "pack:xpi": "cross-env WEB_EXT_ARTIFACTS_DIR=./ FIREFOX=true web-ext build --source-dir ./extension --filename extension.xpi --overwrite-dest",
+    "pack:xpi": "cross-env WEB_EXT_ARTIFACTS_DIR=./ FIREFOX=true web-ext build --source-dir ./extension-firefox --filename extension.xpi --overwrite-dest",
     "start:chromium": "web-ext run --source-dir ./extension --target=chromium",
-    "start:firefox": "web-ext run --source-dir ./extension --target=firefox-desktop",
+    "start:firefox": "web-ext run --source-dir ./extension-firefox --target=firefox-desktop",
     "clear": "rimraf extension extension.*",
+    "clear-firefox": "rimraf extension-firefox extension-firefox.*",
     "lint": "eslint .",
     "test": "vitest test",
     "postinstall": "npx simple-git-hooks"
diff --git a/scripts/manifest.ts b/scripts/manifest.ts
index 4a9b696b..dbe354b7 100644
--- a/scripts/manifest.ts
+++ b/scripts/manifest.ts
@@ -1,9 +1,9 @@
 import fs from 'fs-extra'
 import { getManifest } from '../src/manifest'
-import { log, r } from './utils'
+import { isFirefox, log, r } from './utils'
 
 export async function writeManifest() {
-  await fs.writeJSON(r('extension/manifest.json'), await getManifest(), { spaces: 2 })
+  await fs.writeJSON(r(isFirefox ? 'extension-firefox/manifest.json' : 'extension/manifest.json'), await getManifest(), { spaces: 2 })
   log('PRE', 'write manifest.json')
 }
 
diff --git a/scripts/prepare.ts b/scripts/prepare.ts
index a1b353c7..c36835c2 100644
--- a/scripts/prepare.ts
+++ b/scripts/prepare.ts
@@ -2,7 +2,7 @@
 import { execSync } from 'node:child_process'
 import fs from 'fs-extra'
 import chokidar from 'chokidar'
-import { isDev, log, r } from './utils'
+import { isDev, isFirefox, log, r } from './utils'
 
 /**
  * Stub index.html to use Vite in development
@@ -14,12 +14,12 @@ async function stubIndexHtml() {
   ]
 
   for (const view of views) {
-    await fs.ensureDir(r(`extension/dist/${view}`))
+    await fs.ensureDir(r(isFirefox ? `extension-firefox/dist/${view}` : `extension/dist/${view}`))
     let data = await fs.readFile(r(`src/${view}/index.html`), 'utf-8')
     data = data
       .replace('"./main.ts"', `"/${view}/main.ts.js"`)
       .replace('<div id="app"></div>', '<div id="app">Vite server did not start</div>')
-    await fs.writeFile(r(`extension/dist/${view}/index.html`), data, 'utf-8')
+    await fs.writeFile(r(isFirefox ? `extension-firefox/dist/${view}/index.html` : `extension/dist/${view}/index.html`), data, 'utf-8')
     log('PRE', `stub ${view}`)
   }
 }
@@ -28,8 +28,8 @@ function writeManifest() {
   execSync('npx esno ./scripts/manifest.ts', { stdio: 'inherit' })
 }
 
-fs.ensureDirSync(r('extension'))
-fs.copySync(r('assets'), r('extension/assets'))
+fs.ensureDirSync(r(isFirefox ? 'extension-firefox' : 'extension'))
+fs.copySync(r('assets'), r(isFirefox ? 'extension-firefox/assets' : 'extension/assets'))
 writeManifest()
 
 if (isDev) {
diff --git a/tsup.config.ts b/tsup.config.ts
index 35f06e7a..ddaa3205 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,15 +1,15 @@
 import { defineConfig } from 'tsup'
-import { isDev } from './scripts/utils'
+import { isDev, isFirefox } from './scripts/utils'
 
 export default defineConfig(() => ({
   entry: {
     'background/index': './src/background/index.ts',
     ...(isDev ? { mv3client: './scripts/client.ts' } : {}),
   },
-  outDir: 'extension/dist',
+  outDir: isFirefox ? 'extension-firefox/dist' : 'extension/dist',
   format: ['esm'],
   target: 'esnext',
-  ignoreWatch: ['**/extension/**'],
+  ignoreWatch: ['**/extension/**', '**/extension-firefox/**'],
   splitting: false,
   sourcemap: isDev ? 'inline' : false,
   define: {
diff --git a/vite-mv3-hmr.ts b/vite-mv3-hmr.ts
index 188304cf..fd211cbd 100644
--- a/vite-mv3-hmr.ts
+++ b/vite-mv3-hmr.ts
@@ -1,9 +1,9 @@
 import { dirname, join } from 'node:path'
 import type { HMRPayload, PluginOption } from 'vite'
 import fs from 'fs-extra'
-import { isWin, r } from './scripts/utils'
+import { isFirefox, isWin, r } from './scripts/utils'
 
-const targetDir = r('extension')
+const targetDir = r(isFirefox ? 'extension-firefox' : 'extension')
 
 export function MV3Hmr(): PluginOption {
   return {
diff --git a/vite.config.content.ts b/vite.config.content.ts
index 2b77fbbe..268b4406 100644
--- a/vite.config.content.ts
+++ b/vite.config.content.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import { sharedConfig } from './vite.config'
-import { isDev, r } from './scripts/utils'
+import { isDev, isFirefox, r } from './scripts/utils'
 import packageJson from './package.json'
 
 // bundling the content script using Vite
@@ -10,7 +10,7 @@ export default defineConfig({
     watch: isDev
       ? {}
       : undefined,
-    outDir: r('extension/dist/contentScripts'),
+    outDir: r(isFirefox ? 'extension-firefox/dist/contentScripts' : 'extension/dist/contentScripts'),
     cssCodeSplit: false,
     emptyOutDir: false,
     sourcemap: isDev ? 'inline' : false,
diff --git a/vite.config.ts b/vite.config.ts
index 88ea5ccc..214fcaab 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,7 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import UnoCSS from 'unocss/vite'
-import { isDev, port, r } from './scripts/utils'
+import { isDev, isFirefox, port, r } from './scripts/utils'
 import { MV3Hmr } from './vite-mv3-hmr'
 
 export const sharedConfig: UserConfig = {
@@ -102,7 +102,7 @@ export default defineConfig(({ command }) => ({
     },
   },
   build: {
-    outDir: r('extension/dist'),
+    outDir: r(isFirefox ? 'extension-firefox/dist' : 'extension/dist'),
     emptyOutDir: false,
     sourcemap: isDev ? 'inline' : false,
     // https://developer.chrome.com/docs/webstore/program_policies/#:~:text=Code%20Readability%20Requirements