Home

Awesome

Webpack Chrome extension

IMPORTANT!!!

I am leaving this project in favor of Create Chrome Extension. It is standalone npm package and should be more maintanable.

Description

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

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()

Extension features support

Installation

  1. npm install
  2. npm install gulp -g

Usage

How to run development environment

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

  1. run gulp which will start webpack-dev-server
  2. in Chrome open chrome://extensions/
  3. check Developer mode
  4. click on Load unpacked extension
  5. add REPOSITORY_DIRECTORY/build
  6. Now you can check background script via link in extension Inspect views: background page and you will see some messages in console
  7. Navigate to any http or https page and open development tools and console. You can see messages from content scripts.
  8. Find extension icon (puzzle image) right from adress bar.
  9. Click with left mouse button to show html content
  10. Click with right mouse button and select Inspect Popup. Then in console you can see some messages
  11. You can edit your codebase with almost 100% hot/full reload support.

How to build extension

  1. run gulp -p
  2. It will compile scripts, styles and other assets into release/build/
  3. It will make chrome extension into release/build.crx with certificate release/build.pem

TODO

Done

Future

Licence

Webpack Chrome Extension is released under the MIT License.