Search code examples
webpackgoogle-chrome-extensionfirefox-addon

Webpack optimization for firefox addon

Im using webpack for bundling my chrome extension. I want to upload the extension to the store, but the files can't be larger than 4MB. So I tried to use webpack's code-splitting functionality to make the files smaller. Here is my optimization config:

optimization

With this Im able to upload it to the store, but the extension is broken. I can load it as an unpacked extension, but the extension is completely broken. Background page or pop are not loading. I don't get any errors in background script or in even popup:

popup

When I use optimization.chunks: "async" extension actually loads, but files are above 5MB and popup is throwing an error Uncaught SyntaxError: illegal character U+20AC. files

Do you have any ideas, what could be happening? If you have any questions feel free to ask! Thank you

Solution

  • Basically, when you use webpack code-splitting you have to link all the chunks in the HTML file with the script tag. For that I used HtmlWebpackPlugin. After that webpack will link all your chunks in the HMTL automatically.