Update all content-* templates

examples/content-css-modules/content/scripts.js

@@ -4,20 +4,40 @@ import logo from '../images/logo.png'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-  <div class="content_script">
-    <img class=${styles.content_logo} src="${logo}" />
-    <h1 class="content_title">
-      Welcome to your CSS Modules 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>
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // 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'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class=${styles.content_logo} src="${logo}" />
+      <h1 class="content_title">
+        Welcome to your CSS Modules 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>
   `
+}

examples/content-css-modules/content/styles.css

@@ -20,14 +20,17 @@
   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;
 }

examples/content-env/content/scripts.ts

@@ -6,22 +6,41 @@ console.log(
   process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT
 )
 
-// Check if the content has already been added
-document.body.innerHTML += `
-  <div class="content_script">
-    <img class="content_logo" src="${logo}" />
-    <p class="content_description">${process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT}</p>
-    <h1 class="content_title">
-      Welcome to your .env Extension
-    </h1>
-    <p class="content_description">
-      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>
-    </p>
-  </div>
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // 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'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="content_logo" src="${logo}" />
+      <p class="content_description">${process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT}</p>
+      <h1 class="content_title">
+        Welcome to your .env Extension
+      </h1>
+      <p class="content_description">
+        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>
+      </p>
+    </div>
   `
+}

examples/content-env/content/styles.css

@@ -24,14 +24,17 @@
   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;
 }

examples/content-esm/content/scripts.mjs

@@ -3,4 +3,24 @@ import './styles.css'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += contentComponent
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // 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'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = contentComponent
+}

examples/content-esm/content/styles.css

@@ -24,14 +24,17 @@
   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;
 }

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

@@ -10,8 +10,29 @@ function initial() {
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  // Use `createRoot` to create a root, then render the <App /> component
-  // Note that `createRoot` takes the container DOM node, not the React element
-  const root = ReactDOM.createRoot(rootDiv)
-  root.render(<ContentApp />)
+  // Injecting content_scripts inside a shadow dom
+  // 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'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  const shadowStyle = document.createElement('style')
+  shadowStyle.textContent = `
+      :host {
+        all: initial; /* Reset all styles */
+      }
+    `
+  shadowRoot.appendChild(shadowStyle)
+
+  const root = ReactDOM.createRoot(shadowRoot)
+  root.render(
+    <div className="content_script">
+      <ContentApp />
+    </div>
+  )
 }

examples/content-extension-config/content/styles.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;

examples/content-extension-config/manifest.json

@@ -10,7 +10,9 @@
   },
   "content_scripts": [
     {
-      "matches": ["https://extension.js.org/*"],
+      "matches": [
+        "<all_urls>"
+      ],
       "js": ["./content/scripts.tsx"]
     }
   ],

examples/content-less-modules/content/scripts.js

@@ -4,20 +4,40 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="${styles.logo}" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your LESS Modules 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>
-`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // 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'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+  <div class="content_script">
+    <img class="${styles.logo}" src="${logo}" />
+    <h1 class="content_title">
+      Welcome to your LESS Modules 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>
+  `
+}

examples/content-less-modules/content/styles.less

@@ -24,14 +24,17 @@
   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;
 }

examples/content-less/content/scripts.js

@@ -3,20 +3,40 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="content_logo" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your LESS 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>
-`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // 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'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="content_logo" src="${logo}" />
+      <h1 class="content_title">
+        Welcome to your LESS 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>
+  `
+}