fix: blank page on opening certain page (#85)

This commit is contained in:
Hakadao
2023-12-27 23:39:34 +08:00
parent f32ff2558d
commit 264925fbef

View File

@@ -6,32 +6,76 @@ import '~/styles/index.ts'
import App from './views/App.vue'
import { setupApp } from '~/logic/common-setup'
import { SVG_ICONS } from '~/utils/svgIcons'
import { injectCSS } from '~/utils/main'
import { delay, injectCSS } from '~/utils/main'
const currentUrl = document.URL
function isSupportedPage() {
if (
// homepage
/https?:\/\/bilibili.com\/?$/.test(currentUrl)
|| /https?:\/\/www.bilibili.com\/?$/.test(currentUrl)
|| /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)
// video page
|| /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
// anime playback & movie page
|| /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl)
// watch later playlist
|| /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
// favorite playlist
|| /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
// search page
|| /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
// moments
|| /https?:\/\/t.bilibili.com\.*/.test(currentUrl)
// moment detail
|| /https?:\/\/www.bilibili.com\/opus\/.*/.test(currentUrl)
// history page
|| /https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl)
// user space page
|| /https?:\/\/space.bilibili.com\.*/.test(currentUrl)
// notifications page
|| /https?:\/\/message.bilibili.com\.*/.test(currentUrl)
// bilibili channel page b站分区页面
|| /https?:\/\/www.bilibili.com\/v\/.*/.test(currentUrl)
// anime page
|| /https?:\/\/www.bilibili.com\/anime.*/.test(currentUrl)
// tv shows, movie, variety shows, mooc page
|| /https?:\/\/(www.)?bilibili.com\/(tv|movie|variety|mooc).*/.test(currentUrl))
return true
else
return false
}
const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
const beforeLoadedStyleEl: HTMLStyleElement = injectCSS(`
html.dark.bewly-design {
background-color: hsl(230 12% 6%);
}
let beforeLoadedStyleEl: HTMLStyleElement
if (isSupportedPage()) {
beforeLoadedStyleEl = injectCSS(`
html.dark.bewly-design {
background-color: hsl(230 12% 6%);
}
body {
opacity: 0;
background: none;
}
`)
body {
opacity: 0;
background: none;
}
`)
// Add opacity transition effect for page loaded
injectCSS(`
body {
transition: opacity 0.5s;
}
`)
// Add opacity transition effect for page loaded
injectCSS(`
body {
transition: opacity 0.5s;
}
`)
}
if (isFirefox) {
let isFirstScriptExecute = true
document.addEventListener('beforescriptexecute', () => {
document.documentElement.removeChild(beforeLoadedStyleEl)
if (!isFirstScriptExecute)
return
@@ -43,13 +87,6 @@ if (isFirefox) {
}
else {
document.addEventListener('DOMContentLoaded', () => {
// nextTick(() => {
// setTimeout(() => {
// document.body.style.opacity = '1'
// document.documentElement.removeChild(beforeLoadedStyleEl)
// }, 300)
// })
injectApp()
})
}
@@ -57,41 +94,7 @@ else {
function injectApp() {
const currentUrl = document.URL
if (
// homepage
/https?:\/\/bilibili.com\/?$/.test(currentUrl)
|| /https?:\/\/www.bilibili.com\/?$/.test(currentUrl)
|| /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)
// video page
|| /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
// anime playback & movie page
|| /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl)
// watch later playlist
|| /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
// favorite playlist
|| /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
// search page
|| /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
// moments
|| /https?:\/\/t.bilibili.com\.*/.test(currentUrl)
// moment detail
|| /https?:\/\/www.bilibili.com\/opus\/.*/.test(currentUrl)
// history page
|| /https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl)
// user space page
|| /https?:\/\/space.bilibili.com\.*/.test(currentUrl)
// notifications page
|| /https?:\/\/message.bilibili.com\.*/.test(currentUrl)
// bilibili channel page b站分区页面
|| /https?:\/\/www.bilibili.com\/v\/.*/.test(currentUrl)
// anime page
|| /https?:\/\/www.bilibili.com\/anime.*/.test(currentUrl)
// tv shows, movie, variety shows, mooc page
|| /https?:\/\/(www.)?bilibili.com\/(tv|movie|variety|mooc).*/.test(currentUrl)
) {
if (isSupportedPage()) {
if (
/https?:\/\/bilibili.com\/?$/.test(currentUrl)
|| /https?:\/\/www.bilibili.com\/?$/.test(currentUrl)
@@ -126,7 +129,9 @@ function injectApp() {
newStyleEl.setAttribute('rel', 'stylesheet')
newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
document.documentElement.appendChild(newStyleEl)
newStyleEl.onload = () => {
newStyleEl.onload = async () => {
// To prevent abrupt style transitions caused by sudden style changes
await delay(500)
document.documentElement.removeChild(beforeLoadedStyleEl)
}