React Extension Boilerplate for Chrome and Firefox

Still in Development!

:zap: Are you trying to create a web Extension but still looking for a starting point?
:zap: Do you want your extension to run in both Firefox and Chrome?
:zap: Are you tired of repeteadly reloading your extension after every small change you make?
:zap: Do you want to develop your exetension using modern technologies like React, Webpack, Jest?

We have a solution!

React Extension Boilerplate is a modern web extension template for building Mozilla and Chrome extensions using ReactJS.

Allows smooth and fast development of extension using on-the-go loading, building, packaging and publishing on the most common browsers Chrome and Firefox.
Make changes to the source code and watch the extension implement these changes live in the browser.
Implements all the best Javascript practises with ESLint, Jest, React-StoryBook, Webpack and lots more.

• Source: https://github.com/kryptokinght/react-extension-boilerplate

Installation :checkered_flag:

Installing this boilerplate is as simple as cloning this repo in a new folder and start editing the source folder.

Before you begin installing this project you need NodeJS and npm installed on your machine. Make sure to install the latest version of node.

# clone the git repo
$ git clone https://github.com/kryptokinght/react-extension-boilerplate.git

# Install dependencies
$ npm install

Development :computer:

• Run script

# build files to './dev' 
# and launches the web ext in a new chrome instance, watches for changes and updates
$ npm run start:chrome
# launches in firefox
$ npm run start:firefox
# runs storybook
$ npm run storybook

npm run chrome-launch in action:

• If you want to load your unpacked extension by yourself, then run npm run dev. This will create the extension inside an dev folder in development mode and will watch the src folder for changes.
• Load unpacked extensions with ./dev folder. Though you have to reload the extension by yourself every time the ./dev folder updates.

Screenshot of the development folder:

Go to the project folder and run the following commands:

How to develop extension using the boilerplate

The CODETOUR.md gives an overview of the project structure.
The only folder important to you is the source folder. The /src contains the different components of the extension like content_scripts, background, options, popup, sidebar.

Any component which you not require, suppose you don't need sidebar, you can simply delete that component from the src folder and it will not be included inside your build.

If you don't want to use React..

Suppose you don't want to use React in your popup to develop UI. You can delete all the files inside the popup folder only leaving the [template.html] inside it.
You can use this template.html as your popup.html. BUT any scripts or CSS files referenced inside this template.html should be put inside the src/lib folder.

Example of an extension bootstrapped using React Extension Boilerplate that doesn't use React!

Storing static assets like images, fonts

Separate folders have been provided to store these static assets.

• /src/img
• /src/fonts

These assets are copied as it is to the build folder, just like the /src/lib folder.

Delete unnecessary files from the boilerplate

Files like CODETOUR.md, CONTRIBTUING.md, README.md, LICENSE in case they are not relavant to your project. Once the CLI tool is build, it will help you scaffold the extension without including these unnecessary files.

If you need any further help regarding feel free to ask on our Gitter community or create an issue.

Build :wrench: :hammer:

# build files to './extension'
$ npm run build

Once created here's what the extension folder looks like:

Compress :nut_and_bolt:

# compress build folder to {manifest.name}.zip and crx
$ npm run build
$ npm run compress -- [options]

Options

If you want to build crx file (auto update), please provide options, and add update.xml file url in [manifest.json](https://developer.chrome.com/extensions/autoupdate#update_url manifest.json).

• --app-id: your extension id (can be get it when you first release extension)
• --key: your private key path (default: './key.pem')
  you can use npm run compress-keygen to generate private key ./key.pem
• --codebase: your crx file url

See autoupdate guide for more information.

Features

Contributing :tada:

To get an idea about the structure of the project, read here. Contributions are highly welcome. Please take some time to read the guidelines mentioned here contribute.

License

The code is available under the MIT license.