diff --git a/package.json b/package.json index 4076f658..97ad36f3 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,11 @@ "submit:firefox": "pnpm wxt submit --firefox-zip ./extension-firefox.zip --firefox-sources-zip ./extension-firefox-sources.zip" }, "dependencies": { + "@codemirror/lang-css": "^6.3.0", + "@codemirror/lang-javascript": "^6.2.2", + "@codemirror/theme-one-dark": "^6.1.2", "@types/md5": "^2.3.5", + "codemirror": "^6.0.1", "dompurify": "^3.1.5", "md5": "^2.3.0", "mitt": "^3.0.1", @@ -52,6 +56,7 @@ "overlayscrollbars-vue": "^0.5.9", "pinia": "^2.1.7", "qrcode.vue": "^3.4.1", + "vue-codemirror": "^6.1.1", "vue-i18n": "^9.13.1", "vue-toastification": "2.0.0-rc.5", "vuedraggable": "^4.1.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6a9a0b2e..2b5b18ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,21 @@ importers: .: dependencies: + '@codemirror/lang-css': + specifier: ^6.3.0 + version: 6.3.0(@codemirror/view@6.33.0) + '@codemirror/lang-javascript': + specifier: ^6.2.2 + version: 6.2.2 + '@codemirror/theme-one-dark': + specifier: ^6.1.2 + version: 6.1.2 '@types/md5': specifier: ^2.3.5 version: 2.3.5 + codemirror: + specifier: ^6.0.1 + version: 6.0.1(@lezer/common@1.2.1) dompurify: specifier: ^3.1.5 version: 3.1.5 @@ -32,6 +44,9 @@ importers: qrcode.vue: specifier: ^3.4.1 version: 3.4.1(vue@3.4.27(typescript@5.4.5)) + vue-codemirror: + specifier: ^6.1.1 + version: 6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.4.27(typescript@5.4.5)) vue-i18n: specifier: ^9.13.1 version: 9.13.1(vue@3.4.27(typescript@5.4.5)) @@ -415,6 +430,41 @@ packages: bundledDependencies: - is-unicode-supported + '@codemirror/autocomplete@6.18.1': + resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==} + peerDependencies: + '@codemirror/language': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + '@lezer/common': ^1.0.0 + + '@codemirror/commands@6.6.2': + resolution: {integrity: sha512-Fq7eWOl1Rcbrfn6jD8FPCj9Auaxdm5nIK5RYOeW7ughnd/rY5AmPg6b+CfsG39ZHdwiwe8lde3q8uR7CF5S0yQ==} + + '@codemirror/lang-css@6.3.0': + resolution: {integrity: sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==} + + '@codemirror/lang-javascript@6.2.2': + resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==} + + '@codemirror/language@6.10.3': + resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==} + + '@codemirror/lint@6.8.1': + resolution: {integrity: sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==} + + '@codemirror/search@6.5.6': + resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==} + + '@codemirror/state@6.4.1': + resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==} + + '@codemirror/theme-one-dark@6.1.2': + resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==} + + '@codemirror/view@6.33.0': + resolution: {integrity: sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==} + '@conventional-changelog/git-client@1.0.1': resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==} engines: {node: '>=18'} @@ -886,6 +936,21 @@ packages: resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==} engines: {node: '>=10'} + '@lezer/common@1.2.1': + resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==} + + '@lezer/css@1.1.9': + resolution: {integrity: sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==} + + '@lezer/highlight@1.2.1': + resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==} + + '@lezer/javascript@1.4.18': + resolution: {integrity: sha512-Y8BeHOt4LtcxJgXwadtfSeWPrh0XzklcCHnCVT+vOsxqH4gWmunP2ykX+VVOlM/dusyVyiNfG3lv0f10UK+mgA==} + + '@lezer/lr@1.4.2': + resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==} + '@ljharb/through@2.3.13': resolution: {integrity: sha512-/gKJun8NNiWGZJkGzI/Ragc53cOdcLNdzjLaIa+GEjguQs0ulsurx8WN0jijdK9yPqDvziX995sMRLyLt1uZMQ==} engines: {node: '>= 0.4'} @@ -1894,6 +1959,9 @@ packages: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} engines: {node: '>=0.8'} + codemirror@6.0.1: + resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==} + color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -2033,6 +2101,9 @@ packages: crc@3.8.0: resolution: {integrity: sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==} + crelt@1.0.6: + resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==} + cross-env@7.0.3: resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==} engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'} @@ -4936,6 +5007,9 @@ packages: strip-literal@2.1.0: resolution: {integrity: sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==} + style-mod@4.1.2: + resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==} + sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -5354,6 +5428,12 @@ packages: vscode-uri@3.0.8: resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + vue-codemirror@6.1.1: + resolution: {integrity: sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==} + peerDependencies: + codemirror: 6.x + vue: 3.x + vue-demi@0.14.8: resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} engines: {node: '>=12'} @@ -5404,6 +5484,9 @@ packages: peerDependencies: vue: ^3.0.1 + w3c-keyname@2.2.8: + resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==} + w3c-xmlserializer@5.0.0: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} @@ -5943,6 +6026,76 @@ snapshots: picocolors: 1.0.1 sisteransi: 1.0.5 + '@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)': + dependencies: + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/common': 1.2.1 + + '@codemirror/commands@6.6.2': + dependencies: + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/common': 1.2.1 + + '@codemirror/lang-css@6.3.0(@codemirror/view@6.33.0)': + dependencies: + '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@lezer/common': 1.2.1 + '@lezer/css': 1.1.9 + transitivePeerDependencies: + - '@codemirror/view' + + '@codemirror/lang-javascript@6.2.2': + dependencies: + '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) + '@codemirror/language': 6.10.3 + '@codemirror/lint': 6.8.1 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/common': 1.2.1 + '@lezer/javascript': 1.4.18 + + '@codemirror/language@6.10.3': + dependencies: + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + style-mod: 4.1.2 + + '@codemirror/lint@6.8.1': + dependencies: + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + crelt: 1.0.6 + + '@codemirror/search@6.5.6': + dependencies: + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + crelt: 1.0.6 + + '@codemirror/state@6.4.1': {} + + '@codemirror/theme-one-dark@6.1.2': + dependencies: + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/highlight': 1.2.1 + + '@codemirror/view@6.33.0': + dependencies: + '@codemirror/state': 6.4.1 + style-mod: 4.1.2 + w3c-keyname: 2.2.8 + '@conventional-changelog/git-client@1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)': dependencies: '@types/semver': 7.5.8 @@ -6338,6 +6491,28 @@ snapshots: string-argv: 0.3.2 type-detect: 4.0.8 + '@lezer/common@1.2.1': {} + + '@lezer/css@1.1.9': + dependencies: + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + + '@lezer/highlight@1.2.1': + dependencies: + '@lezer/common': 1.2.1 + + '@lezer/javascript@1.4.18': + dependencies: + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + + '@lezer/lr@1.4.2': + dependencies: + '@lezer/common': 1.2.1 + '@ljharb/through@2.3.13': dependencies: call-bind: 1.0.7 @@ -7578,6 +7753,18 @@ snapshots: clone@1.0.4: {} + codemirror@6.0.1(@lezer/common@1.2.1): + dependencies: + '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) + '@codemirror/commands': 6.6.2 + '@codemirror/language': 6.10.3 + '@codemirror/lint': 6.8.1 + '@codemirror/search': 6.5.6 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + transitivePeerDependencies: + - '@lezer/common' + color-convert@1.9.3: dependencies: color-name: 1.1.3 @@ -7711,6 +7898,8 @@ snapshots: dependencies: buffer: 5.7.1 + crelt@1.0.6: {} + cross-env@7.0.3: dependencies: cross-spawn: 7.0.3 @@ -10942,6 +11131,8 @@ snapshots: dependencies: js-tokens: 9.0.0 + style-mod@4.1.2: {} + sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.5 @@ -11414,6 +11605,15 @@ snapshots: vscode-uri@3.0.8: {} + vue-codemirror@6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.4.27(typescript@5.4.5)): + dependencies: + '@codemirror/commands': 6.6.2 + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + codemirror: 6.0.1(@lezer/common@1.2.1) + vue: 3.4.27(typescript@5.4.5) + vue-demi@0.14.8(vue@3.4.27(typescript@5.4.5)): dependencies: vue: 3.4.27(typescript@5.4.5) @@ -11469,6 +11669,8 @@ snapshots: sortablejs: 1.14.0 vue: 3.4.27(typescript@5.4.5) + w3c-keyname@2.2.8: {} + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 95d4f8cc..94a4a1e2 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -167,6 +167,10 @@ settings: enable_wallpaper_masking: 启用背景遮罩效果 wallpaper_mask_opacity: 背景遮罩透明度调整 wallpaper_blur_intensity: 背景模糊强度调整 + customize_css: 自定义 CSS + customize_css_desc: |- + 如果你不熟悉 CSS，请不要修改 CSS。否则可能会导致意外的显示问题。 + 如果在你修改 CSS 后遇到任何问题，请重新安装 BewlyBewly。 # Search page logo_color: Logo 颜色 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index 371b3462..ea24366f 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -167,6 +167,10 @@ settings: enable_wallpaper_masking: 啟用背景遮蔽效果 wallpaper_mask_opacity: 背景遮蔽透明度調節 wallpaper_blur_intensity: 背景模糊強度調節 + customize_css: 自訂 CSS + customize_css_desc: |- + 如果你不熟悉 CSS，請不要修改 CSS。否則可能會導致意外的顯示問題。 + 如果你在修改 CSS 後遇到任何問題，請重新安裝 BewlyBewly。 # Search page logo_color: Logo 顏色 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 62096806..00a8aa6e 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -167,6 +167,10 @@ settings: enable_wallpaper_masking: Enable wallpaper masking wallpaper_mask_opacity: Wallpaper masking opacity wallpaper_blur_intensity: Wallpaper blur intensity + customize_css: Customize CSS + customize_css_desc: |- + If you are unfamiliar with CSS, please DO NOT modify CSS. Doing so may cause unexpected display issues. + If you encounter any problems after modifying CSS, please reinstall BewlyBewly. # Search page logo_color: Logo color diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 3ad6220b..9dd1e99b 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -167,6 +167,10 @@ settings: enable_wallpaper_masking: 使用背景遮蔽效果 wallpaper_mask_opacity: 背景遮蔽透明度調節 wallpaper_blur_intensity: 背景模糊強度調節 + customize_css: 自訂 CSS + customize_css_desc: |- + 若然你唔係幾識 CSS，請唔好立亂去改 CSS。唔係嘅話可能會搞到個頁面亂晒。 + 若然你執咗 CSS 之後遇到任何問題，唔該重新單個 BewlyBewly。 # Search page logo_color: Logo 顏色 diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue new file mode 100644 index 00000000..5f926fdd --- /dev/null +++ b/src/components/CodeEditor.vue @@ -0,0 +1,48 @@ + + + diff --git a/src/components/Settings/Appearance/Appearance.vue b/src/components/Settings/Appearance/Appearance.vue index b439541d..4086ccad 100644 --- a/src/components/Settings/Appearance/Appearance.vue +++ b/src/components/Settings/Appearance/Appearance.vue @@ -122,6 +122,20 @@ function changeWallpaper(url: string) { + + + + + + + + diff --git a/src/contentScripts/views/necessarySettingsWatchers.ts b/src/contentScripts/views/necessarySettingsWatchers.ts index a2b4fd50..c504afae 100644 --- a/src/contentScripts/views/necessarySettingsWatchers.ts +++ b/src/contentScripts/views/necessarySettingsWatchers.ts @@ -1,8 +1,10 @@ +import { useEventListener } from '@vueuse/core' import { useI18n } from 'vue-i18n' +import { BEWLY_MOUNTED } from '~/constants/globalEvents' import { LanguageType } from '~/enums/appEnums' import { accessKey, settings } from '~/logic' -import { getUserID } from '~/utils/main' +import { getUserID, injectCSS } from '~/utils/main' export function setupNecessarySettingsWatchers() { const { locale } = useI18n() @@ -131,6 +133,31 @@ export function setupNecessarySettingsWatchers() { { immediate: true }, ) + let styleEL: HTMLStyleElement | null = null + let bewlyStyleEL: HTMLStyleElement | null = null + watch( + [() => settings.value.customizeCSS, () => settings.value.customizeCSSContent], + () => { + const bewlyEl: HTMLElement | null = document.querySelector('#bewly') + const bewlyShadow: ShadowRoot | null = bewlyEl?.shadowRoot || null + + if (settings.value.customizeCSS) { + styleEL = injectCSS(settings.value.customizeCSSContent) + + if (bewlyShadow) + bewlyStyleEL = injectCSS(settings.value.customizeCSSContent, bewlyShadow) + } + else { + if (styleEL) + document.documentElement.removeChild(styleEL) + + if (bewlyShadow && bewlyStyleEL) + bewlyShadow.removeChild(bewlyStyleEL) + } + }, + { immediate: true }, + ) + watch( () => accessKey.value, () => { diff --git a/src/logic/storage.ts b/src/logic/storage.ts index 24a5baa3..3e55e5d6 100644 --- a/src/logic/storage.ts +++ b/src/logic/storage.ts @@ -47,6 +47,9 @@ export interface Settings { wallpaperBlurIntensity: number locallyUploadedWallpaper: wallpaperItem | null + customizeCSS: boolean + customizeCSSContent: string + searchPageDarkenOnSearchFocus: boolean searchPageBlurredOnSearchFocus: boolean searchPageLogoColor: 'white' | 'themeColor' @@ -125,6 +128,9 @@ export const settings = useStorageLocal('settings', ref({ wallpaperBlurIntensity: 0, locallyUploadedWallpaper: null, + customizeCSS: false, + customizeCSSContent: '', + searchPageDarkenOnSearchFocus: true, searchPageBlurredOnSearchFocus: false, searchPageLogoColor: 'themeColor', diff --git a/src/utils/main.ts b/src/utils/main.ts index 7479bfe2..c6412c13 100644 --- a/src/utils/main.ts +++ b/src/utils/main.ts @@ -126,7 +126,7 @@ export function scrollToTop(element: HTMLElement, targetScrollTop = 0 as number) }) } -export function injectCSS(css: string, element: HTMLElement = document.documentElement): HTMLStyleElement { +export function injectCSS(css: string, element: HTMLElement | ShadowRoot = document.documentElement): HTMLStyleElement { const el = document.createElement('style') el.setAttribute('rel', 'stylesheet') el.textContent = css