Total word count: ~3500 words (excluding code blocks).

Read the full tutorial

Intro Video Walkthrough

Full Video Walkthrough

Code behind this Jekyll Tutorial

Code behind the sticky note extension

Inspiration

React is an amazing framework for creating beautiful UIs and user-facing code, and we thought it would be a great framework to build browser extensions. However, we faced numerous difficulties along the way when we tried building a Chrome Extension. We found a handful of tutorials online, but almost all of them were poorly written, outdated, or plainly incorrect. Some even made suggestions that would damage the integrity of your codebase.

With these frustrations in mind, we wanted to give back to the community and show that React isn't just for making websites and apps; React can also be used to build powerful browser extensions.

What it does

In this tutorial, we walk users through how to build a Chrome extension using React.

How I built it

  • For hosting our tutorial, we used Jekyll and Github Pages
  • We build a Chrome Extension alongside the tutorial written in React

Challenges I ran into

  • By default, Webpack splits JS files into chunks. We had to prevent Webpack from splitting files without running npm eject
  • Webpack also adds random hashes to JS files as a measure to prevent browsers from over-requesting unchanged JS. We also had to prevent Webpack from adding hashes
  • Injecting React code into a standard webpage can cause CSS collisions. By using the Shadow DOM API, we were able to prevent elements from interfering with each other's styling.
  • React is typically made to run on a single HTML document. However, browser extensions generally have multiple HTML documents. We had to configure our extension so that React could run everywhere.

Accomplishments that I'm proud of

We were able to use the knowledge from this tutorial to build a working product. We're actually live on the Chrome store!

What I learned

We learned how to modify React build code to be compatible with extension code, prevent CSS collisions with shadow roots, and run React in multiple HTML documents.

What's next for Making Chrome Extensions with React JS

We plan on publishing our tutorial on HackerNoon and sharing it on Twitter and Linkedin

Built With

Share this project:

Updates