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

Browser action
Page action
Background Pages (Scripts)
- Support both background scripts or page
Content scripts
- Supports only scripts. Stylesheets can be easily made and use with webpack
Override Pages
- You can customize newtab, history, or bookmarks

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.

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

Build production extension

run chrome-extension build [path to manifest.json] -o [path to release directory]
It will compile scripts, styles and other assets into your release directory
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

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

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

Troubleshoting

everything looks fine, but scripts from webpack arent loading.

Probably problem with development ssl certificates. Open any script (i.e. https://localhost:3001/path_to_your_script.js) in separate tab and allow chrome to load it anyway. Then reload extension.

Done

detect Chrome path for building extension

Future

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

teramotodaiki/create-chrome-extension