Update content scripts for all other working templates

Author: cezaraugusto

examples/content-esm/content/scripts.mjs

@@ -26,13 +26,15 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 
@@ -46,7 +48,6 @@ function initial() {
 
   return () => {
     rootDiv.remove()
-    
   }
 }
 

examples/content-extension-config/content/scripts.tsx

@@ -28,22 +28,24 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 
-  const mountingPoint = ReactDOM.createRoot(shadowRoot)
-  mountingPoint.render(
-    <div className="content_script">
-      <ContentApp />
-    </div>
-  )
+  // Create container for React app
+  const container = document.createElement('div')
+  container.className = 'content_script'
+  shadowRoot.appendChild(container)
+
+  const mountingPoint = ReactDOM.createRoot(container)
+  mountingPoint.render(<ContentApp />)
   return () => {
     mountingPoint.unmount()
     rootDiv.remove()

examples/content-less/content/scripts.js

@@ -27,15 +27,18 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
 
   // Fetch and apply LESS styles
-  fetchLessStyles().then((response) => style.replace(response))
+  fetchLessStyles().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.less', () => {
-      fetchLessStyles().then((response) => style.replace(response))
+      fetchLessStyles().then(
+        (response) => (styleElement.textContent = response)
+      )
     })
   }
 

examples/content-main-world/content/scripts.js

@@ -25,13 +25,14 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 

examples/content-preact/content/scripts.tsx

@@ -28,22 +28,23 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 
-  render(
-    <div className="content_script">
-      <ContentApp />
-    </div>,
-    shadowRoot
-  )
+  // Create container for Preact app
+  const container = document.createElement('div')
+  container.className = 'content_script'
+  shadowRoot.appendChild(container)
+
+  render(<ContentApp />, container)
 
   return () => {
     rootDiv.remove()

examples/content-react-svgr/content/scripts.tsx

@@ -28,22 +28,24 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 
-  const mountingPoint = ReactDOM.createRoot(shadowRoot)
-  mountingPoint.render(
-    <div className="content_script">
-      <ContentApp />
-    </div>
-  )
+  // Create container for React app
+  const container = document.createElement('div')
+  container.className = 'content_script'
+  shadowRoot.appendChild(container)
+
+  const mountingPoint = ReactDOM.createRoot(container)
+  mountingPoint.render(<ContentApp />)
   return () => {
     mountingPoint.unmount()
     rootDiv.remove()

examples/content-react/content/scripts.tsx

@@ -28,17 +28,22 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 
-  const mountingPoint = ReactDOM.createRoot(shadowRoot)
+  // Create a container for React to render into
+  const container = document.createElement('div')
+  shadowRoot.appendChild(container)
+
+  const mountingPoint = ReactDOM.createRoot(container)
   mountingPoint.render(
     <div className="content_script">
       <ContentApp />

examples/content-sass/content/scripts.js

@@ -27,11 +27,12 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
 
   // Fetch and apply CSS styles
-  fetchCssStyles().then((response) => style.replace(response))
+  fetchCssStyles().then((response) => (styleElement.textContent = response))
 
   // Create container div
   const contentDiv = document.createElement('div')

examples/content-svelte/content/scripts.ts

@@ -27,13 +27,14 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 

examples/content-tailwind/content/scripts.js

@@ -26,13 +26,14 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 

examples/content-typescript/content/scripts.ts

@@ -1,15 +1,6 @@
 // @ts-expect-error - Import handled by webpack
 import logo from '../images/logo.svg'
 
-declare global {
-  interface ImportMeta {
-    webpackHot?: {
-      accept: (path?: string, callback?: (newModule: any) => void) => void
-      dispose: (callback: () => void) => void
-    }
-  }
-}
-
 let unmount: () => void
 
 if (import.meta.webpackHot) {

examples/content-vue/content/scripts.ts

@@ -27,13 +27,14 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }
 

examples/content/content/scripts.js

@@ -26,13 +26,14 @@ function initial() {
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
-  const style = new CSSStyleSheet()
-  shadowRoot.adoptedStyleSheets = [style]
-  fetchCSS().then((response) => style.replace(response))
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
 
   if (import.meta.webpackHot) {
     import.meta.webpackHot?.accept('./styles.css', () => {
-      fetchCSS().then((response) => style.replace(response))
+      fetchCSS().then((response) => (styleElement.textContent = response))
     })
   }