How to build Chrome extensions with React + Parcel

Thanks to Umut for Hero Image

This month, I started to build my new product. It helps convert any website to JSON, XML, CSV, or any other format. I wrote my own Chrome extension for pointing to the fields in websites.

Most articles show how you can render it in a popup. In this article, we will render our app directly in the content (with Content Scripts). I will show you to how to start writing a chrome extension using ReactJS and Parcel from scratch. I will assume you have basic knowledge of JavaScript.

Note: If you don’t want to read this article and just want to start coding, you can find the Git repo at the end.

The Scenario

We need to render our app on the visited website when a user clicks the render element button in the popup.

So, let’s get started.

How our project will look

A finished version of a project
├── icon.png
├── manifest.json
├── node_modules
├── .babelrc
├── package.json
└── src
├── build
│ └── main.js [We will use that build file as content script]
├── js [Where our development file is stored]
│ ├── components [We are storing components in this folder]
│ │ └── Header.js
│ ├── main.js [Our main file, that renders our app]
│ └── popup.js [Our javascript file for popup]
└── popup.html [Our html file for rendering popup after clicking the icon in the bar]

Step 1: Creating Project Files

Firstly, create manifest.json, as we need that file for providing information about our Chrome extension.

Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information like name, version, and permissions.

And here is how it looks:

manifest.json

After creating the manifest file, we need to configure our project environment and structure.

Let’s start creating out project structure — so open your terminal and follow my steps!

Step 2: Creating package.json

As you can see, there are two scripts build and watch

  • watch command watches your main.js and compiles if there was a change or if dependencies are imported from main.js.
  • build command builds your files into the src/build/main.js file.
package.json

Step 3: Creating files and folders

  • Create a source folder
mkdir src
  • Create a components folder in src folder
mkdir src/js/components
  • Create main.js ,popup.js and popup.html files
touch src/js/main.js src/js/popup.js src/popup.html
Project Structure

Step 4: Writing the Popup

Popup

The popup appears at the top of the bar in Chrome when a user clicks the icon of the extension.

The React App will be rendered in the content when a startApp message comes from the popup. The popup will share a startApp message with the app.

Edit your popup.html file with the following HTML:

popup.html

There is a button in the popup which sends a message to our main.js file when a user is clicked.

And edit your popup.js file with the following:

popup.js

chrome.tabs.sendMessage method shares the message with a listener. Our listener is working in the main.js.

Step 5: Rendering React App

At this point, main.js should listen to messages which are coming from popup.js.

We can listen to messages with the chrome.runtime.onMessage.addListener method. And here is how our main.js file looks:

Let’s look at what have we done in main.js:

  1. Imported React and ReactDOM libraries.
  2. Created an App class for rendering a React element.
  3. Added an event listener function for listening for messages which are coming from popup.js
  4. Created an injectApp function that created a div, and injected it into a body. We rendered our <App /> component inside it.

Testing it

For testing your extension:

  • If you didn’t build your files, build them by running the npm run build command
  • Go to “chrome://extensions”
  • Check the “Developer Mode” switcher
  • Click the “Load Unpacked” button, then select your project folder.

And Whoa! You have created an extension for Google Chrome. You are awesome!

Your extension rendered!

Open your developer tools and look at the end of the body — your element rendered successfully!

Source Code

Here’s the final repo:


Done!

Thanks for reading through this tutorial. It was my first article in English! If it has been helpful, please recommend it by hitting the clap button 👏 or (even better) share it. 🤜🤛

Follow me on Twitter and Github!