fix: change css insert position, fix css missing bug

festoney8 · Jan 4, 2024 · a844a5f · a844a5f
1 parent 98f6189
commit a844a5f
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,9 @@
 
 ## 2.2.3
 
--   优化：panel显示方式，同一页面内再次打开panel记录上次位置
+-   修复：版权视频播放页规则丢失bug，移除补丁
+-   优化：CSS注入位置改为html tag内，提升性能和稳定性
+-   优化：panel显示方式，同一页面内再次打开panel保留上次出现位置和滚动位置
 
 ## 2.2.2
 

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<image src="./images/logo.png" height="150"></image>
+<image src="./images/logo.png" height="120"></image>
 <h1>bilibili 页面净化大师</h1>
 <div><b>高度定制化的 bilibili 网页净化插件，提供 300+ 个功能开关，深度净化页面元素</b></div>
 <br>
@@ -64,7 +64,8 @@
 
 -   给 UP 主充电时，若出现 **充电窗口载入失败 (报错NaN)**，请关闭 **通用项「URL参数净化」** 功能，刷新页面再充电
 -   **「版权视频播放页」大部分功能与「播放页」一致且互相同步，小部分独有功能已用 "★" 重点标出**
--   **已知Bug：** 在打开「版权作品播放页」时，小概率出现顶栏未净化的情况。已通过打补丁的方式暂时补救，副作用为打开页面数秒后顶栏净化规则才生效
+-   「动态页」评论区相关功能与「播放页」一致且互相同步
+-   「直播页」顶栏与普通顶栏不同，通用功能对其不生效（仅搜索栏少数功能与通用同步）
 
 ## 浏览器适配
 

diff --git a/src/core/group.ts b/src/core/group.ts
@@ -84,7 +84,7 @@ export class Group implements IGroup {
                     e.reloadItem()
                 }
             })
-            debug(`reloadGroup ${this.groupID} OK`)
+            // debug(`reloadGroup ${this.groupID} OK`)
         } catch (err) {
             error(`reloadGroup ${this.groupID} err`)
             error(err)

diff --git a/src/core/item.ts b/src/core/item.ts
@@ -80,19 +80,18 @@ export class NormalItem implements IItem {
             return
         }
         try {
-            if (document.querySelector(`head style[bili-cleaner-css=${this.itemID}]`)) {
+            if (document.querySelector(`html>style[bili-cleaner-css=${this.itemID}]`)) {
                 debug(`insertItemCSS ${this.itemID} CSS exist, ignore`)
                 return
             }
             const style = document.createElement('style')
-            // 若使用innerText, 多行CSS插入head后会产生<br>标签
-            // 简单压缩
+            // 简单压缩, 若使用innerText, 多行CSS插入head后会产生<br>标签
             style.innerHTML = this.itemCSS.replace(/\n\s*/g, '').trim()
             // 指定CSS片段ID，用于实时启用停用
             style.setAttribute('bili-cleaner-css', this.itemID)
-
-            // chrome系浏览器上可能出现style插入成功, 但DOMContentLoaded后规则丢失, 通过后续监听load事件打补丁解决
-            document.head.appendChild(style)
+            // 放弃在head内插入style
+            // 改为在html内插入style标签(与head/body同级), 避免版权视频播放页head内规则丢失bug
+            document.documentElement.appendChild(style)
             debug(`insertItemCSS ${this.itemID} OK`)
         } catch (err) {
             error(`insertItemCSS ${this.itemID} failed`)
@@ -102,7 +101,7 @@ export class NormalItem implements IItem {
     /** 停用CSS片段, 从document.head移除style */
     removeItemCSS() {
         if (this.itemCSS) {
-            const style = document.querySelector(`head style[bili-cleaner-css=${this.itemID}]`) as HTMLStyleElement
+            const style = document.querySelector(`html>style[bili-cleaner-css=${this.itemID}]`) as HTMLStyleElement
             if (style) {
                 style.parentNode?.removeChild(style)
                 debug(`removeItemCSS ${this.itemID} OK`)

diff --git a/src/core/panel.ts b/src/core/panel.ts
@@ -185,7 +185,6 @@ export class Panel implements IPanel {
                 return
             }
             const html = document.createElement('div')
-            html.setAttribute('id', 'bili-cleaner')
             html.innerHTML = this.panelHTML
             document.body.appendChild(html)
             debug('insertPanelHTML OK')

diff --git a/src/init.ts b/src/init.ts
@@ -2,31 +2,22 @@ import { log } from './utils/logger'
 
 /**
  * 初始化项目
- * 等待document.head出现+渲染, 用于插入节点
- * pnpm run dev调试时，可能出现由于vite-plugin-monkey抢先监听document.head
- * 导致init无法完成, 脚本载入失败或载入缓慢的情况, 刷新无效可先build再调试
+ * 等待<html>出现+渲染, 用于插入节点
+ * pnpm run dev调试时，可能出现由于vite-plugin-monkey抢先监听document
+ * 导致脚本载入失败或载入缓慢的情况, 若刷新无效可先build再调试
  */
 export const init = async () => {
-    // firefox可捕捉到空head, 让firefox等待head渲染出第一波childNode
-    // chrome系head永远非空, head渲染完成后仍会出现规则丢失情况, 在此观测纯心理安慰, 最后由监听load事件的补丁解决
-    await waitForHeadBuild()
-    log('wait for head complete')
+    await waitForHTMLBuild()
+    log('wait for html complete')
 }
 
-/**
- * 观测head内子元素, 出现子元素标志着head已构建完成
- * 若只观测head出现，head可能为未渲染状态，向head中插入节点仍可能报错，故观测head渲染完成
- * 耗时<50ms
- * @returns Promise<void>
- */
-const waitForHeadBuild = () => {
+/** 观测html内出现第一个child, 标志着html tag已渲染 */
+const waitForHTMLBuild = () => {
     return new Promise<void>((resolve) => {
-        const observer = new MutationObserver((mutationsList) => {
-            for (const mutation of mutationsList) {
-                if (mutation.target === document.head) {
-                    observer.disconnect()
-                    resolve()
-                }
+        const observer = new MutationObserver(() => {
+            if (document.head) {
+                observer.disconnect()
+                resolve()
             }
         })
         observer.observe(document, { childList: true, subtree: true })

diff --git a/src/main.ts b/src/main.ts
@@ -47,21 +47,6 @@ const main = async () => {
         }
     }, 500)
 
-    // 版权视频页 规则丢失补丁
-    // 在打开新标签页版权视频页时, 可能丢失规则, firefox和chrome均复现
-    // 测试可知, head内插入style均成功, 在DOMContentLoaded时, style数量正确
-    // 在readyState=complete后, style数量有概率会减少, 导致规则丢失, 原因不明
-    // 故在版权视频页监听load, 二次检查解决规则载入不全问题
-    if (location.pathname.startsWith('/bangumi/play')) {
-        window.addEventListener('load', () => {
-            debug('bangumi page patch, recheck start')
-            for (let i = GROUPS.length - 1; i >= 0; i--) {
-                GROUPS[i].enableGroup()
-            }
-            debug('bangumi page patch, recheck complete')
-        })
-    }
-
     // 全局启动/关闭快捷键 chrome: Alt+B，firefox: Ctrl+Alt+B
     let isGroupEnable = true
     document.addEventListener('keydown', (event) => {