extension-develop 3.1.0-next.8 → 3.2.0-next.10

package/dist/547.js

@@ -146,6 +146,8 @@ exports.modules = {
                     obj[`import.meta.env.${key}`] = JSON.stringify(combinedVars[key]);
                     return obj;
                 }, {});
+                filteredEnvVars['process.env'] = JSON.stringify({});
+                filteredEnvVars['process'] = '({env: {}})';
                 filteredEnvVars['process.env.EXTENSION_PUBLIC_BROWSER'] = JSON.stringify(this.browser);
                 filteredEnvVars['import.meta.env.EXTENSION_PUBLIC_BROWSER'] = JSON.stringify(this.browser);
                 filteredEnvVars['process.env.EXTENSION_PUBLIC_MODE'] = JSON.stringify(mode);
@@ -424,9 +426,12 @@ exports.modules = {
                 if (this.clean) new CleanDistFolderPlugin({
                     browser: this.browser || 'chrome'
                 }).apply(compiler);
-                new core_.DefinePlugin({
-                    'process.env.NODE_ENV': JSON.stringify(compiler.options.mode || 'development')
-                });
+                try {
+                    const hasRspackInternals = 'function' == typeof compiler.__internal__registerBuiltinPlugin;
+                    if (hasRspackInternals) new core_.DefinePlugin({
+                        'process.env.NODE_ENV': JSON.stringify(compiler.options.mode || 'development')
+                    }).apply(compiler);
+                } catch  {}
                 if ((this.zip || this.zipSource) && 'production' === compiler.options.mode) new ZipPlugin({
                     manifestPath: this.manifestPath,
                     browser: this.browser || 'chrome',
@@ -663,8 +668,8 @@ exports.modules = {
                 const projectPath = compiler.options.context || process.cwd();
                 const plugins = [];
                 const manifestPath = this.manifestPath;
-                const usingSass = (0, css_lib_integrations.w)(projectPath, 'sass');
-                const usingLess = (0, css_lib_integrations.w)(projectPath, 'less');
+                const usingSass = (0, css_lib_integrations.ws)(projectPath, 'sass');
+                const usingLess = (0, css_lib_integrations.ws)(projectPath, 'less');
                 const maybeInstallStylelint = await maybeUseStylelint(projectPath);
                 plugins.push(...maybeInstallStylelint);
                 const maybeInstallSass = await (0, sass.IZ)(projectPath);
@@ -707,8 +712,8 @@ exports.modules = {
                 ].filter(Boolean);
                 if ('true' === process.env.EXTENSION_AUTHOR_MODE) {
                     const integrations = [];
-                    const usingTailwind = (0, css_lib_integrations.w)(projectPath, 'tailwindcss');
-                    const usingPostcss = (0, css_lib_integrations.w)(projectPath, 'postcss') || void 0 !== findPostCssConfig(projectPath) || usingSass || usingLess || usingTailwind;
+                    const usingTailwind = (0, css_lib_integrations.ws)(projectPath, 'tailwindcss');
+                    const usingPostcss = (0, css_lib_integrations.ws)(projectPath, 'postcss') || void 0 !== findPostCssConfig(projectPath) || usingSass || usingLess || usingTailwind;
                     if (usingPostcss) integrations.push('PostCSS');
                     if (usingSass) integrations.push('Sass');
                     if (usingLess) integrations.push('Less');
@@ -810,6 +815,12 @@ exports.modules = {
                     }
                 };
                 const hasCustomSvgRule = compiler.options.module.rules.some((rule)=>rule && rule.test instanceof RegExp && rule.test.test('.svg') && void 0 !== rule.use);
+                const hasCustomFontsRule = compiler.options.module.rules.some((thisRule)=>{
+                    const rule = thisRule;
+                    if (!rule || !(rule.test instanceof RegExp)) return false;
+                    if (!rule.test.test('.woff')) return false;
+                    return void 0 !== rule.type || void 0 !== rule.use;
+                });
                 const loaders = [
                     ...hasCustomSvgRule ? [] : [
                         defaultSvgRule
@@ -826,13 +837,15 @@ exports.modules = {
                             }
                         }
                     },
-                    {
-                        test: /\.(woff|woff2|eot|ttf|otf)$/i,
-                        type: 'asset',
-                        generator: {
-                            filename: filenamePattern
+                    ...hasCustomFontsRule ? [] : [
+                        {
+                            test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                            type: 'asset',
+                            generator: {
+                                filename: filenamePattern
+                            }
                         }
-                    },
+                    ],
                     {
                         test: /\.(txt|md|csv|tsv|xml|pdf|docx|doc|xls|xlsx|ppt|pptx|zip|gz|gzip|tgz)$/i,
                         type: 'asset',
@@ -904,12 +917,63 @@ exports.modules = {
             return obj;
         }
         class JsFrameworksPlugin {
+            findVueLoaderRuleIndices(rules) {
+                const indices = [];
+                for(let i = 0; i < rules.length; i++){
+                    const rule = rules[i];
+                    const testStr = String(rule?.test?.toString?.() || rule?.test || '');
+                    const isVueTest = testStr.includes('\\.vue') || testStr.includes('/.vue') || '.vue' === testStr;
+                    if (!isVueTest) continue;
+                    const use = rule?.use;
+                    const loader = rule?.loader || (Array.isArray(use) ? use?.[0]?.loader : 'object' == typeof use ? use?.loader : void 0);
+                    const loaderStr = String(loader || '');
+                    if (loaderStr.includes('vue-loader')) indices.push(i);
+                }
+                return indices;
+            }
+            mergeVueRule(userRule, defaultRule) {
+                const merged = {
+                    ...userRule
+                };
+                if (merged.use) {
+                    if (Array.isArray(merged.use) && merged.use.length > 0) {
+                        const first = merged.use[0];
+                        merged.use = [
+                            {
+                                ...first,
+                                loader: first?.loader || defaultRule?.loader,
+                                options: {
+                                    ...defaultRule?.options || {},
+                                    ...first?.options || {}
+                                }
+                            },
+                            ...merged.use.slice(1)
+                        ];
+                    } else if ('object' == typeof merged.use) merged.use = {
+                        ...merged.use,
+                        loader: merged.use?.loader || defaultRule?.loader,
+                        options: {
+                            ...defaultRule?.options || {},
+                            ...merged.use?.options || {}
+                        }
+                    };
+                    return merged;
+                }
+                merged.loader = merged.loader || defaultRule?.loader;
+                merged.options = {
+                    ...defaultRule?.options || {},
+                    ...merged.options || {}
+                };
+                return merged;
+            }
             async configureOptions(compiler) {
                 const mode = compiler.options.mode || 'development';
                 const projectPath = compiler.options.context;
+                const devtool = compiler.options.devtool;
+                const wantsSourceMaps = false !== devtool && ('development' === mode || null != devtool);
                 const maybeInstallReact = await (0, react.b)(projectPath);
                 const maybeInstallPreact = await (0, preact.b)(projectPath);
-                const maybeInstallVue = await (0, vue.K)(projectPath);
+                const maybeInstallVue = await (0, vue.K)(projectPath, mode);
                 const maybeInstallSvelte = await (0, svelte.X)(projectPath, mode);
                 const tsConfigPath = (0, typescript.hB)(projectPath);
                 const manifestDir = external_path_.dirname(this.manifestPath);
@@ -940,6 +1004,19 @@ exports.modules = {
                     ...maybeInstallSvelte?.alias || {},
                     ...compiler.options.resolve.alias
                 };
+                const existingRules = Array.isArray(compiler.options.module.rules) ? [
+                    ...compiler.options.module.rules
+                ] : [];
+                let vueLoadersToAdd = maybeInstallVue?.loaders || [];
+                if (maybeInstallVue?.loaders?.length) {
+                    const vueRuleIndices = this.findVueLoaderRuleIndices(existingRules);
+                    if (vueRuleIndices.length > 0) {
+                        const primary = vueRuleIndices[0];
+                        existingRules[primary] = this.mergeVueRule(existingRules[primary], maybeInstallVue.loaders[0]);
+                        for (const idx of vueRuleIndices.slice(1).reverse())existingRules.splice(idx, 1);
+                        vueLoadersToAdd = [];
+                    }
+                }
                 compiler.options.module.rules = [
                     {
                         test: /\.(js|mjs|jsx|mjsx|ts|mts|tsx|mtsx)$/,
@@ -959,7 +1036,7 @@ exports.modules = {
                                 },
                                 minify: 'production' === mode,
                                 isModule: true,
-                                sourceMap: 'development' === this.mode,
+                                sourceMap: wantsSourceMaps,
                                 env: {
                                     targets
                                 },
@@ -990,9 +1067,9 @@ exports.modules = {
                     },
                     ...maybeInstallReact?.loaders || [],
                     ...maybeInstallPreact?.loaders || [],
-                    ...maybeInstallVue?.loaders || [],
+                    ...vueLoadersToAdd,
                     ...maybeInstallSvelte?.loaders || [],
-                    ...compiler.options.module.rules
+                    ...existingRules
                 ].filter(Boolean);
                 maybeInstallReact?.plugins?.forEach((plugin)=>plugin.apply(compiler));
                 maybeInstallPreact?.plugins?.forEach((plugin)=>plugin.apply(compiler));
@@ -1671,6 +1748,33 @@ exports.modules = {
                 return require(manifestPath);
             }
         }
+        function manifest_filterKeysForThisBrowser(manifest, browser) {
+            const CHROMIUM_BASED_BROWSERS = [
+                'chrome',
+                'edge'
+            ];
+            const GECKO_BASED_BROWSERS = [
+                'firefox'
+            ];
+            const isChromiumTarget = CHROMIUM_BASED_BROWSERS.includes(browser) || String(browser).includes('chromium');
+            const isGeckoTarget = GECKO_BASED_BROWSERS.includes(browser) || String(browser).includes('gecko');
+            const chromiumPrefixes = new Set([
+                'chromium',
+                'chrome',
+                'edge'
+            ]);
+            const geckoPrefixes = new Set([
+                'gecko',
+                'firefox'
+            ]);
+            const patchedManifest = JSON.parse(JSON.stringify(manifest), function(key, value) {
+                const indexOfColon = key.indexOf(':');
+                if (-1 === indexOfColon) return value;
+                const prefix = key.substring(0, indexOfColon);
+                if (prefix === browser || isChromiumTarget && chromiumPrefixes.has(prefix) || isGeckoTarget && geckoPrefixes.has(prefix)) this[key.substring(indexOfColon + 1)] = value;
+            });
+            return patchedManifest;
+        }
         function update_manifest_define_property(obj, key, value) {
             if (key in obj) Object.defineProperty(obj, key, {
                 value: value,
@@ -1699,9 +1803,10 @@ exports.modules = {
                     }, ()=>{
                         if (compilation.errors.length > 0) return;
                         const manifest = getManifestContent(compilation, this.manifestPath);
-                        const overrides = getManifestOverrides(this.manifestPath, manifest);
+                        const manifestForBrowser = manifest_filterKeysForThisBrowser(manifest, this.browser);
+                        const overrides = getManifestOverrides(this.manifestPath, manifestForBrowser);
                         const patchedManifest = {
-                            ...manifest,
+                            ...manifestForBrowser,
                             ...JSON.parse(overrides)
                         };
                         if ('development' === compiler.options.mode) {
@@ -1726,7 +1831,9 @@ exports.modules = {
             }
             constructor(options){
                 update_manifest_define_property(this, "manifestPath", void 0);
+                update_manifest_define_property(this, "browser", void 0);
                 this.manifestPath = options.manifestPath;
+                this.browser = options.browser || 'chrome';
             }
         }
         function add_dependencies_define_property(obj, key, value) {
@@ -1906,7 +2013,8 @@ exports.modules = {
                     manifestPath: this.manifestPath
                 }).apply(compiler);
                 new UpdateManifest({
-                    manifestPath: this.manifestPath
+                    manifestPath: this.manifestPath,
+                    browser: this.browser
                 }).apply(compiler);
                 new AddDependencies([
                     this.manifestPath
@@ -1957,7 +2065,7 @@ exports.modules = {
             return lines.join('\n');
         }
         function fileNotFound(errorSourcePath, missingFilePath, opts) {
-            if (!errorSourcePath) throw new Error('This operation is impossible. Please report a bug.');
+            if (!errorSourcePath) throw new Error('This state should not occur. Please report a bug.');
             switch(external_path_.extname(missingFilePath)){
                 case '.js':
                 case '.ts':
@@ -3476,7 +3584,7 @@ exports.modules = {
         ];
         const weakRuntimeCheck = [
             ...basic,
-            "var runtime = isBrowser ? browser : isChrome ? chrome : (typeof self === 'object' && self.addEventListener) ? { get runtime() { throw new Error(\"No chrome or browser runtime found\") } } : { runtime: { getURL: x => x } }"
+            "var runtime = isBrowser ? browser : isChrome ? chrome : { runtime: { getURL: x => x } }"
         ];
         class AddPublicPathRuntimeModule {
             apply(compiler) {
@@ -4282,6 +4390,8 @@ Set background.noDynamicEntryWarning to true to disable this warning.
                     protocol: 'ws'
                 });
                 setDefault(devServer.client.webSocketURL, 'protocol', 'ws');
+                if (devServer.host) setDefault(devServer.client.webSocketURL, 'hostname', devServer.host);
+                if (devServer.port) setDefault(devServer.client.webSocketURL, 'port', devServer.port);
                 setDefault(devServer, 'allowedHosts', 'all');
                 setDefault(devServer, 'headers', {
                     'Access-Control-Allow-Origin': '*'
@@ -4931,7 +5041,7 @@ Set background.noDynamicEntryWarning to true to disable this warning.
             }
         }
         function manifestNotFoundMessageOnly(absPath) {
-            return `Check the manifest.json file.\n\nNOT FOUND ${absPath}`;
+            return `Check for a valid manifest.json file.\n\nNOT FOUND ${absPath}`;
         }
         function entryNotFoundMessageOnly(manifestField, absPath) {
             const guidance = `Check the ${manifestField} field in your manifest.json file.`;
@@ -4939,24 +5049,24 @@ Set background.noDynamicEntryWarning to true to disable this warning.
             return guidance + suffix;
         }
         function defaultLocaleSpecifiedButLocalesMissing() {
-            return 'Default locale was specified, but _locales subtree is missing.';
+            return 'default_locale is set, but the _locales folder is missing. Add _locales/<default>/messages.json.';
         }
         function defaultLocaleFolderMissing(defaultLocale) {
-            return `Default locale folder is missing: _locales/${defaultLocale}`;
+            return `Default locale folder is missing: _locales/${defaultLocale}. Create it and add messages.json.`;
         }
         function defaultLocaleMessagesMissing(defaultLocale) {
-            return `Default locale messages.json is missing: _locales/${defaultLocale}/messages.json`;
+            return `Default locale messages.json is missing: _locales/${defaultLocale}/messages.json. Create the file with your strings.`;
         }
         function localesPresentButNoDefaultLocale() {
-            return 'The _locales subtree exists but manifest.json is missing default_locale.';
+            return 'The _locales folder exists, but manifest.json is missing default_locale. Add default_locale to manifest.json.';
         }
         function invalidMessagesJson(absPath) {
-            return `Invalid JSON in locale messages file: ${absPath}`;
+            return `Invalid JSON in locale messages file: ${absPath}. Fix the JSON syntax and try again.`;
         }
         function missingManifestMessageKey(key, defaultLocale) {
             const header = 'Check the i18n placeholders in your manifest.json file.';
             const localePath = defaultLocale ? `_locales/${defaultLocale}/messages.json` : '_locales/<default>/messages.json';
-            const guidance = `The key "${key}" referenced via __MSG_${key}__ must be defined in ${localePath}.`;
+            const guidance = `The key "${key}" referenced via __MSG_${key}__ must be defined in ${localePath}. Add the key to that file.`;
             const final = `MISSING KEY ${key} in ${localePath}`;
             return `${header}\n${guidance}\n\n${final}`;
         }
@@ -6418,6 +6528,44 @@ Set background.noDynamicEntryWarning to true to disable this warning.
                     });
                 }
             }
+            const fontExtRe = /\.(woff2?|eot|ttf|otf)$/i;
+            if (3 === manifest.manifest_version) {
+                const assetKeys = Object.keys(compilation.assets || {});
+                const fontAssets = assetKeys.filter((k)=>fontExtRe.test(k)).filter((k)=>!k.startsWith('assets/')).filter((k)=>!k.startsWith("content_scripts/")).sort();
+                if (fontAssets.length > 0) {
+                    const allMatches = Array.from(new Set((manifest.content_scripts || []).flatMap((cs)=>cs.matches || [])));
+                    const normalizedMatches = cleanMatches(allMatches);
+                    if (normalizedMatches.length > 0) {
+                        const existing = webAccessibleResourcesV3.find((entry)=>{
+                            const a = [
+                                ...entry.matches
+                            ].sort();
+                            const b = [
+                                ...normalizedMatches
+                            ].sort();
+                            return a.length === b.length && a.every((v, i)=>v === b[i]);
+                        });
+                        if (existing) {
+                            const candidates = fontAssets.filter((r)=>!existing.resources.includes(r) && !isCoveredByExistingGlobs(existing.resources, r));
+                            existing.resources = Array.from(new Set([
+                                ...existing.resources || [],
+                                ...candidates
+                            ])).sort();
+                        } else webAccessibleResourcesV3.push({
+                            resources: fontAssets,
+                            matches: [
+                                ...normalizedMatches
+                            ].sort()
+                        });
+                    }
+                }
+            } else if (2 === manifest.manifest_version) {
+                const assetKeys = Object.keys(compilation.assets || {});
+                const fontAssets = assetKeys.filter((k)=>fontExtRe.test(k)).sort();
+                if (fontAssets.length > 0) {
+                    for (const r of fontAssets)if (!webAccessibleResourcesV2.includes(r)) webAccessibleResourcesV2.push(r);
+                }
+            }
             if (3 === manifest.manifest_version) {
                 const assetKeys = Object.keys(compilation.assets || {});
                 const cssUnderContentScripts = assetKeys.filter((k)=>k.startsWith("content_scripts/")).filter((k)=>k.endsWith('.css')).sort();
@@ -6527,9 +6675,8 @@ Set background.noDynamicEntryWarning to true to disable this warning.
                 this.browser = options.browser || 'chrome';
             }
         }
-        var external_chokidar_ = __webpack_require__("chokidar");
         function serverRestartRequiredFromSpecialFolderMessageOnly(addingOrRemoving, folder, typeOfAsset) {
-            return `${external_pintor_default().red('ERROR')} in ${external_pintor_default().yellow('manifest.json')} entrypoint: ${addingOrRemoving} ${external_pintor_default().yellow(typeOfAsset)} in ${external_pintor_default().underline(folder + '/')} requires a server restart.`;
+            return `${external_pintor_default().red('ERROR')} in ${external_pintor_default().yellow('manifest.json')} entrypoint: ${addingOrRemoving} ${external_pintor_default().yellow(typeOfAsset)} in ${external_pintor_default().underline(folder + '/')} requires a dev server restart to apply changes.`;
         }
         function specialFoldersSetupSummary(hasPublic, copyEnabled, ignoredCount) {
             return `Special folders setup — public=${String(hasPublic)}, copy=${String(copyEnabled)}, ignored=${String(ignoredCount)}`;
@@ -6537,6 +6684,16 @@ Set background.noDynamicEntryWarning to true to disable this warning.
         function specialFolderChangeDetected(action, folder, relativePath) {
             return `Special folders change — ${action} in ${folder}/: ${relativePath}`;
         }
+        function warn_upon_folder_changes_define_property(obj, key, value) {
+            if (key in obj) Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+            else obj[key] = value;
+            return obj;
+        }
         class WarnUponFolderChanges {
             throwCompilationError(compilation, folder, filePath, isAddition) {
                 const addingOrRemoving = isAddition ? 'Adding' : 'Removing';
@@ -6556,58 +6713,57 @@ Set background.noDynamicEntryWarning to true to disable this warning.
                 err.details = `Removing from ${folder}/ breaks current build. Restart the dev server to recompile.`;
                 compilation.errors?.push(err);
             }
+            trackChange(projectPath, folder, change, filePath) {
+                if ('true' === process.env.EXTENSION_AUTHOR_MODE) console.log(specialFolderChangeDetected('add' === change ? 'add' : 'remove', folder, external_path_.relative(projectPath, filePath)));
+                this.pendingChanges.push({
+                    type: change,
+                    folder,
+                    filePath
+                });
+            }
+            collectChanges(compiler) {
+                const projectPath = compiler.options.context || process.cwd();
+                const pagesPath = external_path_.join(projectPath, 'pages') + external_path_.sep;
+                const scriptsPath = external_path_.join(projectPath, "scripts") + external_path_.sep;
+                const extensionsSupported = compiler.options.resolve?.extensions;
+                const supportedScripts = new Set((extensionsSupported || []).map((e)=>e.toLowerCase()));
+                const modifiedFiles = compiler.modifiedFiles || new Set();
+                const removedFiles = compiler.removedFiles || new Set();
+                for (const filePath of modifiedFiles){
+                    if (filePath.startsWith(pagesPath) && filePath.endsWith('.html')) this.trackChange(projectPath, 'pages', 'add', filePath);
+                    if (filePath.startsWith(scriptsPath)) {
+                        const ext = external_path_.extname(filePath).toLowerCase();
+                        if (supportedScripts.has(ext)) this.trackChange(projectPath, "scripts", 'add', filePath);
+                    }
+                }
+                for (const filePath of removedFiles){
+                    if (filePath.startsWith(pagesPath) && filePath.endsWith('.html')) this.trackChange(projectPath, 'pages', 'remove', filePath);
+                    if (filePath.startsWith(scriptsPath)) {
+                        const ext = external_path_.extname(filePath).toLowerCase();
+                        if (supportedScripts.has(ext)) this.trackChange(projectPath, "scripts", 'remove', filePath);
+                    }
+                }
+            }
+            applyPendingChanges(compilation) {
+                for (const change of this.pendingChanges)this.throwCompilationError(compilation, change.folder, change.filePath, 'add' === change.type);
+                this.pendingChanges = [];
+            }
             apply(compiler) {
+                compiler.hooks.watchRun.tap('special-folders:warn-upon-folder-changes', ()=>{
+                    this.collectChanges(compiler);
+                });
                 compiler.hooks.thisCompilation.tap('special-folders:warn-upon-folder-changes', (compilation)=>{
                     const projectPath = compiler.options.context || process.cwd();
                     const pagesPath = external_path_.join(projectPath, 'pages');
                     const scriptsPath = external_path_.join(projectPath, "scripts");
-                    const pagesWatcher = external_chokidar_.watch(pagesPath, {
-                        ignoreInitial: true
-                    });
-                    const scriptsWatcher = external_chokidar_.watch(scriptsPath, {
-                        ignoreInitial: true
-                    });
-                    const extensionsSupported = compiler.options.resolve?.extensions;
-                    pagesWatcher.on('add', (filePath)=>{
-                        const ext = external_path_.extname(filePath).toLowerCase();
-                        const isHtml = '.html' === ext;
-                        if (isHtml) {
-                            if ('true' === process.env.EXTENSION_AUTHOR_MODE) console.log(specialFolderChangeDetected('add', 'pages', external_path_.relative(projectPath, filePath)));
-                            this.throwCompilationError(compilation, 'pages', filePath, true);
-                        }
-                    });
-                    pagesWatcher.on('unlink', (filePath)=>{
-                        const ext = external_path_.extname(filePath).toLowerCase();
-                        const isHtml = '.html' === ext;
-                        if (isHtml) {
-                            if ('true' === process.env.EXTENSION_AUTHOR_MODE) console.log(specialFolderChangeDetected('remove', 'pages', external_path_.relative(projectPath, filePath)));
-                            this.throwCompilationError(compilation, 'pages', filePath);
-                        }
-                    });
-                    scriptsWatcher.on('add', (filePath)=>{
-                        const ext = external_path_.extname(filePath).toLowerCase();
-                        const supported = new Set((extensionsSupported || []).map((e)=>e.toLowerCase()));
-                        const isScript = supported.has(ext);
-                        if (isScript) {
-                            if ('true' === process.env.EXTENSION_AUTHOR_MODE) console.log(specialFolderChangeDetected('add', "scripts", external_path_.relative(projectPath, filePath)));
-                            this.throwCompilationError(compilation, "scripts", filePath, true);
-                        }
-                    });
-                    scriptsWatcher.on('unlink', (filePath)=>{
-                        const ext = external_path_.extname(filePath).toLowerCase();
-                        const supported = new Set((extensionsSupported || []).map((e)=>e.toLowerCase()));
-                        const isScript = supported.has(ext);
-                        if (isScript) {
-                            if ('true' === process.env.EXTENSION_AUTHOR_MODE) console.log(specialFolderChangeDetected('remove', "scripts", external_path_.relative(projectPath, filePath)));
-                            this.throwCompilationError(compilation, "scripts", filePath);
-                        }
-                    });
-                    compiler.hooks.watchClose.tap('WarnUponFolderChanges', ()=>{
-                        pagesWatcher.close().catch(()=>{});
-                        scriptsWatcher.close().catch(()=>{});
-                    });
+                    compilation.contextDependencies?.add(pagesPath);
+                    compilation.contextDependencies?.add(scriptsPath);
+                    this.applyPendingChanges(compilation);
                 });
             }
+            constructor(){
+                warn_upon_folder_changes_define_property(this, "pendingChanges", []);
+            }
         }
         function checkManifestInPublic(compilation, publicDir) {
             try {
@@ -6798,8 +6954,9 @@ Set background.noDynamicEntryWarning to true to disable this warning.
                 try {
                     const polyfillPath = require.resolve('webextension-polyfill/dist/browser-polyfill.js', {
                         paths: [
+                            compiler.options.context,
                             __dirname
-                        ]
+                        ].filter(Boolean)
                     });
                     const currentResolve = compiler.options.resolve || {};
                     const existingAlias = currentResolve.alias || {};

package/dist/928.js

@@ -330,6 +330,13 @@ exports.modules = {
             const portAllocation = await portManager.allocatePorts(devOptions.browser, packageJsonDir, desiredPort);
             const currentInstance = portManager.getCurrentInstance();
             if (!currentInstance) throw new Error('Failed to create instance');
+            const port = portAllocation.port;
+            const devServerHost = '127.0.0.1';
+            const devServerWebSocketURL = {
+                protocol: 'ws',
+                hostname: devServerHost,
+                port
+            };
             const safeBrowserConfig = (0, sanitize.a)(browserConfig);
             const safeCommandConfig = (0, sanitize.a)(commandConfig);
             const safeDevOptions = (0, sanitize.a)(devOptions);
@@ -349,12 +356,23 @@ exports.modules = {
             const customWebpackConfig = await (0, config_loader.Tu)(manifestDir);
             const finalConfig = customWebpackConfig(baseConfig);
             const compilerConfig = (0, external_webpack_merge_.merge)(finalConfig, {});
+            compilerConfig.devServer = {
+                ...compilerConfig.devServer || {},
+                host: devServerHost,
+                port,
+                client: {
+                    ...(compilerConfig.devServer || {}).client || {},
+                    webSocketURL: {
+                        ...((compilerConfig.devServer || {}).client || {}).webSocketURL || {},
+                        ...devServerWebSocketURL
+                    }
+                }
+            };
             const compiler = (0, core_.rspack)(compilerConfig);
             setupCompilerHooks(compiler, portAllocation.port);
-            const port = portAllocation.port;
             if (void 0 !== devOptions.port && devOptions.port !== port) console.log(portInUse(devOptions.port, port));
             const serverConfig = {
-                host: '127.0.0.1',
+                host: devServerHost,
                 allowedHosts: 'all',
                 static: {
                     watch: {
@@ -382,11 +400,7 @@ exports.modules = {
                     logging: 'none',
                     progress: false,
                     overlay: false,
-                    webSocketURL: {
-                        protocol: 'ws',
-                        hostname: '127.0.0.1',
-                        port
-                    }
+                    webSocketURL: devServerWebSocketURL
                 },
                 headers: {
                     'Access-Control-Allow-Origin': '*'

package/dist/content-script-wrapper.js

@@ -211,6 +211,8 @@ function content_script_wrapper(source) {
     if (source.includes('__EXTENSIONJS_MOUNT_WRAPPED__')) return source;
     const cssImportMatches = Array.from(source.matchAll(/import\s+(?:['\"](?<bare>[^'\"]+\.(css|sass|scss|less))['\"]|(?:(?:.+?)\s+from\s+['\"](?<from>[^'\"]+\.(css|sass|scss|less))['\"]))/g));
     const cssSpecifiers = cssImportMatches.map((m)=>m.groups?.bare || m.groups?.from);
+    const vueImportMatches = Array.from(source.matchAll(/import\s+(?:['\"](?<bare>[^'\"]+\.vue)['\"]|(?:(?:.+?)\s+from\s+['\"](?<from>[^'\"]+\.vue)['\"]))/g));
+    const vueSpecifiers = vueImportMatches.map((m)=>m.groups?.bare || m.groups?.from);
     const runtimeInline = "function __EXTENSIONJS_whenReady(runAt, cb){\n  try {\n    if (typeof document === 'undefined') { cb(); return function(){} }\n    if (runAt === 'document_start') { cb(); return function(){} }\n    var isDone = false;\n    function isReady(){\n      if (runAt === 'document_end') return document.readyState === 'interactive' || document.readyState === 'complete';\n      if (runAt === 'document_idle') return document.readyState !== 'loading';\n      return document.readyState === 'complete';\n    }\n    if (isReady()) { cb(); return function(){} }\n    var onReady = function(){\n      try {\n        if (isDone) return;\n        if (isReady()) { isDone = true; document.removeEventListener('readystatechange', onReady); cb(); }\n      } catch (e) {}\n    };\n    document.addEventListener('readystatechange', onReady);\n    return function(){ try { if (!isDone) document.removeEventListener('readystatechange', onReady); } catch (e) {} };\n  } catch (e) { try { cb(); } catch (_) {} return function(){} }\n}\nfunction __EXTENSIONJS_mountWithHMR(mount, runAt){\n  var cleanup;\n  var cancelReady = function(){};\n  if (typeof mount !== \"function\") { try { console.warn(\"[extension.js] content script default export must be a function; skipping mount\") } catch (_) {} return function(){} }\n  function apply(){ try { cleanup = mount() } catch (e) { try { console.warn(\"[extension.js] content script default export failed to run\", e) } catch (_) {} } }\n  function unmount(){ try { cancelReady && cancelReady(); } catch (e) {} try { if (typeof cleanup === 'function') cleanup() } catch (e2) {} }\n  function remount(){ unmount(); apply(); }\n  cancelReady = __EXTENSIONJS_whenReady(runAt, apply);\n  if (import.meta.webpackHot) {\n    if (typeof import.meta.webpackHot.accept === \"function\") import.meta.webpackHot.accept();\n    if (typeof import.meta.webpackHot.dispose === \"function\") import.meta.webpackHot.dispose(unmount);\n    if (typeof import.meta.webpackHot.addStatusHandler === \"function\") {\n      import.meta.webpackHot.addStatusHandler(function(s){ if (s==='abort'||s==='fail') { console.warn('[extension.js] HMR status:', s) } });\n    }\n  }\n  var cssEvt='__EXTENSIONJS_CSS_UPDATE__';\n  var onCss=function(){ remount() };\n  window.addEventListener(cssEvt, onCss);\n  return function(){ window.removeEventListener(cssEvt, onCss); unmount(); };\n}\n";
     if (/\bexport\s+default\s+[A-Za-z_$][\w$]*\s*\(/.test(source) && !/\bexport\s+default\s+function\b/.test(source)) {
         this.emitWarning?.(new Error('Default export appears to be an invocation. Export a function reference instead: `export default function init(){}` or `export default init`.'));
@@ -236,7 +238,8 @@ function content_script_wrapper(source) {
         }
     }
     const cssAccepts = cssSpecifiers.length ? `\ntry {\n  if (import.meta.webpackHot) {\n    ${cssSpecifiers.map((s)=>`import.meta.webpackHot.accept(${JSON.stringify(s)}, () => { try { window.dispatchEvent(new CustomEvent('__EXTENSIONJS_CSS_UPDATE__')) } catch (error) {} })`).join('\n    ')}\n  }\n} catch (error) {}\n` : '';
-    const injected = `${runtimeInline}${cleaned}\n;/* __EXTENSIONJS_MOUNT_WRAPPED__ */\ntry { __EXTENSIONJS_mountWithHMR(__EXTENSIONJS_default__, ${JSON.stringify(runAt)}) } catch (error) {}\n${cssAccepts}export default __EXTENSIONJS_default__\n`;
+    const vueAccepts = vueSpecifiers.length ? `\ntry {\n  if (import.meta.webpackHot) {\n    ${vueSpecifiers.map((s)=>`import.meta.webpackHot.accept(${JSON.stringify(s)}, () => { try { window.dispatchEvent(new CustomEvent('__EXTENSIONJS_CSS_UPDATE__')) } catch (error) {} })`).join('\n    ')}\n  }\n} catch (error) {}\n` : '';
+    const injected = `${runtimeInline}${cleaned}\n;/* __EXTENSIONJS_MOUNT_WRAPPED__ */\ntry { __EXTENSIONJS_mountWithHMR(__EXTENSIONJS_default__, ${JSON.stringify(runAt)}) } catch (error) {}\n${cssAccepts}${vueAccepts}export default __EXTENSIONJS_default__\n`;
     return injected;
 }
 exports["default"] = __webpack_exports__["default"];

package/dist/ensure-hmr-for-scripts.js

@@ -43,6 +43,8 @@ const schema = {
     additionalProperties: false
 };
 function ensureHMRForScripts(source) {
+    const resourceQuery = String(this.resourceQuery || '');
+    if (resourceQuery.includes('vue&type=')) return source;
     const options = this.getOptions();
     try {
         (0, external_schema_utils_namespaceObject.validate)(schema, options, {