Google Chrome allows you to enhance your browsing experience by adding custom functions, called extensions, within the browser window. There are a variety of extensions available from the Chrome Web Store and third-party developers, but you can also create your own extensions using simple HTML CSS and JavaScript.

What is a Chrome extension?

Chrome extensions enhance the functionality of your browser window by adding customized tools. The top Chrome extensions for 2023 included tools to spot your spelling and grammar mistakes, locate discounts while shopping online, and automatically complete captcha challenges. You can even use extensions to manage the Chrome browser itself, such as reorganizing or searching within open tabs in the current window. Any function available through a Web API is fair game for extensions.

Accessing Chrome extensions

If you have any extensions loaded in your current Chrome window, you will see a puzzle piece icon to the right of the search bar. You can run an extension by clicking on the corresponding icon in the pop-up window, or you can "pin" extensions to the toolbar so that they are more quickly accessed.

You can also find the extensions manager by selecting Extensions from the three-dot menu on the top right of the browser window.

Components needed for a Chrome extension

Writing your own Chrome extension isn't much different than writing any other web application; you just need to be sure to include the necessary components. You'll need to create several files using a text editor and save them in a single folder on your PC.

Manifest

The extension manifest details important metadata and specifies the resources, permissions, and files to be included. This is the only component that has a required filename: manifest.json. At a minimum, the manifest defines the extension name, version, description, and default action, but a number of additional features can also be included. Google's Chrome for Developers reference material provides a detailed description of the file format as well as some examples. The standard for this file format has evolved over the past few years, but as of June 2024, manifest version 3 will be required.

Icon

All extensions have an icon in the Chrome toolbar. If you don't provide an icon image, the first letter of the extension name will be used. To specify custom icons, you must define the path in the manifest and include the image files along with the rest of the extension components. All icons must be square images that are 16x16 device-independent pixels (DIPs).

Source code files

In addition to the manifest and icon, you must have the necessary source code files located in the same folder for your extension. These details will be based on the specific function you are trying to implement. If you want a pop-up window to appear when a user clicks on the extension, you'll need to include the HTML file and CSS information. If you want the extension to execute a script, you will need to include the necessary script in the folder.

Example Chrome extension

To illustrate how to install a simple Chrome extension, the files below will create a pop-up with a random inspirational quote from Quotable.

index.html

This extension will have a pop-up window that shows a very simple HTML page. When the extension is loaded, a JavaScript function will be called to insert a random inspirational quote. You could also add CSS details if you wanted to provide some more sophisticated styling.

script.js

const api_url ="https://api.quotable.io/random";
async function getapi(url)
{
 const response = await fetch(url);
 var data = await response.json();
 console.log(data);
 document.getElementById("quote").innerHTML="\"" + data.content + "\" - " + data.author;
}
getapi(api_url);

We are using the free, open source API from Quotable to retrieve a random quote and then insert it into the HTML of the extension's pop-up window. You could edit this script to access another web API in a similar fashion.

manifest.json

{
 "name": "Quote of the Momemt",
 "version": "1.0.0",
 "description": "Get an inspirational quote",
 "manifest_version": 3,
 "author": "Ashley Rosilier",
 "action":{
 "default_popup": "index.html",
 "default_title": "Quote of the Moment"

 }
}

The manifest pulls it all together, so it's important to make sure to have the correct file names and paths for all source files and icon images if you are using them. As mentioned earlier, manifest version 3 is the only valid option beginning in June 2024.

How to install your Chrome extension

Once you have the source code ready, installing the extension in Chrome is a straightforward process.

1. From the three-dot menu on the top right of the browser window, select Extensions > Manage Extensions.
2. A new tab will open with the Extensions manager. Move the slider on the top right to enable Developer mode.
3. Click on the button for Load unpacked on the top left of the page.
4. Select the folder containing your source files and the manifest.
5. Your new extension should be listed in the Extensions Manager and ready for use within the browser.

Note that once you have loaded the unpacked extension, you can continue to edit the source files, and changes will be reflected in your extension without re-uploading the files. This is very convenient for debugging a new extension.

Share your extension with others

There are several extensions available from the Chrome Web Store. Still, if you have some basic scripting skills, writing and installing your Chrome extension to extend your browser functionality is a straightforward task. Once installed, your new extension will be available for your own use, but if you think you have an idea others would enjoy, consider registering a developer account and publishing it to the store. You never know when your fun side project will become the next viral sensation.