From 619dc034afcf2ec41f4c6af94d789c85bc765252 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 13 Oct 2024 19:49:14 +0800
Subject: [PATCH] refactor: adjust the directory structure of
 `messageListeners/` (#1066)

---
 src/background/index.ts                       |  6 ++-
 .../messageListeners/{ => api}/anime.ts       |  4 +-
 .../messageListeners/{ => api}/auth.ts        |  4 +-
 .../messageListeners/{ => api}/favorite.ts    |  4 +-
 .../messageListeners/{ => api}/history.ts     |  4 +-
 .../messageListeners/{ => api}/index.ts       |  4 +-
 .../messageListeners/{ => api}/moment.ts      |  4 +-
 .../{ => api}/notification.ts                 |  4 +-
 .../messageListeners/{ => api}/ranking.ts     |  4 +-
 .../messageListeners/{ => api}/search.ts      |  4 +-
 .../messageListeners/{ => api}/user.ts        |  4 +-
 .../messageListeners/{ => api}/video.ts       |  4 +-
 .../messageListeners/{ => api}/watchLater.ts  |  4 +-
 src/background/messageListeners/tab.ts        | 26 +++++++++++
 src/components/SearchBar/SearchBar.vue        |  3 +-
 src/components/TopBar/OldTopBar.vue           |  4 +-
 src/components/TopBar/TopBar.vue              |  4 +-
 .../TopBar/components/FavoritesPop.vue        |  4 +-
 .../TopBar/components/HistoryPop.vue          |  3 +-
 .../TopBar/components/MomentsPop.vue          |  3 +-
 .../TopBar/components/NotificationsPop.vue    |  3 +-
 .../TopBar/components/UserPanelPop.vue        |  3 +-
 .../TopBar/components/WatchLaterPop.vue       |  3 +-
 .../oldTopBarComponents/OldUserPanelPop.vue   |  3 +-
 src/components/VideoCard/VideoCard.vue        |  3 +-
 .../VideoCardContextMenu.vue                  | 44 +++++++++++--------
 .../components/DislikeDialog.vue              |  3 +-
 src/contentScripts/views/Anime/Anime.vue      |  3 +-
 .../views/Anime/components/AnimeTimeTable.vue |  3 +-
 .../views/Favorites/Favorites.vue             |  3 +-
 src/contentScripts/views/History/History.vue  |  3 +-
 .../views/Home/components/Following.vue       |  4 +-
 .../views/Home/components/ForYou.vue          |  3 +-
 .../views/Home/components/Ranking.vue         |  3 +-
 .../Home/components/SubscribedSeries.vue      |  4 +-
 .../views/Home/components/Trending.vue        |  3 +-
 .../views/WatchLater/WatchLater.vue           |  3 +-
 src/manifest.ts                               |  1 +
 src/{composables => utils}/api.ts             |  6 +--
 src/utils/tab.ts                              | 10 +++++
 40 files changed, 114 insertions(+), 98 deletions(-)
 rename src/background/messageListeners/{ => api}/anime.ts (95%)
 rename src/background/messageListeners/{ => api}/auth.ts (94%)
 rename src/background/messageListeners/{ => api}/favorite.ts (94%)
 rename src/background/messageListeners/{ => api}/history.ts (97%)
 rename src/background/messageListeners/{ => api}/index.ts (93%)
 rename src/background/messageListeners/{ => api}/moment.ts (92%)
 rename src/background/messageListeners/{ => api}/notification.ts (87%)
 rename src/background/messageListeners/{ => api}/ranking.ts (90%)
 rename src/background/messageListeners/{ => api}/search.ts (78%)
 rename src/background/messageListeners/{ => api}/user.ts (92%)
 rename src/background/messageListeners/{ => api}/video.ts (97%)
 rename src/background/messageListeners/{ => api}/watchLater.ts (96%)
 create mode 100644 src/background/messageListeners/tab.ts
 rename src/{composables => utils}/api.ts (96%)
 create mode 100644 src/utils/tab.ts

diff --git a/src/background/index.ts b/src/background/index.ts
index c31a1a96..1348d052 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -1,6 +1,7 @@
 import browser from 'webextension-polyfill'
 
-import { setupAllMsgLstnrs } from './messageListeners'
+import { setupApiMsgLstnrs } from './messageListeners/api'
+import { setupTabMsgLstnrs } from './messageListeners/tab'
 
 browser.runtime.onInstalled.addListener((): void => {
   // eslint-disable-next-line no-console
@@ -36,4 +37,5 @@ if (process.env.FIREFOX) {
 }
 
 // Setup all message listeners
-setupAllMsgLstnrs()
+setupApiMsgLstnrs()
+setupTabMsgLstnrs()
diff --git a/src/background/messageListeners/anime.ts b/src/background/messageListeners/api/anime.ts
similarity index 95%
rename from src/background/messageListeners/anime.ts
rename to src/background/messageListeners/api/anime.ts
index 9a33b98c..0a1bdee0 100644
--- a/src/background/messageListeners/anime.ts
+++ b/src/background/messageListeners/api/anime.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_ANIME = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/36e250090800793b41b223b55eefdcbb9391b53e/user/space.md#%E6%9F%A5%E8%AF%A2%E7%94%A8%E6%88%B7%E8%BF%BD%E7%95%AA%E8%BF%BD%E5%89%A7%E6%98%8E%E7%BB%86
diff --git a/src/background/messageListeners/auth.ts b/src/background/messageListeners/api/auth.ts
similarity index 94%
rename from src/background/messageListeners/auth.ts
rename to src/background/messageListeners/api/auth.ts
index e8b6e50f..3f36034d 100644
--- a/src/background/messageListeners/auth.ts
+++ b/src/background/messageListeners/api/auth.ts
@@ -1,6 +1,6 @@
 // 由于 sendResponse 复杂, 所以使用自定义的函数
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_AUTH = {
   // biliJct 似乎没有使用
diff --git a/src/background/messageListeners/favorite.ts b/src/background/messageListeners/api/favorite.ts
similarity index 94%
rename from src/background/messageListeners/favorite.ts
rename to src/background/messageListeners/api/favorite.ts
index a704a491..9402bf2d 100644
--- a/src/background/messageListeners/favorite.ts
+++ b/src/background/messageListeners/api/favorite.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_FAVORITE = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/fav/info.md#%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E7%94%A8%E6%88%B7%E5%88%9B%E5%BB%BA%E7%9A%84%E6%89%80%E6%9C%89%E6%94%B6%E8%97%8F%E5%A4%B9%E4%BF%A1%E6%81%AF
diff --git a/src/background/messageListeners/history.ts b/src/background/messageListeners/api/history.ts
similarity index 97%
rename from src/background/messageListeners/history.ts
rename to src/background/messageListeners/api/history.ts
index 68cd8b70..c717c254 100644
--- a/src/background/messageListeners/history.ts
+++ b/src/background/messageListeners/api/history.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_HISTORY = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/history&toview/history.md#%E8%8E%B7%E5%8F%96%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E5%88%97%E8%A1%A8_web%E7%AB%AF
diff --git a/src/background/messageListeners/index.ts b/src/background/messageListeners/api/index.ts
similarity index 93%
rename from src/background/messageListeners/index.ts
rename to src/background/messageListeners/api/index.ts
index 9d3f6ee0..c6457ff6 100644
--- a/src/background/messageListeners/index.ts
+++ b/src/background/messageListeners/api/index.ts
@@ -1,6 +1,6 @@
 import browser from 'webextension-polyfill'
 
-import { apiListenerFactory } from '../utils'
+import { apiListenerFactory } from '../../utils'
 import API_ANIME from './anime'
 import API_AUTH from './auth'
 import API_FAVORITE from './favorite'
@@ -36,7 +36,7 @@ const FullAPI = Object.assign({}, ...API_COLLECTION)
 // Create a message listener for each API
 const handleMessage = apiListenerFactory(FullAPI)
 
-export function setupAllMsgLstnrs() {
+export function setupApiMsgLstnrs() {
   browser.runtime.onConnect.removeListener(handleConnect)
   browser.runtime.onConnect.addListener(handleConnect)
 }
diff --git a/src/background/messageListeners/moment.ts b/src/background/messageListeners/api/moment.ts
similarity index 92%
rename from src/background/messageListeners/moment.ts
rename to src/background/messageListeners/api/moment.ts
index 7fa80501..ad468553 100644
--- a/src/background/messageListeners/moment.ts
+++ b/src/background/messageListeners/api/moment.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_MOMENT = {
   getTopBarNewMomentsCount: {
diff --git a/src/background/messageListeners/notification.ts b/src/background/messageListeners/api/notification.ts
similarity index 87%
rename from src/background/messageListeners/notification.ts
rename to src/background/messageListeners/api/notification.ts
index e6138aff..ea816517 100644
--- a/src/background/messageListeners/notification.ts
+++ b/src/background/messageListeners/api/notification.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_NOTIFICATION = {
   getUnreadMsg: {
diff --git a/src/background/messageListeners/ranking.ts b/src/background/messageListeners/api/ranking.ts
similarity index 90%
rename from src/background/messageListeners/ranking.ts
rename to src/background/messageListeners/api/ranking.ts
index ba6874ac..56661fad 100644
--- a/src/background/messageListeners/ranking.ts
+++ b/src/background/messageListeners/api/ranking.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_RANKING = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/7873a79022a5606e2391d93b411a05576a0df111/docs/video_ranking/ranking.md#%E8%8E%B7%E5%8F%96%E5%88%86%E5%8C%BA%E8%A7%86%E9%A2%91%E6%8E%92%E8%A1%8C%E6%A6%9C%E5%88%97%E8%A1%A8
diff --git a/src/background/messageListeners/search.ts b/src/background/messageListeners/api/search.ts
similarity index 78%
rename from src/background/messageListeners/search.ts
rename to src/background/messageListeners/api/search.ts
index cd882c9b..650b4854 100644
--- a/src/background/messageListeners/search.ts
+++ b/src/background/messageListeners/api/search.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_SEARCH = {
   getSearchSuggestion: {
diff --git a/src/background/messageListeners/user.ts b/src/background/messageListeners/api/user.ts
similarity index 92%
rename from src/background/messageListeners/user.ts
rename to src/background/messageListeners/api/user.ts
index e127ebad..7c039447 100644
--- a/src/background/messageListeners/user.ts
+++ b/src/background/messageListeners/api/user.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_USER = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/e379d904c2753fa30e9083f59016f07e89d19467/docs/login/login_info.md#%E5%AF%BC%E8%88%AA%E6%A0%8F%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF
diff --git a/src/background/messageListeners/video.ts b/src/background/messageListeners/api/video.ts
similarity index 97%
rename from src/background/messageListeners/video.ts
rename to src/background/messageListeners/api/video.ts
index 9d5e315e..2e19d474 100644
--- a/src/background/messageListeners/video.ts
+++ b/src/background/messageListeners/api/video.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_VIDEO = {
   getRecommendVideos: {
diff --git a/src/background/messageListeners/watchLater.ts b/src/background/messageListeners/api/watchLater.ts
similarity index 96%
rename from src/background/messageListeners/watchLater.ts
rename to src/background/messageListeners/api/watchLater.ts
index 62f422c0..42a3eda2 100644
--- a/src/background/messageListeners/watchLater.ts
+++ b/src/background/messageListeners/api/watchLater.ts
@@ -1,5 +1,5 @@
-import type { APIMAP } from '../utils'
-import { AHS } from '../utils'
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
 
 const API_WATCHLATER = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/history&toview/toview.md#%E8%A7%86%E9%A2%91%E6%B7%BB%E5%8A%A0%E7%A8%8D%E5%90%8E%E5%86%8D%E7%9C%8B
diff --git a/src/background/messageListeners/tab.ts b/src/background/messageListeners/tab.ts
new file mode 100644
index 00000000..5e17384a
--- /dev/null
+++ b/src/background/messageListeners/tab.ts
@@ -0,0 +1,26 @@
+import browser from 'webextension-polyfill'
+
+interface Message {
+  contentScriptQuery: string
+  [key: string]: any
+}
+
+export enum TAB_MESSAGE {
+  OPEN_LINK_IN_BACKGROUND = 'openLinkInBackground',
+}
+
+function handleMessage(message: Message) {
+  if (message.contentScriptQuery === TAB_MESSAGE.OPEN_LINK_IN_BACKGROUND) {
+    return browser.tabs.create({ url: message.url, active: false })
+  }
+}
+
+export function setupTabMsgLstnrs() {
+  browser.runtime.onMessage.removeListener(handleConnect)
+  browser.runtime.onMessage.addListener(handleConnect)
+}
+
+function handleConnect() {
+  browser.runtime.onMessage.removeListener(handleMessage)
+  browser.runtime.onMessage.addListener(handleMessage)
+}
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index fdc82811..188072bb 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -2,7 +2,7 @@
 import { onKeyStroke, useDebounceFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
 
-import { useApiClient } from '~/composables/api'
+import api from '~/utils/api'
 import { findLeafActiveElement } from '~/utils/element'
 
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
@@ -19,7 +19,6 @@ defineProps<{
   focusedCharacter?: string
 }>()
 
-const api = useApiClient()
 const keywordRef = ref<HTMLInputElement>()
 const isFocus = ref<boolean>(false)
 const keyword = ref<string>('')
diff --git a/src/components/TopBar/OldTopBar.vue b/src/components/TopBar/OldTopBar.vue
index ff3204ef..970b6f81 100644
--- a/src/components/TopBar/OldTopBar.vue
+++ b/src/components/TopBar/OldTopBar.vue
@@ -2,12 +2,12 @@
 import { useMouseInElement } from '@vueuse/core'
 import type { Ref, UnwrapNestedRefs } from 'vue'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { useDelayedHover } from '~/composables/useDelayedHover'
 import { OVERLAY_SCROLL_BAR_SCROLL, TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
+import api from '~/utils/api'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
@@ -43,8 +43,6 @@ const hideTopBar = ref<boolean>(false)
 const headerTarget = ref(null)
 const { isOutside: isOutsideTopBar } = useMouseInElement(headerTarget)
 
-const api = useApiClient()
-
 // initially, assume the user is logged in cuz data retrieval is slow, which may show the login
 // button even after login. if the user is not logged in, the login button will show up later
 const isLogin = ref<boolean>(true)
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index b288def0..29add03b 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -2,12 +2,12 @@
 import { onClickOutside, useMouseInElement } from '@vueuse/core'
 import type { Ref, UnwrapNestedRefs } from 'vue'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { useDelayedHover } from '~/composables/useDelayedHover'
 import { OVERLAY_SCROLL_BAR_SCROLL, TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
+import api from '~/utils/api'
 import { getUserID, isHomePage } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
@@ -43,8 +43,6 @@ const hideTopBar = ref<boolean>(false)
 const headerTarget = ref(null)
 const { isOutside: isOutsideTopBar } = useMouseInElement(headerTarget)
 
-const api = useApiClient()
-
 // initially, assume the user is logged in cuz data retrieval is slow, which may show the login
 // button even after login. if the user is not logged in, the login button will show up later
 const isLogin = ref<boolean>(true)
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 9cb4c3c3..3be446ce 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -4,15 +4,13 @@ import { onMounted, reactive, ref, watch } from 'vue'
 
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
-import { useApiClient } from '~/composables/api'
+import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { getUserID, removeHttpFromUrl, scrollToTop } from '~/utils/main'
 
 import type { FavoriteCategory, FavoriteResource } from '../types'
 import ALink from './ALink.vue'
 
-const api = useApiClient()
-
 const favoriteCategories = reactive<Array<FavoriteCategory>>([])
 const favoriteResources = reactive<Array<FavoriteResource>>([])
 
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index b2767eec..b2b21283 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -6,16 +6,15 @@ import { useI18n } from 'vue-i18n'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Progress from '~/components/Progress.vue'
-import { useApiClient } from '~/composables/api'
 import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
 import { Business } from '~/models/history/history'
+import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { removeHttpFromUrl, scrollToTop } from '~/utils/main'
 
 import ALink from './ALink.vue'
 
 const { t } = useI18n()
-const api = useApiClient()
 const historys = reactive<Array<HistoryItem>>([])
 const historyTabs = computed(() => [
   {
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 04a55d23..9db8f6a2 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -6,9 +6,9 @@ import { useI18n } from 'vue-i18n'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Tooltip from '~/components/Tooltip.vue'
-import { useApiClient } from '~/composables/api'
 import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment'
 import type { TopBarMomentResult } from '~/models/moment/topBarMoment'
+import api from '~/utils/api'
 import { getCSRF, scrollToTop } from '~/utils/main'
 
 import ALink from './ALink.vue'
@@ -28,7 +28,6 @@ interface MomentCard {
 }
 
 const { t } = useI18n()
-const api = useApiClient()
 
 const moments = reactive<MomentCard[]>([])
 const addedWatchLaterList = reactive<number[]>([])
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index c18da9fc..dba1a393 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import { useApiClient } from '~/composables/api'
+import api from '~/utils/api'
 
 import ALink from './ALink.vue'
 
 const { t } = useI18n()
-const api = useApiClient()
 const list = ref<{ name: string, url: string, unreadCount: number, icon: string }[]>([
   {
     name: t('topbar.noti_dropdown.replys'),
diff --git a/src/components/TopBar/components/UserPanelPop.vue b/src/components/TopBar/components/UserPanelPop.vue
index cba59ec6..4de4c142 100644
--- a/src/components/TopBar/components/UserPanelPop.vue
+++ b/src/components/TopBar/components/UserPanelPop.vue
@@ -2,8 +2,8 @@
 import DOMPurify from 'dompurify'
 import { useI18n } from 'vue-i18n'
 
-import { useApiClient } from '~/composables/api'
 import { settings } from '~/logic'
+import api from '~/utils/api'
 import { revokeAccessKey } from '~/utils/authProvider'
 import { numFormatter } from '~/utils/dataFormatter'
 import { LV0_ICON, LV1_ICON, LV2_ICON, LV3_ICON, LV4_ICON, LV5_ICON, LV6_ICON, LV6_LIGHTNING_ICON } from '~/utils/lvIcons'
@@ -17,7 +17,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const api = useApiClient()
 
 const mid = computed(() => {
   return getUserID()
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 81932baa..57cb09bf 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -4,14 +4,13 @@ import { onMounted, reactive, ref } from 'vue'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Progress from '~/components/Progress.vue'
-import { useApiClient } from '~/composables/api'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
+import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { removeHttpFromUrl } from '~/utils/main'
 
 import ALink from './ALink.vue'
 
-const api = useApiClient()
 const watchLaterList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>()
 const viewAllUrl = computed((): string => {
diff --git a/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue b/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue
index 31a2d413..06fabc5a 100644
--- a/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue
+++ b/src/components/TopBar/oldTopBarComponents/OldUserPanelPop.vue
@@ -2,7 +2,7 @@
 import DOMPurify from 'dompurify'
 import { useI18n } from 'vue-i18n'
 
-import { useApiClient } from '~/composables/api'
+import api from '~/utils/api'
 import { revokeAccessKey } from '~/utils/authProvider'
 import { numFormatter } from '~/utils/dataFormatter'
 import { LV0_ICON, LV1_ICON, LV2_ICON, LV3_ICON, LV4_ICON, LV5_ICON, LV6_ICON, LV6_LIGHTNING_ICON } from '~/utils/lvIcons'
@@ -16,7 +16,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const api = useApiClient()
 
 const mid = computed(() => {
   return getUserID()
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 2006facc..8b6acfa2 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -4,11 +4,11 @@ import type { CSSProperties } from 'vue'
 import { useToast } from 'vue-toastification'
 
 import Button from '~/components/Button.vue'
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { accessKey, settings } from '~/logic'
 import type { ThreePointV2 } from '~/models/video/appForYou'
 import type { VideoPreviewResult } from '~/models/video/videoPreview'
+import api from '~/utils/api'
 import { getTvSign, TVAppKey } from '~/utils/authProvider'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
@@ -67,7 +67,6 @@ export interface Video {
 
 const toast = useToast()
 const { mainAppRef, openIframeDrawer } = useBewlyApp()
-const api = useApiClient()
 const showVideoOptions = ref<boolean>(false)
 const videoOptionsFloatingStyles = ref<CSSProperties>({})
 // Whether the user has marked it as disliked
diff --git a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
index a46fc8a0..5a05a3fa 100644
--- a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
+++ b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
@@ -4,6 +4,7 @@ import type { CSSProperties } from 'vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { settings } from '~/logic'
 import { Type as ThreePointV2Type } from '~/models/video/appForYou'
+import { openLinkInBackground } from '~/utils/tab'
 
 import type { Video } from '../VideoCard.vue'
 import DislikeDialog from './components/DislikeDialog.vue'
@@ -30,27 +31,27 @@ const showPipWindow = ref<boolean>(false)
 const { openIframeDrawer } = useBewlyApp()
 
 enum VideoOption {
-  OpenInNewTab,
-  OpenInCurrentTab,
+  OpenLinkInNewTab,
+  OpenLinkInCurrentTab,
   // OpenInBackground,
-  OpenInNewWindow,
-  OpenInDrawer,
+  OpenLinkInNewWindow,
+  OpenLinkInDrawer,
   ViewTheOriginalCover,
 }
 
 const commonOptions = computed((): { command: VideoOption, name: string, icon: string, color?: string }[][] => {
   return [
-    // [
-    //   { command: VideoOption.OpenInNewTab, name: 'Open in new tab', icon: 'i-solar:square-top-down-bold-duotone' },
-    //   { command: VideoOption.OpenInCurrentTab, name: 'Open in current tab', icon: 'i-solar:square-top-down-bold-duotone' },
-    //   // { command: VideoOption.OpenInBackground, name: 'Open in background', icon: 'i-solar:square-top-down-bold-duotone' },
-    //   { command: VideoOption.OpenInNewWindow, name: 'Open in new window', icon: 'i-solar:maximize-square-3-bold-duotone' },
-    //   { command: VideoOption.OpenInDrawer, name: 'Open in drawer', icon: 'i-solar:archive-up-minimlistic-bold-duotone' },
-    // ],
+    [
+      { command: VideoOption.OpenLinkInNewTab, name: 'Open Link in New Tab', icon: 'i-solar:square-top-down-bold-duotone' },
+      { command: VideoOption.OpenLinkInCurrentTab, name: 'Open Link in Current Tab', icon: 'i-solar:square-top-down-bold-duotone' },
+      // { command: VideoOption.OpenInBackground, name: 'Open in background', icon: 'i-solar:square-top-down-bold-duotone' },
+      { command: VideoOption.OpenLinkInNewWindow, name: 'Open Link in New Window', icon: 'i-solar:maximize-square-3-bold-duotone' },
+      { command: VideoOption.OpenLinkInDrawer, name: 'Open Link in Drawer', icon: 'i-solar:archive-up-minimlistic-bold-duotone' },
+    ],
 
-    // [
-    //   { command: VideoOption.ViewTheOriginalCover, name: 'View the original cover', icon: 'i-solar:gallery-minimalistic-bold-duotone' },
-    // ],
+    [
+      { command: VideoOption.ViewTheOriginalCover, name: 'View the original cover', icon: 'i-solar:gallery-minimalistic-bold-duotone' },
+    ],
   ]
 })
 
@@ -74,11 +75,16 @@ function handleAppMoreCommand(command: ThreePointV2Type) {
 
 function handleCommonCommand(command: VideoOption) {
   switch (command) {
-    case VideoOption.OpenInNewTab:
-      window.open(props.video.url, '_blank')
+    case VideoOption.OpenLinkInNewTab:
+      openLinkInBackground(props.video.url!)
+      // // Focus back on the original tab
+      // if (newTab) {
+      //   newTab.blur() // Remove focus from the new tab
+      //   window.focus() // Bring focus back to the current tab
+      // }
       handleClose()
       break
-    case VideoOption.OpenInCurrentTab:
+    case VideoOption.OpenLinkInCurrentTab:
       window.open(props.video.url, '_self')
       handleClose()
       break
@@ -87,10 +93,10 @@ function handleCommonCommand(command: VideoOption) {
     //   window.open(props.video.url, '_blank', 'background')
     //   handleClose()
     //   break
-    case VideoOption.OpenInNewWindow:
+    case VideoOption.OpenLinkInNewWindow:
       showPipWindow.value = true
       break
-    case VideoOption.OpenInDrawer:
+    case VideoOption.OpenLinkInDrawer:
       openIframeDrawer(props.video.url || '')
       handleClose()
       break
diff --git a/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue b/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue
index afeb027d..c10eeb54 100644
--- a/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue
+++ b/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue
@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
 
 import type { Video } from '~/components/VideoCard/VideoCard.vue'
-import { useApiClient } from '~/composables/api'
 import { accessKey } from '~/logic'
 import { Type as ThreePointV2Type } from '~/models/video/appForYou'
+import api from '~/utils/api'
 import { getTvSign, TVAppKey } from '~/utils/authProvider'
 
 const props = defineProps<{
@@ -24,7 +24,6 @@ const showDislikeDialog = defineModel<boolean>()
 
 const toast = useToast()
 const { t } = useI18n()
-const api = useApiClient()
 
 const loadingDislikeDialog = ref<boolean>(false)
 const selectedDislikeReason = ref<number>(1)
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 148345ce..02aeedff 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
 import type { ItemSubItem as RecommendationItem, RecommendationResult } from '~/models/anime/recommendation'
 import type { List as WatchListItem, WatchListResult } from '~/models/anime/watchList'
+import api from '~/utils/api'
 import { numFormatter } from '~/utils/dataFormatter'
 import { getUserID, openLinkToNewTab } from '~/utils/main'
 
 import AnimeTimeTable from './components/AnimeTimeTable.vue'
 
-const api = useApiClient()
 const animeWatchList = reactive<WatchListItem[]>([])
 const recommendAnimeList = reactive<RecommendationItem[]>([])
 const popularAnimeList = reactive<PopularAnimeItem[]>([])
diff --git a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
index 1b9c15c2..2f526962 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -4,12 +4,11 @@ import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 
 import HorizontalScrollView from '~/components/HorizontalScrollView.vue'
-import { useApiClient } from '~/composables/api'
 import type { Result as TimetableItem, TimetableResult } from '~/models/anime/timeTable'
+import api from '~/utils/api'
 import { removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
-const api = useApiClient()
 const animeTimeTable = reactive<TimetableItem[]>([])
 const animeTimeTableWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index b32f289a..53346915 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -2,17 +2,16 @@
 import { useI18n } from 'vue-i18n'
 
 import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { settings } from '~/logic'
 import type { FavoritesResult, Media as FavoriteItem } from '~/models/video/favorite'
 import type { FavoritesCategoryResult, List as CategoryItem } from '~/models/video/favoriteCategory'
+import api from '~/utils/api'
 import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
-const api = useApiClient()
 
 const favoriteCategories = reactive<CategoryItem[]>([])
 const favoriteResources = reactive<FavoriteItem[]>([])
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 0ff240ee..afb6a495 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -2,17 +2,16 @@
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { settings } from '~/logic'
 import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
 import { Business } from '~/models/history/history'
 import type { HistorySearchResult, List as HistorySearchItem } from '~/models/video/historySearch'
+import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
-const api = useApiClient()
 const { openIframeDrawer } = useBewlyApp()
 
 const isLoading = ref<boolean>()
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 6c2a021f..64452fe1 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayout } from '~/logic'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
+import api from '~/utils/api'
 
 // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L16
 interface VideoElement {
@@ -29,8 +29,6 @@ const gridValue = computed((): string => {
   return '~ cols-1 gap-4'
 })
 
-const api = useApiClient()
-
 const videoList = ref<VideoElement[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index d8e47502..407a8bd7 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -2,7 +2,6 @@
 import { onKeyStroke } from '@vueuse/core'
 import type { Ref } from 'vue'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { FilterType, useFilter } from '~/composables/useFilter'
 import { LanguageType } from '~/enums/appEnums'
@@ -11,6 +10,7 @@ import { accessKey, settings } from '~/logic'
 import type { AppForYouResult, Item as AppVideoItem } from '~/models/video/appForYou'
 import { Type as ThreePointV2Type } from '~/models/video/appForYou'
 import type { forYouResult, Item as VideoItem } from '~/models/video/forYou'
+import api from '~/utils/api'
 import { TVAppKey } from '~/utils/authProvider'
 import { isVerticalVideo } from '~/utils/uriParse'
 
@@ -53,7 +53,6 @@ const gridValue = computed((): string => {
   return '~ cols-1 gap-4'
 })
 
-const api = useApiClient()
 const videoList = ref<VideoElement[]>([])
 const appVideoList = ref<AppVideoElement[]>([])
 const isLoading = ref<boolean>(false)
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index b9309da5..5f87cc3f 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import type { GridLayout } from '~/logic'
 import { settings } from '~/logic'
 import type { List as RankingVideoItem, RankingResult } from '~/models/video/ranking'
 import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/rankingPgc'
+import api from '~/utils/api'
 import emitter from '~/utils/mitt'
 
 import type { RankingType } from '../types'
@@ -22,7 +22,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const api = useApiClient()
 const { handleBackToTop, handlePageRefresh } = useBewlyApp()
 
 const gridValue = computed((): string => {
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 41dbc7c8..4bbf9d54 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayout } from '~/logic'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
+import api from '~/utils/api'
 
 // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L16
 interface VideoElement {
@@ -29,8 +29,6 @@ const gridValue = computed((): string => {
   return '~ cols-1 gap-4'
 })
 
-const api = useApiClient()
-
 const videoList = ref<VideoElement[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 9079fef9..952c7998 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayout } from '~/logic'
 import type { List as VideoItem, TrendingResult } from '~/models/video/trending'
+import api from '~/utils/api'
 
 // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L16
 interface VideoElement {
@@ -28,7 +28,6 @@ const gridValue = computed((): string => {
     return '~ cols-1 xl:cols-2 gap-4'
   return '~ cols-1 gap-4'
 })
-const api = useApiClient()
 const videoList = ref<VideoElement[]>([])
 const isLoading = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 113ec5b7..72b06b49 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -2,15 +2,14 @@
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
-import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { settings } from '~/logic'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
+import api from '~/utils/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
-const api = useApiClient()
 const { openIframeDrawer } = useBewlyApp()
 
 const isLoading = ref<boolean>()
diff --git a/src/manifest.ts b/src/manifest.ts
index 38f1841f..49952b64 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -38,6 +38,7 @@ export async function getManifest() {
     permissions: [
       'storage',
       'declarativeNetRequest',
+      'tabs',
       ...isFirefox
         ? ['webRequest', 'webRequestBlocking']
         : [],
diff --git a/src/composables/api.ts b/src/utils/api.ts
similarity index 96%
rename from src/composables/api.ts
rename to src/utils/api.ts
index b740562c..80a95dc5 100644
--- a/src/composables/api.ts
+++ b/src/utils/api.ts
@@ -1,4 +1,4 @@
-import type { API_COLLECTION } from '~/background/messageListeners'
+import type { API_COLLECTION } from '~/background/messageListeners/api'
 
 type CamelCase<S extends string> = S extends `${infer P1}_${infer P2}${infer P3}`
   ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCase<P3>}`
@@ -48,6 +48,4 @@ export class APIClient {
 
 const api = new APIClient()
 
-export function useApiClient() {
-  return api
-}
+export default api
diff --git a/src/utils/tab.ts b/src/utils/tab.ts
new file mode 100644
index 00000000..bc68bd25
--- /dev/null
+++ b/src/utils/tab.ts
@@ -0,0 +1,10 @@
+import browser from 'webextension-polyfill'
+
+import { TAB_MESSAGE } from '~/background/messageListeners/tab'
+
+export function openLinkInBackground(url: string) {
+  return browser.runtime.sendMessage({
+    contentScriptQuery: TAB_MESSAGE.OPEN_LINK_IN_BACKGROUND,
+    url,
+  })
+}