Building a Basic Chrome Extension

Last Updated : 04 Mar, 2024

Want to add extra functionality to your Chrome browser or create a useful tool? Developing a Chrome extension is a great starting point! In this tutorial, we'll break down the essential steps of building your first basic (yet functional) extension.

So there’s some basic stuff that is required, it’s just like making a website, with a manifest!

HTML: The building block of all websites, a standard markup language which along with CSS and JavaScript is used by web developers to create websites, mobile user interfaces, and applications.
CSS: A style sheet language used to set the style for the HTML elements.
JavaScript: Commonly used to create interactive effects within web browsers.

JSON: JavaScript Object Notation, is an open standard format that uses human-readable text to transmit data objects consisting of attribute-value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX).

A few Preliminaries: Chrome Extensions follow a specific directory structure. That means the filename is already fixed, they should be organized in a certain way as instructed.

Core Components of a Chrome Extension

manifest.json: The heart of your extension, defining metadata, permissions, and content interaction.
Background Scripts: JavaScript files running in the background, executing tasks even when tabs aren't open.
Popup UI: The user-facing interface of your extension, often accessed via a small browser icon.
Content Scripts: Interact directly with web pages to gather data or modify them.

Directory Structure:

json
<content>.js [ Javascript Files]
<markup>.html [ HTML files ]
png

Here, we are going to make a simple “Hello World” extension for this tutorial. Efficient and Meaningful extensions which require basic understanding will follow up next

Step 1: Create a new Directory, this is where we will keep all our files.

Step 2: Create a file called Manifest.json

Here’s the Basic Format.

{
"manifest_version": 2,
"name": “EXTENSION NAME",
"description": "DESCRIPTION",
"version": "1.0",
"browser_action": {
"default_icon": “ICON (WITH EXTENSION) ”,
"default_popup": “LAYOUT HTML FILE"
},
"permissions": [
//ANY OTHER PERMISSIONS
]
}

Here is our Manifest.json file

{
"manifest_version": 2,
"name": "Hello World!",
"description": "This extension shows a Hello World message!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "window.html"
}
}

So once’s you’ve got the hang of manifest.json, let's go ahead.

Step 3: Create a new file called window.html.

It is the HTML that POPS UP when you click the Chrome extension button.

<!DOCTYPE html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<div>Hello! Geeks For Geeks !!</div>
<div>This is a Chrome Extension!</div>
<div>And this is some html</div>
</body>
</html>

Step 4: Create the javascript file, let's call it, background.js, Since we are creating a simple HTML file, you can skip this step completely as our present project won’t be needing any javascript.

We are creating it just for demonstrating how to include the script in the extension.

Step 5: You must have observed that an icon is an integral part of the extension, where you can click and begin the execution of the extension.

We are adding an icon file, from which you can get an idea.

icon.png (https://developer.chrome.com/extensions/examples/tutorials/getstarted/icon.png)

Screen Shot 2015-12-24 at 5.19.51 PM

This is how your directory must be looking after creating all 4 files.

The Last One:

To Load the extension,

Drag and drop the directory where your extension files live onto chrome://extensions in your browser to load it.
If the extension is valid, it'll be loaded up and active right away!

Screen Shot 2015-12-24 at 5.19.00 PM

Open the chrome://extensions page.

Drag the folder to the chrome://extensions page.

Screen Shot 2015-12-24 at 5.20.47 PM

Installation Successful!

Click on the icon & the message will get displayed!

Screen Shot 2015-12-24 at 5.21.21 PM

For Windows: If you are using windows, you can follow the below steps.

Go to chrome://extensions in your Google Chrome browser. Check the Developer mode checkbox in the top right-hand corner.

Chrome Extension

Click “Load Unpacked” to see a file-selection dialog.

Load Unpacked

Select your extension directory, if the extension is valid, it'll be loaded up and active right away!

Select Your Extension Directory

This simple Hello World extension gives us the basic knowledge of How we can begin creating Chrome Extensions, as we are now familiar with manifest.json and directory structure, the two new things apart from basic web technologies like HTML, CSS, JavaScript, JQuery, etc.

Building a Basic Chrome Extension

Hemang Kumar

Improve

Article Tags :

Building a Basic Chrome Extension

Core Components of a Chrome Extension

Directory Structure:

Similar Reads

Thank You!

What kind of Experience do you want to share?