Webpack React Extension Boilerplate

Works for Chrome, Opera, Edge & Firefox.

This plugin is higly inspired by extension-boilerplate (https://github.com/EmailThis/extension-boilerplate)

Features

Write in your favourite framework - React! :)

Now you can create part of your exstensions in React framework - as you wish ;)

Write once and deploy to Chrome, Opera, Edge & Firefox

Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.

Live-reload

Your changes to CSS, HTML & JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience. Based on https://github.com/xpl/crx-hotreload

Newest js technology stack

You can use ES6, ES5.

Comfortable styles import

With react you can loas styles directy and you can use scss for styling.

Easily configurable and extendable

Project use webpack so you can easly customize your project depends on your needs. In config.json you can define source path for each browser (if needed - default it's the same source), destintantion and develop directory.

Clean code

Clean code is the best way for long term support for project. Boilerplate has fully configured eslint with airbnb styleguide.

Test your components!

Project use some library which support your testing proces. As test runner we use karma, as testing framework mocha. As support to assertion we use chai.

Installation

1. Clone the repository git clone https://github.com/kamilogerto2/webpack-react-extension-boilerplate.git
2. Run npm install
3. Run npm run build

Load the extension in Chrome & Opera

1. Open Chrome/Opera browser and navigate to chrome://extensions
2. Select "Developer Mode" and then click "Load unpacked extension..."
3. From the file browser, choose to webpack-react-extension-boilerplate/dev/chrome or (wwebpack-react-extension-boilerplate/dev/opera)

Load the extension in Firefox

1. Open Firefox browser and navigate to about:debugging
2. Click "Load Temporary Add-on" and from the file browser, choose webpack-react-extension-boilerplate/dev/firefox

Load the extension in Edge

https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/adding-and-removing-extensions

Developing

The following tasks can be used when you want to start developing the extension and want to enable live reload -

• npm run watch-dev

Packaging

Run npm run build to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.

---

This project is licensed under the MIT license.

If you have any questions or comments, please create a new issue. I'd be happy to hear your thoughts.