diff --git a/programs/develop/webpack/plugin-extension/feature-manifest/steps/update-manifest.ts b/programs/develop/webpack/plugin-extension/feature-manifest/steps/update-manifest.ts index 01f9a45f..f69a1c86 100644 --- a/programs/develop/webpack/plugin-extension/feature-manifest/steps/update-manifest.ts +++ b/programs/develop/webpack/plugin-extension/feature-manifest/steps/update-manifest.ts @@ -1,4 +1,5 @@ import path from 'path' +import fs from 'fs' import {type Compiler, Compilation, sources} from 'webpack' import {getManifestOverrides} from '../manifest-overrides' import {getFilename, getManifestContent} from '../../../lib/utils' @@ -43,16 +44,20 @@ export class UpdateManifest { (contentObj: {js: string[]; css: string[]}, index: number) => { if (contentObj.js.length && !contentObj.css.length) { const outputPath = compiler.options.output?.path || '' - - // Make a .css file for every .js file in content_scripts - // so we can later reference it in the manifest. - contentObj.css = contentObj.js.map((js: string) => { - const contentCss = path.join(outputPath, js.replace('.js', '.css')) - return getFilename( - `content_scripts/content-${index}.css`, - contentCss, - {} - ) + const contentScriptsPath = path.join(outputPath, 'content_scripts') + + // Iterate over the content_scripts output path and for every css file found, + // create a .css file entry so we can later reference it in the manifest. + fs.readdirSync(contentScriptsPath).forEach((file) => { + if (file.endsWith('.css')) { + contentObj.css.push( + getFilename( + `content_scripts/content-${index}.css`, + path.join(contentScriptsPath, file), + {} + ) + ) + } }) } @@ -97,16 +102,6 @@ export class UpdateManifest { } } - // During production, webpack styles are bundled in a CSS file, - // and not injected in the page via