diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 0004964b..20e93ba1 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 
-import Button from '~/components/Button.vue'
 import { useDark } from '~/composables/useDark'
 
 import Tooltip from '../Tooltip.vue'
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index ac0e1a02..642b280b 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n'
 
 import { settings } from '~/logic'
 
-import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 import type { MenuItem } from './types'
 import { MenuType } from './types'
 
diff --git a/src/components/Settings/components/About.vue b/src/components/Settings/components/About.vue
index 66527e08..8239e658 100644
--- a/src/components/Settings/components/About.vue
+++ b/src/components/Settings/components/About.vue
@@ -2,9 +2,6 @@
 import DOMPurify from 'dompurify'
 import browser from 'webextension-polyfill'
 
-import Button from '~/components/Button.vue'
-import Dialog from '~/components/Dialog.vue'
-import Tooltip from '~/components/Tooltip.vue'
 import { settings } from '~/logic'
 
 import { version } from '../../../../package.json'
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 1253c0bb..d9d12319 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -2,7 +2,6 @@
 import { useThrottleFn } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
-import Select from '~/components/Select.vue'
 import { settings } from '~/logic'
 
 import ChangeWallpaper from './ChangeWallpaper.vue'
diff --git a/src/components/Settings/components/ChangeWallpaper.vue b/src/components/Settings/components/ChangeWallpaper.vue
index d939d48b..420f2196 100644
--- a/src/components/Settings/components/ChangeWallpaper.vue
+++ b/src/components/Settings/components/ChangeWallpaper.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import Input from '~/components/Input.vue'
-import Radio from '~/components/Radio.vue'
-import Slider from '~/components/Slider.vue'
-import Tooltip from '~/components/Tooltip.vue'
 import { WALLPAPERS } from '~/constants/imgs'
 import { settings } from '~/logic'
 import { compressAndResizeImage } from '~/utils/main'
diff --git a/src/components/Settings/components/Compatibility.vue b/src/components/Settings/components/Compatibility.vue
index 7bab23a3..41fe0e68 100644
--- a/src/components/Settings/components/Compatibility.vue
+++ b/src/components/Settings/components/Compatibility.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import Radio from '~/components/Radio.vue'
 import { settings } from '~/logic'
 import { isHomePage } from '~/utils/main'
 
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index 6330dbcd..fa02083f 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -2,9 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
 
-import Button from '~/components/Button.vue'
-import Radio from '~/components/Radio.vue'
-import Select from '~/components/Select.vue'
 import { settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
 
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index 884d07e5..e097c1fa 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -3,10 +3,6 @@ import QRCodeVue from 'qrcode.vue'
 import { useToast } from 'vue-toastification'
 import draggable from 'vuedraggable'
 
-import Button from '~/components/Button.vue'
-import Dialog from '~/components/Dialog.vue'
-import Input from '~/components/Input.vue'
-import Radio from '~/components/Radio.vue'
 import { accessKey, settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
 import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index 73221374..86dc31c3 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import Radio from '~/components/Radio.vue'
-import Tooltip from '~/components/Tooltip.vue'
 import { SEARCH_BAR_CHARACTERS } from '~/constants/imgs'
 import { settings } from '~/logic'
 
diff --git a/src/components/TopBar/OldTopBar.vue b/src/components/TopBar/OldTopBar.vue
index 1ad858a2..21eb0852 100644
--- a/src/components/TopBar/OldTopBar.vue
+++ b/src/components/TopBar/OldTopBar.vue
@@ -11,7 +11,6 @@ import { settings } from '~/logic'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
-import SearchBar from '../SearchBar/SearchBar.vue'
 import ChannelsPop from './components/ChannelsPop.vue'
 import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 213a3941..800aeedc 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -11,7 +11,6 @@ import { settings } from '~/logic'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
-import SearchBar from '../SearchBar/SearchBar.vue'
 import ChannelsPop from './components/ChannelsPop.vue'
 import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..772d13a9
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,13 @@
+import type { App, Plugin } from 'vue'
+
+const paths: Record<string, { default: Component }> = import.meta.glob(['./*/*.vue', './*.vue', './OverlayScrollbarsComponent.ts'], { eager: true })
+
+export default {
+  install: (app: App) => {
+    for (const path in paths) {
+      const splitPath = path.split('/')
+      const name = splitPath[splitPath.length - 1].replace('.vue', '').replace('.ts', '')
+      app.component(name, paths[path].default)
+    }
+  },
+} as Plugin
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index c4a362bd..5a76815a 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import BangumiCard from '~/components/BangumiCard/BangumiCard.vue'
-import BangumiCardSkeleton from '~/components/BangumiCard/BangumiCardSkeleton.vue'
-import Button from '~/components/Button.vue'
-import Empty from '~/components/Empty.vue'
-import HorizontalScrollView from '~/components/HorizontalScrollView.vue'
-import Loading from '~/components/Loading.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 8f3b5e52..deea1868 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -4,14 +4,6 @@ import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 
-import AppBackground from '~/components/AppBackground.vue'
-import BackToTopOrRefreshButton from '~/components/BackToTopOrRefreshButton.vue'
-import Dock from '~/components/Dock/Dock.vue'
-import OverlayScrollbarsComponent from '~/components/OverlayScrollbarsComponent'
-import RightSideButtons from '~/components/RightSideButtons/RightSideButtons.vue'
-import Settings from '~/components/Settings/Settings.vue'
-import OldTopBar from '~/components/TopBar/OldTopBar.vue'
-import TopBar from '~/components/TopBar/TopBar.vue'
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
 import { OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 5d179d8e..dbef183e 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import Button from '~/components/Button.vue'
-import Empty from '~/components/Empty.vue'
-import Input from '~/components/Input.vue'
-import Loading from '~/components/Loading.vue'
-import Select from '~/components/Select.vue'
-import Tooltip from '~/components/Tooltip.vue'
 import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
-import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 30456c63..07fc71bc 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -2,9 +2,6 @@
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
-import Button from '~/components/Button.vue'
-import Empty from '~/components/Empty.vue'
-import Progress from '~/components/Progress.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 778ffda0..4b028996 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useThrottleFn } from '@vueuse/core'
 
-import Logo from '~/components/Logo.vue'
-import SearchBar from '~/components/SearchBar/SearchBar.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { homePageGridLayout, settings } from '~/logic'
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 9c7e1bb3..6c2a021f 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
-import Button from '~/components/Button.vue'
-import Empty from '~/components/Empty.vue'
-import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayout } from '~/logic'
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 4c208e94..560a39a1 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -5,10 +5,6 @@ import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
 
-import Button from '~/components/Button.vue'
-import Dialog from '~/components/Dialog.vue'
-import Empty from '~/components/Empty.vue'
-import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { FilterType, useFilter } from '~/composables/useFilter'
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 36dae6ac..b9309da5 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import BangumiCard from '~/components/BangumiCard/BangumiCard.vue'
-import BangumiCardSkeleton from '~/components/BangumiCard/BangumiCardSkeleton.vue'
-import OverlayScrollbarsComponent from '~/components/OverlayScrollbarsComponent'
-import VideoCard from '~/components/VideoCard/VideoCard.vue'
-import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 0814877e..30d25174 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
-import Button from '~/components/Button.vue'
-import Empty from '~/components/Empty.vue'
-import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayout } from '~/logic'
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index c8cc7bb4..9079fef9 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
-import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayout } from '~/logic'
diff --git a/src/contentScripts/views/Search/Search.vue b/src/contentScripts/views/Search/Search.vue
index 6c2446d7..00e810dd 100644
--- a/src/contentScripts/views/Search/Search.vue
+++ b/src/contentScripts/views/Search/Search.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import Logo from '~/components/Logo.vue'
-import SearchBar from '~/components/SearchBar/SearchBar.vue'
 import { settings } from '~/logic'
 </script>
 
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 029e9df4..6593751c 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -2,9 +2,6 @@
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
-import Button from '~/components/Button.vue'
-import Empty from '~/components/Empty.vue'
-import Progress from '~/components/Progress.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts
index 21f18c6b..6013dc48 100644
--- a/src/logic/common-setup.ts
+++ b/src/logic/common-setup.ts
@@ -5,6 +5,7 @@ import type { App } from 'vue'
 import Toast, { POSITION } from 'vue-toastification'
 import { getCurrentContext } from 'webext-bridge'
 
+import components from '~/components'
 import { i18n } from '~/utils/i18n'
 
 const pinia = createPinia()
@@ -29,5 +30,6 @@ export async function setupApp(app: App) {
       newestOnTop: true,
       position: POSITION.TOP_RIGHT,
     })
+  app.use(components)
   app.use(pinia)
 }