diff --git a/.eslintignore b/.eslintignore
index a8db16f484..99e0829e60 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,4 @@ dist
 node_modules
 public
 extension
+extension-firefox
diff --git a/.github/workflows/sync-bugfixes.yml b/.github/workflows/sync-bugfixes.yml
new file mode 100644
index 0000000000..0e909d756e
--- /dev/null
+++ b/.github/workflows/sync-bugfixes.yml
@@ -0,0 +1,24 @@
+name: Sync Back to Bugfixes
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/sync-branches@1.4.0
+        with:
+          GITHUB_TOKEN: ${{secrets.SYNC_TOKEN}}
+          FROM_BRANCH: main
+          TO_BRANCH: bugfixes
diff --git a/.github/workflows/sync-dev-firefox.yml b/.github/workflows/sync-dev-firefox.yml
new file mode 100644
index 0000000000..451557a46c
--- /dev/null
+++ b/.github/workflows/sync-dev-firefox.yml
@@ -0,0 +1,24 @@
+name: Sync Back to Dev Firefox
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/sync-branches@1.4.0
+        with:
+          GITHUB_TOKEN: ${{secrets.SYNC_TOKEN}}
+          FROM_BRANCH: dev
+          TO_BRANCH: dev-firefox
diff --git a/.github/workflows/sync-dev.yml b/.github/workflows/sync-dev.yml
new file mode 100644
index 0000000000..76abbba1bd
--- /dev/null
+++ b/.github/workflows/sync-dev.yml
@@ -0,0 +1,24 @@
+name: Sync Back to Dev
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/sync-branches@1.4.0
+        with:
+          GITHUB_TOKEN: ${{secrets.SYNC_TOKEN}}
+          FROM_BRANCH: main
+          TO_BRANCH: dev
diff --git a/.gitignore b/.gitignore
index 89e3cdde89..fe7e78ae01 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 d32eb2dcfb..e289120dd2 100644
--- a/package.json
+++ b/package.json
@@ -8,24 +8,26 @@
   "homepage": "https://github.com/hakadao/BewlyBewly",
   "scripts": {
     "dev": "npm run clear && cross-env NODE_ENV=development run-p dev:*",
-    "dev-firefox": "npm run clear && cross-env NODE_ENV=development FIREFOX=true run-p dev:*",
+    "dev-firefox": "npm run clear-firefox && cross-env NODE_ENV=development FIREFOX=true run-p dev:*",
     "dev:prepare": "esno scripts/prepare.ts",
     "dev:web": "vite",
     "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:zip-firefox": "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 4a9b696b0c..dbe354b710 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 a1b353c73c..c36835c220 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/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 9cbcee3a7b..56c6181cef 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -153,23 +153,33 @@ function toggleDockHide(hide: boolean) {
 <template>
   <aside
     class="dock-wrap"
-    :class="{
-      left: settings.dockPosition === 'left',
-      right: settings.dockPosition === 'right',
-      bottom: settings.dockPosition === 'bottom',
-      hide: hideDock,
-    }"
-    pos="absolute top-0" flex="~ col" h-full justify-center z-1
-    pointer-events-none
-    @mouseenter="toggleDockHide(false)"
-    @mouseleave="toggleDockHide(true)"
+    pos="absolute top-0" flex="~ col justify-center items-center" w-full h-full
+    z-1 pointer-events-none
   >
+    <!-- Edge div -->
+    <div
+      v-if="settings.autoHideDock"
+      class="dock-edge"
+      :class="`dock-edge-${settings.dockPosition}`"
+      @mouseenter="toggleDockHide(false)"
+      @mouseleave="toggleDockHide(true)"
+    />
+
     <div
       class="dock-content"
+      :class="{
+        left: settings.dockPosition === 'left',
+        right: settings.dockPosition === 'right',
+        bottom: settings.dockPosition === 'bottom',
+        hide: hideDock,
+      }"
+      absolute duration-300 ease-in-out
       p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
       rounded="$bew-radius" border="1px $bew-border-color"
       shadow="$bew-shadow-2"
-      backdrop-glass pointer-events-auto
+      backdrop-glass
+      @mouseenter="toggleDockHide(false)"
+      @mouseleave="toggleDockHide(true)"
     >
       <template v-for="dockItemVisibility in settings.dockItemVisibilityList" :key="dockItemVisibility.page">
         <template v-if="dockItemVisibility.visible">
@@ -221,15 +231,30 @@ function toggleDockHide(hide: boolean) {
 
 <style lang="scss" scoped>
 .dock-wrap {
-  --at-apply: duration-300 ease-in-out
-    after:content-empty after:absolute
-    after:w-[calc(100%+14px)] after:h-[calc(100%+14px)] after:z--1
-    after:pointer-events-auto;
+  > * {
+    --at-apply: pointer-events-auto;
+  }
+}
 
-  svg {
-    --at-apply: block align-middle;
+.dock-edge {
+  &-left, &-right, &-bottom {
+    --at-apply: absolute z--1;
   }
 
+  &-left {
+    --at-apply: left-0 top-0 w-14px h-full hover:w-60px;
+  }
+
+  &-right {
+    --at-apply: right-0 top-0 w-14px h-full hover:w-60px;
+  }
+
+  &-bottom {
+    --at-apply: left-0 bottom-0 w-full h-14px hover-h-60px;
+  }
+}
+
+.dock-content {
   &.left {
     --at-apply: left-2 after:right--4px;
   }
@@ -245,12 +270,7 @@ function toggleDockHide(hide: boolean) {
   }
 
   &.bottom {
-    --at-apply: top-unset bottom-0 items-center w-full h-[fit-content]
-      after:top--10px after:w-full;
-
-    .dock-content {
-      --at-apply: flex-row;
-    }
+    --at-apply: top-unset bottom-0 flex-row;
   }
   &.bottom.hide {
     --at-apply: opacity-0 translate-y-100%;
@@ -263,35 +283,35 @@ function toggleDockHide(hide: boolean) {
   &.bottom .divider {
     --at-apply: w-2px h-auto my-0 mx-2;
   }
+}
 
-  .dock-item {
-    --shadow: 0 0 30px 4px var(--bew-theme-color-50);
-    --shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
-    --shadow-active: 0 0 20px var(--bew-theme-color-50);
-    --shadow-dark-active: 0 0 20px rgba(255, 255, 255, 0.6);
-
-    --at-apply: transform active:scale-90
-      md:w-45px w-35px
-      md:lh-45px lh-35px
-      p-0 flex items-center justify-center
-      aspect-square relative
-      leading-0 duration-300
-      rounded-$bew-radius
-      bg-$bew-fill-2 cursor-pointer
-      hover:bg-$bew-theme-color hover:text-white hover:shadow-$shadow
-      active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active
-      dark-hover:bg-white dark-hover:text-black dark-hover:shadow-$shadow-dark;
-
-    &.active {
-      --at-apply: bg-$bew-theme-color dark-bg-white
-        text-white dark-text-black
-        shadow-$shadow dark:shadow-$shadow-dark
-        active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active;
-    }
+.dock-item {
+  --shadow: 0 0 30px 4px var(--bew-theme-color-50);
+  --shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
+  --shadow-active: 0 0 20px var(--bew-theme-color-50);
+  --shadow-dark-active: 0 0 20px rgba(255, 255, 255, 0.6);
+
+  --at-apply: transform active:scale-90
+    md:w-45px w-35px
+    md:lh-45px lh-35px
+    p-0 flex items-center justify-center
+    aspect-square relative
+    leading-0 duration-300
+    rounded-$bew-radius
+    bg-$bew-fill-2 cursor-pointer
+    hover:bg-$bew-theme-color hover:text-white hover:shadow-$shadow
+    active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active
+    dark-hover:bg-white dark-hover:text-black dark-hover:shadow-$shadow-dark;
+
+  &.active {
+    --at-apply: bg-$bew-theme-color dark-bg-white
+      text-white dark-text-black
+      shadow-$shadow dark:shadow-$shadow-dark
+      active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active;
+  }
 
-    svg {
-      --at-apply: md:w-22px w-18px md:h-22px h-18px;
-    }
+  svg {
+    --at-apply: md:w-22px w-18px md:h-22px h-18px block align-middle;
   }
 }
 </style>
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 3ef4843ac6..b0070a707c 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -203,7 +203,7 @@ function handleClearSearchHistory() {
         v-if="
           isFocus
             && searchHistory.length !== 0
-            && suggestions.length === 0
+            && keyword.length === 0
         "
         id="search-history"
       >
@@ -218,13 +218,16 @@ function handleClearSearchHistory() {
           <div class="history-item-container p2 flex flex-wrap gap-x-4 gap-y-2">
             <div
               v-for="item in searchHistory" :key="item.timestamp" ref="historyItemRef"
-              class="history-item flex justify-between items-center" @click="navigateToSearchResultPage(item.value)"
+              class="history-item group"
+              flex justify-between items-center
+              @click="navigateToSearchResultPage(item.value)"
             >
               <span> {{ item.value }}</span>
               <button
-                class="delete" rounded-full duration-300 pointer-events-auto cursor-pointer
-                text="base $bew-text-2"
-                leading-0 p-0 @click.stop="handleDelete(item.value)"
+                rounded-full duration-300 pointer-events-auto cursor-pointer p-1
+                text="xs $bew-text-2 hover:white" leading-0 bg="$bew-fill-2 hover:$bew-error-color"
+                pos="absolute top-0 right-0" scale-80 opacity-0 group-hover:opacity-100
+                @click.stop="handleDelete(item.value)"
               >
                 <ic-baseline-clear />
               </button>
@@ -234,9 +237,9 @@ function handleClearSearchHistory() {
       </div>
     </Transition>
 
-    <Transition>
+    <Transition name="result-list">
       <div
-        v-if="isFocus && suggestions.length !== 0"
+        v-if="isFocus && suggestions.length !== 0 && keyword.length > 0"
         id="search-suggestion"
       >
         <div
@@ -254,8 +257,8 @@ function handleClearSearchHistory() {
 </template>
 
 <style lang="scss" scoped>
-:global(.suggest_high_light) {
-  --at-apply: text-$bew-theme-color mx-[0.05em] not-italic;
+::v-deep(.suggest_high_light) {
+  --at-apply: text-$bew-theme-color not-italic;
 }
 
 .result-list-enter-active,
@@ -348,19 +351,8 @@ function handleClearSearchHistory() {
 
       .history-item-container {
         .history-item {
-          --at-apply: relative cursor-pointer hover:hover:text-$bew-theme-color;
-          --at-apply: py-2 px-6 bg-$bew-fill-2 rounded-2;
-
-          .delete {
-            --at-apply: absolute rounded-full hover:text-$bew-theme-color;
-            padding: 0.15em;
-            right: calc( -1em / 2 );
-            top: calc( -1em / 2 );
-          }
-
-          &.active {
-            --at-apply: text-$bew-text-5;
-          }
+          --at-apply: relative cursor-pointer hover:bg-$bew-fill-2 duration-300;
+          --at-apply: py-2 px-6 bg-$bew-fill-1 rounded-$bew-radius-half;
         }
       }
     }
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 1aabf02142..1f89534c82 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -24,41 +24,41 @@ if (isFirefox) {
 
 const currentUrl = document.URL
 
-function isSupportedPage() {
+function isSupportedPages() {
   if (
-  // homepage
+    // homepage
     /https?:\/\/bilibili.com\/?$/.test(currentUrl)
-   || /https?:\/\/www.bilibili.com\/?$/.test(currentUrl)
-   || /https?:\/\/www.bilibili.com\/index.html$/.test(currentUrl)
-   || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(currentUrl)
-   || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)
-
-   // video page
-   || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
-   // anime playback & movie page
-   || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl)
-   // watch later playlist
-   || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
-   // favorite playlist
-   || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
-   // search page
-   || /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
-   // moments
-   || /https?:\/\/t.bilibili.com\.*/.test(currentUrl)
-   // moment detail
-   || /https?:\/\/www.bilibili.com\/opus\/.*/.test(currentUrl)
-   // history page
-   || /https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl)
-   // user space page
-   || /https?:\/\/space.bilibili.com\.*/.test(currentUrl)
-   // notifications page
-   || /https?:\/\/message.bilibili.com\.*/.test(currentUrl)
-   // bilibili channel page b站分区页面
-   || /https?:\/\/www.bilibili.com\/v\/.*/.test(currentUrl)
-   // anime page
-   || /https?:\/\/www.bilibili.com\/anime.*/.test(currentUrl)
-   // tv shows, movie, variety shows, mooc page
-   || /https?:\/\/(www.)?bilibili.com\/(tv|movie|variety|mooc).*/.test(currentUrl))
+    || /https?:\/\/www.bilibili.com\/?$/.test(currentUrl)
+    || /https?:\/\/www.bilibili.com\/index.html$/.test(currentUrl)
+    || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(currentUrl)
+    || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)
+
+    // video page
+    || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
+    // anime playback & movie page
+    || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl)
+    // watch later playlist
+    || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
+    // favorite playlist
+    || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
+    // search page
+    || /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
+    // moments
+    || /https?:\/\/t.bilibili.com\.*/.test(currentUrl)
+    // moment detail
+    || /https?:\/\/www.bilibili.com\/opus\/.*/.test(currentUrl)
+    // history page
+    || /https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl)
+    // user space page
+    || /https?:\/\/space.bilibili.com\.*/.test(currentUrl)
+    // notifications page
+    || /https?:\/\/message.bilibili.com\.*/.test(currentUrl)
+    // bilibili channel page b站分区页面
+    || /https?:\/\/www.bilibili.com\/v\/.*/.test(currentUrl)
+    // anime page
+    || /https?:\/\/www.bilibili.com\/anime.*/.test(currentUrl)
+    // tv shows, movie, variety shows, mooc page
+    || /https?:\/\/(www.)?bilibili.com\/(tv|movie|variety|mooc).*/.test(currentUrl))
     return true
   else
     return false
@@ -74,7 +74,7 @@ if (
 )
   document.documentElement.classList.add('bewly-design', 'dark')
 
-if (settings.value.adaptToOtherPageStyles && isSupportedPage()) {
+if (settings.value.adaptToOtherPageStyles && isSupportedPages()) {
   beforeLoadedStyleEl = injectCSS(`
     html.dark.bewly-design {
       background-color: hsl(230 12% 6%);
@@ -95,7 +95,8 @@ if (settings.value.adaptToOtherPageStyles && isSupportedPage()) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  if (isSupportedPage()) {
+  if (isSupportedPages()) {
+    // Remove the original Bilibili homepage if in Bilibili homepage & useOriginalBilibiliHomepage is enabled
     if (
       !settings.value.useOriginalBilibiliHomepage
       && (
@@ -110,24 +111,11 @@ document.addEventListener('DOMContentLoaded', () => {
       if (originalPageContent)
         originalPageContent.innerHTML = ''
     }
-  }
-})
 
-// if (isFirefox) {
-//   let isFirstScriptExecute = true
-//   document.addEventListener('beforescriptexecute', () => {
-//     if (!isFirstScriptExecute)
-//       return
-
-//     injectApp()
-//     isFirstScriptExecute = false
-//   })
-// }
-// else {
-document.addEventListener('DOMContentLoaded', () => {
-  injectApp()
+    // Then inject the app
+    injectApp()
+  }
 })
-// }
 
 function injectApp() {
   // Inject style first
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6950c9a19d..7d80f73c44 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -79,21 +79,22 @@ html.dark.bewly-design {
   display: none;
 }
 
-/* Color Mode transition */
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-::view-transition-old(root) {
-  z-index: 1;
-}
-::view-transition-new(root) {
-  z-index: 2147483646;
-}
-.dark::view-transition-old(root) {
-  z-index: 2147483646;
-}
-.dark::view-transition-new(root) {
-  z-index: 1;
-}
+// /* Color Mode transition */
+// ::view-transition-old(root),
+// ::view-transition-new(root) {
+//   position: relative;
+//   animation: none;
+//   mix-blend-mode: normal;
+// }
+// ::view-transition-old(root) {
+//   z-index: 1;
+// }
+// ::view-transition-new(root) {
+//   z-index: 2147483646;
+// }
+// .dark::view-transition-old(root) {
+//   z-index: 2147483646;
+// }
+// .dark::view-transition-new(root) {
+//   z-index: 1;
+// }
diff --git a/tsup.config.ts b/tsup.config.ts
index 35f06e7a04..ddaa3205c0 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 188304cf23..fd211cbdbb 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 2b77fbbe34..268b4406b4 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 88ea5ccc6b..214fcaab0b 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