Bootstrap project for developing any kind Chrome extensions.
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()
- With all javascript features like NPM package manager, Webpack, Babel, React and almost everything you want.
- 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
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
- Whole repository (package) is simple example extension.
- Check
src/manifest.json
for basic usage of background script, content script and popup. - Background, content and popup informations are extracted and converted into development environment for extension.
- Ofcourse they can be "compiled" into production extenstion crx file too.
- 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.
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.
- 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
- 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
- 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
Webpack Chrome Extension is released under the MIT License.