chore: make sure to push some code before i fuck up my own life

src/contentScripts/index.ts

@@ -3,16 +3,14 @@ import { createApp } from 'vue'
 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')
+  // console.info('[vitesse-webext] Hello world from content script')
 
-  // communication example: send previous tab title from background page
-  onMessage('tab-prev', ({ data }) => {
-    console.log(`[vitesse-webext] Navigate from page "${data.title}"`)
-  })
+  // // communication example: send previous tab title from background page
+  // onMessage('tab-prev', ({ data }) => {
+  //   console.log(`[vitesse-webext] Navigate from page "${data.title}"`)
+  // })
 
   const currentUrl = document.URL
 
@@ -22,7 +20,7 @@ import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
     || /https?:\/\/www.bilibili.com\/index.html$/.test(currentUrl)
     || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(currentUrl)
     || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)
-    // || /https?:\/\/www.bilibili.com\/video\/.*/.test(currentUrl)
+    || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
     // || /https?:\/\/bilibili.com\/video\/.*/.test(currentUrl)
   ) {
     // if the current homepage is an old version, redirect to the new version
@@ -32,6 +30,10 @@ import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
     //   location.reload()
     // }
 
+    const originalPageContent = document.querySelector('#i_cecream')
+    if (originalPageContent)
+      originalPageContent.innerHTML = ''
+
     const container = document.createElement('div')
     const root = document.createElement('div')
     const styleEl = document.createElement('link')

src/contentScripts/views/App.vue

@@ -8,6 +8,7 @@ import Search from './Search/Search.vue'
 import Anime from './Anime/Anime.vue'
 import History from './History/History.vue'
 import Favorites from './Favorites/Favorites.vue'
+import Video from './Video/Video.vue'
 import { activatedPage, isShowTopbar } from '~/logic/storage'
 import { language } from '~/logic'
 import '~/styles/index.ts'
@@ -17,13 +18,30 @@ const { locale } = useI18n()
 const [showSettings, toggle] = useToggle(false)
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
-const pages = { Home, Search, Anime, History, Favorites }
+const pages = { Home, Search, Anime, History, Favorites, Video }
+const isVideoPage = ref<boolean>(false)
 
-watch(() => activatedPage.value, (newValue, oldValue) => {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+watch(
+  () => activatedPage.value,
+  (newValue, oldValue) => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  },
+)
+
+onUpdated(() => {
+  setAppLanguage()
 })
 
-onUpdated(async () => {
+onMounted(() => {
+  if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
+    isVideoPage.value = true
+})
+
+function changeActivatePage(pageName: AppPage) {
+  activatedPage.value = pageName
+}
+
+async function setAppLanguage() {
   // if there is first-time load extension, set the default language by browser display language
   if (!language.value) {
     if (browser.i18n.getUILanguage() === 'zh-CN') {
@@ -43,10 +61,6 @@ onUpdated(async () => {
   }
 
   locale.value = language.value
-})
-
-function changeActivatePage(pageName: AppPage) {
-  activatedPage.value = pageName
 }
 </script>
 
@@ -72,7 +86,7 @@ function changeActivatePage(pageName: AppPage) {
       >
         <button
           class="tab-item"
-          :class="{ active: activatedPage === AppPage.Search }"
+          :class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
           @click="changeActivatePage(AppPage.Search)"
         >
           <tabler:search />
@@ -80,7 +94,7 @@ function changeActivatePage(pageName: AppPage) {
 
         <button
           class="tab-item"
-          :class="{ active: activatedPage === AppPage.Home }"
+          :class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
           @click="changeActivatePage(AppPage.Home)"
         >
           <tabler:home />
@@ -88,7 +102,7 @@ function changeActivatePage(pageName: AppPage) {
 
         <button
           class="tab-item"
-          :class="{ active: activatedPage === AppPage.Anime }"
+          :class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
           @click="changeActivatePage(AppPage.Anime)"
         >
           <tabler:device-tv />
@@ -96,7 +110,7 @@ function changeActivatePage(pageName: AppPage) {
 
         <button
           class="tab-item"
-          :class="{ active: activatedPage === AppPage.History }"
+          :class="{ active: activatedPage === AppPage.History && !isVideoPage }"
           @click="changeActivatePage(AppPage.History)"
         >
           <tabler:clock />
@@ -110,8 +124,18 @@ function changeActivatePage(pageName: AppPage) {
           <tabler:star />
         </button> -->
 
+        <template v-if="isVideoPage">
+          <!-- dividing line -->
+          <div my-2 w-full h-2px bg="$bew-fill-2" />
+
+          <!-- video page -->
+          <button class="tab-item video active">
+            <tabler:player-play />
+          </button>
+        </template>
+
         <!-- dividing line -->
-        <div my-4 w-full h-2px bg="$bew-fill-2" />
+        <div my-2 w-full h-2px bg="$bew-fill-2" />
 
         <button class="tab-item" @click="toggleDark()">
           <tabler:moon-stars v-if="isDark" />
@@ -126,7 +150,8 @@ function changeActivatePage(pageName: AppPage) {
 
     <main p="t-80px lg:x-36 md:x-22 x-18" w-full>
       <Transition name="fade">
-        <Component :is="pages[activatedPage]" />
+        <Component :is="pages[activatedPage]" v-if="!isVideoPage" />
+        <Video v-else />
       </Transition>
     </main>
   </div>
@@ -179,5 +204,14 @@ function changeActivatePage(pageName: AppPage) {
       shadow-$shadow dark:shadow-$shadow-dark
       active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active;
   }
+
+  &.active.video {
+    --shadow: 0 0 30px 4px var(--bew-warning-color-50);
+    --shadow-dark: var(--shadow);
+    --shadow-active: 0 0 20px var(--bew-warning-color-50);
+    --shadow-dark-active: var(--shadow-active);
+
+    --at-apply: bg-$bew-warning-color text-black;
+  }
 }
 </style>

src/contentScripts/views/Video/Video.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+
+const hahaha = ref() as Ref<HTMLElement>
+
+const app = document.querySelector('#app') as HTMLElement
+// app.innerHTML = ''
+
+// document.body.removeChild(app)
+
+onMounted(() => {
+  const videoPlayer = document.querySelector('#playerWrap') as HTMLElement
+  if (hahaha.value)
+    hahaha.value.appendChild(videoPlayer)
+})
+</script>
+
+<template>
+  <div>
+    <div ref="hahaha" class="uwuwuw" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>