Convert plugin to loader

[fregante]

Instead of having the manifest inside webpack.config.js, webpack should just read the input json file and output it transformed. Something like:

const targetBrowser = process.env.TARGET_BROWSER;

module.exports = {
	// ...

	entry: {
		manifest: './source/manifest.json',
		// ...
	},
	output: {
		path: path.join(__dirname, "extension", targetBrowser),
		filename: "[name].[ext]"
	},
	module: {
		rules: [
			{
				test: /manifest\.json$/,
				use: 'wext-manifest-loader', // automatically uses the `TARGET_BROWSER` env
				exclude: /node_modules/
			}
		]
	},
};

[abhijithvijayan]

oh cool. I will work on it.

This will cause breaking changes but still it seems to be worth it.

will have to deprecate this as well.

[abhijithvijayan]

This is infact an awesome idea that not only improves its function but also adds the manifest.json reloadabilty(which it lacked in the starter project)

[abhijithvijayan]

@fregante what do you suggest as to read the version field for the extension?

Currently it uses package.json file version.

Or is it better to just add version property to manifest.json?

[fregante]

Or is it better to just add version property to manifest.json?

👍

Generally I use dot-json manifest.json version $GIT_TAG:

https://github.com/sindresorhus/refined-github/blob/7acf404e09a0fc36d555f32a9a3cef07207b4f3c/package.json#L12

https://github.com/sindresorhus/refined-github/blob/7acf404e09a0fc36d555f32a9a3cef07207b4f3c/.github/workflows/deploy-tag.yml#L22-L24

[abhijithvijayan]

@fregante Caveats that I found so far

• Generates a manifest.js entry for the webpack entry
• Requires setting type: "javascript/auto" to avoid webpack using it's default json loaders/plugins (https://github.com/webpack-contrivb/file-loader/issues/264#issuecomment-372239810)

Loader now works with TARGET_BROWSER env passed with chrome/firefox/opera/edge and type: "javascript/auto"

I builds manifest.json to root of build directory along with a js bundle

Unless having a plugin in webpack, I don't think the emitting of manifest.js can be avoided.

I can write a plugin to do this. Do you have any better suggestions?

[fregante]

Yeah this might not be as easy as I thought, but I think this loader can generate files with the right extension: https://github.com/peerigon/extract-loader/blob/master/README.md

[abhijithvijayan]

@fregante The loader emits correctly like you asked for. I have build a plugin to remove the manifest from compilation(to a js bundle).

Here is the plugin: https://github.com/abhijithvijayan/wext-manifest-webpack-plugin

The loader is released to: https://www.npmjs.com/package/wext-manifest-loader

The only additional optional feature I will add to this loader will be the ability to take version from package.json as an option to update manifest's version field(This will be optional)

I will deprecate the wext-manifest package once I set up a migration guide for existing users.

Checkout the readme example for the usage

I hope you can use these in https://github.com/sindresorhus/refined-github once you verify if everything works like you asked for.

[abhijithvijayan]

Closing.