fix: some styles affect in unsupported pages

starknt · Jan 9, 2024 · 7246099 · 7246099
1 parent 770c806
commit 7246099
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
@@ -112,13 +112,25 @@ document.addEventListener('DOMContentLoaded', () => {
         originalPageContent.innerHTML = ''
     }
 
-    document.documentElement.removeChild(beforeLoadedStyleEl)
+    // document.documentElement.removeChild(beforeLoadedStyleEl)
     // Then inject the app
     injectApp()
   }
 })
 
 function injectApp() {
+  // Inject style first
+  const newStyleEl = document.createElement('link')
+  newStyleEl.setAttribute('rel', 'stylesheet')
+  newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
+  document.documentElement.appendChild(newStyleEl)
+  newStyleEl.onload = async () => {
+    // To prevent abrupt style transitions caused by sudden style changes
+    setTimeout(() => {
+      document.documentElement.removeChild(beforeLoadedStyleEl)
+    }, 500)
+  }
+
   // Inject app when idle
   runWhenIdle(async () => {
     // mount component to context window

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -45,7 +45,6 @@ export async function getManifest() {
       {
         matches: ['*://www.bilibili.com/*', '*://search.bilibili.com/*', '*://t.bilibili.com/*', '*://space.bilibili.com/*', '*://message.bilibili.com/*'],
         js: ['./dist/contentScripts/index.global.js'],
-        css: ['./dist/contentScripts/style.css'],
         run_at: 'document_start',
         match_about_blank: true,
       },