Google Chrome Extension - ReactJS

An extension is a zipped bundle of files (HTML, CSS, Javascript, images etc). It allows us to add functionality to chrome without deeply diving into native code. They can interact with servers through XMLHttpRequest (ajax) and if we wish to read (or modify) HTML from existing web page then content script allows us to do so.

Google has already done a great job with documentation and you can find a "Getting Started" guide here.

Let's Start

We are going to develop a simple extension which will show us the weather for selected city.

We will be developing a single page application using ReactJS which will target weather API using XMLHttpRequest and then with help of plain old javascript we will process the JSON response to update UI.

You can find source code of this application on Github under "app" folder.

Packaging

From the "app" folder you can extract the code for our single page application. This is the core of application and all UI logic is managed here. Next step for us is to create a manifest file which will look as below

{
  "manifest_version": 2,

  "name": "Weather Application",
  "description": "This extension will show current weather for selected city",

  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "app/app.html"
  }
}

A manifest file can have more attributes depending on application requirement (for a complete set of properties please refer to this link) but to create a simple extension we only need to consider below mentioned properties

1. name - This is the name of application that will be displayed under you application in extension page (and in chrome store). This name will also come as tool tip when someone hover over extension.
2. description - This is sample description of application. It helps its user understand what the extension is developed for.
3. version - This is application version and should be updated with each major or minor release to help others understand which version they are using.
4. default-icon - This is the icon that is displayed in chrome when extension is added.
5. default-popup - This defines the entry point for application. When we click on extension icon, this HTML page is loaded first. In our case this will be the app.html file which loads reactJS code for further execution.

Load Extension

To test our new extension we need to visit chrome://extensions in a chrome browser. On the top right corner of this page there will be a small check box with "Developer mode" as text. We need to enable this to load our package.

Once enabled we will have three extra options as highlighted in screen capture below

1. Load unpacked extension
2. Pack extension
3. Update extensions now

Click on "Load unpacked extension" and locate the folder with extension code. Click on OK and this should add the extension. You will have a confirmation as shown in below image

To publish this application on chrome web store please check this document.

Note: As you will notice in the source code we are not using JSX. Babel executes inline script in-order to convert JSX code to Javascript. This violates Content Security Policy directive of chrome extension. You can always use JSX to Javsacript converter if you are less familiar with template syntax in Javascript.