Creating your First Chrome Extension
Chrome Extensions have really become a thing now, isn't it!
Extensions let us personalize our web experience by giving us many functionalities, in just a single mouse click.
So why not use our dev skills to make our own customized chrome extension that will make our life much easier.
Structuring the Project
Let’s create a new directory for our working files. I’ll be naming it as …… “First Chrome Extension”, but you all are free to give any name you like.
The first thing that we need to do to create a chrome extension is to create a manifest.json file. This file is going to contain all the metadata, permissions, version, and other info about our extension. This file is used by the chrome API to recognize our project as an extension, so don’t miss it out.
Inside the file, create the object block and add the extension name, description, and version of the extension. Also, we need to provide a property manifest_version. This manifest version basically describes the compatibility of the extension with different versions of chrome browsers. Currently, according to Chrome Developer Documentation, the developers should specify manifest_version as 2 or 3.
{"name": "First Chrome Extension,"description": "A simple extension for taking notes","version": "1.0","manifest_version": 3,}
Creating the HTML templates
Now, we will need to create HTML templates for our extension. This is going to be like any other normal Website. We are going to name it popper.html. We will also create a stylesheet and a script file popper.css and popper.js respectively.
In this tutorial, we are creating a popper-style extension. In further tutorials, we will see how to make full background screen chrome extensions.
After creating these files, we need to add another property action in the manifest.json file. This is going to specify which file runs when we click on the extension icon.
{"name": "First Chrome Extension,"description": "A simple extension for taking notes","version": "1.0","manifest_version": 3,"action" : {"default_popup" : "popup.html"}}
The action property can have some more fields like default_icon, etc. To learn more you can look at the Official Chrome Developer Documentation.
The next step will be to adding content to our popper.html file. We add the boilerplate code. Also, make sure to add the script tag towards the end of the body tag, linking the popper.js file. Consequently, add the link tag for the stylesheet.
<!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" /><link rel="stylesheet" href="./popup.css" /><title>First Chrome Extension</title></head><body><h1>First Chrome Extension</h1><script src="./popup.js"></script></body></html>
Unpacking the Extension
Now, it's time to see whether our extension works or not. Open the chrome://extensions tab from the Chrome settings. Herein, enable the developer mode.
Now, to unpack our extension, click on Load Unpacked the option, and search for the directory of the extension. With selecting the directory of the extension, click open.
You will see that the extension has been unpacked and is visible. Now, what's left is to enable the extension. After enabling the extension, it will be visible on the top corner of the bookmark bar.
Now, click on the Extension icon. After clicking, you will see a popup something like this.
Hurray! You have just created your first extension.
Improving the Extension
Now, we have a simple working extension. But let's make it much better now.
So, now we will now try to use the extension to search for any movie. The extension should display movie posters, other metadata like rating, budget, box-office collection, etc. Also, we will display the name of the cast members.
For this, we will be using TMDb free Movie API. You will be required to register an account with the official TMDb platform and get an API key. This key is necessary for making API requests to the TMDb’s Database.
So, let's add a search input for searching the movie names, some placeholder divs for displaying the fetched results.
<div>
<input type = 'text' placeholder="Enter movie name" id = "moviename-input"></input><button id = 'getmoviebutton'><i class="fa fa-arrow-right fa-lg" aria-hidden="true"></i></button></div></div><div class="Movie"><h2 id = 'MovieName'></h2><div class="movieimage"><img id = 'movie-backdrop' src = "#"/></div><p id = 'movie-description'></p></div>
Now, here comes the fun part. We’ll be setting up the scripts and fetching the movie data from TMDb’s API.
Preparing the Script file
We will start off by adding an onDOMContentLoaded event listener so that our scripts run only when the extension has been loaded into the DOM.
Then, when the search button is clicked we will be calling a function getdatafromapi() to fetch the movie details.
document.addEventListener("DOMContentLoaded", () => {document.getElementById("getmoviebutton").addEventListener("click", () => {var moviename = document.getElementById("moviename-input").value;getdatafromapi(encodeURI(moviename));});});
Important: As you can see here, I have not used inline JS function calls in HTML like we regularly do. This is because chrome extensions do not allow inline function calls. So, we need to call an onClick eventlistener and then run the function.
Next, we would define the function getdatafromapi . This will be an asynchronous function as we will be using the fetch module and the fetch module returns a promise. I’ll be using the async-await paradigm this time. This can also be done by using promises.
async function getdatafromapi(moviename) {try {var res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key={YOUR API KEY}&language=en-US&query=${moviename}&page=1&include_adult=false`);var moviedata = await res.json();var MovieData = moviedata.results[0];
createMovieElements(MovieData);} catch (err) {console.log(err);}}
The function getdatafromapi takes in moviename as a parameter and uses it as a query parameter for searching the movie details. Note that before passing it into the functions, we will convert it into the URL encoded form by using the encodeURI() method.
Post fetching the movie data, it is passed into another function createMovieElements .This is the function that’s going to take care of populating the dom elements with the data.
function createMovieElements(MovieData) {//titlevar MovieNameElement = document.getElementById("MovieName");MovieNameElement.innerHTML = MovieData.original_title;//movie-backdropvar MoviebackdropElement = document.getElementById("movie-backdrop");MoviebackdropElement.setAttribute("src", `https://image.tmdb.org/t/p/original${MovieData.backdrop_path}`);document.getElementById("movie-backdrop").style.display = "block";//descriptionvar MovieDescriptionElement = document.getElementById("movie-description");MovieDescriptionElement.innerHTML = MovieData.overview;}
Here, we are using the .innerHTML property of DOM elements and updating the values.
If we preview the extension from the Chrome Developer window, we will notice that there is no change. This is because our extension is still loading the original data files. To update the packages, we simply need to click on the refresh button.
And now if we click on the extension icon, we can see that we have a search bar with a button. And if we type in a movie name, say Avatar, we will see the movie backdrop and the movie description of Avatar.
And there it is.
If you put in some more time, style the components and add in some more data fields, the extension will look something like this.
