@dumlj/crx-manifest-webpack-plugin

         

Crx Manifest Webpack Plugin

Automatically import files into the chrome extension's manifest.json.

BACKGROUND

Google Chrome Extension uses manifest.json to configure project. When we use webpack to build, the result file path is not consistent with the source, So we can use Entry to find all dependency files and add them to manifest.json.

FEATURE

• The files generated by optimization (runtime/chunk) will be imported into the manifest.json automatically.
• Add configuration based on basic manifest.json.

INSTALL

# use npm
$ npm install --dev @dumlj/crx-manifest-webpack-plugin
# use yarn
$ yarn add --dev @dumlj/crx-manifest-webpack-plugin
# use pnpm
$ pnpm add @dumlj/crx-manifest-webpack-plugin -D

USAGE

import fs from 'fs-extra'
import { CrxManifestWebpackPlugin } from '@dumlj/crx-manifest-webpack-plugin'
import webpack, { type Configuration } from 'webpack'

const manifest: ChromeManifest = fs.readJSONSync(manifestFile)
const config: Configuration = {
  // ...
  plugins: [new CrxManifestWebpackPlugin({ manifest })],
}

export default config

LIVE DEMO

In the demo, the files is output to the memory, please check the console. Or remove the comment writeToDisk: true from the MemfsWebpackPlugin in webpack.config.ts and run yarn build.

INTERNAL DEPENDENCIES

@dumlj/crx-manifest-webpack-plugin
├─┬ @dumlj/seed-webpack-plugin
│ ├─┬─ @dumlj/feature-updater
│ │ ├─── @dumlj/shell-lib
│ │ ├─── @dumlj/util-lib
│ │ └─── @dumlj/mock-libPRIVATE
│ └─── @dumlj/mock-libPRIVATE
└── @dumlj/mock-libPRIVATE