fix: правильно определять название аниме при нескольких вкладках

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shikimori-search-extension",
   "displayName": "Shiki Search",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "private": true,
   "packageManager": "[email protected]",
   "description": "[description]",

src/composables/useActiveTab.ts

@@ -0,0 +1,12 @@
+import {ref} from "vue";
+import {useEventListener} from "@vueuse/core";
+
+export function useActiveTab() {
+    const activeTab = ref(true)
+
+    useEventListener('visibilitychange' as any, (event) => {
+        activeTab.value = document.visibilityState === 'visible'
+    })
+
+    return activeTab
+}

src/composables/useShikimoriMetaName.ts

@@ -1,17 +1,18 @@
-import { onUnmounted, ref, watch } from 'vue'
-import { useBrowserLocation, useMutationObserver } from '@vueuse/core'
-import { disableExtension, metaNameStorage } from "~/logic";
-import { onWebExtensionStoragesMounted } from "~/composables/useWebExtensionStorage";
+import {onUnmounted, ref, watch} from 'vue'
+import {useBrowserLocation, useMutationObserver} from '@vueuse/core'
+import {disableExtension} from "~/logic";
+import {onWebExtensionStoragesMounted} from "~/composables/useWebExtensionStorage";
 
 export function useShikimoriMetaName() {
     const el = ref<HTMLDivElement | undefined>()
     const location = useBrowserLocation()
+    const metaName = ref<string>('')
 
-    watch(location, handleUrlChange, { deep: true })
+    watch(location, updateMetaInfo, {deep: true})
 
     onWebExtensionStoragesMounted(() => {
-        window.addEventListener('popstate', handleUrlChange)
-        document.addEventListener('turbolinks:load', handleUrlChange)
+        window.addEventListener('popstate', updateMetaInfo)
+        document.addEventListener('turbolinks:load', updateMetaInfo)
         updateMetaInfo()
         useMutationObserver(document.body, mutationCallback, {
             childList: true,
@@ -20,8 +21,8 @@ export function useShikimoriMetaName() {
     })
 
     onUnmounted(() => {
-        window.removeEventListener('popstate', handleUrlChange)
-        document.removeEventListener('turbolinks:load', handleUrlChange)
+        window.removeEventListener('popstate', updateMetaInfo)
+        document.removeEventListener('turbolinks:load', updateMetaInfo)
     })
 
 
@@ -45,10 +46,6 @@ export function useShikimoriMetaName() {
         }
     }
 
-    function handleUrlChange() {
-        updateMetaInfo()
-    }
-
     function updateMetaInfo() {
         if (disableExtension.value) {
             return
@@ -69,10 +66,10 @@ export function useShikimoriMetaName() {
             link.remove();
         })
 
-        metaNameStorage.value = document.querySelector<HTMLMetaElement>("header > meta[itemprop=name]")?.content ?? ''
+        metaName.value = document.querySelector<HTMLMetaElement>("header > meta[itemprop=name]")?.content ?? ''
         el.value = targetEl ?? undefined
     }
 
-    return { el, metaName: metaNameStorage }
+    return {el, metaName}
 }
 

src/logic/storage.ts

@@ -1,5 +1,4 @@
 import { useWebExtensionStorage } from '~/composables/useWebExtensionStorage'
 
 export const sitesStorage = useWebExtensionStorage<string[]>('sitesStorage', [])
-export const metaNameStorage = useWebExtensionStorage<string>('metaNameStorage', '')
 export const disableExtension = useWebExtensionStorage<boolean>('disableExtension', false)

src/popup/Popup.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 
-import {metaNameStorage} from "~/logic";
 
 function openOptionsPage() {
   browser.runtime.openOptionsPage()
@@ -16,8 +15,5 @@ function openOptionsPage() {
     <VarButton style="margin-top: 0.5rem;" @click="openOptionsPage">
       Открыть параметры
     </VarButton>
-    <div style="margin-top: 0.5rem;">
-      <span style="opacity: 0.5;">Текущий поиск:</span> {{ metaNameStorage }}
-    </div>
   </main>
 </template>