Fix content_scripts declaration adding extraneous css

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

Hide file tree

Showing 2 changed files with 69 additions and 24 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,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,26 @@ 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 "content_scripts/*",
+          // and for every css file found, create a manifest entry.
+          fs.readdirSync(contentScriptsPath).forEach((file) => {
+            // The browser extension already compiled.
+            // All CSS-like assets are .css files at this point.
+            if (file.endsWith('.css')) {
+              contentObj.css = contentObj.css || []
+
+              if (contentObj.css.includes(file)) return
+
+              contentObj.css.push(
+                getFilename(
+                  `content_scripts/content-${index}.css`,
+                  path.join(contentScriptsPath, file),
+                  {}
+                )
+              )
+            }
           })
         }
 
@@ -97,16 +108,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)