fix: compatibility with module, although it still not working

Author: Jack-Works

lib/webpack5/InitialChunkFile.js

@@ -88,20 +88,20 @@ module.exports = class WebExtensionContentScriptEntryPlugin {
               /** @type {string[]} */
               let code
               if (isBackgroundEntry) {
-                // TODO: support ES Module output
-                code = [
-                  'try {',
-                  Template.indent(
-                    'importScripts(' +
-                      getInitialAndAsyncFiles(compilation, entry)
-                        .map((file) => JSON.stringify(file))
-                        .join(', ') +
-                      ');'
-                  ),
-                  '} catch (e) {',
-                  Template.indent('console.error(e);'),
-                  '}',
-                ]
+                const asyncAndSyncFiles = getInitialAndAsyncFiles(compilation, entry)
+                if (compilation.outputOptions.chunkFormat === 'module') {
+                  code = asyncAndSyncFiles.map((file) => `import ${JSON.stringify('./' + file)};`)
+                } else {
+                  code = [
+                    'try {',
+                    Template.indent(
+                      'importScripts(' + asyncAndSyncFiles.map((file) => JSON.stringify(file)).join(', ') + ');'
+                    ),
+                    '} catch (e) {',
+                    Template.indent('console.error(e);'),
+                    '}',
+                  ]
+                }
               } else {
                 code = [
                   ';(() => {',
@@ -174,7 +174,7 @@ module.exports = class WebExtensionContentScriptEntryPlugin {
 function getInitialFiles(compilation, entry) {
   const entryPoint = compilation.entrypoints.get(entry)
   if (!entryPoint) return undefined
-  const allFiles = entryPoint.getFiles().filter((file) => file.endsWith('.js') && compilation.getAsset(file))
+  const allFiles = entryPoint.getFiles().filter((file) => isJSFile(file) && compilation.getAsset(file))
   if ('rspack' in compilation.compiler) {
     const runtimeChunk = entryPoint.getRuntimeChunk()
     if (runtimeChunk) {
@@ -206,6 +206,13 @@ function getInitialAndAsyncFiles(compilation, entry) {
     }
   }
   entryPoint.chunks.forEach(visit)
-  const allFiles = [...files].filter((file) => file.endsWith('.js') && compilation.getAsset(file))
+  const allFiles = [...files].filter((file) => isJSFile(file) && compilation.getAsset(file))
   return allFiles
 }
+
+/**
+ * @param {string} file
+ */
+function isJSFile(file) {
+  return file.endsWith('.js') || file.endsWith('.mjs')
+}

lib/webpack5/ServiceWorkerPlugin.js

@@ -15,25 +15,26 @@ module.exports = class WebExtensionServiceWorkerEntryPlugin {
     const { javascript, sources } = compiler.webpack
     const entry = this.options.serviceWorkerEntry
     if (entry === undefined) return
-    const hook = compiler.hooks.entryOption
-    // Set chunkLoading to import-scripts
-    // @ts-ignore DO NOT add return boolean to this function, this is a BailHook and we don't want to bail.
-    hook.tap(WebExtensionServiceWorkerEntryPlugin.name, (context, entries) => {
-      if (typeof entries === 'function') {
-        if (this.options.noDynamicEntryWarning) return
-        console.warn(`[webpack-extension-target] Dynamic entry points not supported yet.
+    if (!(compiler.options.output.module || compiler.options.experiments.outputModule)) {
+      const hook = compiler.hooks.entryOption
+      // Set chunkLoading to import-scripts
+      hook.tap(WebExtensionServiceWorkerEntryPlugin.name, (context, entries) => {
+        if (typeof entries === 'function') {
+          if (this.options.noDynamicEntryWarning) return
+          console.warn(`[webpack-extension-target] Dynamic entry points not supported yet.
 You must manually set the chuck loading of entry point ${entry} to "import-scripts".
 
 See https://webpack.js.org/configuration/entry-context/#entry-descriptor
 
 Set background.noDynamicEntryWarning to true to disable this warning.
 `)
-      }
-      /** @type {import('@rspack/core').EntryDescriptionNormalized} */
-      const selectedEntry = /** @type {any} */ (entries)[entry]
-      if (!selectedEntry) throw new Error(`[webpack-extension-target] There is no entry called ${entry}.`)
-      selectedEntry.chunkLoading = 'import-scripts'
-    })
+        }
+        /** @type {import('@rspack/core').EntryDescriptionNormalized} */
+        const selectedEntry = /** @type {any} */ (entries)[entry]
+        if (!selectedEntry) throw new Error(`[webpack-extension-target] There is no entry called ${entry}.`)
+        selectedEntry.chunkLoading = 'import-scripts'
+      })
+    }
 
     // Set all lazy chunks to eagerly loaded
     // See https://bugs.chromium.org/p/chromium/issues/detail?id=1198822