docs: example of using experimental output on content script entry

examples/react-hmr/manifest.json

@@ -3,7 +3,7 @@
   "name": "React Web Extension HMR test",
   "version": "1.0.0",
   "background": {
-    "service_worker": "./sw.js"
+    "service_worker": "./background_generated_entry.js"
   },
   "web_accessible_resources": [
     {
@@ -14,7 +14,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["./content.js"]
+      "js": ["./content_script_generated_entry.js"]
     }
   ],
   "permissions": ["storage", "scripting", "tabs"],

examples/react-hmr/package.json

@@ -12,6 +12,7 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "@types/webextension-polyfill": "^0.12.1",
+    "@types/webpack-env": "^1.18.8",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
     "react-refresh": "^0.16.0",

examples/react-hmr/rspack.config.mjs

@@ -56,19 +56,16 @@ export default (/** @type {any} */ _, /** @type {{ mode: string; }} */ env) => {
       new WebExtension({
         background: { serviceWorkerEntry: 'background' },
         experimental_output: {
-          background: 'sw.js',
+          background: 'background_generated_entry.js',
+          content: 'content_script_generated_entry.js',
         },
       }),
       isProduction ? null : new RefreshPlugin(),
     ].filter(Boolean),
     optimization: {
       minimizer: [false],
-      // runtimeChunk: {
-      //   name: (entrypoint) => `runtime-${entrypoint.name}`,
-      // },
       splitChunks: {
         chunks: 'all',
-        // minSize: 1,
       },
     },
     experiments: { css: true },

examples/react-hmr/src/content-script/index.tsx

@@ -1,11 +1,18 @@
 import { createRoot } from 'react-dom/client'
 import { App } from './App.tsx'
 
-if (document.readyState === 'complete') initial()
+let unmount: () => void
+import.meta.webpackHot?.accept()
+import.meta.webpackHot?.dispose(() => unmount?.())
+
+console.log('Extension running!')
+
+if (document.readyState === 'complete') unmount = initial()
 else
   document.addEventListener('readystatechange', () => {
-    if (document.readyState === 'complete') initial()
+    if (document.readyState === 'complete') unmount = initial()
   })
+
 function initial() {
   const root = document.createElement('div')
   const shadow = root.attachShadow({ mode: 'open' })
@@ -15,17 +22,15 @@ function initial() {
   shadow.adoptedStyleSheets = [style]
   fetchCSS().then((response) => style.replace(response))
 
-  if (import.meta.webpackHot) {
-    import.meta.webpackHot.accept('./style.css', () => {
-      fetchCSS().then((response) => style.replace(response))
-    })
-  }
+  import.meta.webpackHot?.accept('./style.css', () => {
+    fetchCSS().then((response) => style.replace(response))
+  })
 
-  createRoot(shadow).render(<App />)
-}
-declare global {
-  interface ImportMeta {
-    webpackHot?: any
+  const mountingPoint = createRoot(shadow)
+  mountingPoint.render(<App />)
+  return () => {
+    mountingPoint.unmount()
+    root.remove()
   }
 }
 

examples/react-hmr/webpack.config.mjs

@@ -58,20 +58,17 @@ const config = (/** @type {any} */ _, /** @type {{ mode: string; }} */ env) => {
       new WebExtension({
         background: { serviceWorkerEntry: 'background' },
         experimental_output: {
-          background: 'sw.js',
+          background: 'background_generated_entry.js',
+          content: 'content_script_generated_entry.js',
         },
         weakRuntimeCheck: true, // because of HtmlWebpackPlugin
       }),
       isProduction ? null : new ReactRefreshPlugin(),
     ].filter(Boolean),
     optimization: {
       minimizer: [false],
-      // runtimeChunk: {
-      //   name: (entrypoint) => `runtime-${entrypoint.name}`,
-      // },
       splitChunks: {
         chunks: 'all',
-        // minSize: 1,
       },
     },
     experiments: { css: true },

examples/react-hmr/yarn.lock

@@ -462,6 +462,11 @@
   resolved "https://registry.yarnpkg.com/@types/webextension-polyfill/-/webextension-polyfill-0.12.1.tgz#8dae244fe094cbb541005362e8e22f16671f6054"
   integrity sha512-xPTFWwQ8BxPevPF2IKsf4hpZNss4LxaOLZXypQH4E63BDLmcwX/RMGdI4tB4VO4Nb6xDBH3F/p4gz4wvof1o9w==
 
+"@types/webpack-env@^1.18.8":
+  version "1.18.8"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.8.tgz#71f083718c094204d7b64443701d32f1db3989e3"
+  integrity sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==
+
 "@types/ws@^8.5.10":
   version "8.5.13"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.13.tgz#6414c280875e2691d0d1e080b05addbf5cb91e20"