MIGRATION.md

Migrating from wext-manifest to wext-manifest-loader

Instead of having manifest inside webpack configuration, the manifest.json could be handled by the loader. The loader doesn't have to rely on write-webpack-plugin to emit the json file.

Webpack emits a js file for every entry in webpack configuration.

The loader is now in conjunction with wext-manifest-webpack-plugin to avoid compiling js for the manifest entry

---

Remove deprecated packages

npm uninstall wext-manifest write-webpack-plugin

Add loader & plugin

yarn add wext-manifest-loader wext-manifest-webpack-plugin --dev

Changes in Webpack Configuration

// - Deletions, + Additions

// ... other plugins
-   const wextManifest = require('wext-manifest');
-   const WriteWebpackPlugin = require('write-webpack-plugin');
+   const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');

-   const manifestInput = require('./src/manifest');
-   const manifest = wextManifest[targetBrowser](manifestInput);

module.exports = {
    entry: {
  +    manifest: './src/manifest.json',
        // ... other entries
    },

    module: {
        rules: [
  +         {
                type: 'javascript/auto', // prevent webpack handling json with its own loaders,
                test: /manifest\.json$/,
                use: {
                    loader: 'wext-manifest-loader',
                    options: {
                      usePackageJSONVersion: true, // set to false to not use package.json version for manifest
                    },
               },
            },
        ]
    }

    plugins: [
  -     new WriteWebpackPlugin([{ name: manifest.name, data: Buffer.from(manifest.content) }]),
  +     new WextManifestWebpackPlugin(),
        // ... other plugins
    ]
};

The manifest file

Copy contents of src/manifest/index.js and transform it to src/manifest.json using an online json transformer

Input

// -- src/manifest/index.js

-   const pkg = require('../../package.json');

-   const manifestInput = {
    manifest_version: 2,
    name: 'Sample WebExtension',
    version: pkg.version,
    ...
}

Output

// ++ src/manifest.json

{
    "manifest_version": 2,
    "name": 'Sample WebExtension',
    "version": "0.0.0",
    ...
}

And you are all set

---

See the commit https://github.com/abhijithvijayan/web-extension-starter/commit/fadc746bc734f346f7df977d4273bafea6d04169 for the applied changes