Home

Awesome

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.

WARNING

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

manifest.json

{
  "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

manifest.json

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

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

app.js

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

import "./app.css"

// Here start my application
$('input').spellchecker()

Environment support

Extension features support

Installation

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]

Example

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

Troubleshoting

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

Done

Future