From c79a6d331abc30a6640699f0299d67e3ee34e7c6 Mon Sep 17 00:00:00 2001
From: Bowen <root@bowen.cool>
Date: Tue, 2 Jan 2024 13:56:21 +0800
Subject: [PATCH] fix: bilibili reload

---
 .../site-adapters/bilibili/index.mjs          |  4 +++-
 src/utils/index.mjs                           |  1 +
 .../wait-for-element-to-exist-and-select.mjs  | 19 +++++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/wait-for-element-to-exist-and-select.mjs

diff --git a/src/content-script/site-adapters/bilibili/index.mjs b/src/content-script/site-adapters/bilibili/index.mjs
index df05a976..932db1fb 100644
--- a/src/content-script/site-adapters/bilibili/index.mjs
+++ b/src/content-script/site-adapters/bilibili/index.mjs
@@ -1,9 +1,11 @@
-import { cropText } from '../../../utils'
+import { cropText, waitForElementToExistAndSelect } from '../../../utils'
 import { config } from '../index.mjs'
 
 export default {
   init: async (hostname, userConfig, getInput, mountComponent) => {
     try {
+      // B站页面是SSR的，如果插入过早，页面 js 检测到实际 Dom 和期望 Dom 不一致，会导致重新渲染
+      await waitForElementToExistAndSelect('img.bili-avatar-img')
       let oldUrl = location.href
       const checkUrlChange = async () => {
         if (location.href !== oldUrl) {
diff --git a/src/utils/index.mjs b/src/utils/index.mjs
index ead5bba7..2b78d953 100644
--- a/src/utils/index.mjs
+++ b/src/utils/index.mjs
@@ -18,3 +18,4 @@ export * from './parse-int-with-clamp'
 export * from './set-element-position-in-viewport'
 export * from './eventsource-parser.mjs'
 export * from './update-ref-height'
+export * from './wait-for-element-to-exist-and-select.mjs'
diff --git a/src/utils/wait-for-element-to-exist-and-select.mjs b/src/utils/wait-for-element-to-exist-and-select.mjs
new file mode 100644
index 00000000..2ba6bd15
--- /dev/null
+++ b/src/utils/wait-for-element-to-exist-and-select.mjs
@@ -0,0 +1,19 @@
+export function waitForElementToExistAndSelect(selector) {
+  return new Promise((resolve) => {
+    if (document.querySelector(selector)) {
+      return resolve(document.querySelector(selector))
+    }
+
+    const observer = new MutationObserver(() => {
+      if (document.querySelector(selector)) {
+        resolve(document.querySelector(selector))
+        observer.disconnect()
+      }
+    })
+
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+    })
+  })
+}