Awesome Open Source
Awesome Open Source

React Extension Boilerplate

Works for Chrome, Opera, Edge & Firefox.

preview

Features

  • Write in your favorite framework - React! :)

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

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

    Based on webextension-polyfill-ts. 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 web-ext-reloader

  • Newest js technology stack

    You can use Typescript or Babel

  • Profiling JS Packages

Profile

  • Comfortable styles import

    With react you can load styles directly and you can use scss for styling.

  • Easily configurable and extendable

    Project use webpack so you can easily 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), destination and develop directory.

  • Clean code

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

  • Test your components!

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

Run & Installation

Run & Build

  1. Clone the repository git clone https://github.com/WebExp0528/>React-Extension-Boilerplate.git. If you want to use Babel, git clone --single-branch --branch babel https://github.com/WebExp0528/React-Extension-Boilerplate.git
  2. Run npm install or yarn install
  3. Run npm run build:{target browser} or yarn build:{target browser}. EX: yarn build:chrome

Note: You can download build file

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 React-Extension-Boilerplate/dev/chrome or > (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 >>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 dev:{target browser} or yarn watch:{target browser}

Profiling

Run npm run profile:{target browser} or yarn profile:{target browser}

Packaging

Run npm run build:{target browser} or yarn build:{target browser} to create a zipped, production-ready extension for each browser. You can then upload that to the app store.

Available Target Browsers

chrome firefox opera edge


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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,512,368
Typescript (252,216
Reactjs (72,739
Chrome Extension (5,913
Boilerplate (5,528
Extension (3,566
Babel (3,210
Chrome (2,846
Firefox (1,816
Firefox Addon (1,053
Browser Extension (974
Firefox Extension (868
Edge (418
Hot Reload (355
Opera (161
Related Projects