From b4d5b8ea06255add746f37647638d6c2e112c5e3 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 9 Jan 2024 15:55:35 +0800
Subject: [PATCH] perf: improve styles load performance

---
 src/contentScripts/index.ts | 13 +------------
 src/manifest.ts             |  1 +
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 1f89534c..a015d9a5 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -112,24 +112,13 @@ document.addEventListener('DOMContentLoaded', () => {
         originalPageContent.innerHTML = ''
     }
 
+    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 = () => {
-    // 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
index 2abf8fe6..1c5bac03 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -45,6 +45,7 @@ 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,
       },