What is a Chrome extension? Well, simply put, it's an add-on to your browser that offers additional functionality and customization. I'll be walking you through the process of building a simple Chrome extension.

A Basic structure of a Chrome extension looks like:

- content.js- manifest.json

I am starting with the manifest.json file. This JSON file describes the extension and will show the details when loaded into the Chrome browser.

{  "name": "Example Extension",  "description": "Building a simple chrome extension",  "version": "0.1.0",  "manifest_version": 3,  "permissions": [    "activeTab"  ],  "content_scripts": [    {      "matches": [        "<all_urls>"      ],      "js": ["content.js"]    }  ]}

This manifest.json is a basic description of the extension. To load this in Chrome, open:

And select the "Load unpacked" button.
Choose the extension folder on your computer.

When loaded, Chrome will display the newly created extension:

On the right side of the browser, there is the load extension button where the newly created extension is visible.

As you can see, there is no functionality yet for this extension.

Let's make it more useful by adding some functionality. Creating the content.js file with the following content:

document.querySelectorAll("a").forEach(a => console.log(a.href));

This code shows all a href elements on the current tab page in the browser console window. When I navigate to yahoo.com and open the console window, I get the following results: