feat: add common method injectCSS

* refactor: address ts errors

src/components/Topbar/notify.ts

@@ -4,10 +4,10 @@ import { getCookie, getUserID, setCookie } from '~/utils/main'
 /** Update the time interval of topbar notifications and moments counts */
 export const updateInterval = 1000 * 60 * 5 // Updated every 5 minutes
 
-const getVideoOffsetID = (): number => parseInt(`${getCookie(`bp_video_offset_${getUserID()}`)}`, 10) || 0
-const getArticleOffsetID = (): number => parseInt(`${getCookie(`bp_article_offset_${getUserID()}`)}`, 10) || 0
+const getVideoOffsetID = (): number => Number.parseInt(`${getCookie(`bp_video_offset_${getUserID()}`)}`, 10) || 0
+const getArticleOffsetID = (): number => Number.parseInt(`${getCookie(`bp_article_offset_${getUserID()}`)}`, 10) || 0
 
-const compareOffsetID = (currentOffsetID: number, lastestOffsetID: number): boolean => {
+function compareOffsetID(currentOffsetID: number, lastestOffsetID: number): boolean {
   if (currentOffsetID === lastestOffsetID)
     return false
   else if (currentOffsetID > lastestOffsetID)
@@ -16,7 +16,7 @@ const compareOffsetID = (currentOffsetID: number, lastestOffsetID: number): bool
     return false
 }
 
-export const setLastestOffsetID = (type: MomentType, offsetID: number) => {
+export function setLastestOffsetID(type: MomentType, offsetID: number) {
   if (offsetID === null || offsetID === undefined)
     return
 

src/contentScripts/index.ts

@@ -4,19 +4,12 @@ import App from './views/App.vue'
 import { setupApp } from '~/logic/common-setup'
 import { i18n } from '~/utils/i18n'
 import { SVG_ICONS } from '~/utils/svgIcons'
+import { injectCSS } from '~/utils/main'
 
 let app: any
 
 const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
 
-function injectCSS(css: string): HTMLStyleElement {
-  const el = document.createElement('style')
-  el.setAttribute('rel', 'stylesheet')
-  el.innerText = css
-  document.documentElement.appendChild(el)
-  return el
-}
-
 const beforeLoadedStyleEl = injectCSS(`
   html.dark {
     background: hsl(230 12% 6%);
@@ -70,6 +63,8 @@ function injectApp() {
     || /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
     // moments
     || /https?:\/\/t.bilibili.com\.*/.test(currentUrl)
+    // history page
+    || /https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl)
   ) {
     if (
       /https?:\/\/bilibili.com\/?$/.test(currentUrl)

src/contentScripts/views/App.vue

@@ -13,7 +13,7 @@ import Favorites from './Favorites/Favorites.vue'
 import { accessKey, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
-import { getUserID, hexToRGBA, smoothScrollToTop } from '~/utils/main'
+import { getUserID, hexToRGBA, injectCSS, smoothScrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 const activatedPage = ref<AppPage>(AppPage.Home)
@@ -166,9 +166,15 @@ onMounted(() => {
   })
 
   if (!isHomePage.value) {
-    const originalTopBar: HTMLElement = document.querySelector('#biliMainHeader, #bili-header-container') as HTMLElement
-    if (originalTopBar)
-      originalTopBar.style.visibility = 'hidden'
+    injectCSS(`
+    .bili-header .bili-header__bar, #bili-header-container {
+      visibility: hidden
+    }
+    `)
+
+    // const originalTopBar: HTMLElement = document.querySelector('.bili-header .bili-header__bar, #bili-header-container') as HTMLElement
+    // if (originalTopBar)
+    //   originalTopBar.style.visibility = 'hidden'
   }
 
   setAppAppearance()
@@ -445,7 +451,7 @@ function handleBackToTop() {
 
         <main
           v-if="isHomePage"
-          p="t-80px" m-auto
+          p="t-70px" m-auto
           relative
           :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
         >

src/utils/main.ts

@@ -3,11 +3,11 @@
  * @param name cookie name
  * @returns cookie value
  */
-export function getCookie(name: string) {
+export function getCookie(name: string): string {
   const value = `; ${document.cookie}`
   const parts: Array<string> = value.split(`; ${name}=`)
   if (parts.length === 2)
-    return parts?.pop()?.split(';').shift()
+    return parts?.pop()?.split(';').shift() || ''
 }
 
 /**
@@ -26,19 +26,19 @@ export function setCookie(name: string, value: any, expDays: number) {
  * get current login user id
  * @returns userId
  */
-export const getUserID = () => getCookie('DedeUserID')
+export const getUserID = (): string => getCookie('DedeUserID')
 
 /**
  * get csrf token
  */
-export const getCSRF = () => getCookie('bili_jct')
+export const getCSRF = (): string => getCookie('bili_jct')
 
 /**
  * remove 'http://' or 'https://' from a URL
  * @param url
  * @returns
  */
-export function removeHttpFromUrl(url: string) {
+export function removeHttpFromUrl(url: string): string {
   return url.replace(/^https?:/, '')
 }
 
@@ -52,7 +52,7 @@ export function openLinkToNewTab(url: string) {
  * @param alpha color opacity
  * @returns
  */
-export function hexToRGBA(hex: string, alpha: number) {
+export function hexToRGBA(hex: string, alpha: number): string {
   const r = Number.parseInt(hex.slice(1, 3), 16)
   const g = Number.parseInt(hex.slice(3, 5), 16)
   const b = Number.parseInt(hex.slice(5, 7), 16)
@@ -89,3 +89,11 @@ export function smoothScrollToTop(element: HTMLElement, duration: number) {
   }
   window.requestAnimationFrame(step)
 }
+
+export function injectCSS(css: string): HTMLStyleElement {
+  const el = document.createElement('style')
+  el.setAttribute('rel', 'stylesheet')
+  el.innerText = css
+  document.documentElement.appendChild(el)
+  return el
+}