refactor: using unocss and update dependencies

src/contentScripts/index.ts

@@ -1,13 +1,12 @@
-/* eslint-disable no-console */
 import { onMessage } from 'webext-bridge'
 import { createApp } from 'vue'
-// import { router } from '~/contentScripts/router'
-
-// Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
-
 import App from './views/App.vue'
 import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
-;(() => {
+
+/* eslint-disable no-console */
+
+// Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
+(() => {
   console.info('[vitesse-webext] Hello world from content script')
 
   // communication example: send previous tab title from background page

src/contentScripts/views/App.vue

@@ -1,37 +1,39 @@
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core'
+import 'uno.css'
 import { apperance, isShowTopbar } from '~/logic/storage'
 import { language } from '~/logic'
-import 'virtual:windi.css'
 import '~/styles/index.ts'
 import Home from './home/Home.vue'
-import { useI18n } from 'vue-i18n'
+
+// const [show, toggle] = useToggle(false)
 
 const [showSettings, toggle] = useToggle(false)
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
-const { locale } = useI18n()
-
-window.onload = () => {
-  // if there is first-time load extension, set the default language by browser display language
-  if (language.value === '') {
-    if (browser.i18n.getUILanguage() === 'zh-CN')
-      language.value = 'cmn-SC'
-    else if (browser.i18n.getUILanguage() === 'zh-TW')
-      language.value = 'cmn-TC'
-    else
-      language.value = 'en'
-  }
-
-  locale.value = language.value
-
-  // locale.value = language.value
-}
 </script>
 
 <template>
+  <!-- <div class="fixed right-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em">
+    <div
+      class="bg-white text-gray-800 rounded-full shadow w-max h-min"
+      p="x-4 y-2"
+      m="y-auto r-2"
+      transition="opacity duration-300"
+      :class="show ? 'opacity-100' : 'opacity-0'"
+    >
+      Vitesse WebExt 323143214214
+    </div>
+    <div
+      class="flex w-10 h-10 rounded-full shadow cursor-pointer"
+      bg="teal-600 hover:teal-700"
+      @click="toggle()"
+    >
+      <pixelarticons-power class="block m-auto text-white text-lg" />
+    </div>
+  </div> -->
   <Transition>
-    <Topbar v-if="isShowTopbar" class="fixed z-50" />
+    <Topbar class="fixed z-50" />
   </Transition>
   <!-- is home page -->
   <Home />

src/contentScripts/views/Home/Home.vue

@@ -1,14 +1,14 @@
-<template>
-  <div bg="$bew-bg">
-    <div class="banner flex justify-center items-center flex-col"></div>
-    <recommend-content></recommend-content>
-  </div>
-</template>
-
 <script setup lang="ts">
 import RecommendContent from './RecommendContent.vue'
 </script>
 
+<template>
+  <div bg="$bew-bg">
+    <div class="banner flex justify-center items-center flex-col" />
+    <recommend-content />
+  </div>
+</template>
+
 <style lang="scss">
 .banner {
   height: 83px;