61

ReactJs Chrome Extension Boilerplate

 5 years ago
source link: https://www.tuicool.com/articles/hit/QJJJnqr
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React Chrome Extension

chrome extension boilerplate with ReactJs using inject page strategy. You can read this blog for details

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

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]

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.

NfEFVnN.png!web

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.

jMRFvuv.png!web

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 .


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK