chrome-manifest-loader
npm install --save-dev chrome-manifest-loader extract-loader file-loader
Chrome manifest loader for webpack
-
support Chrome, Firefox and Opera manifest.json
-
import assets that is defined in manifest.json
-
map package.json
version to manifest.json
version
Usage
first, import manifest.json
in your index js once
Require assets and map the asset path
Wrap your asset path with require()
-
the asset path should be relative to current manifest.json
path
-
if no ./
or ../
prefix, it will be consider as under node_modules
webpack.config.js
{
"module": {
"rules": [
{
test: /\/manifest\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
'chrome-manifest-loader'
],
type: 'javascript/auto'
}
]
}
}
manifest.json
{
"icon": {
"16": "require(./img/icon16.png)"
}
}
output
{
"icon": {
"16": "file path defined by other loader, eg: file-loader"
}
}
Map package.json version to manifest.json version
Option: mapVersion: true
webpack.config.js
{
"module": {
"rules": [
{
test: /\/manifest\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
{
loader: 'chrome-manifest-loader',
options: {
mapVersion: true
}
}
],
type: 'javascript/auto'
}
]
}
}
package.json
{
"version": "1.0.1"
}
manifest.json
{}
output (manifest.json
)
{
"version": "1.0.1"
}
Map browserslist config to minimum_chrome_version
Option: mapMinimumChromeVersion: true
webpack.config.js
{
"module": {
"rules": [
{
test: /\/manifest\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
{
loader: 'chrome-manifest-loader',
options: {
mapMinimumChromeVersion: true
}
}
],
type: 'javascript/auto'
}
]
}
}
.browserslistrc
chrome >= 51
manifest.json
{}
output (manifest.json
)
{
"minimum_chrome_version": "51"
}