DEV Community

Cover image for Webpack Plugin for a chrome extension build
Jasmin Virdi
Jasmin Virdi

Posted on • Edited on

5 2

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();
Enter fullscreen mode Exit fullscreen mode

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"}),
  ]
};
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (3)

Collapse
 
egopingvina profile image
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.

Collapse
 
thearchitgarg profile image
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"
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jasmin profile image
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!😃

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more