Webpack Plugin for a chrome extension build

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"}),
  ]
};

Comments

[Aleksey Biryukov]

I have a question about Solution 2. What should I write in the entry? Chrome extension has a background.js and a content.js. And if I don't mistake, both of them are entry points.

[Archit Garg]

Yes you should add both in your entry point because that would create two bundles in the build directory and you have to specify both in your manifest.json.

 entry: {
    background: "./path/to/my/entry/file.js",
    content_script: "./path/to/my/entry/file.js"
  }

[Jasmin Virdi]

Hi Aleksey,

So, the answer to your question is that you should ideally mention the js file or files which are called first when your extension is loaded.

Yes, there is an issue related to file path in the recent release. An update is already made for the fix!
Thanks for your reporting!
Happy Coding!😃