refactor: adjust the directory structure of messageListeners/ (#1066)

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()

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

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 似乎没有使用

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

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

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)
 }

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: {

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: {

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

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: {

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

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: {

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

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)
+}

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>('')

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)

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)

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>>([])
 

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(() => [
   {

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[]>([])

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'),

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()

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 => {

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()

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

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

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)

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[]>([])

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>
 

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[]>([])

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>()

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)

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)

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 => {

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)

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>

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>()

src/manifest.ts

@@ -38,6 +38,7 @@ export async function getManifest() {
     permissions: [
       'storage',
       'declarativeNetRequest',
+      'tabs',
       ...isFirefox
         ? ['webRequest', 'webRequestBlocking']
         : [],

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

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,
+  })
+}