From 3bb7e264bd98e4704bdf285fd1f21cb83724484e Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 10 Sep 2023 14:17:00 +0800 Subject: [PATCH] feat: add common method `injectCSS` * refactor: address ts errors --- src/components/Topbar/notify.ts | 8 ++++---- src/contentScripts/index.ts | 11 +++-------- src/contentScripts/views/App.vue | 16 +++++++++++----- src/utils/main.ts | 20 ++++++++++++++------ 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/src/components/Topbar/notify.ts b/src/components/Topbar/notify.ts index 90b4127a..b45c093b 100644 --- a/src/components/Topbar/notify.ts +++ b/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 diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 380dc7e2..0d95f7dc 100644 --- a/src/contentScripts/index.ts +++ b/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) diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index d311f9e9..2c1a51ac 100644 --- a/src/contentScripts/views/App.vue +++ b/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.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() {
diff --git a/src/utils/main.ts b/src/utils/main.ts index 5d5eec1d..57f47500 100644 --- a/src/utils/main.ts +++ b/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 = 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 +}