refactor: use shadow dom + css file

src/contentScripts/content_script.tsx

@@ -1,12 +1,15 @@
 import logger from '@/common/logger'
 import { onMessage } from 'webext-bridge/content-script'
+import '../styles'
 
 let toastTimeout1: NodeJS.Timeout, toastTimeout2: NodeJS.Timeout
+let shadowDOM: ShadowRoot
+let root: HTMLDivElement
 
 export function contentScriptMain() {
   logger.info('[vite-react-webext] Hello world from content script')
 
-  injectCSS()
+  injectShadowRoot()
 
   onMessage('copy-tab-url', (payload) => {
     logger.debug('copy-text', payload)
@@ -26,22 +29,31 @@ export function contentScriptMain() {
   })
 }
 
+async function injectShadowRoot() {
+  const container = document.createElement('div')
+  root = document.createElement('div')
+  const styleEl = document.createElement('link')
+  shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
+  styleEl.setAttribute('rel', 'stylesheet')
+  styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
+  shadowDOM.appendChild(styleEl)
+  shadowDOM.appendChild(root)
+  document.body.appendChild(container)
+}
+
 async function toast(text: string) {
   await dismissToast()
   const container = document.createElement('div')
-  container.style.position = 'fixed'
-  container.style.top = '10px'
-  container.style.right = '10px'
-  container.style.zIndex = '999999'
-  container.style.perspective = '100px'
+  container.classList.add('container')
 
   const toast = document.createElement('div')
+  toast.classList.add('toast')
   toast.dataset.taburlToast = 'taburl-toast'
 
   toast.innerText = text
 
   container.appendChild(toast)
-  document.body.appendChild(container)
+  root.appendChild(container)
 
   logger.debug('Toast injected')
 
@@ -60,7 +72,7 @@ async function toast(text: string) {
 }
 
 async function dismissToast() {
-  const toast = document.querySelector('[data-taburl-toast]') as HTMLDivElement
+  const toast = root.querySelector('[data-taburl-toast]') as HTMLDivElement
   const container = toast?.parentElement
   clearTimeout(toastTimeout1)
   clearTimeout(toastTimeout2)
@@ -76,28 +88,3 @@ async function dismissToast() {
     }, 150)
   })
 }
-
-function injectCSS() {
-  if (document.getElementById('taburl-toast-style')) return
-  const style = document.createElement('style')
-  style.id = 'taburl-toast-style'
-  style.innerHTML = `
-        [data-taburl-toast] {
-          background: rgb(24, 24, 24);
-          color: rgb(255, 255, 255);
-          font-family: Helvetica, Arial, sans-serif;
-          font-size: 14px;
-          padding: 12px;
-          border-radius: 1em;
-          transition: all 150ms ease-in-out;
-          opacity: 0;
-          transform: rotate3d(0, 3, 1, 10deg) translateY(-10px);
-        }
-
-        [data-taburl-toast].show {
-          opacity: 1;
-          transform: none;
-        }
-      `
-  document.head.appendChild(style)
-}

src/styles/main.css

@@ -1,13 +1,31 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.toast {
+  background: rgb(24, 24, 24);
+  color: rgb(255, 255, 255);
+  font-size: 14px;
+  padding: 12px;
+  border-radius: 1em;
+  transition: all 150ms ease-in-out;
+  opacity: 0;
+  transform: rotate3d(0, 3, 1, 10deg) translateY(-10px);
+}
+
+.toast.show {
+  opacity: 1;
+  transform: none;
+}
+
+.container {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  z-index: 999999;
+  perspective: 100px;
 }