I have created a chrome extension last year which required me to do a lot of manual processes before deploying it on Web Store. There are a series of steps like updating the version in your manifest.json file and creating a zip folder of your code. Apart from this, there are many other optimization steps like minifying your JS and CSS. It was tiresome to repeat all these steps and there was a high probability of missing any one of them, so I thought of automating the whole process.

How do we automate the process?

Solution 1

The first solution that came to my mind was to write a script that can be run before deploying the extension on Web Store.

var fs = require('fs');
var archiver = require('archiver');
const wepbpackConfig = require('../webpack.config')

// create version bump.
if(process.env.NODE_ENV==='PROD'){
  const bump = require('json-bump')
  bump('src/manifest.json', { minor : 1 })
}

//create zip file.
var output = fs.createWriteStream(__dirname + 'prod.zip');
var archive = archiver('zip', {
  zlib: { level: 9 } // Sets the compression level.
});
archive.pipe(output);

//directory path to archive
archive.directory('src/', 'my_chrome_extension');
archive.finalize();

Solution 2

I have been recently learning about webpack in-depth and thought of achieving the same with the help of webpack plugin. I have created a webpack plugin which does the above-mentioned task for me.

The plugin can be installed by: npm i extension-build-webpack-plugin
More about Webpack Plugin

Once installed it can be included in the webpack.config.js file
For example

const BrowserExtensionPlugin = require("extension-build-webpack-plugin");

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-chrome-extension.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new BrowserExtensionPlugin({devMode: false, name: "my-first-webpack.zip", directory: "src", updateType: "minor"}),
  ]
};