perf: improve styles load performance

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

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,
       },