ReactJs Chrome Extension Boilerplate

We have open-sourced the boilerplate of chrome extension with ReactJs using inject page strategy. Read detailed blog

The boilerplate is to quickly create a chrome extension using ReactJs

The motivation behind creating a boilerplate was:

1. Instead of chrome's ready-made popup, We wanted our own page injected into DOM as a sidebar for better UX.
2. We wanted to use ReactJs for the Component-based approach, Routing, and its build mechanism.
3. Extension CSS should not conflict with the host page styles in any case.

I Hope, Someone will find it helpful

Source code:

satendra02 / react-chrome-extension

chrome extension boilerplate with ReactJs using inject page strategy

React Chrome Extension

We have open sourced the boilerplate of chrome extension with ReactJs using inject page strategy. Read detailed blog

The boilerplate is to quickly create a chrome extension using ReactJs, The motivation behind creating a boilerplate was:

1. Instead of chrome's ready-made popup, We wanted our own page injected into DOM as a sidebar for better UX.

2. We wanted to use ReactJs for the Component-based approach, Routing, and its build mechanism.

3. We need to make sure that the extension CSS should not conflict with the host page styles in any case.

Features

• Used ReactJs to write chrome extension
• Injecting extension to host page as content script
• Utilized the Chrome messaging API
• Isolated extension CSS using Iframe

Installation

Make sure you have latest NodeJs version installed

Clone repo

git clone https://github.com/satendra02/react-chrome-extension.git

Go to react-chrome-extension directory run

yarn install

Now build the extension using

yarn build

You will see a build…

View on GitHub