renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: optimize extension loading speed (#75)

Browse Source
This commit is contained in:
Hakadao
2023-12-13 01:10:57 +08:00
parent 95b12b5e9a
commit fa271b1759
2 changed files with 37 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/contentScripts/index.ts
View File

@@ -14,7 +14,9 @@ import 'vue-toastification/dist/index.css'
const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
const beforeLoadedStyleEl = injectCSS(`
let beforeLoadedStyleEl: HTMLStyleElement
if (localStorage.getItem('darkMode')?.toLowerCase() === 'true') {
beforeLoadedStyleEl = injectCSS(`
html.dark {
background-color: hsl(230 12% 6%);
}
@@ -23,6 +25,14 @@ const beforeLoadedStyleEl = injectCSS(`
opacity: 0;
}
`)
}
else {
beforeLoadedStyleEl = injectCSS(`
body {
opacity: 0;
}
`)
}
// Add opacity transition effect for page loaded
injectCSS(`
@@ -34,6 +44,7 @@ injectCSS(`
if (isFirefox) {
let isFirstScriptExecute = true
document.addEventListener('beforescriptexecute', () => {
document.documentElement.removeChild(beforeLoadedStyleEl)
if (!isFirstScriptExecute)
return
@@ -41,61 +52,18 @@ if (isFirefox) {
injectApp()
}, 1000)
isFirstScriptExecute = false
const currentUrl = document.URL
// Handling for video page to prevent the issue of video being played but the page remaining empty
if (
// 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)
) {
setTimeout(() => {
document.documentElement.removeChild(beforeLoadedStyleEl)
}, 400)
}
else {
window.onload = () => {
setTimeout(() => {
document.documentElement.removeChild(beforeLoadedStyleEl)
}, 300)
}
}
})
}
else {
document.addEventListener('DOMContentLoaded', () => {
// nextTick(() => {
// setTimeout(() => {
// document.body.style.opacity = '1'
// document.documentElement.removeChild(beforeLoadedStyleEl)
// }, 300)
// })
injectApp()
const currentUrl = document.URL
// Handling for video page to prevent the issue of video being played but the page remaining empty
if (
// 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)
) {
setTimeout(() => {
document.documentElement.removeChild(beforeLoadedStyleEl)
}, 400)
}
else {
window.onload = () => {
setTimeout(() => {
document.documentElement.removeChild(beforeLoadedStyleEl)
}, 300)
}
}
})
}
@@ -163,7 +131,10 @@ function injectApp() {
const newStyleEl = document.createElement('link')
newStyleEl.setAttribute('rel', 'stylesheet')
newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
document.body.appendChild(newStyleEl)
document.documentElement.appendChild(newStyleEl)
newStyleEl.onload = () => {
document.body.style.opacity = '1'
}
// inject svg icons
const svgDiv = document.createElement('div')
@@ -171,6 +142,7 @@ function injectApp() {
shadowDOM.appendChild(svgDiv)
document.body.appendChild(container)
const app = createApp(App)
setupApp(app)
app

20
src/contentScripts/views/App.vue
View File

@@ -24,6 +24,7 @@ const scrollbarRef = ref()
const showTopbarMask = ref<boolean>(false)
const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
const topbarRef = ref()
const mainAppOpacity = ref<number>(0)
const isVideoPage = computed(() => {
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
@@ -89,11 +90,11 @@ watch(() => settings.value.adaptToOtherPageStyles, () => {
})
onMounted(() => {
// nextTick(() => {
// setTimeout(() => {
// mainAppOpacity.value = 1
// }, 1200)
// })
nextTick(() => {
setTimeout(() => {
mainAppOpacity.value = 1
}, 1000)
})
if (isHomePage()) {
// Force overwrite Bilibili Evolved body tag & html tag background color
@@ -171,22 +172,26 @@ function setAppAppearance() {
mainAppRef.value?.classList.add('dark')
document.querySelector('#bewly')?.classList.add('dark')
document.documentElement.classList.add('dark')
localStorage.setItem('darkMode', 'true')
}
else if (settings.value.theme === 'light') {
mainAppRef.value?.classList.remove('dark')
document.querySelector('#bewly')?.classList.remove('dark')
document.documentElement.classList.remove('dark')
localStorage.setItem('darkMode', 'false')
}
else if (settings.value.theme === 'auto') {
if (currentColorScheme) {
mainAppRef.value?.classList.add('dark')
document.querySelector('#bewly')?.classList.add('dark')
document.documentElement.classList.add('dark')
localStorage.setItem('darkMode', 'true')
}
else {
mainAppRef.value?.classList.remove('dark')
document.querySelector('#bewly')?.classList.remove('dark')
document.documentElement.classList.remove('dark')
localStorage.setItem('darkMode', 'false')
}
}
}
@@ -253,9 +258,10 @@ provide('scrollbarRef', scrollbarRef)
</template>
<div
ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" z-60
ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300"
z-60
pos="absolute top-0 left-0" w-full h-full
:style="{ opacity: 1, height: isHomePage() ? '100vh' : '0' }"
:style="{ opacity: mainAppOpacity, height: isHomePage() ? '100dvh' : '0' }"
>
<!-- Dock & RightSideButtons -->
<div pos="absolute top-0 left-0" w-inherit h-inherit overflow-hidden>