Fix content_scripts declaration adding extraneous css

extension-js · Oct 25, 2024 · dd12f05 · dd12f05
1 parent 96a41cc
commit dd12f05
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 42 deletions.
diff --git a/programs/develop/build.spec.ts b/programs/develop/build.spec.ts
@@ -5,7 +5,7 @@ import {
   DEFAULT_TEMPLATE,
   SUPPORTED_BROWSERS
 } from '../../examples/data'
-import {extensionBuild} from './dist/module'
+import {extensionBuild, Manifest} from './dist/module'
 
 async function removeDir(dirPath: string) {
   if (fs.existsSync(dirPath)) {
@@ -86,11 +86,55 @@ describe('extension build', () => {
           browser: SUPPORTED_BROWSERS[0] as 'chrome'
         })
 
-        expect.assertions(1)
-
         expect(
-          path.join(templatePath, SUPPORTED_BROWSERS[0], 'manifest.json')
+          path.join(
+            templatePath,
+            'dist',
+            SUPPORTED_BROWSERS[0],
+            'manifest.json'
+          )
         ).toBeTruthy()
+
+        const manifestText = fs.readFileSync(
+          path.join(
+            templatePath,
+            'dist',
+            SUPPORTED_BROWSERS[0],
+            'manifest.json'
+          ),
+          'utf-8'
+        )
+
+        const manifest: Manifest = JSON.parse(manifestText)
+        expect(manifest.name).toBeTruthy
+        expect(manifest.version).toBeTruthy
+        expect(manifest.manifest_version).toBeTruthy
+
+        if (template.name.includes('content')) {
+          expect(manifest.content_scripts![0].js![0]).toEqual(
+            'content_scripts/content-0.js'
+          )
+          expect(manifest.content_scripts![0].css![0]).toEqual(
+            'content_scripts/content-0.css'
+          )
+
+          expect(
+            distFileExists(
+              template.name,
+              'dist',
+              SUPPORTED_BROWSERS[0],
+              'content_scripts/content-0.css'
+            )
+          ).toBeTruthy()
+          expect(
+            distFileExists(
+              template.name,
+              'dist',
+              SUPPORTED_BROWSERS[0],
+              'content_scripts/content-0.js'
+            )
+          ).toBeTruthy()
+        }
       },
       80000
     )

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
@@ -1,12 +1,9 @@
 import path from 'path'
-import {type Compiler, Compilation, sources} from 'webpack'
+import fs from 'fs'
+import {Compiler, Compilation, sources} from 'webpack'
 import {getManifestOverrides} from '../manifest-overrides'
 import {getFilename, getManifestContent} from '../../../lib/utils'
-import {
-  type FilepathList,
-  type PluginInterface,
-  type Manifest
-} from '../../../webpack-types'
+import {FilepathList, PluginInterface, Manifest} from '../../../webpack-types'
 
 export class UpdateManifest {
   public readonly manifestPath: string
@@ -34,31 +31,30 @@ export class UpdateManifest {
   }
 
   private applyProdOverrides(
-    compiler: Compiler,
+    compilation: Compilation,
     overrides: Record<string, any>
   ) {
     if (!overrides.content_scripts) return {}
 
-    return overrides.content_scripts.map(
-      (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,
-              {}
-            )
-          })
-        }
-
-        return contentObj
-      }
-    )
+    const outputPath = compilation.options.output?.path || ''
+
+    // Collect all CSS assets in `content_scripts` for use in the manifest
+    const contentScriptsCss = compilation
+      .getAssets()
+      .filter(
+        (asset) =>
+          asset.name.includes('content_scripts') && asset.name.endsWith('.css')
+      )
+      .map((asset) => path.join(outputPath, asset.name))
+
+    // Assign the collected CSS files to each `content_scripts` entry
+    for (const contentObj of overrides.content_scripts) {
+      contentObj.css = contentScriptsCss.map((cssFilePath, index) =>
+        getFilename(`content_scripts/content-${index}.css`, cssFilePath, {})
+      )
+    }
+
+    return overrides.content_scripts
   }
 
   apply(compiler: Compiler) {
@@ -97,16 +93,6 @@ export class UpdateManifest {
               }
             }
 
-            // During production, webpack styles are bundled in a CSS file,
-            // and not injected in the page via <style> tag. We need to
-            // reference these files in the manifest.
-            if (compiler.options.mode === 'development') {
-              if (patchedManifest.content_scripts) {
-                patchedManifest.content_scripts =
-                  this.applyDevOverrides(patchedManifest)
-              }
-            }
-
             const source = JSON.stringify(patchedManifest, null, 2)
             const rawSource = new sources.RawSource(source)
 
@@ -143,7 +129,7 @@ export class UpdateManifest {
 
               if (patchedManifest.content_scripts) {
                 patchedManifest.content_scripts = this.applyProdOverrides(
-                  compiler,
+                  compilation,
                   patchedManifest
                 )
               }