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