Document how to use webextension-polyfill with webpack.ProvidePlugin

[Rob--W]

There is some confusion over how the polyfill can be used with webpack.ProvidePlugin

We should figure out the recommended way to do so and document it, in the README.

Here is some discussion: #86

[Morikko]

I just want to write an hint for those who wants to use the package with webpack. (As I struggled)

Instead of requiring it with ProvidePlugin, I added the js library file in the build and linked manually all the entries that needed to use it.

I added to the webpack plugins array variable:

// Don't forget: `const CopyWebpackPlugin = require('copy-webpack-plugin');`
{ // Webpack Config
  plugins: [
   new CopyWebpackPlugin([
    {
      from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js', // Take it directly from the node_modules
      to: 'lib/browser-polyfill.js', // Where to copy the file in the destination folder 
      context: '../', // My extension is not at the root where node_modules/ is
      flatten: true, // Don't keep the node_modules tree
    },
  ]),
 ]
}

Next, in your extension you can link to the file in the manifest.json or in the HTML files with the file path /lib/browser-polyfill.js.

Note: for the devolvement build, you can use browser-polyfill.js instead of browser-polyfill.min.js

[Rob--W]

@Morikko Thanks for sharing. That approach looks very reasonable. The only "downside" is that you have to add an include everywhere in your extension, but the upside is that there is no duplication of polyfill code when your extension has multiple bundles for all parts (e.g. content script, background page, options page, popup, etc.).

[fregante]

For the record we also use CopyWebpackPlugin in Refined GitHub, but the config is shorter:

const CopyWebpackPlugin = require('copy-webpack-plugin');
{
	plugins: [
		new CopyWebpackPlugin([
			{
				from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js'
			}
		])
	]
}

[glacambre]

For those who would really prefer using webpack's Provide plugin, you can do so by installing webpack's import loader (e.g. npm install imports-loader) and then using it to make sure browser is undefined when loading webextension-polyfill:

module: {
      rules: [{
        test: require.resolve('webextension-polyfill'),
        use: 'imports-loader?browser=>undefined'
      }]
},
plugins: [
  new ProvidePlugin({
    "browser": "webextension-polyfill"
  })
]

[fregante]

Note: version 0.9.0 supports ProvidePlugin now thanks to #351

plugins: [
  new ProvidePlugin({
    browser: "webextension-polyfill"
  })
]

[saptarshimondal]

Working with webpack v5.73.0 and webextension-polyfill v0.9.0. Thank you.

Note: version 0.9.0 supports ProvidePlugin now thanks to #351

plugins: [
  new ProvidePlugin({
    browser: "webextension-polyfill"
  })
]