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
- 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
npm install
npm install gulp -g
- if there is problem with missing gulpfile, uninstall
npm uninstall gulp -g
and install again. You have probably old non-babel compatible version
Usage
- Whole repository (package) is simple example extension.
- Check
src/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.
- When your extension does exactly what you want, you can run
gulp -p
for creating production.crx
build. - All your codebase belongs only to
src/
directory - In your scripts you can use npm packages, babel, react (jsx), styles (with preprocessors) and any modern javascript feature you know.
How to run development environment
You should do this before editing any code to see how it works.
- run
gulp
which will start webpack-dev-server - in Chrome open
chrome://extensions/
- check
Developer mode
- click on
Load unpacked extension
- add REPOSITORY_DIRECTORY/build
- Now you can check background script via link in extension
Inspect views: background page
and you will see some messages in console - Navigate to any http or https page and open development tools and console. You can see messages from content scripts.
- Find extension icon (puzzle image) right from adress bar.
- Click with left mouse button to show html content
- Click with right mouse button and select
Inspect Popup
. Then in console you can see some messages - You can edit your codebase with almost 100% hot/full reload support.
How to build extension
- run
gulp -p
- It will compile scripts, styles and other assets into release/build/
- It will make chrome extension into release/build.crx with certificate release/build.pem
TODO
Done
- Make manifest.json dynamic based on package.json name, description, version.
- Move everything from build directory and leave it only for building development extenstion.
- Make production build. Replace injector scripts with final builded one.
- Make Hot reload works. There is problem with including hot reload chunks which are included via new script tag into DOM. new code is then eval in default (window) context and not in context of extension. Have to do same hack as you can see in injector files and download chunks via XMLHttpRequest.
- Move
config/manifest.json
,util/make_injector.js
andutil/make_manifest.js
somewhere out of src to keep src in full will of developer - Create extension from build process and move it into release/
- Test assets base64 support
- Add asset example. Icon for actions
Future
- Split webpack config into core and user parts. Core are necessary for working this whole thing and user are developer customs.
- Allow to have "static" files which will be merged into build
- Allow to reload extension when popup html file changed
- Detect Chrome path for building extension
- Solve Hot reload fix better than overriding file in /node_modules. It is really ugly and hacky
- Create example repository with React app
- Test assets without base64
- Allow to define entry scripts other way than define them in manifest.json
- Add support for extension updating
Licence
Webpack Chrome Extension is released under the MIT License.