Why does running 'npm build' in InboxSDK example project revert the final executable 'dist' to original version of 'manifest.json' file?

Question

I am new to web-development and am trying to learn how to develop chrome extensions following manifest version 3. I specifically want to create a chrome extension using InboxSDK which simplifies the process of altering UI elements in the DOM of a GMail inbox.

The project I am trying to modify can be found here: https://github.com/InboxSDK/hello-world

I want to use the project provided in this repo as a template for the creation of my own extension. How can I alter the webpack configuration such that the final executable, 'dist' directory, that is created after running 'npm build' only contains the single 'manifest.json' file and reflects changes I want to make to the file?

Thank you in advance for any help or resources that can be offered to further my understanding.

I tried altering manifest.json directly in the executable file, but using webpack to build a new executable directory reverts it back to its original state.

Answer 1

you can copy individual files or entire directories, which already exist, to the build directory with copyWebpackPlugin

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/manifest.json', to: 'manifest.json' },
      ],
    }),
  ],
};

Hope it works for you