DOC.md

Chrome Extension With NPM Webpack CLI

Installation

In the package root directory, run the npm init command.

npm init

Create Required Folder Structure

├─ src
   ├─ icons
   ├─ content // content scripts
   ├─ locales
   |  └─ en
   |     └─ messages.json
   ├─ options
   |  ├─ options.html
   |  ├─ options.css
   |  └─ options.js
   ├─ popup
   |  ├─ popup.html
   |  ├─ popup.css
   |  └─ popup.js
   |
   ├─ # Add More Pages
   |
   ├─ background.js
   └─ manifest.json

Modify package.json File

{
  "name": "extension-npm-cli",
  "version": "0.0.1",
  "description": "extension with npm",
  "scripts": {
    
  },
  "author": "ctechhindi",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Install NPM Package

webpack

• webpack is a module bundler.
• Install Webpack with npm:

  npm install --save-dev webpack
  npm install --save-dev webpack-cli

• Read Webpack Guides

Create webpack.config.js File in the Project Root Directory

const config = {
    mode: 'production', // production, development

    context: __dirname + '/src',

    // Where to start bundling
    entry: {
        'background': './background.js',
        // ... Insert Others Files
    },

    // Where to output
    output: {
        path: __dirname + '/dist',
        filename: '[name].js',
    }
};

module.exports = config;

Insert Script in package.json file webpack development

scripts: {
    "watch": "webpack --watch",
    "watch:dev": "webpack --watch --mode development",
    "build": "webpack"
}

Webpack Command Line Interface

webpack --help
webpack --json

---

copy-webpack-plugin

• Copies individual files or entire directories, which already exist, to the build directory.
• Install CopyWebpackPlugin with npm:

  npm install copy-webpack-plugin --save-dev

Use CopyWebpackPlugin in webpack config file.

Then add the plugin to your webpack config. For example:

// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'icons', to: 'icons' },
        { from: 'locales', to: '_locales' }
      ],
    }),
  ],
};

---

mini-css-extract-plugin

• This plugin extracts CSS into separate files.
• Install MiniCssExtractPlugin with npm:

  npm install --save-dev mini-css-extract-plugin
  npm install --save-dev style-loader css-loader

Use MiniCssExtractPlugin in webpack config file.

Then add the loader and the plugin to your webpack config. For example:

/* style.css */
body {
  background: green;
}

// component.js
import './style.css';

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'], // https://webpack.js.org/loaders/css-loader/
      },
    ],
  },
};

---

webpack-extension-reloader

• This plugin extracts CSS into separate files.
• Install webpack-extension-reloader with npm:

  npm install webpack-extension-reloader --save-dev

Use Webpack Extension Reloader in webpack config file.

// webpack.config.js
const ExtensionReloader  = require('webpack-extension-reloader');

plugins: [
  new ExtensionReloader(),
  new CopyWebpackPlugin([
        { from: "./src/manifest.json" },
        { from: "./src/popup.html" },
    ]),
]

---

cross-env

• Run scripts that set and use environment variables across platforms.
• Install cross-env with npm:

  npm install cross-env --save-dev

Use cross-env in webpack config file.

I use this in my npm scripts: cross-env NODE_ENV=production

// package.json
{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack"
  }
}

// webpack.config.js
const config = {
    mode: process.env.NODE_ENV,
}

Asset Management

Loading CSS

In order to import a CSS file from within a JavaScript module, you need to install and add the style-loader and css-loader to your module configuration.

npm install --save-dev style-loader css-loader

Loading Images

npm install --save-dev file-loader

sass-loader

npm install sass-loader sass webpack --save-dev

babel-loader

npm install babel-loader babel-minify --save-dev

Package for Build Zip

npm install archiver --save

Project Command

npm run watch
npm run watch:dev
npm run build
npm run build-zip

Pending Problems

• Options.css file not minify