Basic shadow-dom support (#226)

* Basic support for shadow-dom content_scripts
extension-js · Nov 26, 2024 · 6914072 · 6914072
1 parent fe361a9
commit 6914072
Show file tree

Hide file tree

Showing 7 changed files with 2,858 additions and 152 deletions.
diff --git a/.gitignore b/.gitignore
@@ -65,4 +65,5 @@ __TEST__
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-/e2e-report/
+/e2e-report/
+_examples
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/programs/cli/types/index.d.ts b/programs/cli/types/index.d.ts
@@ -20,3 +20,7 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+interface Window {
+  __EXTENSION_SHADOW_ROOT__: ShadowRoot
+}
diff --git a/programs/develop/webpack/plugin-css/common-style-loaders.ts b/programs/develop/webpack/plugin-css/common-style-loaders.ts
@@ -5,14 +5,58 @@ import {isUsingTailwind} from './css-tools/tailwind'
 import {isUsingSass} from './css-tools/sass'
 import {isUsingLess} from './css-tools/less'
 import {maybeUsePostCss} from './css-tools/postcss'
-import {isUsingVue} from '../plugin-js-frameworks/js-tools/vue'
 
 export interface StyleLoaderOptions {
   mode: DevOptions['mode']
   useMiniCssExtractPlugin: boolean
   loader?: string
 }
 
+function whereToInsertStyleTag(element: HTMLElement) {
+  // Function to check if the shadow root exists
+  const insertElement = () => {
+    // @ts-expect-error - global reference.
+    const shadowRoot = window.__EXTENSION_SHADOW_ROOT__
+
+    if (shadowRoot) {
+      shadowRoot.appendChild(element)
+
+      if (process.env.EXTENSION_ENV === 'development') {
+        console.log('Element inserted into shadowRoot')
+      }
+    } else {
+      document.head.appendChild(element)
+      if (process.env.EXTENSION_ENV === 'development') {
+        console.log('Element inserted into document.head')
+      }
+    }
+  }
+
+  // If the shadowRoot is already available, insert immediately
+  // @ts-expect-error - global reference.
+  if (window.__EXTENSION_SHADOW_ROOT__) {
+    insertElement()
+    return
+  }
+
+  // Use MutationObserver to wait for the shadow root to be available
+  const observer = new MutationObserver(() => {
+    // @ts-expect-error - global reference.
+    if (window.__EXTENSION_SHADOW_ROOT__) {
+      insertElement()
+      observer.disconnect() // Stop observing once the shadow root is found
+    } else {
+      // Disconnect the observer if the shadow root is not found after 5 seconds
+      setTimeout(() => {
+        observer.disconnect()
+      }, 5000)
+    }
+  })
+
+  // Observe changes to the `document.body` or `document.head`
+  observer.observe(document.body, {childList: true, subtree: true})
+}
+
 export async function commonStyleLoaders(
   projectPath: string,
   opts: StyleLoaderOptions
@@ -21,9 +65,12 @@ export async function commonStyleLoaders(
   const styleLoaders: RuleSetRule['use'] = [
     opts.useMiniCssExtractPlugin
       ? miniCssLoader
-      : isUsingVue(projectPath)
-        ? require.resolve('vue-style-loader')
-        : require.resolve('style-loader'),
+      : {
+          loader: require.resolve('style-loader'),
+          options: {
+            insert: whereToInsertStyleTag
+          }
+        },
     {
       loader: require.resolve('css-loader'),
       options: {

diff --git a/programs/develop/webpack/plugin-css/css-tools/less.ts b/programs/develop/webpack/plugin-css/css-tools/less.ts
@@ -59,7 +59,7 @@ export async function maybeUseLess(
       test: /\.less$/,
       oneOf: [
         {
-          resourceQuery: /is_content_css_import=true/,
+          resourceQuery: /inline_style/,
           use: await commonStyleLoaders(projectPath, {
             loader: 'less-loader',
             mode,

diff --git a/programs/develop/webpack/plugin-css/css-tools/sass.ts b/programs/develop/webpack/plugin-css/css-tools/sass.ts
@@ -70,7 +70,7 @@ export async function maybeUseSass(
       exclude: /\.module\.(s(a|c)ss)$/,
       oneOf: [
         {
-          resourceQuery: /is_content_css_import=true/,
+          resourceQuery: /inline_style/,
           use: await commonStyleLoaders(projectPath, {
             loader: 'sass-loader',
             mode,
@@ -90,7 +90,7 @@ export async function maybeUseSass(
       test: /\.module\.(s(a|c)ss)$/,
       oneOf: [
         {
-          resourceQuery: /is_content_css_import=true/,
+          resourceQuery: /inline_style/,
           use: await commonStyleLoaders(projectPath, {
             loader: 'sass-loader',
             mode,

diff --git a/programs/develop/webpack/plugin-css/index.ts b/programs/develop/webpack/plugin-css/index.ts
@@ -36,6 +36,13 @@ export class CssPlugin {
         test: /\.css$/,
         exclude: /\.module\.css$/,
         oneOf: [
+          {
+            resourceQuery: /inline_style/,
+            use: await commonStyleLoaders(projectPath, {
+              mode: mode as 'development' | 'production',
+              useMiniCssExtractPlugin: false
+            })
+          },
           {
             use: await commonStyleLoaders(projectPath, {
               mode: mode as 'development' | 'production',
@@ -47,6 +54,13 @@ export class CssPlugin {
       {
         test: /\.module\.css$/,
         oneOf: [
+          {
+            resourceQuery: /inline_style/,
+            use: await commonStyleLoaders(projectPath, {
+              mode: mode as 'development' | 'production',
+              useMiniCssExtractPlugin: false
+            })
+          },
           {
             use: await commonStyleLoaders(projectPath, {
               mode: mode as 'development' | 'production',