Build & Publish a Chrome Extension via RapidAPI

Thu Dec 22 2022

6 min read

Today, we're going to develop a Chrome extension in this guide. This project is ideal for beginners learning JavaScript because of its simplicity.

Let's get our Chrome extension up and running right away. There are three things that need to be accomplished.

  • The first thing that we need to do is launch VS Code, make a new file named index.html, and give it some kind of organizational framework.
  • The second step entails the production of some JavaScript.
  • The third requires the creation of a manifest.json file. This is a file that has information on the Chrome extension's metadata within it.

Let's begin by creating a file called index.html to get things rolling. Let's write Toronto Concert Schedule inside the title. You may name the city whatever you choose.

In the body, let's include a div that contains our title, which is essentially the same thing. Actually, let's title it Upcoming Toronto Concerts. Additionally, we also need to have an unordered list which is really just going to contain concerts.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toronto Concert Line-up</title>
</head>
<body>
<div>
<h2>Upcoming Toronto Concerts</h2>
<ul>
<li id="concerts"></li>
</ul>
</div>
</body>
</html>

This API we're going to use requires quite a few things. We're basically going to compile a list of forthcoming concerts for specific dates. You can also add information to the extension, such as the conference dates, URLs for registration, etc. However, the purpose of this guide is to show you how to make a Chrome extension and provide you with a solid base, so that you can then develop it as you see fit. Let's follow that in the following steps:

Step 1

The first step is to simply create the script.js file. Here, we'll make an async function called fetchData(). This is where the data will be retrieved from when it is requested via our API.

Before going further, let's talk about RapidAPI briefly. RapidAPI is the largest API Hub in the world. It is a platform of the next generation that allows developers to explore and connect to thousands of APIs. RapidAPI allows developers to search for, test, subscribe to, and link to APIs.

There are so many enjoyable APIs to experiment with. I utilize the Concert-Artists-Event-Tracker API for this purpose. This API is quite basic. You can view future events, artist events, past events, and location-based events.

RapidAPI is incredibly user-friendly if you have never used it before. All you need to do is select the type of endpoint you want, and for this one, I've selected Events by location.

Then, if I scroll down, you can see the location where you desire the events to occur. So I'm going to put Toronto in for myself. Additionally, the minDate and maxDate can be specified. You're free to choose any language, but I'd recommend JavaScript (Fetch).

Let’s test the endpoint. After that, we will simply copy the code and put it into our VS Code script.js file.

js
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'your-rapidapi-key',
'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
},
};
fetch(
'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
options
)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

Step 2

We need to change this code slightly and include const response and await till we get the API response. The addition of record will transform the response into JSON. The following step is to log that record.

js
async function fetchData() {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'ea8fcc@be5msh014de60d714562cp198165jsn0e43a32ae48c',
'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
},
};
const res = await fetch(
'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
options
);
const record = await res.json();
console.log('record', record);
}
fetchData();

Step 3

Simply open your index.html file in order to view it. As expected, nothing appears on the screen because we haven't passed anything in yet, but we can see 25 objects in our console. On top of the description of the performers and end date, it also has a variety of other elements.

Step 4

Let's return to our code. Now all that remains is to retrieve the element by id, which is concerts. Given that this record is an array containing objects, we will need to map over it.

js
async function fetchData() {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'ea8fcc@be5msh014de60d714562cp198165jsn0e43a32ae48c',
'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
},
};
const res = await fetch(
'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
options
);
const record = await res.json();
document.getElementById('concerts').innerHTML = record.data.map(item => item.name);
}
fetchData();

The upcoming Toronto concert artist can be seen on our browser, however, it is poorly represented.

Step 5

To make it appear in a list format, I will modify the code slightly. So, let's write that as follows:

js
async function fetchData() {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'ea8fcc@be5msh014de60d714562cp198165jsn0e43a32ae48c',
'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
},
};
const res = await fetch(
'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
options
);
const record = await res.json();
document.getElementById('concerts').innerHTML = record.data.map(
item => `<li>${item.name}</li>').join('')`
);
}
fetchData();

Now the unordered list items will be displayed. For the sake of demonstrating that you may create whatever type of content you desire with this Chrome extension, I aimed to keep this example as straightforward as possible.

Step 6

This is where the magic begins to emerge. Here, we can generate a manifest.json file, which, as previously said, contains only metadata. We're going to write the Chrome extension's name. Let's write version, description, and further information in the code.

json
{
"name": "Upcoming Toronto Concerts",
"version": "1.0.0",
"description": "This is an extension to Look up concerts coming to Toronto",
"manifest version": 3,
"author": "Tiffany Janzen",
"action": {
"default ppopup": "index.html",
"default _title": "Upcoming Toronto Concerts"
}
}

Step 7

Next, open a new window and navigate to more tools and extensions in Chrome. Turning on developer mode, clicking load unpacked, and selecting the folder containing your extension is all that is required at this point. Lets go back and refresh. We may now view our future Toronto performances.

Wrap up

In conclusion, you have discovered how to create a simple Chrome extension. Using RapidAPI, which provides a hub for integrating many APIs into your project, you can construct various types of Chrome extensions.