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

fix: some bug that i dunno know to describe

Browse Source
This commit is contained in:
Hakadao
2023-03-18 23:11:24 +08:00
parent bb148f1f2b
commit d5c1de6d46
7 changed files with 136 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/background/index.ts
View File

@@ -87,18 +87,18 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
tabId,
},
})
setTimeout(() => {
browser.scripting.insertCSS({
css: `
body {
opacity: 1;
overflow-y: auto;
pointer-events: auto;
}
`,
target: { tabId },
})
}, 1500)
// setTimeout(() => {
// browser.scripting.insertCSS({
// css: `
// body {
// opacity: 1;
// overflow-y: auto;
// pointer-events: auto;
// }
// `,
// target: { tabId },
// })
// }, 2000)
// If it not a macOS, we will inject CSS to design the scrollbar
if (!navigator.userAgent.includes('Mac OS X')) {
@@ -133,18 +133,18 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
}
}
else if (changInfo.status === 'complete') {
// const css = `
// body {
// opacity: 1;
// overflow-y: auto;
// pointer-events: auto;
// }
// `
const css = `
body {
opacity: 1;
overflow-y: auto;
pointer-events: auto;
}
`
// browser.scripting.insertCSS({
// css,
// target: { tabId },
// })
browser.scripting.insertCSS({
css,
target: { tabId },
})
}
}
})

30
src/background/resetWebsiteStyle.ts
View File

@@ -4,16 +4,22 @@ export const resetCss = `
*/
:root {
--band_blue: var(--bew-theme-color);
--text1: var(--bew-text-1);
--text2: var(--bew-text-2);
--text3: var(--bew-text-3);
--bg1: var(--bew-content-1);
--bg2: var(--bew-content-1);
--bg3: var(--bew-content-1);
--line-light: var(--bew-fill-2);
--line_regular: var(--bew-fill-3);
--line_bold: var(--bew-fill-4);
--bew-bg: hsl(220, 14%, 96%);
// --band_blue: var(--bew-theme-color);
// --text1: var(--bew-text-1);
// --text2: var(--bew-text-2);
// --text3: var(--bew-text-3);
// --bg1: var(--bew-content-1);
// --bg2: var(--bew-content-1);
// --bg3: var(--bew-content-1);
// --line-light: var(--bew-fill-2);
// --line_regular: var(--bew-fill-3);
// --line_bold: var(--bew-fill-4);
}
:root.dark {
--bew-bg: hsl(230 12% 6%);
}
html,
@@ -22,6 +28,10 @@ body {
min-width: unset !important;
}
html {
background-color: var(--bew-bg);
}
a,
a:hover {
color: unset;

65
src/contentScripts/index.ts
View File

@@ -23,45 +23,42 @@ import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
|| /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)
|| /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
) {
// if the current homepage is an old version, redirect to the new version
// because they had some style errors in the old version
// if (`${getCookie('i-wanna-go-back')}` === '2') {
// setCookie('i-wanna-go-back', '-1', 1)
// 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')
// styleEl.setAttribute('rel', 'stylesheet')
// styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
// container.id = 'bewly'
// container.appendChild(styleEl)
// container.appendChild(root)
// document.body.appendChild(container)
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)) {
const container = document.createElement('div')
const root = document.createElement('div')
const styleEl = document.createElement('link')
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
container.id = 'bewly'
container.appendChild(styleEl)
container.appendChild(root)
document.body.appendChild(container)
const app = createApp(App)
setupApp(app)
app.use(i18n).mount(root)
}
else {
// mount component to context window
const container = document.createElement('div')
container.id = 'bewly'
const root = document.createElement('div')
const styleEl = document.createElement('link')
const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
shadowDOM.appendChild(styleEl)
shadowDOM.appendChild(root)
document.body.appendChild(container)
const app = createApp(App)
setupApp(app)
app.use(i18n).mount(root)
}
// const app = createApp(App)
// setupApp(app)
// app.use(i18n).mount(root)
// mount component to context window
const container = document.createElement('div')
container.id = 'bewly'
const root = document.createElement('div')
const styleEl = document.createElement('link')
const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
shadowDOM.appendChild(styleEl)
shadowDOM.appendChild(root)
document.body.appendChild(container)
const app = createApp(App)
setupApp(app)
app.use(i18n).mount(root)
// inject svg icons
const svgDiv = document.createElement('div')

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

@@ -16,10 +16,23 @@ import { AppPage, LanguageType } from '~/enums/appEnums'
const { locale } = useI18n()
const [showSettings, toggle] = useToggle(false)
const isDark = useDark({ selector: '#bewly' })
const isDark = useDark({
// selector: '#bewly',
onChanged: (isDark: boolean) => {
if (isDark) {
document.querySelector('html')?.classList.add('dark')
document.querySelector('#bewly')?.classList.add('dark')
}
else {
document.querySelector('html')?.classList.remove('dark')
document.querySelector('#bewly')?.classList.remove('dark')
}
},
})
const toggleDark = useToggle(isDark)
const pages = { Home, Search, Anime, History, Favorites, Video }
const isVideoPage = ref<boolean>(false)
const mainApp = ref<HTMLElement>()
watch(
() => activatedPage.value,
@@ -28,6 +41,12 @@ watch(
},
)
// Watch for changes in the 'isDark' variable and add the 'dark' class to the 'mainApp' element
// to prevent some Unocss dark-specific styles from failing to take effect
watch(() => isDark.value, (newValue, oldValue) => {
setAppAppearance()
})
onUpdated(() => {
setAppLanguage()
})
@@ -35,6 +54,11 @@ onUpdated(() => {
onMounted(() => {
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
isVideoPage.value = true
setAppAppearance()
setAppLanguage()
// nextTick(() => {
// setAppLanguage()
// })
})
function changeActivatePage(pageName: AppPage) {
@@ -59,13 +83,26 @@ async function setAppLanguage() {
language.value = LanguageType.English
}
}
console.log('hey, im here', language.value)
locale.value = language.value
}
/**
* Watch for changes in the 'isDark' variable and add the 'dark' class to the 'mainApp' element
* to prevent some Unocss dark-specific styles from failing to take effect
*/
function setAppAppearance() {
if (isDark.value)
mainApp.value?.classList.add('dark')
else
mainApp.value?.classList.remove('dark')
}
</script>
<template>
<div bg="$bew-bg" text="$bew-text-1" min-h-100vh>
<div ref="mainApp" bg="$bew-bg" text="$bew-text-1" min-h-100vh>
<div m-auto max-w="$bew-page-max-width">
<Transition name="topbar">
<Topbar

6
src/contentScripts/views/Video/Video.vue
View File

@@ -29,9 +29,9 @@ onMounted(async () => {
if (danmukuContent.value && danmukuBox)
danmukuContent.value.appendChild(danmukuBox)
const recoList = document.querySelector('#reco_list') as HTMLElement
if (recommendedContent.value && recoList)
recommendedContent.value.appendChild(recoList)
// const recoList = document.querySelector('#reco_list') as HTMLElement
// if (recommendedContent.value && recoList)
// recommendedContent.value.appendChild(recoList)
const multiPage = document.querySelector('#multi_page') as HTMLElement
if (videoEpisodeList.value && multiPage)

10
src/logic/storage.ts
View File

@@ -1,8 +1,8 @@
import { useStorageLocal } from '~/composables/useStorageLocal'
import { AppPage } from '~/enums/appEnums'
export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo', { listenToStorageChanges: true })
export const language = useStorageLocal('language', '', { listenToStorageChanges: true })
export const isShowTopbar = useStorageLocal('isShowTopbar', ref<boolean>(true), { listenToStorageChanges: true })
export const accessKey = useStorageLocal('accessKey', '', { listenToStorageChanges: true })
export const activatedPage = useStorageLocal('activatedPage', ref<AppPage>(AppPage.Home), { listenToStorageChanges: true })
export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo')
export const language = useStorageLocal('language', '')
export const isShowTopbar = useStorageLocal('isShowTopbar', ref<boolean>(true))
export const accessKey = useStorageLocal('accessKey', '')
export const activatedPage = useStorageLocal('activatedPage', ref<AppPage>(AppPage.Home))

17
src/styles/variables.scss
View File

@@ -1,4 +1,4 @@
:host {
:host, :root {
--bew-radius: 12px;
--bew-radius-half: calc(var(--bew-radius) / 2);
@@ -100,7 +100,7 @@
--bew-page-max-width: 2000px;
}
:host(.dark) {
:host(.dark), :root.dark {
// dark mode
--bew-logo-color: var(--bew-text-1);
@@ -122,3 +122,16 @@
--bew-fill-3: rgb(120 120 128 / 36%);
--bew-fill-4: rgb(120 120 128 / 46%);
}
:root {
--band_blue: var(--bew-theme-color);
--text1: var(--bew-text-1);
--text2: var(--bew-text-2);
--text3: var(--bew-text-3);
--bg1: var(--bew-content-1);
--bg2: var(--bew-content-1);
--bg3: var(--bew-content-1);
--line-light: var(--bew-fill-2);
--line_regular: var(--bew-fill-3);
--line_bold: var(--bew-fill-4);
}