fix: react HMR HTML errors due to CSP in manifest V3 (#86)

* fix: react HMR HTML errors due to CSP in manifest V3

* docs: add documentation around devHtmlTransform option

BREAKING CHANGE: dev mode plugin HTML transforms are no longer applied by default. Use the devHtmlTransform plugin option to enable if needed.

MIGRATION.md

@@ -1,8 +1,13 @@
 # Migration
 
+- [Version 3.x.x to 4.0.0](#version-3xx-to-400)
 - [Version 2.x.x to 3.0.0](#version-2xx-to-300)
 - [Version 0.x.x to 1.0.0](#version-0xx-to-100)
 
+## Version 3.x.x to 4.0.0
+
+- Dev mode HTML transforms are no longer applied by default. Enable via the new devHtmlTransform option if still needed.
+
 ## Version 2.x.x to 3.0.0
 
 - Upgrade Vite to 4.0.3

README.md

@@ -166,6 +166,11 @@ useDynamicUrlContentScripts: boolean (optional)
 - Adds the `use_dynamic_url` property to web accessible resources generated by the plugin
 - Default: `true`
 
+devHtmlTransform: boolean (optional)
+
+- In dev mode, apply Vite plugins to manifest HTML files by calling transformIndexHtml on them
+- Default: `false`
+
 webAccessibleScripts: [rollup filter](https://github.com/rollup/plugins/tree/master/packages/pluginutils#createfilter) (optional)
 
 - A filter that will be applied to `web_accessible_resources` entries in the provided manifest. When the filter matches a resource, it will be parsed by the plugin and treated as a content script. This can be useful to generate content scripts that will be manually injected at runtime.

src/devBuilder/devBuilder.ts

@@ -119,8 +119,10 @@ export default abstract class DevBuilder<
         encoding: "utf-8",
       }));
 
-    // apply plugin transforms
-    content = await this.viteDevServer!.transformIndexHtml(fileName, content);
+    if (this.pluginOptions.devHtmlTransform) {
+      // apply plugin transforms
+      content = await this.viteDevServer!.transformIndexHtml(fileName, content);
+    }
 
     // update root paths
     content = content.replace(/src="\//g, `src="${this.hmrServerOrigin}/`);

types/index.d.ts

@@ -6,6 +6,12 @@ interface ViteWebExtensionOptions {
    */
   manifest: chrome.runtime.Manifest;
 
+  /**
+   * In dev mode, apply Vite plugins to manifest HTML files by calling transformIndexHtml on them
+   * Default: false
+   */
+  devHtmlTransform?: boolean;
+
   /**
    * Sets the use_dynamic_url property on web accessible resources generated by the plugin
    * Default: true