Need help with react-extension-boilerplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kryptokinght
212 Stars 42 Forks MIT License 40 Commits 19 Opened issues

Description

:rocket: Modern React boilerplate for Firefox and Chrome extensions.

Services available

!
?

Need anything else?

Contributors list

# 200,306
CSS
HTML
web-ext...
Shell
30 commits
# 63,781
graphql...
scalajs
talks
gauge
1 commit
# 164,190
HTML
laravel...
laravel...
web-soc...
1 commit
# 255,792
jinja2
HTML
CSS
Shell
1 commit

React Extension Boilerplate for Chrome and Firefox

Fork Issues Stars Watchers MIT license PRs Welcome

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.

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

    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:* dev gif
  • 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:
dev folder screenshot

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:
Extension folder

Compress :nutandbolt:

# 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.
  • --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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.