Build Chrome Extensions with Webpack + Babel
- 🏗 Next generation ES features with babel
- ⛓ Code bundling with webpack
- 🔁 Live reload on source change
- 📦 Packs your extension into a zip
npm install --dev cewb
# or
yarn add --dev cewb
Example directory structure:
+ /project-directory
|-+ /assets
| '-- /icon.png
|-- /manifest.json
|-- /package.json
|-+ /src
| |-- /background.ext.js
| |-- /utils.js
| '-- /injectedScript.ext.js
'-- /webpack.js
Example package.json
:
{
"name": "my-extension",
"scripts": {
"dev": "cewb",
"prod": "cewb -p"
}
}
Any file that ends with .ext.js
will be added to webpack's entries object and therefore will be accessible by manifest.json
.
Example webpack.js
:
module.exports = (config, env) => {
if (env === 'development') {
config.plugins.push(new WebpackPlugin())
}
return config
}
Running npm run dev
will take all the static assets, transpile all source files, output these files to a directory named unpacked
and then watch all files under src
for live reloading.
After you've run npm run dev
for the first time, goto chrome://extensions
in Chrome, ensure "Developer mode" is checked, click "Load unpacked extension...", locate and select your extensions unpacked
folder and you're ready to go!
Running npm run prod
will do everything npm run dev
does but instead of outputting files to unpacked
, it packages the extension into <package-name>.zip
file.