Recently, I want to create a web extension for assisting to lookup information I need. In the web extension, I need to use the power of a npm package to complete some parts for me. But I have found v3 of manifest_version of chrome and v2 of manifest_version of firefox they don’t recommend to include outer packages with obfuscated version, this instruction lets me hesitating. I think there are many extensions having comprehensive features and are useful, so that one might not be big problem.

In the article, I will use geojson-geometries-lookup package on npm as an example for explanation because it has only the version running on node environment. I use npm’s version 6.13.4, webpack’s version 5 series, node’s version 12.15.0 and macOS BigSur as compile environment.

Using Webpack to compile

Step1: create a project folder and initial npm

mkdir geojson-lookup-compile
cd geojson-lookup-compile

npm init -y

Step2: Install a package you want

npm install --save-dev geojson-geometries-lookup

After installation, the package is at the node_modules directory under this compile folder.

Notice: It doesn’t matter you use --save or --save-dev

Step3: Observe and remember the entry point of an installed package

Observe the entry point of a package you want to compile. For example, the entry point of geojson-geometries-lookup package is the index.js file at that one under node_modules folder. You need to remember the path for that file.

Step4. Create webpack.config.js and put related settings for compiling

Create webpack.config.js

touch webpack.config.js

  I use settings of UMD standard and IIFE format for compiling. UMD is neccessary an IIFE is optional.

The following is content of webpack.config.js

// webpack.config.js

const path = require("path");
const CopyWebPlugin = require("copy-webpack-plugin");
/**
* copy-webpack-plugin is a plugin of webpack. 
You can know more about it from document: https://webpack.js.org/plugins/
* Notice: Here I doesn't need it. :p
*/

module.exports = {
  mode: "production",
  output: {
    path: __dirname + "/dist",
    filename: "[name].js",
    library: {
      name: "GeoJsonGeometriesLookup",
      type: "umd",
    },
    iife: true,
  },
  entry: "./node_modules/geojson-geometries-lookup/index.js",
};

The following is excerpt content of package.json. This is for editing npm run build script to use webpack.

// package.json
{
  // ...(excerpt)
  "scripts": {
    "build": "webpack --config=webpack.config.js"
  }
}

Step4. Compile

Use following command to compile, and then it will generate single file for the package we want and related ones it need to use during execution.

npm run build

Finally, the compiled file is put under dist folder. In this example, I have got main.js file for compiled geojson-geometries-lookup package and I can include and use it at web extension environment.

Conclusion

This article describes how to compile a npm package so you can include it to browser’s web extension environment or to a html file with script tag.

If you don’t want to use webpack as the tool, you can also use rollup.js as the tool.

Reference 1. Rollup.js official site