Problems with path and writing html file

[IlliaHreben]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch webpack-browser-extension-polyfill@1.1.1 for the project I'm working on.

So we have two broblems. The first broblem is the wrong paths resolving. We don't needed path.relative() in this case, because resolvePolyfillPathRelativeToFile() already get for us a relative path. So path.resolve() think that browser-polyfill is in a dir we are running from. As a result - wrong path in popup.html

The second problem - html DOM, When we are execuring readFile, html doc is parsing like a DOM, so when we are trying to save the changed DOM, fs throwing an error. So let's use outerHTML property to solve this problem.

Here is the diff that solved my problem:

@@ -11,12 +10,7 @@ module.exports = function (extensionPath, filePath) {
   if (Array.isArray(filePath)) return
 
   const manifestPath = resolveManifest(extensionPath)
-  const polyfillPath = resolvePolyfillPathRelativeToFile(manifestPath, filePath)
-
-  const polyfillPathRelativeToFile = path.relative(
-    path.dirname(filePath),
-    polyfillPath
-  )
+  const polyfillPathRelativeToFile = resolvePolyfillPathRelativeToFile(manifestPath, filePath)
 
   const polyfillTag = `<script src="${polyfillPathRelativeToFile}"></script>`
 
@@ -56,7 +50,7 @@ module.exports = function (extensionPath, filePath) {
     }
 
     // Override user's file
-    fs.writeFile(filePath, root, 'utf8', (error) => {
+    fs.writeFile(filePath, root.outerHTML, 'utf8', (error) => {
       if (error) return console.log(error)
     })
   })

This issue body was partially generated by patch-package.