How to Build a Chrome Extension That Makes API calls

Here's what we'll be building

Chrome extensions are small HTML, CSS and JS apps that we can install in the chrome browser.

In this tutorial, We are going to build an extension that allows users get the most up to date data on the Coronavirus by simply typing the name of a country without having to navigate to a website.

Let's get started!

1. Create a new directory and navigate into that directory. I'm a sucker for the command line so you'll see me use a number of Linux/Mac CLI commands in this post. You should have no problems following along.

mkdir covid-extension && cd covid-extension

Let's setup our app to make use of npm packages by running

 npm init -y

2. We need to create some files. I like to use webpack when developing apps so I can get that hot reload feature. Check out my article on Webpack to get setup to use webpack.

To get set up quickly, run

```npm i webpack && npm i webpack-cli```

Next, create a dist folder. Inside the dist folder, create an index.html file and a manifest.json file.

Then, create a src folder and an index.js file within it. (You can use the command line for this).

```mkdir src && touch index.js```

Get your code to compile by running

```webpack```

from the CLI.

Running the `webpack` command automatically generates a `main.js` file inside our **dist** folder. It'll contain code generated by **webpack** based on the code we write inside our **index.js** file.

3. Head into your manifest.json and add the following code. This is the file that contains information on how Chrome should handle our extension.

{
 "manifest_version": 2,
  "name": "C19-Search!",
  "version": "0.1.0",
 "permissions": ["<all_urls>"],
  "browser_action": {
    "default_popup": "index.html"
  }
}

manifest_version

name

version

We set permissions to

all_urls

browser action

4. Next, let's load our chrome extension into chrome.

In your chrome browser's address bar, head to

chrome://extensions/

Towards the top left corner, click the

Load unpacked

Our extension should now be uploaded. See below.

5. Head to your index.html. Hook up your `main.js` JavaScript file to your HTML. Also create and hook up a styles.css file.

Next, we create a simple form. Your file should look like below(your script src will be index.js if you aren't using Webpack). We will have a very basic UI.

Our UI would not look like below. Nothing pretty, but it works.

5. Just before we start writing our script, we need to install axios. You should have an npm directory initialized already from step 1. Run

npm i axios --save

to install axios.

Let's head into our index.js file and get cracking. We'd be using an open source API.

We have an asynchronous function called searchForCountry and within that function, we can use async-await. Async await allows us to stop executing code that is dependent on a response from a server, while we wait for the response from a server. By using the await keyword in front of a piece of code, we can get the rest of our code to stop executing while that piece of code executes.

In this example, we await a response from our GET request before setting that response to our cases, recovered and deaths variable.

All of this happens within our try — catch block. Our try block executes our GET request and if there’s an error, it is “caught” and handled inside the catch block.

Once you're done with your index.js file and have it saved, head back to the

chrome://extensions/

Click the extension icon and watch it work!

And that's it!

You've a chrome extension.

Here's a link to my github repo for the source code.