How to Build a Chrome Extension with React

What is a chrome extension

Ever bought a car and wanted to add cool new features like making the car bounce when your horn, or adding LED lights to the boot of your car so it would look cool when you pop the trunk open?

Basically these are features that appeal to you but don't appeal to the general set of users using driving that particular car brand, so it would not really be a priority for the car brand or manufacturer to add those features to the default version of the car.

A real-world example in the terms of browsers would be a sales agent would love to have a way for emails to pop up when they are looking up potential customers on Linkedin or maybe a twitter user needs to be able to create a summary of another Twitter user just by opening his page. These are all cool features but aren't generic enough for the company building the browser to build into the browser, so other developers who see the need for this features go out and build this cool apps (extensions) and make them available to others to be used on their browsers.

What makes it so cool

We spend a lot of hours on our browsers, how much? about 10 percent of our time using our mobile devices and an exponentially greater amount for users making use of laptops, most people want and need extra features that add more value to their workflow and user experience, from extensions that help users save money when booking flights to other extensions that help users track price changes for eBay goods (i should actually build this) or even for developers that need to know the color code used by some sites they visit(i use this), they are powerful and useful enough to expand the whole browser experience.

Some examples of successful chrome extensions

• Honey: The Honey app is a free browser extension that makes finding coupon codes easier. Honey's smart shopping assistant will find the best coupon codes for the retailer you're shopping with and automatically apply the discount on your behalf once you download the extension to your computer. It was bought by Paypal for 4 billion.

• Grammarly: Grammarly is a Chrome, Safari, Firefox, and Edge browser extension. The extension is compatible with popular websites and can assist you in checking your text whenever you write online. If you also use Grammarly for Windows and Mac, the browser extension will be disabled by default but will continue to function in Google Docs. Grammarly is worth an estimated 13 Billion.

Components of an extension

Before we get into the specifics, let's take a look at the basic structure of a Chrome extension.

This extension structure is compatible with Chrome, Edge, and Brave, as well as possibly other Chromium-based browsers (maybe more).

Manifest.json

This is the most important part of your application and is similar to the package.json file for react applications, it defines the version of the application, permissions, and scripts to run like background and content scripts.

Background script

This is a piece of code that is defined in the manifest.json it is launched when the extension is launched and will not be terminated until the extension is removed or the browser is shut down. This script has full access to all Chrome APIs, whereas other parts are restricted. However, the background lacks a UI and cannot access the DOM, but can communicate with the content scripts with APIs.

Content scripts:

This is a script that runs on specific web pages open it has access to the DOM and can perform operations like changing the color of the background for pages, changing fonts, inject HTML components to the page, it sadly doesn't have access to the chrome extension API but is still very powerful, we can declare which web pages to run our content script.

Pop up:

The pup up page is an interface that appeared when they clicked on the "browser action" button, which is an extension icon button located next to the browser address bar. For most extensions, an entry is a popup, ours would not.

Starting a project with React

So now that the boring stuff is done let us figure out how to build one, originally I first built a chrome extension with plain old vanilla Js, which wasn't bad but we do know that the state of web development platforms like React and vue offers a lot of extra advantages when building apps with them like conditional rendering, use of components and also easy integration into other technologies like redux, using react actually 10x my development experience, so let us look at how to build a simple react chrome extension, that adds an inspirational quote to our google search page whenever we open it.

Step 1

To start we first need to create our react project.

npx create-react-app extension

Step 2

We need to create a manifest.json file for our application to do this we need to navigate into our application by cd extension and touch manifest.json We now need to paste data into our manifest.json file

  "manifest_version": 3,///using version 3
  "name": "My Extension",/// your extension name
  "version": "0.0.1", /// the version of your chrome extension 
}

Our manifest file contains 3 required properties (the rest are all either optional or advised). The manifest_version is the version of the manifest we are using, NOTE: using version 2 instead of version 3 like we showed above means a different declaration of components like content_scripts and background_scripts.

The name is the name of our application.

The version is the version of the application we are building we increment it when pushing to the google chrome extension store.

Other things you can have inside that file would be permissions, icons, and action.

Step 3

We now need to automate the build of our application, the reason we do this is that the files for our chrome application need to be in the root folder not in the build folder, to do this we need to edit our package.json file.

"build": "react-scripts build && cp src/js/* build/static/js && rm -rf ../static && mv build/static static"

So when we run

npm run build 

This builds our applications and transfers files from the static folder and copies them into our root folder, while also passing our js files into the static folder.

Step 4

The next stage would involve us building out our content script to be able to inject a quote into our google searching page, to do this we need to first declare that in our manifwest.json file.

***
 "content_scripts": [
        {
          "matches": ["https://*.google.com/"],/// This would only run on the google home page
          "js": ["static/js/content-script.js"]// this defines which script gets to run on the above page when it opens.
        }
      ]     
*** 

The next step would be to create a new file in our src/js folder called content-script.js and paste the following

const quotes =  
    [
        {
            "q": "Never be bored, and you will never be boring.",
            "a": "Eleanor Roosevelt",
            "c": "45",
            "h": "<blockquote>&ldquo;Never be bored, and you will never be boring.&rdquo; &mdash; <footer>Eleanor Roosevelt</footer></blockquote>"
        },
        {
            "q": "Convinced me, I seek not to convince.",
            "a": "Edgar Allan Poe",
            "c": "41",
            "h": "<blockquote>&ldquo;Convinced myself, I seek not to convince.&rdquo; &mdash; <footer>Edgar Allan Poe</footer></blockquote>"
        },
        {
            "q": "Ask no questions, and you'll be told no lies.",
            "a": "Charles Dickens",
            "c": "45",
            "h": "<blockquote>&ldquo;Ask no questions, and you'll be told no lies.&rdquo; &mdash; <footer>Charles Dickens</footer></blockquote>"
        },
......
]
 /// get a random text
function getQuote(){
    return quotes[Math.floor((Math.random()*quotes.length))];
}

const quote = getQuote()
console.log({quote})
/// inject the quote into the page
//first create a text element
const text = document.createElement('p')
text.innerHTML = quote.h

text.style.position = 'absolute';
text.style.top = '15%';
text.style.textAlign = 'center';
text.style.fontSize = '20px';
text.style.width = '100%';

const body = document.querySelector(`body`)

body.appendChild(text)

Let us break down the code base, we have a list of objects each object contains a quote our goal here is to show this quote any time someone with the extension opens up the google search page, we do this by creating a P tag and injecting that content into it.

const text = document.createElement('p')
text.innerHTML = quote.h

text.style.position = 'absolute';
text.style.top = '15%';
text.style.textAlign = 'center';
text.style.fontSize = '20px';
text.style.width = '100%';

we finally display it by actually calling the append child function which finally injects the text into our page

body.appendChild(text)

Then run the build command. Note this script is copied into the static folder when the build command is called.

We finally can see a quote on the google search page whenever we open it up.

Load extensions into the chrome browser

Now that is just part of it we need to understand how to load our newly created chrome extension into our browser

Step 1

Going to chrome://extensions/ is the URL to see all our chrome extensions.

Step 2

Load the extension, to load the extension there is a load unpacked button available to you at the top right-hand part of the page, clicking on it lets you navigate to the folder you built your application and adds that to our list of available extensions.

Conclusion

Chrome extensions offer developers the ability to append functionalities and extra features to our application, here we learned about the components of a chrome extension using a react application, and in the next chapters we would learn more about using the popup page and how we can take advantage of some react feature like useState and useEffect to perform operations and hold data in our extension.