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

About the developer

satendra02
410 Stars 95 Forks MIT License 48 Commits 8 Opened issues

Description

chrome extension boilerplate with ReactJs using inject page strategy

Services available

!
?

Need anything else?

Contributors list

# 130,850
reactjs
React
HTML
CSS
26 commits
# 234,296
reactjs
React
HTML
CSS
6 commits
# 327,258
reactjs
React
HTML
CSS
2 commits
# 154,304
HTML
Shell
vanilla...
particl...
1 commit

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.

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

  2. 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
folder generated inside
[PROJECT_HOME]

To avoid running

yarn build
after updating any file, you can run
yarn watch

which listens to any local file changes, and rebuilds automatically.

Adding React app extension to Chrome

In Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on the

LOAD UNPACKED
and browse to
[PROJECT_HOME]\build
 ,This will install the React app as a Chrome extension.

When you go to any website and click on extension icon, injected page will toggle.

Using SASS

Boilerplate contains sass-loader, so you can use SASS instead of pure CSS in your project. To do so: 1. Rename

src/App.css
file to
src/App.scss
2. Change import line in
src/app.js
from
import './App.css';
to
import './App.scss';

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/satendra02/react-chrome-extension/. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The repo is available as open source under the terms of 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.