extension-develop 2.1.3 → 3.0.0-next.6

package/dist/add-content-script-wrapper.js

@@ -1,1789 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    default: ()=>add_content_script_wrapper
-});
-const external_path_namespaceObject = require("path");
-const external_fs_namespaceObject = require("fs");
-const external_loader_utils_namespaceObject = require("loader-utils");
-const external_schema_utils_namespaceObject = require("schema-utils");
-function extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function generateReactWrapperCode(source, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = extractCSSImports(source);
-    const resourceDir = external_path_namespaceObject.dirname(resourcePath);
-    if ('development' === process.env.EXTENSION_ENV) console.log("[Extension.js] Detected React framework with CSS imports:", cssImports);
-    const cssContentMap = {};
-    for (const cssImport of cssImports)try {
-        const cssPath = external_path_namespaceObject.resolve(resourceDir, cssImport);
-        if (external_fs_namespaceObject.existsSync(cssPath)) {
-            const cssContent = external_fs_namespaceObject.readFileSync(cssPath, 'utf-8');
-            const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${').replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
-            cssContentMap[cssImport] = escapedCSS;
-            if ('development' === process.env.EXTENSION_ENV) console.log(`[Extension.js] Read CSS content for ${cssImport}, length: ${cssContent.length}`);
-        } else if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] CSS file not found: ${cssPath}`);
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] Failed to read CSS file ${cssImport}:`, error);
-    }
-    const wrapperCode = `
-// React Content Script Wrapper - Auto-generated by Extension.js
-// This wrapper provides Shadow DOM isolation and CSS injection for React content scripts
-
-// Original React content script source (directive processed)
-${source.replace(/'use shadow-dom'/g, "// 'use shadow-dom'").replace(/"use shadow-dom"/g, '// "use shadow-dom"')}
-
-// Content script options interface
-export interface ContentScriptOptions {
-  rootElement?: string
-  rootClassName?: string
-  stylesheets?: string[]
-}
-
-// Content script instance interface
-export interface ContentScriptInstance {
-  mount: (container: HTMLElement) => void
-  unmount: () => void
-}
-
-// React Content script wrapper class
-class ReactContentScriptWrapper {
-  private rootElement: HTMLElement | null = null
-  private shadowRoot: ShadowRoot | null = null
-  private styleElement: HTMLStyleElement | null = null
-  private renderFunction: (container: HTMLElement) => (() => void) | void
-  private unmountFunction: (() => void) | null = null
-  private options: ContentScriptOptions
-
-  constructor(renderFunction: (container: HTMLElement) => (() => void) | void, options: ContentScriptOptions = {}) {
-    this.renderFunction = renderFunction
-    this.options = {
-      rootElement: 'extension-root',
-      rootClassName: undefined, // React handles its own styling
-      stylesheets: ${JSON.stringify(cssImports.length > 0 ? cssImports : [
-        './styles.css'
-    ])},
-      ...options
-    }
-  }
-
-  async mount(container?: HTMLElement): Promise<void> {
-    console.log('[Extension.js] React wrapper mount called')
-    if (this.rootElement) {
-      this.unmount()
-    }
-
-    // Create root element - React handles its own container styling
-    this.rootElement = container || document.createElement('div')
-    this.rootElement.id = this.options.rootElement!
-    if (this.options.rootClassName) {
-      this.rootElement.className = this.options.rootClassName
-    }
-    // React component handles its own styling
-
-    // Create shadow root for style isolation
-    this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
-
-    // Create a host element inside the shadow root for rendering
-    const host = document.createElement('div')
-    this.shadowRoot.appendChild(host)
-
-    // Inject styles FIRST
-    console.log('[Extension.js] About to inject styles')
-    await this.injectStyles()
-
-    // Render React content
-    console.log('[Extension.js] About to render React content')
-    const result = this.renderFunction(host)
-    if (typeof result === 'function') {
-      this.unmountFunction = result
-    }
-
-    // Append to document if no container provided
-    if (!container) {
-      document.body.appendChild(this.rootElement)
-    }
-    
-    console.log('[Extension.js] React wrapper mount complete')
-  }
-
-  unmount() {
-    if (this.unmountFunction) {
-      this.unmountFunction()
-      this.unmountFunction = null
-    }
-
-    if (this.rootElement && this.rootElement.parentNode) {
-      this.rootElement.parentNode.removeChild(this.rootElement)
-    }
-
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-  }
-
-  // Inject styles with hardcoded CSS content for React templates
-  private async injectStyles(): Promise<void> {
-    console.log('[Extension.js] React injectStyles called')
-    const targetRoot = this.shadowRoot || this.rootElement!
-
-    // Create style element
-    this.styleElement = document.createElement('style')
-    targetRoot.appendChild(this.styleElement)
-
-    // Fetch CSS content
-    try {
-      console.log('[Extension.js] About to fetch CSS')
-      const cssContent = await this.fetchCSS()
-      console.log('[Extension.js] CSS fetched, length:', cssContent.length)
-      this.styleElement.textContent = cssContent
-      console.log('[Extension.js] React CSS injected successfully')
-    } catch (error) {
-      console.error('[Extension.js] Failed to inject React CSS:', error)
-    }
-
-    // Setup HMR for CSS files
-    this.setupCSSHMR()
-  }
-
-  // Fetch CSS with hardcoded content for React templates
-  private async fetchCSS(): Promise<string> {
-    let allCSS = ''
-    
-    console.log('[Extension.js] Processing React stylesheets:', this.options.stylesheets)
-    
-    // CSS content map is injected at build time
-    const cssContentMap: Record<string, string> = ${JSON.stringify(cssContentMap)}
-    
-    for (const stylesheet of this.options.stylesheets) {
-      try {
-        console.log('[Extension.js] Processing React stylesheet:', stylesheet)
-        // Check if we have hardcoded content for this stylesheet
-        if (cssContentMap[stylesheet]) {
-          const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\n'
-          console.log('[Extension.js] Successfully injected React', stylesheet, 'content')
-          continue
-        }
-        
-        // For stylesheets without hardcoded content, try to fetch them
-        const cssUrl = new URL(stylesheet, import.meta.url)
-        const response = await fetch(cssUrl)
-        const text = await response.text()
-        if (response.ok) {
-          allCSS += text + '\n'
-          console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
-        } else {
-          console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
-        }
-      } catch (error) {
-        console.warn('[Extension.js] Failed to fetch React CSS:', stylesheet, error)
-      }
-    }
-    
-    const result = allCSS || '/* No CSS loaded */'
-    console.log('[Extension.js] Final CSS result length:', result.length)
-    return result
-  }
-
-  // Setup CSS HMR for React templates
-  private setupCSSHMR() {
-    if (!import.meta.webpackHot) return
-
-    // Setup HMR for each CSS file
-    for (const stylesheet of this.options.stylesheets) {
-      import.meta.webpackHot?.accept(stylesheet, async () => {
-        try {
-          const cssContent = await this.fetchCSS()
-          if (this.styleElement) {
-            this.styleElement.textContent = cssContent
-            console.log('[Extension.js] React CSS updated via HMR:', stylesheet)
-          }
-        } catch (error) {
-          console.error('[Extension.js] Failed to update React CSS via HMR:', stylesheet, error)
-        }
-      })
-    }
-  }
-}
-
-// Initialize React content script with wrapper
-function initializeReactContentScript(
-  options: ContentScriptOptions,
-  renderFunction: (container: HTMLElement) => (() => void) | void
-): ContentScriptInstance {
-  const wrapper = new ReactContentScriptWrapper(renderFunction, options)
-  
-  return {
-    mount: (container?: HTMLElement) => wrapper.mount(container),
-    unmount: () => wrapper.unmount()
-  }
-}
-
-// Auto-initialize the React content script with the wrapper
-export function autoInitializeReactContentScript(
-  options: ContentScriptOptions = {}
-): ContentScriptInstance {
-  // Get the render function from the imported contentScript
-  const renderFunction = contentScript(options)
-
-  // Initialize with the wrapper using the detected CSS imports
-  return initializeReactContentScript(options, renderFunction)
-}
-
-// Simple initialization for React
-let unmount: (() => void) | undefined
-
-async function initialize() {
-  console.log('[Extension.js] React wrapper initialize called')
-  if (unmount) {
-    console.log('[Extension.js] Unmounting previous React instance')
-    unmount()
-  }
-  
-  // Get the render function from the contentScript function
-  const renderFunction = contentScript({})
-  const wrapper = new ReactContentScriptWrapper(renderFunction, {})
-  await wrapper.mount()
-  unmount = () => wrapper.unmount()
-  console.log('[Extension.js] React wrapper initialization complete')
-}
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot?.accept()
-  import.meta.webpackHot?.dispose(() => unmount?.())
-
-  // Accept changes to this file
-  import.meta.webpackHot?.accept(() => {
-    initialize()
-  })
-}
-
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') {
-      initialize()
-    }
-  })
-}
-
-export default ReactContentScriptWrapper
-`;
-    return wrapperCode;
-}
-function vue_content_script_wrapper_extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function generateVueWrapperCode(source, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = vue_content_script_wrapper_extractCSSImports(source);
-    const resourceDir = external_path_namespaceObject.dirname(resourcePath);
-    if ('development' === process.env.EXTENSION_ENV) console.log("[Extension.js] Detected Vue framework with CSS imports:", cssImports);
-    const cssContentMap = {};
-    for (const cssImport of cssImports)try {
-        const cssPath = external_path_namespaceObject.resolve(resourceDir, cssImport);
-        if (external_fs_namespaceObject.existsSync(cssPath)) {
-            const cssContent = external_fs_namespaceObject.readFileSync(cssPath, 'utf-8');
-            const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${').replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
-            cssContentMap[cssImport] = escapedCSS;
-            if ('development' === process.env.EXTENSION_ENV) console.log(`[Extension.js] Read CSS content for ${cssImport}, length: ${cssContent.length}`);
-        } else if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] CSS file not found: ${cssPath}`);
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] Failed to read CSS file ${cssImport}:`, error);
-    }
-    const wrapperCode = `
-// Vue Content Script Wrapper - Auto-generated by Extension.js
-// This wrapper provides Shadow DOM isolation and CSS injection for Vue content scripts
-
-// Original Vue content script source (directive processed)
-${source.replace(/'use shadow-dom'/g, "// 'use shadow-dom'").replace(/"use shadow-dom"/g, '// "use shadow-dom"')}
-
-// Content script options interface
-export interface ContentScriptOptions {
-  rootElement?: string
-  rootClassName?: string
-  stylesheets?: string[]
-}
-
-// Content script instance interface
-export interface ContentScriptInstance {
-  mount: (container: HTMLElement) => void
-  unmount: () => void
-}
-
-// Vue Content script wrapper class
-class VueContentScriptWrapper {
-  private rootElement: HTMLElement | null = null
-  private shadowRoot: ShadowRoot | null = null
-  private styleElement: HTMLStyleElement | null = null
-  private renderFunction: (container: HTMLElement) => (() => void) | void
-  private unmountFunction: (() => void) | null = null
-  private options: ContentScriptOptions
-
-  constructor(renderFunction: (container: HTMLElement) => (() => void) | void, options: ContentScriptOptions = {}) {
-    this.renderFunction = renderFunction
-    this.options = {
-      rootElement: 'extension-root',
-      rootClassName: undefined, // Vue handles its own styling
-      stylesheets: ${JSON.stringify(cssImports.length > 0 ? cssImports : [
-        './styles.css'
-    ])},
-      ...options
-    }
-  }
-
-  async mount(container?: HTMLElement): Promise<void> {
-    console.log('[Extension.js] Vue wrapper mount called')
-    if (this.rootElement) {
-      this.unmount()
-    }
-
-    // Create root element - Vue handles its own container styling
-    this.rootElement = container || document.createElement('div')
-    this.rootElement.id = this.options.rootElement!
-    if (this.options.rootClassName) {
-      this.rootElement.className = this.options.rootClassName
-    }
-    // Vue component handles its own styling
-
-    // Create shadow root for style isolation
-    this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
-
-    // Create a host element inside the shadow root for rendering
-    const host = document.createElement('div')
-    this.shadowRoot.appendChild(host)
-
-    // Inject styles FIRST
-    console.log('[Extension.js] About to inject styles')
-    await this.injectStyles()
-
-    // Render Vue content
-    console.log('[Extension.js] About to render Vue content')
-    const result = this.renderFunction(host)
-    if (typeof result === 'function') {
-      this.unmountFunction = result
-    }
-
-    // Append to document if no container provided
-    if (!container) {
-      document.body.appendChild(this.rootElement)
-    }
-    
-    console.log('[Extension.js] Vue wrapper mount complete')
-  }
-
-  unmount() {
-    if (this.unmountFunction) {
-      this.unmountFunction()
-      this.unmountFunction = null
-    }
-
-    if (this.rootElement && this.rootElement.parentNode) {
-      this.rootElement.parentNode.removeChild(this.rootElement)
-    }
-
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-  }
-
-  // Inject styles with hardcoded CSS content for Vue templates
-  private async injectStyles(): Promise<void> {
-    console.log('[Extension.js] Vue injectStyles called')
-    const targetRoot = this.shadowRoot || this.rootElement!
-
-    // Create style element
-    this.styleElement = document.createElement('style')
-    targetRoot.appendChild(this.styleElement)
-
-    // Fetch CSS content
-    try {
-      console.log('[Extension.js] About to fetch CSS')
-      const cssContent = await this.fetchCSS()
-      console.log('[Extension.js] CSS fetched, length:', cssContent.length)
-      this.styleElement.textContent = cssContent
-      console.log('[Extension.js] Vue CSS injected successfully')
-    } catch (error) {
-      console.error('[Extension.js] Failed to inject Vue CSS:', error)
-    }
-
-    // Setup HMR for CSS files
-    this.setupCSSHMR()
-  }
-
-  // Fetch CSS with hardcoded content for Vue templates
-  private async fetchCSS(): Promise<string> {
-    let allCSS = ''
-    
-    console.log('[Extension.js] Processing Vue stylesheets:', this.options.stylesheets)
-    
-    // CSS content map is injected at build time
-    const cssContentMap: Record<string, string> = ${JSON.stringify(cssContentMap)}
-    
-    for (const stylesheet of this.options.stylesheets) {
-      try {
-        console.log('[Extension.js] Processing Vue stylesheet:', stylesheet)
-        // Check if we have hardcoded content for this stylesheet
-        if (cssContentMap[stylesheet]) {
-          const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\n'
-          console.log('[Extension.js] Successfully injected Vue', stylesheet, 'content')
-          continue
-        }
-        
-        // For stylesheets without hardcoded content, try to fetch them
-        const cssUrl = new URL(stylesheet, import.meta.url)
-        const response = await fetch(cssUrl)
-        const text = await response.text()
-        if (response.ok) {
-          allCSS += text + '\n'
-          console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
-        } else {
-          console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
-        }
-      } catch (error) {
-        console.warn('[Extension.js] Failed to fetch Vue CSS:', stylesheet, error)
-      }
-    }
-    
-    return allCSS
-  }
-
-  // Setup CSS HMR for Vue templates
-  private setupCSSHMR() {
-    if (!import.meta.webpackHot) return
-
-    // Setup HMR for each CSS file
-    for (const stylesheet of this.options.stylesheets) {
-      import.meta.webpackHot?.accept(stylesheet, async () => {
-        try {
-          const cssContent = await this.fetchCSS()
-          if (this.styleElement) {
-            this.styleElement.textContent = cssContent
-            console.log('[Extension.js] Vue CSS updated via HMR:', stylesheet)
-          }
-        } catch (error) {
-          console.error('[Extension.js] Failed to update Vue CSS via HMR:', stylesheet, error)
-        }
-      })
-    }
-  }
-}
-
-// Initialize Vue content script with wrapper
-function initializeVueContentScript(
-  options: ContentScriptOptions,
-  renderFunction: (container: HTMLElement) => (() => void) | void
-): ContentScriptInstance {
-  const wrapper = new VueContentScriptWrapper(renderFunction, options)
-  
-  return {
-    mount: (container?: HTMLElement) => wrapper.mount(container),
-    unmount: () => wrapper.unmount()
-  }
-}
-
-// Auto-initialize the Vue content script with the wrapper
-export function autoInitializeVueContentScript(
-  options: ContentScriptOptions = {}
-): ContentScriptInstance {
-  // Get the render function from the imported contentScript
-  const renderFunction = contentScript(options)
-
-  // Initialize with the wrapper using the detected CSS imports
-  return initializeVueContentScript(options, renderFunction)
-}
-
-// Simple initialization for Vue
-let unmount: (() => void) | undefined
-
-async function initialize() {
-  console.log('[Extension.js] Vue wrapper initialize called')
-  if (unmount) {
-    console.log('[Extension.js] Unmounting previous Vue instance')
-    unmount()
-  }
-  
-  // Get the render function from the contentScript function
-  const renderFunction = contentScript({})
-  const wrapper = new VueContentScriptWrapper(renderFunction, {})
-  await wrapper.mount()
-  unmount = () => wrapper.unmount()
-  console.log('[Extension.js] Vue wrapper initialization complete')
-}
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot?.accept()
-  import.meta.webpackHot?.dispose(() => unmount?.())
-
-  // Accept changes to this file
-  import.meta.webpackHot?.accept(() => {
-    initialize()
-  })
-}
-
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') {
-      initialize()
-    }
-  })
-}
-
-export default VueContentScriptWrapper
-`;
-    return wrapperCode;
-}
-function svelte_content_script_wrapper_extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function generateSvelteWrapperCode(source, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = svelte_content_script_wrapper_extractCSSImports(source);
-    const resourceDir = external_path_namespaceObject.dirname(resourcePath);
-    if ('development' === process.env.EXTENSION_ENV) console.log("[Extension.js] Detected Svelte framework with CSS imports:", cssImports);
-    const cssContentMap = {};
-    for (const cssImport of cssImports)try {
-        const cssPath = external_path_namespaceObject.resolve(resourceDir, cssImport);
-        if (external_fs_namespaceObject.existsSync(cssPath)) {
-            const cssContent = external_fs_namespaceObject.readFileSync(cssPath, 'utf-8');
-            const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${').replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
-            cssContentMap[cssImport] = escapedCSS;
-            if ('development' === process.env.EXTENSION_ENV) console.log(`[Extension.js] Read CSS content for ${cssImport}, length: ${cssContent.length}`);
-        } else if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] CSS file not found: ${cssPath}`);
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] Failed to read CSS file ${cssImport}:`, error);
-    }
-    const wrapperCode = `
-// Svelte Content Script Wrapper - Auto-generated by Extension.js
-// This wrapper provides Shadow DOM isolation and CSS injection for Svelte content scripts
-
-// Original Svelte content script source (directive processed)
-${source.replace(/'use shadow-dom'/g, "// 'use shadow-dom'").replace(/"use shadow-dom"/g, '// "use shadow-dom"')}
-
-// Content script options interface
-export interface ContentScriptOptions {
-  rootElement?: string
-  rootClassName?: string
-  stylesheets?: string[]
-}
-
-// Content script instance interface
-export interface ContentScriptInstance {
-  mount: (container: HTMLElement) => void
-  unmount: () => void
-}
-
-// Svelte Content script wrapper class
-class SvelteContentScriptWrapper {
-  private rootElement: HTMLElement | null = null
-  private shadowRoot: ShadowRoot | null = null
-  private styleElement: HTMLStyleElement | null = null
-  private renderFunction: (container: HTMLElement) => (() => void) | void
-  private unmountFunction: (() => void) | null = null
-  private options: ContentScriptOptions
-
-  constructor(renderFunction: (container: HTMLElement) => (() => void) | void, options: ContentScriptOptions = {}) {
-    this.renderFunction = renderFunction
-    this.options = {
-      rootElement: 'extension-root',
-      rootClassName: undefined, // Svelte handles its own styling
-      stylesheets: ${JSON.stringify(cssImports.length > 0 ? cssImports : [
-        './styles.css'
-    ])},
-      ...options
-    }
-  }
-
-  async mount(container?: HTMLElement): Promise<void> {
-    console.log('[Extension.js] Svelte wrapper mount called')
-    if (this.rootElement) {
-      this.unmount()
-    }
-
-    // Create root element - Svelte handles its own container styling
-    this.rootElement = container || document.createElement('div')
-    this.rootElement.id = this.options.rootElement!
-    if (this.options.rootClassName) {
-      this.rootElement.className = this.options.rootClassName
-    }
-    // Svelte component handles its own styling
-
-    // Create shadow root for style isolation
-    this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
-
-    // Create a host element inside the shadow root for rendering
-    const host = document.createElement('div')
-    this.shadowRoot.appendChild(host)
-
-    // Inject styles FIRST
-    console.log('[Extension.js] About to inject styles')
-    await this.injectStyles()
-
-    // Render Svelte content
-    console.log('[Extension.js] About to render Svelte content')
-    const result = this.renderFunction(host)
-    if (typeof result === 'function') {
-      this.unmountFunction = result
-    }
-
-    // Append to document if no container provided
-    if (!container) {
-      document.body.appendChild(this.rootElement)
-    }
-    
-    console.log('[Extension.js] Svelte wrapper mount complete')
-  }
-
-  unmount() {
-    if (this.unmountFunction) {
-      this.unmountFunction()
-      this.unmountFunction = null
-    }
-
-    if (this.rootElement && this.rootElement.parentNode) {
-      this.rootElement.parentNode.removeChild(this.rootElement)
-    }
-
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-  }
-
-  // Inject styles with hardcoded CSS content for Svelte templates
-  private async injectStyles(): Promise<void> {
-    console.log('[Extension.js] Svelte injectStyles called')
-    const targetRoot = this.shadowRoot || this.rootElement!
-
-    // Create style element
-    this.styleElement = document.createElement('style')
-    targetRoot.appendChild(this.styleElement)
-
-    // Fetch CSS content
-    try {
-      console.log('[Extension.js] About to fetch CSS')
-      const cssContent = await this.fetchCSS()
-      console.log('[Extension.js] CSS fetched, length:', cssContent.length)
-      this.styleElement.textContent = cssContent
-      console.log('[Extension.js] Svelte CSS injected successfully')
-    } catch (error) {
-      console.error('[Extension.js] Failed to inject Svelte CSS:', error)
-    }
-
-    // Setup HMR for CSS files
-    this.setupCSSHMR()
-  }
-
-  // Fetch CSS with hardcoded content for Svelte templates
-  private async fetchCSS(): Promise<string> {
-    let allCSS = ''
-    
-    console.log('[Extension.js] Processing Svelte stylesheets:', this.options.stylesheets)
-    
-    // CSS content map is injected at build time
-    const cssContentMap: Record<string, string> = ${JSON.stringify(cssContentMap)}
-    
-    for (const stylesheet of this.options.stylesheets) {
-      try {
-        console.log('[Extension.js] Processing Svelte stylesheet:', stylesheet)
-        // Check if we have hardcoded content for this stylesheet
-        if (cssContentMap[stylesheet]) {
-          const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\n'
-          console.log('[Extension.js] Successfully injected Svelte', stylesheet, 'content')
-          continue
-        }
-        
-        // For stylesheets without hardcoded content, try to fetch them
-        const cssUrl = new URL(stylesheet, import.meta.url)
-        const response = await fetch(cssUrl)
-        const text = await response.text()
-        if (response.ok) {
-          allCSS += text + '\n'
-          console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
-        } else {
-          console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
-        }
-      } catch (error) {
-        console.warn('[Extension.js] Failed to fetch Svelte CSS:', stylesheet, error)
-      }
-    }
-    
-    return allCSS
-  }
-
-  // Setup CSS HMR for Svelte templates
-  private setupCSSHMR() {
-    if (!import.meta.webpackHot) return
-
-    // Setup HMR for each CSS file
-    for (const stylesheet of this.options.stylesheets) {
-      import.meta.webpackHot?.accept(stylesheet, async () => {
-        try {
-          const cssContent = await this.fetchCSS()
-          if (this.styleElement) {
-            this.styleElement.textContent = cssContent
-            console.log('[Extension.js] Svelte CSS updated via HMR:', stylesheet)
-          }
-        } catch (error) {
-          console.error('[Extension.js] Failed to update Svelte CSS via HMR:', stylesheet, error)
-        }
-      })
-    }
-  }
-}
-
-// Initialize Svelte content script with wrapper
-function initializeSvelteContentScript(
-  options: ContentScriptOptions,
-  renderFunction: (container: HTMLElement) => (() => void) | void
-): ContentScriptInstance {
-  const wrapper = new SvelteContentScriptWrapper(renderFunction, options)
-  
-  return {
-    mount: (container?: HTMLElement) => wrapper.mount(container),
-    unmount: () => wrapper.unmount()
-  }
-}
-
-// Auto-initialize the Svelte content script with the wrapper
-export function autoInitializeSvelteContentScript(
-  options: ContentScriptOptions = {}
-): ContentScriptInstance {
-  // Get the render function from the imported contentScript
-  const renderFunction = contentScript(options)
-
-  // Initialize with the wrapper using the detected CSS imports
-  return initializeSvelteContentScript(options, renderFunction)
-}
-
-// Simple initialization for Svelte
-let unmount: (() => void) | undefined
-
-async function initialize() {
-  console.log('[Extension.js] Svelte wrapper initialize called')
-  if (unmount) {
-    console.log('[Extension.js] Unmounting previous Svelte instance')
-    unmount()
-  }
-  
-  // Get the render function from the contentScript function
-  const renderFunction = contentScript({})
-  const wrapper = new SvelteContentScriptWrapper(renderFunction, {})
-  await wrapper.mount()
-  unmount = () => wrapper.unmount()
-  console.log('[Extension.js] Svelte wrapper initialization complete')
-}
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot?.accept()
-  import.meta.webpackHot?.dispose(() => unmount?.())
-
-  // Accept changes to this file
-  import.meta.webpackHot?.accept(() => {
-    initialize()
-  })
-}
-
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') {
-      initialize()
-    }
-  })
-}
-
-export default SvelteContentScriptWrapper
-`;
-    return wrapperCode;
-}
-function preact_content_script_wrapper_extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function generatePreactWrapperCode(source, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = preact_content_script_wrapper_extractCSSImports(source);
-    const resourceDir = external_path_namespaceObject.dirname(resourcePath);
-    if ('development' === process.env.EXTENSION_ENV) console.log("[Extension.js] Detected Preact framework with CSS imports:", cssImports);
-    const cssContentMap = {};
-    for (const cssImport of cssImports)try {
-        const cssPath = external_path_namespaceObject.resolve(resourceDir, cssImport);
-        if (external_fs_namespaceObject.existsSync(cssPath)) {
-            const cssContent = external_fs_namespaceObject.readFileSync(cssPath, 'utf-8');
-            const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${').replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
-            cssContentMap[cssImport] = escapedCSS;
-            if ('development' === process.env.EXTENSION_ENV) console.log(`[Extension.js] Read CSS content for ${cssImport}, length: ${cssContent.length}`);
-        } else if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] CSS file not found: ${cssPath}`);
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] Failed to read CSS file ${cssImport}:`, error);
-    }
-    const wrapperCode = `
-// Preact Content Script Wrapper - Auto-generated by Extension.js
-// This wrapper provides Shadow DOM isolation and CSS injection for Preact content scripts
-
-// Original Preact content script source (directive processed)
-${source.replace(/'use shadow-dom'/g, "// 'use shadow-dom'").replace(/"use shadow-dom"/g, '// "use shadow-dom"')}
-
-// Content script options interface
-export interface ContentScriptOptions {
-  rootElement?: string
-  rootClassName?: string
-  stylesheets?: string[]
-}
-
-// Content script instance interface
-export interface ContentScriptInstance {
-  mount: (container: HTMLElement) => void
-  unmount: () => void
-}
-
-// Preact Content script wrapper class
-class PreactContentScriptWrapper {
-  private rootElement: HTMLElement | null = null
-  private shadowRoot: ShadowRoot | null = null
-  private styleElement: HTMLStyleElement | null = null
-  private renderFunction: (container: HTMLElement) => (() => void) | void
-  private unmountFunction: (() => void) | null = null
-  private options: ContentScriptOptions
-
-  constructor(renderFunction: (container: HTMLElement) => (() => void) | void, options: ContentScriptOptions = {}) {
-    this.renderFunction = renderFunction
-    this.options = {
-      rootElement: 'extension-root',
-      rootClassName: undefined, // Preact handles its own styling
-      stylesheets: ${JSON.stringify(cssImports.length > 0 ? cssImports : [
-        './styles.css'
-    ])},
-      ...options
-    }
-  }
-
-  async mount(container?: HTMLElement): Promise<void> {
-    console.log('[Extension.js] Preact wrapper mount called')
-    if (this.rootElement) {
-      this.unmount()
-    }
-
-    // Create root element - Preact handles its own container styling
-    this.rootElement = container || document.createElement('div')
-    this.rootElement.id = this.options.rootElement!
-    if (this.options.rootClassName) {
-      this.rootElement.className = this.options.rootClassName
-    }
-    // Preact component handles its own styling
-
-    // Create shadow root for style isolation
-    this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
-
-    // Inject styles FIRST
-    console.log('[Extension.js] About to inject styles')
-    await this.injectStyles()
-
-    // Render Preact content
-    console.log('[Extension.js] About to render Preact content')
-    const result = this.renderFunction(this.shadowRoot as any)
-    if (typeof result === 'function') {
-      this.unmountFunction = result
-    }
-
-    // Append to document if no container provided
-    if (!container) {
-      document.body.appendChild(this.rootElement)
-    }
-    
-    console.log('[Extension.js] Preact wrapper mount complete')
-  }
-
-  unmount() {
-    if (this.unmountFunction) {
-      this.unmountFunction()
-      this.unmountFunction = null
-    }
-
-    if (this.rootElement && this.rootElement.parentNode) {
-      this.rootElement.parentNode.removeChild(this.rootElement)
-    }
-
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-  }
-
-  // Inject styles with hardcoded CSS content for Preact templates
-  private async injectStyles(): Promise<void> {
-    console.log('[Extension.js] Preact injectStyles called')
-    const targetRoot = this.shadowRoot || this.rootElement!
-
-    // Create style element
-    this.styleElement = document.createElement('style')
-    targetRoot.appendChild(this.styleElement)
-
-    // Fetch CSS content
-    try {
-      console.log('[Extension.js] About to fetch CSS')
-      const cssContent = await this.fetchCSS()
-      console.log('[Extension.js] CSS fetched, length:', cssContent.length)
-      this.styleElement.textContent = cssContent
-      console.log('[Extension.js] Preact CSS injected successfully')
-    } catch (error) {
-      console.error('[Extension.js] Failed to inject Preact CSS:', error)
-    }
-
-    // Setup HMR for CSS files
-    this.setupCSSHMR()
-  }
-
-  // Fetch CSS with hardcoded content for Preact templates
-  private async fetchCSS(): Promise<string> {
-    let allCSS = ''
-    
-    console.log('[Extension.js] Processing Preact stylesheets:', this.options.stylesheets)
-    
-    // CSS content map is injected at build time
-    const cssContentMap: Record<string, string> = ${JSON.stringify(cssContentMap)}
-    
-    for (const stylesheet of this.options.stylesheets) {
-      try {
-        console.log('[Extension.js] Processing Preact stylesheet:', stylesheet)
-        // Check if we have hardcoded content for this stylesheet
-        if (cssContentMap[stylesheet]) {
-          const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\\n'
-          console.log(\`[Extension.js] Successfully injected Preact \${stylesheet} content\`)
-          continue
-        }
-        
-        // For stylesheets without hardcoded content, try to fetch them
-        const cssUrl = new URL(stylesheet, import.meta.url)
-        const response = await fetch(cssUrl)
-        const text = await response.text()
-        if (response.ok) {
-          allCSS += text + '\\n'
-          console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
-        } else {
-          console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
-        }
-      } catch (error) {
-        console.warn('[Extension.js] Failed to fetch Preact CSS:', stylesheet, error)
-      }
-    }
-    
-    return allCSS
-  }
-
-  // Setup CSS HMR for Preact templates
-  private setupCSSHMR() {
-    if (!import.meta.webpackHot) return
-
-    // Setup HMR for each CSS file
-    for (const stylesheet of this.options.stylesheets) {
-      import.meta.webpackHot?.accept(stylesheet, async () => {
-        try {
-          const cssContent = await this.fetchCSS()
-          if (this.styleElement) {
-            this.styleElement.textContent = cssContent
-            console.log('[Extension.js] Preact CSS updated via HMR:', stylesheet)
-          }
-        } catch (error) {
-          console.error('[Extension.js] Failed to update Preact CSS via HMR:', stylesheet, error)
-        }
-      })
-    }
-  }
-}
-
-// Initialize Preact content script with wrapper
-function initializePreactContentScript(
-  options: ContentScriptOptions,
-  renderFunction: (container: HTMLElement) => (() => void) | void
-): ContentScriptInstance {
-  const wrapper = new PreactContentScriptWrapper(renderFunction, options)
-  
-  return {
-    mount: (container?: HTMLElement) => wrapper.mount(container),
-    unmount: () => wrapper.unmount()
-  }
-}
-
-// Auto-initialize the Preact content script with the wrapper
-export function autoInitializePreactContentScript(
-  options: ContentScriptOptions = {}
-): ContentScriptInstance {
-  // Get the render function from the imported contentScript
-  const renderFunction = contentScript(options)
-
-  // Initialize with the wrapper using the detected CSS imports
-  return initializePreactContentScript(options, renderFunction)
-}
-
-// Simple initialization for Preact
-let unmount: (() => void) | undefined
-
-async function initialize() {
-  console.log('[Extension.js] Preact wrapper initialize called')
-  if (unmount) {
-    console.log('[Extension.js] Unmounting previous Preact instance')
-    unmount()
-  }
-  
-  // Get the render function from the contentScript function
-  const renderFunction = contentScript({})
-  const wrapper = new PreactContentScriptWrapper(renderFunction, {})
-  await wrapper.mount()
-  unmount = () => wrapper.unmount()
-  console.log('[Extension.js] Preact wrapper initialization complete')
-}
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot?.accept()
-  import.meta.webpackHot?.dispose(() => unmount?.())
-
-  // Accept changes to this file
-  import.meta.webpackHot?.accept(() => {
-    initialize()
-  })
-}
-
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') {
-      initialize()
-    }
-  })
-}
-
-export default PreactContentScriptWrapper
-`;
-    return wrapperCode;
-}
-function typescript_content_script_wrapper_extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function generateTypeScriptWrapperCode(source, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = typescript_content_script_wrapper_extractCSSImports(source);
-    const resourceDir = external_path_namespaceObject.dirname(resourcePath);
-    if ('development' === process.env.EXTENSION_ENV) console.log("[Extension.js] Detected TypeScript framework with CSS imports:", cssImports);
-    const cssContentMap = {};
-    for (const cssImport of cssImports)try {
-        const cssPath = external_path_namespaceObject.resolve(resourceDir, cssImport);
-        if (external_fs_namespaceObject.existsSync(cssPath)) {
-            const cssContent = external_fs_namespaceObject.readFileSync(cssPath, 'utf-8');
-            const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${').replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
-            cssContentMap[cssImport] = escapedCSS;
-            if ('development' === process.env.EXTENSION_ENV) console.log(`[Extension.js] Read CSS content for ${cssImport}, length: ${cssContent.length}`);
-        } else if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] CSS file not found: ${cssPath}`);
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] Failed to read CSS file ${cssImport}:`, error);
-    }
-    const wrapperCode = `
-// TypeScript Content Script Wrapper - Auto-generated by Extension.js
-// This wrapper provides Shadow DOM isolation and CSS injection for TypeScript content scripts
-
-// Original TypeScript content script source (directive processed)
-${source.replace(/'use shadow-dom'/g, "// 'use shadow-dom'").replace(/"use shadow-dom"/g, '// "use shadow-dom"')}
-
-// Content script options interface
-export interface ContentScriptOptions {
-  rootElement?: string
-  rootClassName?: string
-  stylesheets?: string[]
-}
-
-// Content script instance interface
-export interface ContentScriptInstance {
-  mount: (container: HTMLElement) => void
-  unmount: () => void
-}
-
-// TypeScript Content script wrapper class
-class TypeScriptContentScriptWrapper {
-  private rootElement: HTMLElement | null = null
-  private shadowRoot: ShadowRoot | null = null
-  private styleElement: HTMLStyleElement | null = null
-  private renderFunction: (container: HTMLElement) => (() => void) | void
-  private unmountFunction: (() => void) | null = null
-  private options: ContentScriptOptions
-
-  constructor(renderFunction: (container: HTMLElement) => (() => void) | void, options: ContentScriptOptions = {}) {
-    this.renderFunction = renderFunction
-    this.options = {
-      rootElement: 'extension-root',
-      rootClassName: undefined, // TypeScript handles its own styling
-      stylesheets: ${JSON.stringify(cssImports)},
-      ...options
-    }
-  }
-
-  async mount(container?: HTMLElement): Promise<void> {
-    console.log('[Extension.js] TypeScript wrapper mount called')
-    if (this.rootElement) {
-      this.unmount()
-    }
-
-    // Create root element - TypeScript handles its own container styling
-    this.rootElement = container || document.createElement('div')
-    this.rootElement.id = this.options.rootElement!
-    if (this.options.rootClassName) {
-      this.rootElement.className = this.options.rootClassName
-    }
-
-    // Create shadow root for style isolation
-    this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
-
-    // Inject styles FIRST
-    console.log('[Extension.js] About to inject styles')
-    await this.injectStyles()
-
-    // Render TypeScript content
-    console.log('[Extension.js] About to render TypeScript content')
-    const result = this.renderFunction(this.shadowRoot as any)
-    if (typeof result === 'function') {
-      this.unmountFunction = result
-    }
-
-    // Append to document if no container provided
-    if (!container) {
-      document.body.appendChild(this.rootElement)
-    }
-    
-    console.log('[Extension.js] TypeScript wrapper mount complete')
-  }
-
-  unmount() {
-    if (this.unmountFunction) {
-      this.unmountFunction()
-      this.unmountFunction = null
-    }
-
-    if (this.rootElement && this.rootElement.parentNode) {
-      this.rootElement.parentNode.removeChild(this.rootElement)
-    }
-
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-  }
-
-  // Inject styles with hardcoded CSS content for TypeScript templates
-  private async injectStyles(): Promise<void> {
-    console.log('[Extension.js] TypeScript injectStyles called')
-    const targetRoot = this.shadowRoot || this.rootElement!
-
-    // Create style element
-    this.styleElement = document.createElement('style')
-    targetRoot.appendChild(this.styleElement)
-
-    // Fetch CSS content
-    try {
-      console.log('[Extension.js] About to fetch CSS')
-      const cssContent = await this.fetchCSS()
-      console.log('[Extension.js] CSS fetched, length:', cssContent.length)
-      this.styleElement.textContent = cssContent
-      console.log('[Extension.js] TypeScript CSS injected successfully')
-    } catch (error) {
-      console.error('[Extension.js] Failed to inject TypeScript CSS:', error)
-    }
-
-    // Setup HMR for CSS files
-    this.setupCSSHMR()
-  }
-
-  // Fetch CSS with hardcoded content for TypeScript templates
-  private async fetchCSS(): Promise<string> {
-    let allCSS = ''
-    
-    console.log('[Extension.js] Processing TypeScript stylesheets:', this.options.stylesheets)
-    
-    // CSS content map is injected at build time
-    const cssContentMap: Record<string, string> = ${JSON.stringify(cssContentMap)}
-    
-    for (const stylesheet of this.options.stylesheets) {
-      try {
-        console.log('[Extension.js] Processing TypeScript stylesheet:', stylesheet)
-        // Check if we have hardcoded content for this stylesheet
-        if (cssContentMap[stylesheet]) {
-          const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\\n'
-          console.log(\`[Extension.js] Successfully injected TypeScript \${stylesheet} content\`)
-          continue
-        }
-        
-        // For stylesheets without hardcoded content, try to fetch them
-        const cssUrl = new URL(stylesheet, import.meta.url)
-        const response = await fetch(cssUrl)
-        const text = await response.text()
-        if (response.ok) {
-          allCSS += text + '\\n'
-          console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
-        } else {
-          console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
-        }
-      } catch (error) {
-        console.warn('[Extension.js] Failed to fetch TypeScript CSS:', stylesheet, error)
-      }
-    }
-    
-    return allCSS
-  }
-
-  // Setup CSS HMR for TypeScript templates
-  private setupCSSHMR() {
-    if (!import.meta.webpackHot) return
-
-    // Setup HMR for each CSS file
-    for (const stylesheet of this.options.stylesheets) {
-      import.meta.webpackHot?.accept(stylesheet, async () => {
-        try {
-          const cssContent = await this.fetchCSS()
-          if (this.styleElement) {
-            this.styleElement.textContent = cssContent
-            console.log('[Extension.js] TypeScript CSS updated via HMR:', stylesheet)
-          }
-        } catch (error) {
-          console.error('[Extension.js] Failed to update TypeScript CSS via HMR:', stylesheet, error)
-        }
-      })
-    }
-  }
-}
-
-// Initialize TypeScript content script with wrapper
-function initializeTypeScriptContentScript(
-  options: ContentScriptOptions,
-  renderFunction: (container: HTMLElement) => (() => void) | void
-): ContentScriptInstance {
-  const wrapper = new TypeScriptContentScriptWrapper(renderFunction, options)
-  
-  return {
-    mount: (container?: HTMLElement) => wrapper.mount(container),
-    unmount: () => wrapper.unmount()
-  }
-}
-
-// Auto-initialize the TypeScript content script with the wrapper
-export function autoInitializeTypeScriptContentScript(
-  options: ContentScriptOptions = {}
-): ContentScriptInstance {
-  // Get the render function from the imported contentScript
-  const renderFunction = contentScript(options)
-
-  // Initialize with the wrapper using the detected CSS imports
-  return initializeTypeScriptContentScript(options, renderFunction)
-}
-
-// Simple initialization for TypeScript
-let unmount: (() => void) | undefined
-
-async function initialize() {
-  console.log('[Extension.js] TypeScript wrapper initialize called')
-  if (unmount) {
-    console.log('[Extension.js] Unmounting previous TypeScript instance')
-    unmount()
-  }
-  
-  // Get the render function from the contentScript function
-  const renderFunction = contentScript({})
-  const wrapper = new TypeScriptContentScriptWrapper(renderFunction, {})
-  await wrapper.mount()
-  unmount = () => wrapper.unmount()
-  console.log('[Extension.js] TypeScript wrapper initialization complete')
-}
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot?.accept()
-  import.meta.webpackHot?.dispose(() => unmount?.())
-
-  // Accept changes to this file
-  import.meta.webpackHot?.accept(() => {
-    initialize()
-  })
-}
-
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') {
-      initialize()
-    }
-  })
-}
-
-export default TypeScriptContentScriptWrapper
-`;
-    return wrapperCode;
-}
-function javascript_content_script_wrapper_extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function generateJavaScriptWrapperCode(source, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = javascript_content_script_wrapper_extractCSSImports(source);
-    const resourceDir = external_path_namespaceObject.dirname(resourcePath);
-    if ('development' === process.env.EXTENSION_ENV) console.log("[Extension.js] Detected JavaScript framework with CSS imports:", cssImports);
-    const cssContentMap = {};
-    for (const cssImport of cssImports)try {
-        const cssPath = external_path_namespaceObject.resolve(resourceDir, cssImport);
-        if (external_fs_namespaceObject.existsSync(cssPath)) {
-            const cssContent = external_fs_namespaceObject.readFileSync(cssPath, 'utf-8');
-            const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${').replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
-            cssContentMap[cssImport] = escapedCSS;
-            if ('development' === process.env.EXTENSION_ENV) console.log(`[Extension.js] Read CSS content for ${cssImport}, length: ${cssContent.length}`);
-        } else if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] CSS file not found: ${cssPath}`);
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn(`[Extension.js] Failed to read CSS file ${cssImport}:`, error);
-    }
-    const wrapperCode = `
-// JavaScript Content Script Wrapper - Auto-generated by Extension.js
-// This wrapper provides Shadow DOM isolation and CSS injection for JavaScript content scripts
-
-// Original JavaScript content script source (directive processed)
-${source.replace(/'use shadow-dom'/g, "// 'use shadow-dom'").replace(/"use shadow-dom"/g, '// "use shadow-dom"')}
-
-// Content script wrapper class
-class JavaScriptContentScriptWrapper {
-  constructor(renderFunction, options = {}) {
-    this.renderFunction = renderFunction
-    this.options = {
-      rootElement: 'extension-root',
-      rootClassName: undefined,
-      stylesheets: ${JSON.stringify(cssImports.length > 0 ? cssImports : [
-        './styles.css'
-    ])},
-      ...options
-    }
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-    this.unmountFunction = null
-  }
-
-  async mount(container) {
-    console.log('[Extension.js] JavaScript wrapper mount called')
-    if (this.rootElement) {
-      this.unmount()
-    }
-
-    // Create root element
-    this.rootElement = container || document.createElement('div')
-    this.rootElement.id = this.options.rootElement
-    if (this.options.rootClassName) {
-      this.rootElement.className = this.options.rootClassName
-    }
-
-    // Create shadow root for style isolation
-    this.shadowRoot = this.rootElement.attachShadow({ mode: 'open' })
-
-    // Inject styles FIRST
-    console.log('[Extension.js] About to inject styles')
-    await this.injectStyles()
-
-    // Render content using the original contentScript function
-    console.log('[Extension.js] About to render JavaScript content')
-    const result = this.renderFunction(this.shadowRoot)
-    if (typeof result === 'function') {
-      this.unmountFunction = result
-    }
-
-    // Append to document if no container provided
-    if (!container) {
-      document.body.appendChild(this.rootElement)
-    }
-    
-    console.log('[Extension.js] JavaScript wrapper mount complete')
-  }
-
-  unmount() {
-    if (this.unmountFunction) {
-      this.unmountFunction()
-      this.unmountFunction = null
-    }
-
-    if (this.rootElement && this.rootElement.parentNode) {
-      this.rootElement.parentNode.removeChild(this.rootElement)
-    }
-
-    this.rootElement = null
-    this.shadowRoot = null
-    this.styleElement = null
-  }
-
-  async injectStyles() {
-    console.log('[Extension.js] JavaScript injectStyles called')
-    const targetRoot = this.shadowRoot || this.rootElement
-
-    // Create style element
-    this.styleElement = document.createElement('style')
-    targetRoot.appendChild(this.styleElement)
-
-    // Fetch CSS content
-    try {
-      console.log('[Extension.js] About to fetch CSS')
-      const cssContent = await this.fetchCSS()
-      console.log('[Extension.js] CSS fetched, length:', cssContent.length)
-      this.styleElement.textContent = cssContent
-      console.log('[Extension.js] JavaScript CSS injected successfully')
-    } catch (error) {
-      console.error('[Extension.js] Failed to inject JavaScript CSS:', error)
-    }
-
-    // Setup HMR for CSS files
-    this.setupCSSHMR()
-  }
-
-  async fetchCSS() {
-    let allCSS = ''
-    
-    console.log('[Extension.js] Processing JavaScript stylesheets:', this.options.stylesheets)
-    
-    // CSS content map is injected at build time
-    const cssContentMap = ${JSON.stringify(cssContentMap)}
-    
-    for (const stylesheet of this.options.stylesheets) {
-      try {
-        console.log('[Extension.js] Processing JavaScript stylesheet:', stylesheet)
-        // Check if we have hardcoded content for this stylesheet
-        if (cssContentMap[stylesheet]) {
-          const cssContent = cssContentMap[stylesheet]
-          allCSS += cssContent + '\\n'
-          console.log(\`[Extension.js] Successfully injected JavaScript \${stylesheet} content\`)
-          continue
-        }
-        
-        // For stylesheets without hardcoded content, try to fetch them
-        const cssUrl = new URL(stylesheet, import.meta.url)
-        const response = await fetch(cssUrl)
-        const text = await response.text()
-        if (response.ok) {
-          allCSS += text + '\\n'
-          console.log('[Extension.js] Successfully fetched stylesheet:', stylesheet)
-        } else {
-          console.warn('[Extension.js] Failed to fetch CSS:', stylesheet)
-        }
-      } catch (error) {
-        console.warn('[Extension.js] Failed to fetch JavaScript CSS:', stylesheet, error)
-      }
-    }
-    
-    return allCSS
-  }
-
-  setupCSSHMR() {
-    if (!import.meta.webpackHot) return
-
-    // Setup HMR for each CSS file
-    for (const stylesheet of this.options.stylesheets) {
-      import.meta.webpackHot?.accept(stylesheet, async () => {
-        try {
-          const cssContent = await this.fetchCSS()
-          if (this.styleElement) {
-            this.styleElement.textContent = cssContent
-            console.log('[Extension.js] JavaScript CSS updated via HMR:', stylesheet)
-          }
-        } catch (error) {
-          console.error('[Extension.js] Failed to update JavaScript CSS via HMR:', stylesheet, error)
-        }
-      })
-    }
-  }
-}
-
-// Initialize JavaScript content script with wrapper
-function initializeJavaScriptContentScript(options, renderFunction) {
-  const wrapper = new JavaScriptContentScriptWrapper(renderFunction, options)
-  
-  return {
-    mount: (container) => wrapper.mount(container),
-    unmount: () => wrapper.unmount()
-  }
-}
-
-// Simple initialization for JavaScript
-let unmount
-
-async function initialize() {
-  console.log('[Extension.js] JavaScript wrapper initialize called')
-  if (unmount) {
-    console.log('[Extension.js] Unmounting previous JavaScript instance')
-    unmount()
-  }
-  
-  // Get the render function from the contentScript function
-  const renderFunction = contentScript({})
-  const wrapper = new JavaScriptContentScriptWrapper(renderFunction, {})
-  await wrapper.mount()
-  unmount = () => wrapper.unmount()
-  console.log('[Extension.js] JavaScript wrapper initialization complete')
-}
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot?.accept()
-  import.meta.webpackHot?.dispose(() => unmount?.())
-
-  // Accept changes to this file
-  import.meta.webpackHot?.accept(() => {
-    initialize()
-  })
-}
-
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') {
-      initialize()
-    }
-  })
-}
-
-export default JavaScriptContentScriptWrapper
-`;
-    return wrapperCode;
-}
-const schema = {
-    type: 'object',
-    properties: {
-        test: {
-            type: 'string'
-        },
-        manifestPath: {
-            type: 'string'
-        },
-        mode: {
-            type: 'string'
-        },
-        includeList: {
-            type: 'object'
-        },
-        excludeList: {
-            type: 'object'
-        }
-    }
-};
-function add_content_script_wrapper_extractCSSImports(source) {
-    const cssImports = [];
-    const lines = source.split('\n');
-    const cssImportPatterns = [
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*;?\s*$/,
-        /^\s*import\s+['"]([^'"]*\.(?:css|scss|sass|less|module\.css))['"]\s*from\s+['"][^'"]*['"]/
-    ];
-    for (const line of lines){
-        const trimmedLine = line.trim();
-        if (!(trimmedLine.startsWith('//') || trimmedLine.startsWith('/*'))) for (const pattern of cssImportPatterns){
-            const match = pattern.exec(line);
-            if (match) {
-                const cssPath = match[1];
-                if (cssPath && !cssImports.includes(cssPath)) cssImports.push(cssPath);
-            }
-        }
-    }
-    return cssImports;
-}
-function detectFramework(resourcePath, projectPath) {
-    try {
-        const packageJsonPath = external_path_namespaceObject.join(projectPath, 'package.json');
-        if (!external_fs_namespaceObject.existsSync(packageJsonPath)) {
-            if (resourcePath.endsWith('.ts') && !resourcePath.endsWith('.d.ts')) return "typescript";
-            return "javascript";
-        }
-        const packageJson = JSON.parse(external_fs_namespaceObject.readFileSync(packageJsonPath, 'utf-8'));
-        const dependencies = packageJson.dependencies || {};
-        const devDependencies = packageJson.devDependencies || {};
-        const allDeps = {
-            ...dependencies,
-            ...devDependencies
-        };
-        if (allDeps['react'] || allDeps['@types/react']) return 'react';
-        if (allDeps['vue'] || allDeps['@vue/runtime-core']) return 'vue';
-        if (allDeps['svelte'] || allDeps['@svelte/runtime']) return 'svelte';
-        if (allDeps['preact'] || allDeps['@preact/preset-vite']) return 'preact';
-        if (allDeps["typescript"] || allDeps['@types/node'] || resourcePath.endsWith('.ts') || resourcePath.endsWith('.tsx')) return "typescript";
-        return "javascript";
-    } catch (error) {
-        if ('development' === process.env.EXTENSION_ENV) console.warn('[Extension.js] Error detecting framework from package.json:', error);
-        if (resourcePath.endsWith('.ts') && !resourcePath.endsWith('.d.ts')) return "typescript";
-        return "javascript";
-    }
-}
-function generateFrameworkWrapperCode(source, framework, resourcePath) {
-    external_path_namespaceObject.basename(resourcePath, external_path_namespaceObject.extname(resourcePath));
-    const cssImports = add_content_script_wrapper_extractCSSImports(source);
-    if ('development' === process.env.EXTENSION_ENV) console.log(`\u{1F50D} Detected ${framework} framework with CSS imports:`, cssImports);
-    if ('react' === framework) return generateReactWrapperCode(source, resourcePath);
-    if ('vue' === framework) return generateVueWrapperCode(source, resourcePath);
-    if ('svelte' === framework) return generateSvelteWrapperCode(source, resourcePath);
-    if ('preact' === framework) return generatePreactWrapperCode(source, resourcePath);
-    if ("typescript" === framework) return generateTypeScriptWrapperCode(source, resourcePath);
-    if ("javascript" === framework) return generateJavaScriptWrapperCode(source, resourcePath);
-    return generateTypeScriptWrapperCode(source, resourcePath);
-}
-function shouldUseWrapper(source, manifest, projectPath, url) {
-    const hasShadowDomDirective = source.includes("'use shadow-dom'") || source.includes('"use shadow-dom"');
-    if (!manifest.content_scripts) return false;
-    for (const contentScript of manifest.content_scripts)if (contentScript.js) for (const js of contentScript.js){
-        const absoluteUrl = external_path_namespaceObject.resolve(projectPath, js);
-        if (url.includes(absoluteUrl)) return hasShadowDomDirective;
-    }
-    return false;
-}
-function add_content_script_wrapper(source) {
-    const options = this.getOptions();
-    const manifestPath = options.manifestPath;
-    const projectPath = external_path_namespaceObject.dirname(manifestPath);
-    const manifest = JSON.parse(external_fs_namespaceObject.readFileSync(manifestPath, 'utf-8'));
-    (0, external_schema_utils_namespaceObject.validate)(schema, options, {
-        name: "scripts:add-content-script-wrapper",
-        baseDataPath: 'options'
-    });
-    const url = (0, external_loader_utils_namespaceObject.urlToRequest)(this.resourcePath);
-    if (!shouldUseWrapper(source, manifest, projectPath, url)) return source;
-    const framework = detectFramework(this.resourcePath, projectPath);
-    if (framework) {
-        const wrapperCode = generateFrameworkWrapperCode(source, framework, this.resourcePath);
-        return wrapperCode;
-    }
-    return source;
-}
-exports["default"] = __webpack_exports__["default"];
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "default"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});