Adding npm modules to a Chrome extension

I’m building a Chrome extension and wanted to use an npm module to make my life easier. Here’s how to do it based on the folder structure created by the chrome-extension-cli tool.

  1. In the root level of your project install the glob module so you can get a list of all files in a directory matching a pattern: npm install glob
  2. In your src directory, npm install whatever modules you need (e.g. axios)
  3. In your config directory, add the following lines in webpack.config.js
    • At the top: require('glob');
    • In the entry object: modules: glob.sync(`${PATHS.src}/node_modules/**/*.js`),
      This will create a separate build file called modules.js containing all your npm module code
  4. In your public directory, alter manifest.json’s js entry to add the new build file, e.g.
    js: [ "contentScript.js", "modules.js" ]