PoC - content-sass

Author: cezaraugusto

examples/content-react/content/scripts.tsx

@@ -53,10 +53,7 @@ function initial() {
 }
 
 async function fetchCSS() {
-  // console.log('import.meta.url', import.meta.url)
   const response = await fetch(new URL('./styles.css', import.meta.url))
-  // const response = await fetch(new URL('./content_scripts/content-0.css', chrome.runtime.getURL('')))
   const text = await response.text()
-  // console.log('response', text)
   return response.ok ? text : Promise.reject(text)
 }

examples/content-sass/content/scripts.js

@@ -1,13 +1,16 @@
-import './styles.scss?inline_style'
 import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
+let unmount
+import.meta.webpackHot.accept()
+import.meta.webpackHot.dispose(() => unmount())
+
 if (document.readyState === 'complete') {
-  initial()
+  unmount = initial() || (() => {})
 } else {
   document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') initial()
+    if (document.readyState === 'complete') unmount = initial() || (() => {})
   })
 }
 
@@ -21,24 +24,52 @@ function initial() {
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
 
-  // Inform Extension.js that the shadow root is available.
-  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
-
-  shadowRoot.innerHTML = `
-    <div class="content_script">
-      <img class="content_logo" src="${logo}" />
-      <h1 class="content_title">
-        Welcome to your Sass Extension
-      </h1>
-      <p class="content_description">
-        Learn more about creating cross-browser extensions at <a
-          className="underline hover:no-underline"
-          href="https://extension.js.org"
-          target="_blank"
-        >
-        https://extension.js.org
-        </a>
-      </p>
-    </div>
-  `
+  const style = document.createElement('style')
+  shadowRoot.appendChild(style)
+
+  // Create content container div
+  const contentDiv = document.createElement('div')
+  contentDiv.className = 'content_script'
+  shadowRoot.appendChild(contentDiv)
+
+  // Create logo image
+  const logoImg = document.createElement('img')
+  logoImg.className = 'content_logo'
+  logoImg.src = logo
+  contentDiv.appendChild(logoImg)
+
+  // Create title
+  const title = document.createElement('h1')
+  title.className = 'content_title'
+  title.textContent = 'Welcome to your Sass Extension'
+  contentDiv.appendChild(title)
+
+  // Create description
+  const description = document.createElement('p')
+  description.className = 'content_description'
+  description.innerHTML =
+    'Learn more about creating cross-browser extensions at <a class="underline hover:no-underline" href="https://extension.js.org" target="_blank">https://extension.js.org</a>'
+  contentDiv.appendChild(description)
+
+  // Handle CSS injection
+  fetchCSS().then((response) => {
+    style.textContent = response
+  })
+
+  import.meta.webpackHot?.accept('./styles.scss', () => {
+    fetchCSS().then((response) => {
+      style.textContent = response
+    })
+  })
+
+  return () => {
+    rootDiv.remove()
+  }
 }
+
+async function fetchCSS() {
+  const response = await fetch(new URL('./styles.scss', import.meta.url))
+  const text = await response.text()
+  return response.ok ? text : Promise.reject(text)
+}
+

examples/content-sass/content/styles.scss

@@ -19,22 +19,24 @@
 }
 
 .content_title {
-  font-size: 1.85em;
+  font: {
+    size: 1.85em;
+    family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+    weight: 700;
+  }
   line-height: 1.1;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  font-weight: 700;
   margin: 0;
 }
 
 .content_description {
   font-size: small;
   margin: 0;
-}
 
-.content_description a {
-  text-decoration: none;
-  border-bottom: 2px solid #c9c9c9;
-  color: #e5e7eb;
-  margin: 0;
+  a {
+    text-decoration: none;
+    border-bottom: 2px solid #c9c9c9;
+    color: #e5e7eb;
+    margin: 0;
+  }
 }