Add-Ons for Web Browsers With React

Sometimes we would like to increase our productivity when working with our favorite web browser. It usually helps to use a proper browser add-on, but not always. Sometimes there’s no add-on to solve a specific problem you have. In that case, you can create your own add-on, and React can help you with that.

Creating a web browser add-on may seem to be a niche, but there are already plenty of them available in many web browsers like Chrome, Firefox, Opera that individual developers or users create. There are also many guides, tutorials, and instructions available - they all describe the process of creating such add-ons step by step.

The basic structure of every web browser add-on

Before diving into details on how to set up and use React in web browser add-ons development, let’s have some fundamentals covered.

Every web browser add-on is created using JavaScript or TypeScript. It contains three major parts:

1. Manifest:
   This file contains important information regarding the add-on, such as its version number, required permissions, icons, and scripts it uses. Its structure will vary between versions 2 and 3, which are currently supported by major web browsers.
   ‍
2. Scripts:
   These act as the engine of your web add-on. Background scripts are registered during the add-on launch and can run in the background, performing tasks like manipulating the browser, its windows, tabs, etc. Content scripts are the ones that are launched for the context of a single web page and are able to manipulate its content.
   ‍
3. UI implementation:
   In its most basic form, this is where the HTML code of your add-on is. Using the script tag, you can always use JavaScript to launch a script in your view. In other words, a web browser add-on is like a simple web page (yes, let’s keep our add-ons simple) with its backend - background scripts and actual server if you use one, and frontend as the client of the said scripts or server.

And this is where React comes in - with React you can easily implement the most complex UI solution you can imagine providing users of your add-on with the top-notch layout, look and feel.

<p-bg-col>What’s important to note is that not all of these parts are required. The truth is that only the manifest is required for your add-on to be fully working in the browser, but the rest is up to you and your needs regarding what your add-on is about to do.<p-bg-col>

Examples

Let’s say you work on the ad blocker add-on which launches all the logic behind the scenes each time you visit a website. Such an add-on will only have the Background and/or Content scripts implemented, as there’s no need to show any popup to the user (of course, you can still implement it to provide your user with statistics on how many ads were blocked by now, but it’s up to you).

Another example would be the extension which would present to the user a weather update that can be fetched from the internet. This update would be displayed in the popup or via a modal or alert. There’s no need to implement any Background and/or Content scripts.

Creating the project and setup

Every web browser on the market has a guide or tutorial focused on creating the basic setup and on starting development. So the first step I recommend is to search for a tutorial regarding your favorite web browser (such a tutorial is to be found on the official websites of the web browser) or the web browser you want to support in your extension and get familiar with the steps listed there regarding:

• What the project structure should look like
• How to build and pack the extension
• How to manually test it locally before publishing
• How to eventually publish it to the market

The two first points listed above are common for every browser there is, but the last two will vary across every browser. And because the first two are common the repository of your add-on should always contain the package.json file in the root of your project, next to the setup files (all other configs for tools you use or those described further), and next to the add-on application implementation directory.

So once we have the initial structure, let’s start installing all the basic tools we will need to use React for developing the add-on.

Depending on your package manager tool, let’s install the following: 

• React
• react-dom
• webpack

as the basic setup for working with React in add-ons development.

<p-bg-col>Remember that you will also need a tool to transpile your code so you can follow Babel’s guide on how to set it up depending on your needs.<p-bg-col>

If you plan to write tests for your add-on (which I totally and strongly recommend, and will cover in future articles), you can also install <rte-code>Jest<rte-code> and <rte-code>react-test-renderer<rte-code>.

Of course, for the sake of your own development experience, you can supply your repository with additional code-quality tools, like ESLint and TypeScript.

So you now have the setup ready. Following the guide of the browser you selected to support, you also should have the directory now with the add-ons implementation itself. This directory can be called whatever you want, but it should contain the already described manifest file with the required source code files:

1. The Background scripts and/or the Content scripts (if you plan to use them)
2. The view of your popup implemented in a single HTML code

Those parts are also already described above, so let’s jump into our main point of interest: the popup view.

Popup view 

A popup is something that appears each time the user clicks the icon of your add-on and is something that the user will interact with when using your add-on. However, currently, this view is just the most basic HTML page there can be, so let’s quickly and easily set it up with React.

Developing the popup with React

To do that we should start with the entry point or our add-on’s view. The manifest of your add-on contains the <rte-code>browser_action<rte-code> or <rte-code>action<rte-code> part, depending on the manifest version, where the <rte-code>default_popup<rte-code> field should already exist. If it does not, let’s create it and add there the HTML code of our popup’s view we want to be the entry of our add-on. So for version 2 of manifest it will be:

or for version 3 of manifest:

The HTML code implemented in src/popup/Popup.html should contain the <rte-code>script<rte-code> tag and the <rte-code>div<rte-code> with the selected <rte-code>id<rte-code> (most probably <rte-code>root<rte-code>). All in its <rte-code>body<rte-code>.

For the script, let’s create the first JS or TS file in which we will instantiate the first React component as the root of our DOM. The implementation may vary of course, but below is just the basic example of how this entry component may look like:

On a final note

What this implementation does may be clear for you, but there are some things worth mentioning. Anything given as children of the <rte-code>div<rte-code> will be rendered just like it is when developing any other web page with React. There is really no difference, and that is really awesome!

It means that you can work with React in creating your web browser add-on just like you would work with it on any other day during web development.

‍