Create A Simple Chrome Extension in HTML CSS & JavaScript

CodingNepal — Sun, 01 Jan 2023 21:08:21 +0000

Are you interested in creating your own Chrome extension but not sure where to start? Look no further! In this article, we will guide you through the process of creating a simple Chrome extension using HTML, CSS, and JavaScript.

Chrome extensions are small programs that modify web page behavior or add functionality to the browser. They are made of HTML, CSS, and JavaScript files that run in the browser and interact with web pages. Building a Chrome extension can be simple once you understand the basic structure, even if you’re new to web development.

In this blog, you will create a Chrome extension that changes the background color of a webpage. You will learn how to set up the basic structure of the extension, use JavaScript to interact with the web page’s DOM, and style the extension with CSS.

By the end of this blog, you will have a fully functional Chrome extension that you can customize and share with others. Whether you’re a beginner looking to learn the basics of web development or an experienced developer looking to add to your skill set, this blog is for you.

Steps to creating a Chrome Extension

We will create a simple Chrome extension in five easy steps. But you can also add additional features to your extension as desired.

Set up the basic structure
Add functionality
Style the extension
Test the extension
Package and publish it

1. Set up the basic structure of the extension

Before you can start building your Chrome extension, you need to set up the basic structure. This involves creating a manifest file and an HTML file for the extension’s interface.

First, create a new folder for your extension and add a file named “manifest.json” to it. The manifest file is a JSON file that defines the basic information about the extension, such as its name and version. Here is an example of a manifest file:

Manifest CODE:

 {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background color of a webpage.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ]
}

The manifest file in an extension specifies its name, version, description, HTML interface file, and required permissions. In the example, the “scripting” and “storage” permissions are needed to store and change the webpage color through scripting.

Additionally, we can create a “background.js” file to set the basic settings of our extension. This is the first of two JavaScript files. The second will be “content.js,” where we will add all our functionality in step 2. Here, we set the color we want to change the extension to. An example might look like this:

Background.js CODE:

let color = '#FF0000'; // Can be any colour you want!

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
});

Next, create an HTML file for the extension’s interface. This file will contain the HTML, CSS, and JavaScript code for the extension. For example:

HTML CODE:

In the HTML file, you can add any necessary CSS styles in the

Background Color Changer

That’s it for step 1! In total, you should have 4 files – “manifest.json”, “popup.html”, “background.js” and “content.js”. Now that you have the basic structure of your Chrome extension set up, you’re ready to start adding functionality and styling.

Add functionality to the extension using JavaScript

Now that you have the basic structure of your Chrome extension set up, you can start adding functionality to it using JavaScript. JavaScript allows you to interact with the DOM of the webpage and modify the behavior of the extension.

To add JavaScript to your extension, create a separate JavaScript file and include it in the “popup.html” file using the

blog – CodingNepal