Webpack Loader for Webextension manifest
🙋♂️ Made by @abhijithvijayan
Generate browser tailored manifest.json
for Web Extensions that you specify properties to appear only in specific browsers.
❤️ it? ⭐️ it on GitHub or Tweet about it.
✔ | ✔ | ✔ | ✔ |
This loader will take a definition input for the manifest, and return you content for the specified browser.
Checkout web-extension-starter that uses this package
Ensure you have Node.js 10 or later installed. Then run the following:
# via npm
npm install --save-dev wext-manifest-loader wext-manifest-webpack-plugin
# or yarn
yarn add wext-manifest-loader wext-manifest-webpack-plugin --dev
You can easily use this module together with the wext-manifest-webpack-plugin
to output the manifest.json
as part of your build process without any additional js bundle and with auto rebundling on file change.
Note: Make sure you pass a TARGET_BROWSER env variable with one of chrome/firefox/edge/opera
value
https://github.com/abhijithvijayan/web-extension-starter/blob/react-typescript/source/manifest.json
webpack.config.js
// ... other plugins
const WextManifestWebpackPlugin = require("wext-manifest-webpack-plugin");
const targetBrowser = process.env.TARGET_BROWSER;
const destPath = path.join(__dirname, 'extension');
module.exports = {
entry: {
manifest: './src/manifest.json',
// ...
},
output: {
path: path.join(destPath, targetBrowser),
filename: 'js/[name].bundle.js',
},
module: {
rules: [
{
type: 'javascript/auto', // prevent webpack handling json with its own loaders,
test: /manifest\.json$/,
use: 'wext-manifest-loader',
exclude: /node_modules/,
},
]
},
plugins: [
new WextManifestWebpackPlugin(),
// ...
],
};
Type: Boolean
Default: false
If true, updates manifest.json version
field with package.json
version. It is often useful for easy release of web-extension.
webpack.config.js
module.exports = {
module: {
rules: [
{
type: 'javascript/auto', // prevent webpack handling json with its own loaders,
test: /manifest\.json$/,
use: {
loader: 'wext-manifest-loader',
options: {
usePackageJSONVersion: true,
},
},
exclude: /node_modules/,
},
],
},
};
Vendor prefixed manifest keys allow you to write one manifest.json
for multiple vendors.
{
"__chrome__name": "AwesomeChrome",
"__firefox__name": "AwesomeFirefox",
"__edge__name": "AwesomeEdge",
"__opera__name": "AwesomeOpera"
}
if the TARGET_BROWSER is chrome
this compiles to:
{
"name": "AwesomeChrome",
}
Add keys to multiple vendors by seperating them with |
in the prefix
{
__chrome|opera__name: "AwesomeExtension"
}
if the vendor is chrome
or opera
, this compiles to:
{
"name": "AwesomeExtension"
}
{
"__dev__name": "NameInDevelopment",
"__prod__name": "NameInProduction",
"__chrome|firefox|dev__description": "DescriptionInDevelopmentForSetOfBrowsers",
"__chrome|firefox|prod__description": "DescriptionInProductionForSetOfBrowsers"
}
if the NODE_ENV is production
and the TARGET_BROWSER is chrome
this compiles to:
{
"name": "NameInProduction",
"description": "DescriptionInProductionForSetOfBrowsers"
}
else
{
"name": "NameInDevelopment",
"description": "DescriptionInDevelopmentForSetOfBrowsers"
}
Looking to contribute? Look for the Good First Issue label.
Please file an issue here for bugs, missing documentation, or unexpected behavior.
- Shared Eslint & Prettier Configuration -
@abhijithvijayan/eslint-config
- Shared TypeScript Configuration -
@abhijithvijayan/tsconfig
Thanks to @fregante for suggesting to convert initial (wext-manifest
) module to webpack loader(wext-manifest-loader
)
MIT © Abhijith Vijayan