Zero configuration environment for developing Chrome extensions with all new features like Webpack, Babel, React and almost everything you want.
Last updated 3 years ago by kleenebok .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @kleenebok/create-chrome-extension 
SYNC missed versions from official npm registry.

Create Chrome Extension

Bootstrap project for developing any kind Chrome extensions with all javascript features like NPM packages, Webpack, Babel, React and almost everything you want.


This is proof new version inspired by Create React App. It is not fully working, but you can follow it and help to make it better. It is still in state of transition from Webpack Chrome Extension and not everything is in README or work on 100%.

Turn this


  "content_scripts": [{
    "js": ["jquery.min.js", "jquery-spellchecker.min.js", "jquery-megamask.min.js", "jquery-scrolltie.min.js", "my-plugins.js", "app.js"],
    "css": ["app.css"]

Into this


  "content_scripts": [{
    "js": ["app.js"]

Run npm install jquery jquery-spellchecker jquery-megamask jquery-scrolltie --save


import 'jquery'
import 'jquery-spellchecker'
import 'jquery-megamask'
import 'jquery-scrolltie'
import './my-plugins'

import "./app.css"

// Here start my application

Environment support

Extension features support


In your project npm install -D chrome-extension-scripts

Run development environment

You should do this before editing any code to see how it works.

  1. run chrome-extension run [path to manifest.json] -o [path to build directory]
  2. in Chrome open chrome://extensions/
  3. check Developer mode
  4. click on Load unpacked extension
  5. add your build directory
  6. changing of manifest.json wont trigger hot reloading and you have to rerun step 1.

Build production extension

  1. run chrome-extension build [path to manifest.json] -o [path to release directory]
  2. It will compile scripts, styles and other assets into your release directory
  3. It will make chrome extension into your release directory with certificate

chrome-extension command api

Run chrome-extension run [manifest_path] -o [build_path] -e [environment]

Build chrome-extension build [manifest_path] -o [build_path] -e [environment]


  • in this repo see example/manifest.json for basic usage of background script, content script, action popup and chrome url overrides.
  • all scripts and/or html pages from manifest.json are piped through preprocessor and prepared for using all features.
  • in your scripts you can use npm packages, babel, react (jsx), styles (with preprocessors) and any modern javascript feature you know.
  • when your extension does exactly what you want, you can run make production ready .crx build.

How to run it

  1. clone this repository git clone git@github.com:schovi/webpack-chrome-extension.git
  2. run npm install
  3. run npm run example
  4. to build extension run npm run example:build


  1. everything looks fine, but scripts from webpack arent loading.


  • [x] detect Chrome path for building extension


  • [ ] allow to pass existing .pem when building extension
  • [ ] experiment with hot middleware (hints in NOTE.md)
  • [ ] allow to have "static" files which will be merged into build
  • [ ] allow to reload extension when popup html file changed
  • [ ] solve Hot reload fix better than overriding file in /node_modules. It is really ugly and hacky
  • [ ] test assets without base64
  • [ ] add support for extension updating

Current Tags

  • 0.9.5                                ...           latest (3 years ago)

1 Versions

  • 0.9.5                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependents (0)

Copyright 2014 - 2016 © taobao.org |