Back to all courses

Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?

Sean.Q
Vincent
ANTHONY UDEAGBALA
Shinobi
Raveendiran RR
Augis, Chadie Gil S.
303Visuals
Time-proof
MrCourtz89
Jens Busse
230,449 views
8,555 likes
438 comments

In this video, we are going to be coding a chrome extension together. Although I have been a software developer for 5+ years I have never built a chrome extension and always wanted to. This is a fun and simple project you can do. The objective of this video is to show you how to build a chrome extension. The content of the chrome extension itself can be updated and built onto as much as you would like!

About the instructor
Tiffany
Tiffany

Tiffany is a software developer who started her career in the modeling & fashion industry. Tech can be very overwhelming for many at first as she experienced firsthand entering into the industry.

Join the discussion on YouTube
Sean.Q
Vincent
ANTHONY UDEAGBALA
Shinobi
Raveendiran RR
Augis, Chadie Gil S.
303Visuals
Time-proof
MrCourtz89
Jens Busse
Related guide

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.

RapidAPI Hub
RapidAPI Hub

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.

Concert-Artists-Event-Tracker API
Concert-Artists-Event-Tracker API

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.

Upcoming Toronto Concerts empty display
Upcoming Toronto Concerts empty display

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.

Upcoming Toronto Concerts disarranged
Upcoming Toronto Concerts disarranged

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.

Upcoming Toronto Concerts arranged list wise
Upcoming Toronto Concerts arranged list wise

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.

Extension added in the Chrome Bowser
Extension added in the Chrome Bowser

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.

Guide author
Mashhood A.

Mashhood A.