feat: mount pop-up window element using Shadow DOM

Signed-off-by: DingChil <xu.dingchao@gmail.com>

assets/styles/csui-reset.scss

@@ -36,7 +36,7 @@
     box-shadow: none !important;
   }
 
-  @import './solarized_light.scss';
+  // @import './solarized_light.scss';
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,6 +51,6 @@
       background: #002b36;
       color: #839496;}
 
-      @import './solarized_dark.scss';
+      // @import './solarized_dark.scss';
   }
 }

package.json

@@ -73,7 +73,10 @@
         "matches": [
           "<all_urls>"
         ],
-        "resources": []
+        "resources": [
+          "manifest.json",
+          "Index.*.css"
+        ]
       }
     ]
   }

src/contents/Index.vue

@@ -19,7 +19,8 @@ export const config = {
 }
 
 async function render({createRootContainer}) {
-  const rootContainer = await createRootContainer()
+  const rootElement = await createRootContainer()
+  const shadowElement = rootElement.attachShadow({mode: 'open'})
 
   const pinia = createPinia()
   const app = createApp(App)
@@ -30,8 +31,10 @@ async function render({createRootContainer}) {
   // init pinia data
   const store = useStore()
   await store.initConfig()
+  app.mount(shadowElement)
 
-  app.mount(rootContainer)
+  // inject styles
+  insertStylesheet(shadowElement)
 }
 
 async function getRootContainer() {
@@ -44,4 +47,23 @@ async function getRootContainer() {
   $html.append($rootContainer)
   return $rootContainer
 }
+
+async function insertStylesheet(parentElement) {
+  const config = await (await fetch(chrome.runtime.getURL('manifest.json'))).json()
+  if (!config.content_scripts && !config.content_scripts.length) return
+  const tasks = []
+  config.content_scripts.forEach(item => {
+    if (!item.matches[0] || item.matches[0] !== '<all_urls>') return
+    item.css.forEach(name => {
+      if (!/^Index\.\w+\.css$/.test(name)) return
+      tasks.push(fetch(chrome.runtime.getURL(name)).then(v => v.text()))
+    })
+  })
+  const files = await Promise.all(tasks)
+  files.forEach(themes => {
+    const childElement = document.createElement('style')
+    childElement.textContent = themes
+    parentElement.insertBefore(childElement, parentElement.firstChild)
+  })
+}
 </script>