extension-develop 2.0.0-rc.26 → 2.0.0-rc.28

package/dist/commands/commands-lib/messages.d.ts

@@ -2,7 +2,7 @@ import { Manifest } from '../../types';
 import { type DevOptions } from '../commands-lib/config-types';
 export declare function manifestNotFoundError(manifestPath: string): string;
 export declare function building(browser: DevOptions['browser']): string;
-export declare function runningInProduction(projectDir: string): string;
+export declare function runningInProduction(outputPath: string): string;
 export declare function ready(mode: DevOptions['mode'], browser: DevOptions['browser']): string;
 export declare function previewing(browser: DevOptions['browser']): string;
 export declare function previewWebpack(): string;
@@ -29,3 +29,4 @@ export declare function installingDependencies(): string;
 export declare function installingDependenciesFailed(gitCommand: string, gitArgs: string[], code: number | null): string;
 export declare function installingDependenciesProcessError(error: any): string;
 export declare function cantInstallDependencies(error: any): string;
+export declare function portInUse(requestedPort: number, newPort: number): string;

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

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __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, {
@@ -39,8 +30,7 @@ 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");
-const external_parse5_utils_namespaceObject = require("parse5-utils");
-var external_parse5_utils_default = /*#__PURE__*/ __webpack_require__.n(external_parse5_utils_namespaceObject);
+const external_parse5_utilities_namespaceObject = require("parse5-utilities");
 function isUrl(src) {
     try {
         new URL(src);
@@ -50,51 +40,57 @@ function isUrl(src) {
     }
 }
 function parseHtml(node, onResourceFound) {
-    const { childNodes = [] } = node;
-    for (const childNode of childNodes)if ("script" === childNode.nodeName) {
-        const src = external_parse5_utils_default().getAttribute(childNode, 'src');
-        if (!src) continue;
-        if (isUrl(src)) continue;
+    if ('#comment' === node.nodeName || '#text' === node.nodeName) return;
+    if ("script" === node.nodeName) {
+        var _node_attrs_find, _node_attrs;
+        const src = null == (_node_attrs = node.attrs) ? void 0 : null == (_node_attrs_find = _node_attrs.find((attr)=>'src' === attr.name)) ? void 0 : _node_attrs_find.value;
+        if (!src) return;
+        if (isUrl(src)) return;
         onResourceFound({
             filePath: src,
-            childNode,
+            childNode: node,
             assetType: "script"
         });
-    } else if ('link' === childNode.nodeName) {
-        const href = external_parse5_utils_default().getAttribute(childNode, 'href');
-        const rel = external_parse5_utils_default().getAttribute(childNode, 'rel');
-        if (!href) continue;
-        if (isUrl(href)) continue;
+    } else if ('link' === node.nodeName) {
+        var _node_attrs_find1, _node_attrs1, _node_attrs_find2, _node_attrs2;
+        const href = null == (_node_attrs1 = node.attrs) ? void 0 : null == (_node_attrs_find1 = _node_attrs1.find((attr)=>'href' === attr.name)) ? void 0 : _node_attrs_find1.value;
+        const rel = null == (_node_attrs2 = node.attrs) ? void 0 : null == (_node_attrs_find2 = _node_attrs2.find((attr)=>'rel' === attr.name)) ? void 0 : _node_attrs_find2.value;
+        if (!href) return;
+        if (isUrl(href)) return;
         onResourceFound('dns-prefetch' === rel || 'icon' === rel || 'manifest' === rel || 'modulepreload' === rel || 'preconnect' === rel || 'prefetch' === rel || 'preload' === rel || 'prerender' === rel ? {
             filePath: href,
-            childNode,
+            childNode: node,
             assetType: 'staticHref'
         } : {
             filePath: href,
-            childNode,
+            childNode: node,
             assetType: 'css'
         });
-    } else if ('a' === childNode.nodeName || 'area' === childNode.nodeName) {
-        const href = external_parse5_utils_default().getAttribute(childNode, 'href');
-        if (!href) continue;
-        if (isUrl(href)) continue;
+    } else if ('a' === node.nodeName || 'area' === node.nodeName) {
+        var _node_attrs_find3, _node_attrs3;
+        const href = null == (_node_attrs3 = node.attrs) ? void 0 : null == (_node_attrs_find3 = _node_attrs3.find((attr)=>'href' === attr.name)) ? void 0 : _node_attrs_find3.value;
+        if (!href) return;
+        if (isUrl(href)) return;
         onResourceFound({
             filePath: href,
-            childNode,
+            childNode: node,
             assetType: 'staticHref'
         });
-    } else if ('audio' === childNode.nodeName || 'embed' === childNode.nodeName || 'iframe' === childNode.nodeName || 'img' === childNode.nodeName || 'input' === childNode.nodeName || 'source' === childNode.nodeName || 'track' === childNode.nodeName || 'video' === childNode.nodeName) {
-        const src = external_parse5_utils_default().getAttribute(childNode, 'src');
-        if (!src) continue;
-        if (isUrl(src)) continue;
+    } else if ('audio' === node.nodeName || 'embed' === node.nodeName || 'iframe' === node.nodeName || 'img' === node.nodeName || 'input' === node.nodeName || 'source' === node.nodeName || 'track' === node.nodeName || 'video' === node.nodeName) {
+        var _node_attrs_find4, _node_attrs4;
+        const src = null == (_node_attrs4 = node.attrs) ? void 0 : null == (_node_attrs_find4 = _node_attrs4.find((attr)=>'src' === attr.name)) ? void 0 : _node_attrs_find4.value;
+        if (!src) return;
+        if (isUrl(src)) return;
         onResourceFound({
             filePath: src,
-            childNode,
+            childNode: node,
             assetType: 'staticSrc'
         });
-    } else parseHtml(childNode, onResourceFound);
+    }
+    const { childNodes = [] } = node;
+    for (const childNode of childNodes)if ('#comment' !== childNode.nodeName && '#text' !== childNode.nodeName) parseHtml(childNode, onResourceFound);
 }
-function getAssetsFromHtml(htmlFilePath, htmlContent) {
+function getAssetsFromHtml(htmlFilePath, htmlContent, publicPath = 'public') {
     const assets = {
         css: [],
         js: [],
@@ -104,36 +100,33 @@ function getAssetsFromHtml(htmlFilePath, htmlContent) {
     const htmlString = htmlContent || external_fs_namespaceObject.readFileSync(htmlFilePath, {
         encoding: 'utf8'
     });
-    const htmlDocument = external_parse5_utils_default().parse(htmlString);
-    const getAbsolutePath = (htmlFilePath, filePath)=>external_path_namespaceObject.join(external_path_namespaceObject.dirname(htmlFilePath), filePath.startsWith('/') ? external_path_namespaceObject.relative(external_path_namespaceObject.dirname(htmlFilePath), filePath) : filePath);
-    for (const node of htmlDocument.childNodes)if ('html' === node.nodeName) {
-        for (const childNode of node.childNodes)if ('head' === childNode.nodeName || 'body' === childNode.nodeName) parseHtml(childNode, ({ filePath, assetType })=>{
-            const fileAbsolutePath = getAbsolutePath(htmlFilePath, filePath);
-            switch(assetType){
-                case "script":
-                    var _assets_js;
-                    null == (_assets_js = assets.js) || _assets_js.push(fileAbsolutePath);
-                    break;
-                case 'css':
-                    var _assets_css;
-                    null == (_assets_css = assets.css) || _assets_css.push(fileAbsolutePath);
-                    break;
-                case 'staticSrc':
-                case 'staticHref':
-                    var _assets_static;
-                    if (filePath.startsWith('#')) break;
-                    null == (_assets_static = assets.static) || _assets_static.push(fileAbsolutePath);
-                    break;
-                default:
-                    break;
-            }
-        });
-        return {
-            css: assets.css,
-            js: assets.js,
-            static: assets.static
-        };
-    }
+    const htmlDocument = external_parse5_utilities_namespaceObject.parse(htmlString);
+    const getAbsolutePath = (htmlFilePath, filePath)=>{
+        if (filePath.startsWith('/')) return filePath;
+        return external_path_namespaceObject.join(external_path_namespaceObject.dirname(htmlFilePath), filePath);
+    };
+    parseHtml(htmlDocument, ({ filePath, assetType })=>{
+        const fileAbsolutePath = getAbsolutePath(htmlFilePath, filePath);
+        switch(assetType){
+            case "script":
+                var _assets_js;
+                null == (_assets_js = assets.js) || _assets_js.push(fileAbsolutePath);
+                break;
+            case 'css':
+                var _assets_css;
+                null == (_assets_css = assets.css) || _assets_css.push(fileAbsolutePath);
+                break;
+            case 'staticSrc':
+            case 'staticHref':
+                var _assets_static;
+                if (filePath.startsWith('#')) break;
+                null == (_assets_static = assets.static) || _assets_static.push(fileAbsolutePath);
+                break;
+            default:
+                break;
+        }
+    });
+    return assets;
 }
 require("child_process");
 require("package-manager-detector");

package/dist/module.js

@@ -164,7 +164,7 @@ const GECKO_BASED_BROWSERS = [
 ];
 const external_console_namespaceObject = require("console");
 var package_namespaceObject = {
-    i8: "2.0.0-rc.26"
+    i8: "2.0.0-rc.28"
 };
 function getLoggingPrefix(feature, type) {
     if ('error' === type) return `${external_chalk_default().bold(external_chalk_default().red('ERROR'))} in ${feature} ${external_chalk_default().red("\u2716\uFE0E\u2716\uFE0E\u2716\uFE0E")}`;
@@ -307,6 +307,11 @@ function defaultPortInUse(port) {
 function noExtensionIdError() {
     return `${getLoggingPrefix('manifest.json', 'error')} Extension ID Not Defined\n\nFor MAIN world content_scripts, the extension ID must be specified.\nEnsure your extension have a fixed ID and that the ${external_chalk_default().yellow('publicPath')}\nof your ${external_chalk_default().yellow('extension.config.js')} is defined as your extension URL.`;
 }
+function isUsingCustomLoader(file) {
+    const loaderName = file.split('.').shift() || 'custom';
+    const capitalizedLoaderName = loaderName.charAt(0).toUpperCase() + loaderName.slice(1);
+    return `${getLoggingPrefix(capitalizedLoaderName, 'info')} Using custom loader configuration from ${file}`;
+}
 function plugin_compilation_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -1060,6 +1065,27 @@ async function maybeUseReact(projectPath) {
     };
 }
 const external_vue_loader_namespaceObject = require("vue-loader");
+let load_loader_options_userMessageDelivered = false;
+async function loadLoaderOptions(projectPath, framework) {
+    const loaderPath = external_path_namespaceObject.join(projectPath, `${framework}.loader.js`);
+    const moduleLoaderPath = external_path_namespaceObject.join(projectPath, `${framework}.loader.mjs`);
+    if (external_fs_namespaceObject.existsSync(loaderPath) || external_fs_namespaceObject.existsSync(moduleLoaderPath)) {
+        const configPath = external_fs_namespaceObject.existsSync(loaderPath) ? loaderPath : moduleLoaderPath;
+        if (!load_loader_options_userMessageDelivered) {
+            console.log(isUsingCustomLoader(`${framework}.loader.js`));
+            load_loader_options_userMessageDelivered = true;
+        }
+        try {
+            const module = await import(configPath);
+            return module.default || module;
+        } catch (err) {
+            const error = err;
+            console.error(`Error loading ${framework} loader options: ${error.message}`);
+            throw err;
+        }
+    }
+    return null;
+}
 let vue_userMessageDelivered = false;
 function isUsingVue(projectPath) {
     const packageJsonPath = external_path_namespaceObject.join(projectPath, 'package.json');
@@ -1089,23 +1115,27 @@ async function maybeUseVue(projectPath) {
         console.log(youAreAllSet('Vue'));
         process.exit(0);
     }
-    const vueLoaders = [
+    const customOptions = await loadLoaderOptions(projectPath, 'vue');
+    const vueLoaderPath = external_path_namespaceObject.join(projectPath, 'vue.loader.js');
+    if (external_fs_namespaceObject.existsSync(vueLoaderPath)) console.log(isUsingIntegration('vue.loader.js'));
+    const defaultLoaders = [
         {
             test: /\.vue$/,
             loader: require.resolve('vue-loader'),
             options: {
-                experimentalInlineMatchResource: true
+                experimentalInlineMatchResource: true,
+                ...customOptions || {}
             },
             include: projectPath,
             exclude: /node_modules/
         }
     ];
-    const vuePlugins = [
+    const defaultPlugins = [
         new external_vue_loader_namespaceObject.VueLoaderPlugin()
     ];
     return {
-        plugins: vuePlugins,
-        loaders: vueLoaders,
+        plugins: defaultPlugins,
+        loaders: defaultLoaders,
         alias: void 0
     };
 }
@@ -1197,7 +1227,10 @@ async function maybeUseSvelte(projectPath, mode) {
         console.log(youAreAllSet('Svelte'));
         process.exit(0);
     }
-    const svelteLoaders = [
+    const customOptions = await loadLoaderOptions(projectPath, 'svelte');
+    const svelteLoaderPath = external_path_namespaceObject.join(projectPath, 'svelte.loader.js');
+    if (external_fs_namespaceObject.existsSync(svelteLoaderPath)) console.log(isUsingIntegration('svelte.loader.js'));
+    const defaultLoaders = [
         {
             test: /\.svelte\.ts$/,
             use: [
@@ -1216,7 +1249,8 @@ async function maybeUseSvelte(projectPath, mode) {
                         dev: 'development' === mode,
                         css: 'injected'
                     },
-                    hotReload: 'development' === mode
+                    hotReload: 'development' === mode,
+                    ...customOptions || {}
                 }
             },
             include: projectPath,
@@ -1231,7 +1265,7 @@ async function maybeUseSvelte(projectPath, mode) {
     ];
     return {
         plugins: void 0,
-        loaders: svelteLoaders,
+        loaders: defaultLoaders,
         alias: void 0
     };
 }
@@ -2239,8 +2273,7 @@ class ManifestPlugin {
         this.excludeList = options.excludeList;
     }
 }
-const external_parse5_utils_namespaceObject = require("parse5-utils");
-var external_parse5_utils_default = /*#__PURE__*/ __webpack_require__.n(external_parse5_utils_namespaceObject);
+const external_parse5_utilities_namespaceObject = require("parse5-utilities");
 function isUrl(src) {
     try {
         new URL(src);
@@ -2250,51 +2283,57 @@ function isUrl(src) {
     }
 }
 function parseHtml(node, onResourceFound) {
-    const { childNodes = [] } = node;
-    for (const childNode of childNodes)if ("script" === childNode.nodeName) {
-        const src = external_parse5_utils_default().getAttribute(childNode, 'src');
-        if (!src) continue;
-        if (isUrl(src)) continue;
+    if ('#comment' === node.nodeName || '#text' === node.nodeName) return;
+    if ("script" === node.nodeName) {
+        var _node_attrs_find, _node_attrs;
+        const src = null == (_node_attrs = node.attrs) ? void 0 : null == (_node_attrs_find = _node_attrs.find((attr)=>'src' === attr.name)) ? void 0 : _node_attrs_find.value;
+        if (!src) return;
+        if (isUrl(src)) return;
         onResourceFound({
             filePath: src,
-            childNode,
+            childNode: node,
             assetType: "script"
         });
-    } else if ('link' === childNode.nodeName) {
-        const href = external_parse5_utils_default().getAttribute(childNode, 'href');
-        const rel = external_parse5_utils_default().getAttribute(childNode, 'rel');
-        if (!href) continue;
-        if (isUrl(href)) continue;
+    } else if ('link' === node.nodeName) {
+        var _node_attrs_find1, _node_attrs1, _node_attrs_find2, _node_attrs2;
+        const href = null == (_node_attrs1 = node.attrs) ? void 0 : null == (_node_attrs_find1 = _node_attrs1.find((attr)=>'href' === attr.name)) ? void 0 : _node_attrs_find1.value;
+        const rel = null == (_node_attrs2 = node.attrs) ? void 0 : null == (_node_attrs_find2 = _node_attrs2.find((attr)=>'rel' === attr.name)) ? void 0 : _node_attrs_find2.value;
+        if (!href) return;
+        if (isUrl(href)) return;
         onResourceFound('dns-prefetch' === rel || 'icon' === rel || 'manifest' === rel || 'modulepreload' === rel || 'preconnect' === rel || 'prefetch' === rel || 'preload' === rel || 'prerender' === rel ? {
             filePath: href,
-            childNode,
+            childNode: node,
             assetType: 'staticHref'
         } : {
             filePath: href,
-            childNode,
+            childNode: node,
             assetType: 'css'
         });
-    } else if ('a' === childNode.nodeName || 'area' === childNode.nodeName) {
-        const href = external_parse5_utils_default().getAttribute(childNode, 'href');
-        if (!href) continue;
-        if (isUrl(href)) continue;
+    } else if ('a' === node.nodeName || 'area' === node.nodeName) {
+        var _node_attrs_find3, _node_attrs3;
+        const href = null == (_node_attrs3 = node.attrs) ? void 0 : null == (_node_attrs_find3 = _node_attrs3.find((attr)=>'href' === attr.name)) ? void 0 : _node_attrs_find3.value;
+        if (!href) return;
+        if (isUrl(href)) return;
         onResourceFound({
             filePath: href,
-            childNode,
+            childNode: node,
             assetType: 'staticHref'
         });
-    } else if ('audio' === childNode.nodeName || 'embed' === childNode.nodeName || 'iframe' === childNode.nodeName || 'img' === childNode.nodeName || 'input' === childNode.nodeName || 'source' === childNode.nodeName || 'track' === childNode.nodeName || 'video' === childNode.nodeName) {
-        const src = external_parse5_utils_default().getAttribute(childNode, 'src');
-        if (!src) continue;
-        if (isUrl(src)) continue;
+    } else if ('audio' === node.nodeName || 'embed' === node.nodeName || 'iframe' === node.nodeName || 'img' === node.nodeName || 'input' === node.nodeName || 'source' === node.nodeName || 'track' === node.nodeName || 'video' === node.nodeName) {
+        var _node_attrs_find4, _node_attrs4;
+        const src = null == (_node_attrs4 = node.attrs) ? void 0 : null == (_node_attrs_find4 = _node_attrs4.find((attr)=>'src' === attr.name)) ? void 0 : _node_attrs_find4.value;
+        if (!src) return;
+        if (isUrl(src)) return;
         onResourceFound({
             filePath: src,
-            childNode,
+            childNode: node,
             assetType: 'staticSrc'
         });
-    } else parseHtml(childNode, onResourceFound);
+    }
+    const { childNodes = [] } = node;
+    for (const childNode of childNodes)if ('#comment' !== childNode.nodeName && '#text' !== childNode.nodeName) parseHtml(childNode, onResourceFound);
 }
-function getAssetsFromHtml(htmlFilePath, htmlContent) {
+function getAssetsFromHtml(htmlFilePath, htmlContent, publicPath = 'public') {
     const assets = {
         css: [],
         js: [],
@@ -2304,36 +2343,33 @@ function getAssetsFromHtml(htmlFilePath, htmlContent) {
     const htmlString = htmlContent || external_fs_namespaceObject.readFileSync(htmlFilePath, {
         encoding: 'utf8'
     });
-    const htmlDocument = external_parse5_utils_default().parse(htmlString);
-    const getAbsolutePath = (htmlFilePath, filePath)=>external_path_namespaceObject.join(external_path_namespaceObject.dirname(htmlFilePath), filePath.startsWith('/') ? external_path_namespaceObject.relative(external_path_namespaceObject.dirname(htmlFilePath), filePath) : filePath);
-    for (const node of htmlDocument.childNodes)if ('html' === node.nodeName) {
-        for (const childNode of node.childNodes)if ('head' === childNode.nodeName || 'body' === childNode.nodeName) parseHtml(childNode, ({ filePath, assetType })=>{
-            const fileAbsolutePath = getAbsolutePath(htmlFilePath, filePath);
-            switch(assetType){
-                case "script":
-                    var _assets_js;
-                    null == (_assets_js = assets.js) || _assets_js.push(fileAbsolutePath);
-                    break;
-                case 'css':
-                    var _assets_css;
-                    null == (_assets_css = assets.css) || _assets_css.push(fileAbsolutePath);
-                    break;
-                case 'staticSrc':
-                case 'staticHref':
-                    var _assets_static;
-                    if (filePath.startsWith('#')) break;
-                    null == (_assets_static = assets.static) || _assets_static.push(fileAbsolutePath);
-                    break;
-                default:
-                    break;
-            }
-        });
-        return {
-            css: assets.css,
-            js: assets.js,
-            static: assets.static
-        };
-    }
+    const htmlDocument = external_parse5_utilities_namespaceObject.parse(htmlString);
+    const getAbsolutePath = (htmlFilePath, filePath)=>{
+        if (filePath.startsWith('/')) return filePath;
+        return external_path_namespaceObject.join(external_path_namespaceObject.dirname(htmlFilePath), filePath);
+    };
+    parseHtml(htmlDocument, ({ filePath, assetType })=>{
+        const fileAbsolutePath = getAbsolutePath(htmlFilePath, filePath);
+        switch(assetType){
+            case "script":
+                var _assets_js;
+                null == (_assets_js = assets.js) || _assets_js.push(fileAbsolutePath);
+                break;
+            case 'css':
+                var _assets_css;
+                null == (_assets_css = assets.css) || _assets_css.push(fileAbsolutePath);
+                break;
+            case 'staticSrc':
+            case 'staticHref':
+                var _assets_static;
+                if (filePath.startsWith('#')) break;
+                null == (_assets_static = assets.static) || _assets_static.push(fileAbsolutePath);
+                break;
+            default:
+                break;
+        }
+    });
+    return assets;
 }
 function getHtmlPageDeclaredAssetPath(filepathList, filePath, extension) {
     const entryname = Object.keys(filepathList).find((key)=>{
@@ -2346,26 +2382,11 @@ function getHtmlPageDeclaredAssetPath(filepathList, filePath, extension) {
     return `/${entryname.replace(extname, '')}${extension}`;
 }
 function getExtname(filePath) {
-    const extname = external_path_namespaceObject.extname(filePath);
-    switch(extname){
-        case '.js':
-        case '.mjs':
-        case '.ts':
-        case '.tsx':
-            return '.js';
-        case '.css':
-        case '.scss':
-        case '.sass':
-        case '.less':
-            return '.css';
-        case '.html':
-            return '.html';
-        default:
-            return '.js';
-    }
+    return external_path_namespaceObject.extname(filePath);
 }
-function getFilePath(outputname, extension, isAbsolute) {
-    return isAbsolute ? `/${outputname}${extension}` : `${outputname}${extension}`;
+function getFilePath(filePath, extension, isPublic) {
+    if (isPublic) return `/${filePath}${extension}`;
+    return `${filePath}${extension}`;
 }
 function isFromIncludeList(filePath, includeList) {
     return Object.values(includeList || {}).some((value)=>value === filePath);
@@ -2402,7 +2423,7 @@ class EmitHtmlFile {
                         const rawHtml = external_fs_namespaceObject.readFileSync(resource, 'utf8');
                         if (!shouldExclude(resource, this.excludeList)) {
                             const rawSource = new core_namespaceObject.sources.RawSource(rawHtml);
-                            const filepath = getFilePath(featureName, '.html');
+                            const filepath = getFilePath(featureName, '.html', false);
                             compilation.emitAsset(filepath, rawSource);
                         }
                     }
@@ -2434,15 +2455,14 @@ class AddAssetsToCompilation {
         compiler.hooks.thisCompilation.tap('html:add-assets-to-compilation', (compilation)=>{
             compilation.hooks.processAssets.tap({
                 name: 'html:add-assets-to-compilation',
-                stage: core_namespaceObject.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+                stage: core_namespaceObject.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
             }, ()=>{
                 if (compilation.errors.length > 0) return;
-                const htmlFields = Object.entries(this.includeList || {});
-                for (const field of htmlFields){
-                    const [feature, resource] = field;
-                    const featureWithHtml = feature + '.html';
+                const allEntries = this.includeList || {};
+                for (const field of Object.entries(allEntries)){
+                    const [, resource] = field;
                     if (resource) {
-                        const compilationAsset = compilation.getAsset(featureWithHtml);
+                        const compilationAsset = compilation.getAsset(external_path_namespaceObject.basename(resource));
                         if (compilationAsset) {
                             var _getAssetsFromHtml;
                             const htmlSource = compilationAsset.source.source().toString();
@@ -2450,35 +2470,41 @@ class AddAssetsToCompilation {
                             const fileAssets = [
                                 ...new Set(staticAssets)
                             ];
-                            for (const asset of fileAssets)if (!asset.startsWith('/')) {
-                                if (!external_fs_namespaceObject.existsSync(asset)) {
+                            for (const asset of fileAssets){
+                                const isPublicPath = asset.startsWith('/');
+                                const assetPath = isPublicPath ? external_path_namespaceObject.posix.join('public', asset.slice(1)) : asset;
+                                if (!external_fs_namespaceObject.existsSync(assetPath)) {
                                     const FilepathListEntry = isFromIncludeList(asset, this.includeList);
                                     if (!FilepathListEntry) {
                                         if (!external_path_namespaceObject.basename(asset).startsWith('#')) {
                                             const errorMessage = fileNotFound(resource, asset);
-                                            if (!asset.startsWith('/')) compilation.warnings.push(new (core_default()).WebpackError(errorMessage));
+                                            compilation.warnings.push(new (core_default()).WebpackError(errorMessage));
                                             return;
                                         }
                                     }
                                 }
-                                const source = external_fs_namespaceObject.readFileSync(asset);
+                                const source = external_fs_namespaceObject.readFileSync(assetPath);
                                 const rawSource = new core_namespaceObject.sources.RawSource(source);
-                                const filepath = external_path_namespaceObject.join('assets', external_path_namespaceObject.basename(asset));
-                                if (!compilation.getAsset(filepath)) if (asset.endsWith('.html')) {
-                                    const htmlAssets = getAssetsFromHtml(asset);
-                                    const assetsFromHtml = [
-                                        ...(null == htmlAssets ? void 0 : htmlAssets.js) || [],
-                                        ...(null == htmlAssets ? void 0 : htmlAssets.css) || [],
-                                        ...(null == htmlAssets ? void 0 : htmlAssets.static) || []
-                                    ];
-                                    compilation.emitAsset(filepath, rawSource);
-                                    assetsFromHtml.forEach((assetFromHtml)=>{
-                                        const source = external_fs_namespaceObject.readFileSync(assetFromHtml);
-                                        const rawSource = new core_namespaceObject.sources.RawSource(source);
-                                        const filepath = external_path_namespaceObject.join('assets', external_path_namespaceObject.basename(assetFromHtml));
-                                        if (!compilation.getAsset(filepath)) compilation.emitAsset(filepath, rawSource);
-                                    });
-                                } else compilation.emitAsset(filepath, rawSource);
+                                const filepath = isPublicPath ? asset.slice(1) : external_path_namespaceObject.join('assets', external_path_namespaceObject.basename(asset));
+                                const isNestedHtml = asset.endsWith('.html');
+                                const nestedHtmlAsset = isNestedHtml ? compilation.getAsset(external_path_namespaceObject.basename(asset)) : null;
+                                if (!isFromIncludeList(asset, this.includeList) || nestedHtmlAsset) {
+                                    if (!compilation.getAsset(filepath)) if (asset.endsWith('.html')) {
+                                        const htmlAssets = getAssetsFromHtml(assetPath);
+                                        const assetsFromHtml = [
+                                            ...(null == htmlAssets ? void 0 : htmlAssets.js) || [],
+                                            ...(null == htmlAssets ? void 0 : htmlAssets.css) || [],
+                                            ...(null == htmlAssets ? void 0 : htmlAssets.static) || []
+                                        ];
+                                        compilation.emitAsset(filepath, rawSource);
+                                        assetsFromHtml.forEach((assetFromHtml)=>{
+                                            const source = external_fs_namespaceObject.readFileSync(assetFromHtml);
+                                            const rawSource = new core_namespaceObject.sources.RawSource(source);
+                                            const assetFilepath = external_path_namespaceObject.join('assets', external_path_namespaceObject.basename(assetFromHtml));
+                                            if (!compilation.getAsset(assetFilepath)) compilation.emitAsset(assetFilepath, rawSource);
+                                        });
+                                    } else compilation.emitAsset(filepath, rawSource);
+                                }
                             }
                         }
                     }
@@ -2489,8 +2515,10 @@ class AddAssetsToCompilation {
     constructor(options){
         add_assets_to_compilation_define_property(this, "manifestPath", void 0);
         add_assets_to_compilation_define_property(this, "includeList", void 0);
+        add_assets_to_compilation_define_property(this, "excludeList", void 0);
         this.manifestPath = options.manifestPath;
         this.includeList = options.includeList;
+        this.excludeList = options.excludeList;
     }
 }
 function add_scripts_and_styles_to_compilation_define_property(obj, key, value) {
@@ -2545,7 +2573,7 @@ function patchHtml(compilation, feature, htmlEntry, includeList, excludeList) {
     const htmlFile = external_fs_namespaceObject.readFileSync(htmlEntry, {
         encoding: 'utf8'
     });
-    const htmlDocument = external_parse5_utils_default().parse(htmlFile);
+    const htmlDocument = external_parse5_utilities_namespaceObject.parse(htmlFile);
     let hasCssEntry = !!compilation.getAsset(feature + '.css');
     let hasJsEntry = false;
     for (let node of htmlDocument.childNodes)if ('html' === node.nodeName) {
@@ -2557,30 +2585,32 @@ function patchHtml(compilation, feature, htmlEntry, includeList, excludeList) {
                 const isExcludedPath = shouldExclude(external_path_namespaceObject.resolve(htmlDir, filePath), excludeList);
                 const excludedFilePath = external_path_namespaceObject.join('/', external_path_namespaceObject.normalize(filePath));
                 const isFilepathListEntry = isFromFilepathList(absolutePath, includeList);
+                let thisChildNode = childNode;
                 switch(assetType){
                     case "script":
-                        if (isExcludedPath) node = external_parse5_utils_default().setAttribute(childNode, 'src', excludedFilePath);
+                        if (isExcludedPath) thisChildNode = external_parse5_utilities_namespaceObject.setAttribute(thisChildNode, 'src', excludedFilePath);
                         else {
-                            node = external_parse5_utils_default().remove(childNode);
+                            thisChildNode = external_parse5_utilities_namespaceObject.remove(thisChildNode);
                             hasJsEntry = true;
                         }
                         break;
                     case 'css':
-                        if (isExcludedPath) node = external_parse5_utils_default().setAttribute(childNode, 'href', excludedFilePath);
+                        if (isExcludedPath) thisChildNode = external_parse5_utilities_namespaceObject.setAttribute(thisChildNode, 'href', excludedFilePath);
                         else {
-                            node = external_parse5_utils_default().remove(childNode);
+                            thisChildNode = external_parse5_utilities_namespaceObject.remove(thisChildNode);
                             hasCssEntry = true;
                         }
                         break;
                     case 'staticHref':
                     case 'staticSrc':
-                        if (isExcludedPath) node = external_parse5_utils_default().setAttribute(childNode, 'staticSrc' === assetType ? 'src' : 'href', excludedFilePath);
+                        if (isExcludedPath) thisChildNode = external_parse5_utilities_namespaceObject.setAttribute(thisChildNode, 'staticSrc' === assetType ? 'src' : 'href', excludedFilePath);
                         else if (isFilepathListEntry) {
                             const filepath = getHtmlPageDeclaredAssetPath(includeList, absolutePath, extname);
-                            node = external_parse5_utils_default().setAttribute(childNode, 'staticSrc' === assetType ? 'src' : 'href', filepath);
-                        } else {
+                            thisChildNode = external_parse5_utilities_namespaceObject.setAttribute(thisChildNode, 'staticSrc' === assetType ? 'src' : 'href', filepath);
+                        } else if (filePath.startsWith('/')) thisChildNode = external_parse5_utilities_namespaceObject.setAttribute(thisChildNode, 'staticSrc' === assetType ? 'src' : 'href', filePath);
+                        else {
                             const filepath = external_path_namespaceObject.join('assets', external_path_namespaceObject.basename(absolutePath, extname));
-                            if (external_fs_namespaceObject.existsSync(absolutePath)) node = external_parse5_utils_default().setAttribute(childNode, 'staticSrc' === assetType ? 'src' : 'href', getFilePath(filepath, '', true));
+                            if (external_fs_namespaceObject.existsSync(absolutePath)) thisChildNode = external_parse5_utilities_namespaceObject.setAttribute(thisChildNode, 'staticSrc' === assetType ? 'src' : 'href', getFilePath(filepath, '', true));
                         }
                         break;
                     default:
@@ -2589,7 +2619,7 @@ function patchHtml(compilation, feature, htmlEntry, includeList, excludeList) {
             });
             if ('head' === htmlChildNode.nodeName) {
                 if (hasCssEntry) {
-                    const linkTag = external_parse5_utils_default().createNode('link');
+                    const linkTag = external_parse5_utilities_namespaceObject.createNode('link');
                     linkTag.attrs = [
                         {
                             name: 'rel',
@@ -2600,24 +2630,25 @@ function patchHtml(compilation, feature, htmlEntry, includeList, excludeList) {
                             value: getFilePath(feature, '.css', true)
                         }
                     ];
-                    external_parse5_utils_default().append(htmlChildNode, linkTag);
+                    external_parse5_utilities_namespaceObject.append(htmlChildNode, linkTag);
                 }
             }
             if ('body' === htmlChildNode.nodeName) {
                 if (hasJsEntry || 'production' !== compilation.options.mode) {
-                    const scriptTag = external_parse5_utils_default().createNode("script");
+                    const scriptTag = external_parse5_utilities_namespaceObject.createNode("script");
                     scriptTag.attrs = [
                         {
                             name: 'src',
                             value: getFilePath(feature, '.js', true)
                         }
                     ];
-                    external_parse5_utils_default().append(htmlChildNode, scriptTag);
+                    external_parse5_utilities_namespaceObject.append(htmlChildNode, scriptTag);
                 }
             }
         }
-        return external_parse5_utils_default().serialize(htmlDocument);
+        return external_parse5_utilities_namespaceObject.stringify(htmlDocument);
     }
+    return '';
 }
 function update_html_file_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
@@ -2644,8 +2675,8 @@ class UpdateHtmlFile {
                         const updatedHtml = patchHtml(compilation, feature, resource, htmlEntries, this.excludeList || {});
                         if (!shouldExclude(resource, this.excludeList)) {
                             if (updatedHtml) {
-                                const rawSource = new core_namespaceObject.sources.RawSource(updatedHtml);
-                                const filepath = getFilePath(feature, '.html');
+                                const rawSource = new core_namespaceObject.sources.RawSource(updatedHtml.toString());
+                                const filepath = getFilePath(feature, '.html', false);
                                 compilation.updateAsset(filepath, rawSource);
                             }
                         }
@@ -3977,13 +4008,24 @@ function SetupFirefoxReloadClient(compiler, browser, manifestPath) {
 const external_content_security_policy_parser_namespaceObject = require("content-security-policy-parser");
 var external_content_security_policy_parser_default = /*#__PURE__*/ __webpack_require__.n(external_content_security_policy_parser_namespaceObject);
 function buildCSP(cspObject) {
-    let policy = '';
-    for(const directive in cspObject)policy += `${directive} ${cspObject[directive].join(' ')}; `;
-    return policy.trim();
+    const directives = Object.entries(cspObject).map(([directive, values])=>`${directive} ${values.join(' ')}`);
+    return directives.join('; ') + '; ';
 }
 function patchV2CSP(manifest) {
     let policy = manifest.content_security_policy;
-    if (!policy) return "script-src 'self' 'unsafe-eval' blob: filesystem:; object-src 'self' blob: filesystem:; ";
+    if (!policy) return buildCSP({
+        "script-src": [
+            "'self'",
+            "'unsafe-eval'",
+            'blob:',
+            'filesystem:'
+        ],
+        'object-src': [
+            "'self'",
+            'blob:',
+            'filesystem:'
+        ]
+    });
     const csp = external_content_security_policy_parser_default()(policy);
     if (csp.get("script-src")) {
         const scriptSrc = csp.get("script-src") || [];
@@ -3997,7 +4039,12 @@ function patchV2CSP(manifest) {
         'blob:',
         'filesystem:'
     ]);
-    if (!csp.get('object-src')) csp.set('object-src', [
+    if (csp.get('object-src')) {
+        const objectSrc = csp.get('object-src') || [];
+        if (!objectSrc.includes('blob:')) objectSrc.push('blob:');
+        if (!objectSrc.includes('filesystem:')) objectSrc.push('filesystem:');
+        csp.set('object-src', objectSrc);
+    } else csp.set('object-src', [
         "'self'",
         'blob:',
         'filesystem:'
@@ -4008,7 +4055,14 @@ function patchV2CSP(manifest) {
 function patchV3CSP(manifest) {
     const policy = manifest.content_security_policy;
     if (!policy) return {
-        extension_pages: "script-src 'self'; object-src 'self';"
+        extension_pages: buildCSP({
+            "script-src": [
+                "'self'"
+            ],
+            'object-src': [
+                "'self'"
+            ]
+        })
     };
     const csp = external_content_security_policy_parser_default()(policy.extension_pages || '');
     const defaultDirectives = {
@@ -4687,7 +4741,8 @@ const DEFAULT_BROWSER_FLAGS = [
     '--disable-features=OptimizationHints',
     '--disable-features=DialMediaRouteProvider',
     '--no-pings',
-    '--enable-features=SidePanelUpdates'
+    '--enable-features=SidePanelUpdates',
+    '--disable-features=DisableLoadExtensionCommandLineSwitch'
 ];
 function browser_config_browserConfig(configOptions) {
     const extensionsToLoad = Array.isArray(configOptions.extension) ? configOptions.extension : [
@@ -4857,8 +4912,7 @@ function commands_lib_messages_getLoggingPrefix(type) {
 function messages_manifestNotFoundError(manifestPath) {
     return `${commands_lib_messages_getLoggingPrefix('error')} Manifest file not found.\n\nEnsure the path to your extension exists and try again.\n${external_chalk_default().red('NOT FOUND')} ${external_chalk_default().underline(manifestPath)}`;
 }
-function runningInProduction(projectDir) {
-    const outputPath = external_path_namespaceObject.join(projectDir, 'dist');
+function runningInProduction(outputPath) {
     const manifestPath = external_path_namespaceObject.join(outputPath, 'manifest.json');
     const manifest = JSON.parse(external_fs_namespaceObject.readFileSync(manifestPath, 'utf-8'));
     const { name, version, hostPermissions, permissions } = manifest;
@@ -4995,6 +5049,9 @@ function installingDependenciesFailed(gitCommand, gitArgs, code) {
 function cantInstallDependencies(error) {
     return `${commands_lib_messages_getLoggingPrefix('error')} Can't install project dependencies. ${external_chalk_default().red(error.message || error.toString())}`;
 }
+function portInUse(requestedPort, newPort) {
+    return `${commands_lib_messages_getLoggingPrefix('warn')} Port ${external_chalk_default().yellow(requestedPort.toString())} is in use. Using port ${external_chalk_default().green(newPort.toString())} instead.`;
+}
 async function loadConfigFile(configPath) {
     const absolutePath = external_path_namespaceObject.resolve(configPath);
     try {
@@ -5998,6 +6055,24 @@ async function extensionBuild(pathOrRemoteUrl, buildOptions) {
     }
 }
 const dev_server_namespaceObject = require("@rspack/dev-server");
+function isPortInUse(port) {
+    return new Promise((resolve)=>{
+        const server = external_net_namespaceObject.createServer();
+        server.once('error', ()=>{
+            resolve(true);
+        });
+        server.once('listening', ()=>{
+            server.close();
+            resolve(false);
+        });
+        server.listen(port);
+    });
+}
+async function findAvailablePort(startPort) {
+    let port = startPort;
+    while(await isPortInUse(port))port++;
+    return port;
+}
 function closeAll(devServer) {
     devServer.stop().then(()=>{
         process.exit();
@@ -6014,13 +6089,21 @@ async function dev_server_devServer(projectPath, devOptions) {
         ...browserConfig,
         mode: 'development',
         output: {
-            clean: true
+            clean: false
         }
     });
     const customWebpackConfig = await loadCustomWebpackConfig(projectPath);
     const finalConfig = customWebpackConfig(baseConfig);
     const compilerConfig = (0, external_webpack_merge_namespaceObject.merge)(finalConfig);
     const compiler = (0, core_namespaceObject.rspack)(compilerConfig);
+    let port = devOptions.port || 'auto';
+    if ('number' == typeof port) {
+        if (await isPortInUse(port)) {
+            const newPort = await findAvailablePort(port + 1);
+            console.log(portInUse(port, newPort));
+            port = newPort;
+        }
+    }
     const serverConfig = {
         host: '127.0.0.1',
         allowedHosts: 'all',
@@ -6050,12 +6133,30 @@ async function dev_server_devServer(projectPath, devOptions) {
         headers: {
             'Access-Control-Allow-Origin': '*'
         },
-        port: devOptions.port || 'auto',
-        hot: true
+        port,
+        hot: true,
+        webSocketServer: {
+            type: 'ws',
+            options: {
+                port: 'number' == typeof port ? port : void 0
+            }
+        }
     };
     const devServer = new dev_server_namespaceObject.RspackDevServer(serverConfig, compiler);
+    if ('number' == typeof port) {
+        var _compiler_options_plugins;
+        null == (_compiler_options_plugins = compiler.options.plugins) || _compiler_options_plugins.forEach((plugin)=>{
+            if (plugin && 'object' == typeof plugin && 'constructor' in plugin && 'ReloadPlugin' === plugin.constructor.name) plugin.port = port;
+        });
+    }
     devServer.startCallback((error)=>{
-        if (null != error) console.log(`Error in the Extension.js runner: ${error.stack || ''}`);
+        if (null != error) {
+            if ('EADDRINUSE' === error.code) {
+                console.log(portInUse(port, port + 1));
+                process.exit(1);
+            }
+            console.log(`Error in the Extension.js runner: ${error.stack || ''}`);
+        }
     });
     process.on('ERROR', ()=>{
         closeAll(devServer);
@@ -6159,7 +6260,7 @@ async function extensionPreview(pathOrRemoteUrl, previewOptions) {
                     colors: true
                 }));
                 process.exit(1);
-            } else console.log(runningInProduction(projectPath));
+            } else console.log(runningInProduction(external_path_namespaceObject.join(projectPath, 'dist', browser)));
         });
     } catch (error) {
         if ('development' === process.env.EXTENSION_ENV) console.error(error);

package/dist/webpack/lib/messages.d.ts

@@ -52,3 +52,4 @@ export declare function certRequired(): string;
 export declare function defaultPortInUse(port: number): string;
 export declare function noExtensionIdError(): string;
 export declare function deprecatedShadowRoot(): string;
+export declare function isUsingCustomLoader(file: string): string;

package/dist/webpack/plugin-extension/feature-html/__spec__/html-lib/test-utils.d.ts

@@ -0,0 +1,18 @@
+export interface HtmlNode {
+    nodeName: string;
+    attrs: Array<{
+        name: string;
+        value: string;
+    }>;
+    childNodes: HtmlNode[];
+    value?: string;
+    data?: string;
+}
+export declare function createHtmlNode(options: Partial<HtmlNode>): HtmlNode;
+export declare function createHtmlDocument(childNodes: HtmlNode[]): HtmlNode;
+export declare function createScriptNode(src: string): HtmlNode;
+export declare function createLinkNode(href: string, rel?: string): HtmlNode;
+export declare function createImageNode(src: string): HtmlNode;
+export declare function createAnchorNode(href: string): HtmlNode;
+export declare function createCommentNode(text: string): HtmlNode;
+export declare function createTextNode(text: string): HtmlNode;

package/dist/webpack/plugin-extension/feature-html/html-lib/parse-html.d.ts

@@ -1,7 +1,8 @@
+import * as parse5utilities from 'parse5-utilities';
 interface OnResourceFoundOptions {
     filePath: string;
-    childNode: any;
+    childNode: ReturnType<typeof parse5utilities.createNode>;
     assetType: 'script' | 'css' | 'staticSrc' | 'staticHref';
 }
-export declare function parseHtml(node: any, onResourceFound: (options: OnResourceFoundOptions) => void): void;
+export declare function parseHtml(node: ReturnType<typeof parse5utilities.createNode>, onResourceFound: (options: OnResourceFoundOptions) => void): void;
 export {};

package/dist/webpack/plugin-extension/feature-html/html-lib/patch-html.d.ts

@@ -1,3 +1,3 @@
 import { type Compilation } from '@rspack/core';
 import { type FilepathList } from '../../../webpack-types';
-export declare function patchHtml(compilation: Compilation, feature: string, htmlEntry: string, includeList: FilepathList, excludeList: FilepathList): any;
+export declare function patchHtml(compilation: Compilation, feature: string, htmlEntry: string, includeList: FilepathList, excludeList: FilepathList): string;

package/dist/webpack/plugin-extension/feature-html/html-lib/utils.d.ts

@@ -4,8 +4,8 @@ export interface ParsedHtmlAsset {
     js?: string[];
     static?: string[];
 }
-export declare function getAssetsFromHtml(htmlFilePath: string | undefined, htmlContent?: string): ParsedHtmlAsset | undefined;
+export declare function getAssetsFromHtml(htmlFilePath: string | undefined, htmlContent?: string, publicPath?: string): ParsedHtmlAsset;
 export declare function getHtmlPageDeclaredAssetPath(filepathList: FilepathList, filePath: string, extension: string): string;
-export declare function getExtname(filePath: string): ".html" | ".js" | ".css";
-export declare function getFilePath(outputname: string, extension: string, isAbsolute?: boolean): string;
+export declare function getExtname(filePath: string): string;
+export declare function getFilePath(filePath: string, extension: string, isPublic: boolean): string;
 export declare function isFromIncludeList(filePath: string, includeList?: FilepathList): boolean;

package/dist/webpack/plugin-extension/feature-html/steps/add-assets-to-compilation.d.ts

@@ -3,6 +3,7 @@ import { type FilepathList, type PluginInterface } from '../../../webpack-types'
 export declare class AddAssetsToCompilation {
     readonly manifestPath: string;
     readonly includeList?: FilepathList;
+    readonly excludeList?: FilepathList;
     constructor(options: PluginInterface);
     apply(compiler: Compiler): void;
 }

package/dist/webpack/plugin-js-frameworks/load-loader-options.d.ts

@@ -0,0 +1 @@
+export declare function loadLoaderOptions(projectPath: string, framework: 'vue' | 'svelte'): Promise<any>;

package/package.json

@@ -21,7 +21,7 @@
     "dist"
   ],
   "name": "extension-develop",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.28",
   "description": "The develop step of Extension.js",
   "author": {
     "name": "Cezar Augusto",
@@ -49,13 +49,13 @@
     "firefox-location2": "1.0.0",
     "firefox-profile": "^4.7.0",
     "fx-runner": "^1.4.0",
-    "go-git-it": "4.0.0-1",
+    "go-git-it": "4.0.0",
     "ignore": "^6.0.2",
     "loader-utils": "^3.3.1",
     "micromatch": "^4.0.8",
     "package-manager-detector": "^0.2.7",
     "parse5": "^7.2.1",
-    "parse5-utils": "^2.0.0",
+    "parse5-utilities": "^1.0.0",
     "postcss": "^8.4.49",
     "preact": "^10.22.0",
     "progress": "^2.0.3",