From d4cc4ef420da00dda5959502131561ea72647a81 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Tue, 21 Feb 2023 00:28:40 +0800 Subject: [PATCH] chore: make sure to push some code before i fuck up my own life --- src/background/index.ts | 1 + src/components/VideoCard/VideoCard.vue | 2 +- src/contentScripts/index.ts | 18 ++++--- src/contentScripts/views/App.vue | 62 ++++++++++++++++++------ src/contentScripts/views/Video/Video.vue | 26 ++++++++++ src/styles/main.scss | 2 +- src/styles/reset.scss | 6 ++- 7 files changed, 92 insertions(+), 25 deletions(-) create mode 100644 src/contentScripts/views/Video/Video.vue diff --git a/src/background/index.ts b/src/background/index.ts index 7ccf6be7..87305466 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -54,6 +54,7 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan || /https?:\/\/www.bilibili.com\/?$/.test(`${tab.url}`) || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(`${tab.url}`) || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(`${tab.url}`) + || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(`${tab.url}`) ) { if (changInfo.status === 'loading') { const css = ` diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue index 6cacdb47..9bfbd262 100644 --- a/src/components/VideoCard/VideoCard.vue +++ b/src/components/VideoCard/VideoCard.vue @@ -14,7 +14,7 @@ const props = defineProps<{ }>() const videoUrl = computed(() => { - return `/video/${props.videoData.bvid}` + return `https://www.bilibili.com/video/${props.videoData.bvid}` }) const isDislike = ref(false) diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index aaa9ee7d..2417dddd 100644 --- a/src/contentScripts/index.ts +++ b/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') diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 88efd6b8..a95d7e8a 100644 --- a/src/contentScripts/views/App.vue +++ b/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(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 } @@ -72,7 +86,7 @@ function changeActivatePage(pageName: AppPage) { > --> + + -
+
@@ -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; + } } diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue new file mode 100644 index 00000000..5e77c364 --- /dev/null +++ b/src/contentScripts/views/Video/Video.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/styles/main.scss b/src/styles/main.scss index 72673b2e..7e322eb9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,7 +14,7 @@ html { } body { - background: var(--bew-bg); + background: var(--bew-bg) !important; color: var(--bew-text-1); } diff --git a/src/styles/reset.scss b/src/styles/reset.scss index ef549f6c..372dc6fa 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -27,8 +27,10 @@ button { .login-tip { display: none; } + body > #i_cecream, -#i_cecream * { +#i_cecream *, +#app { position: absolute; top: 200vh; visibility: hidden !important; @@ -36,4 +38,6 @@ body > #i_cecream, height: 0; overflow: hidden !important; pointer-events: none !important; + display: none; } +