Create A Simple Chrome Extension in HTML CSS & JavaScript

0

Create A Simple Chrome Extension in HTML CSS & JavaScript
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:
<!DOCTYPE html>
<html>
<head>
  <!--<title>My Extension</title>-->
  <style>
    /* Add your CSS styles here */
  </style>
</head>
<body>
  <!-- Add your HTML content here -->
  <script src="scripts/content.js"></script>
</body>
</html>

In the HTML file, you can add any necessary CSS styles in the <style> element and add your HTML content in the <body> element. You can also include a JavaScript file in the <script> element, which can be used to add functionality to the extension.

A full HTML file might look like this:

HTML CODE:
<!DOCTYPE html>
<html>
  <head>
    <!--<title>My Extension</title>-->
    <style>
      /* Add your CSS styles here */
    </style>
  </head>
  <body>
    <!-- Add your HTML content here -->
    <center>
      <h1>Background Color Changer</h1>
      <button id="change-button" >Click Me</button>
      <!--<script src="scripts/content.js"></script>-->
    </center>
  </body>
</html>
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 <script> element. In the main scripting file (“content.js”), you can add functionality to the extension’s button. For example, a simple function can be created to change the webpage’s background color when the button is clicked:

Content.js CODE:
// The actual function that will be executed to change the page color
function changeBackgroundColor() {
   chrome.storage.sync.get("color", ({ color }) => {
      document.body.style.backgroundColor = color;
   });
}
In this example, the changeBackgroundColor() function retrieves the stored color and changes the background color of the current webpage. The script listens for a click event and activates on the current tab in response. This is done using the following function:
Content.js CODE:
let changeColor = document.getElementById("change-button");

// Creates the event when the button is clicked to call the color changing
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: changeBackgroundColor
  });
});
In this example, the event listener listens for clicks on elements with the class “button” and calls the changeBackgroundColor function when one is clicked.
These are just a few examples of what you can do with JavaScript in your Chrome extension. You can use it to access and manipulate elements on the webpage, communicate with the background script and other content scripts, and more.

3. Style the extension using CSS

You can use CSS to add visual styling and make it look more appealing. CSS is a stylesheet language that allows you to specify the look and feel of your HTML elements.
To add CSS to your extension, you can include it in the HTML file you created in step 1 or create a separate CSS file and include it using the <link> element. Here is an example of some simple CSS styles:
CSS CODE:
body {
   background-color: #fff;
   font-family: sans-serif;
}

#change-button {
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  background: #5372F0;
}

#change-button:hover {
  background: #2c52ed;
}

In this example, the CSS styles define the body element’s background color and font family, as well as the appearance of elements with the class “button.” The styles use properties such as background color, border color, and color to specify the visual characteristics of the elements.

These simple changes give us the following look:

4. Test the extension

Before you can package and publish your Chrome extension, it’s important to test it to make sure it works as intended and debug any issues that arise. You can use the Chrome Developer Tools to test and debug your extension.

To first upload your extension to your browser, navigate to your extensions page, or go to this url: chrome://extensions/, and load the file containing all of your programs directly into your extensions page, using the “Load unpacked” button. Toggle the developer mode ON if you don’t see the “Load unpacked” button.

Create A Simple Chrome Extension in HTML CSS & JavaScript

If you have followed along with this guide, your extension should be able to do the following:
Test 20and 20Upload
If you encounter an error while testing your extension, you can use the console to identify and fix the problem. To open the browser console, press the F12 shortcut key or right-click on the extension popup and select the Inspect option.

5. Package and publish the extension

After you’ve built and tested your Chrome extension, you can package it into a .crx file and publish it to the Chrome Web Store. This will allow others to download and install the extension. But before publishing it, it will be good if you can add additional features to it and make it more useful for others.

If you want to create a more advanced and useful Chrome extension, you can check out my recently uploaded blog on How to Make Color Picker Chrome Extension in HTML CSS & JavaScript. This blog will guide you through the process of building a color picker extension for Chrome from scratch.

By making a useful extension, you can share it with a wider audience, which is a good way to showcase your skills as a developer and potentially monetize your extension through the store. Read the official Google article to publish your Chrome extension and make it publicly available.

Conclusion and Final Words

Creating your own Chrome extension can be a fun and rewarding experience, whether you’re doing it for fun, learning, or professional development. By following the steps in this guide, you can build a polished extension that can customize the behavior of web pages or add additional functionality to the browser.

By continuing to learn and improve your skills, you can make your Chrome extension even more powerful and useful for your users. LinkedIn Learning can be a reasonably priced course that provides a wealth of development resources.

Ultimately, there it is: you have your first basic Chrome extension up and running. The only thing left for you is to keep exploring and keep creating. If it was helpful to you, don’t forget to share it with others to help them benefit as well. Thank you!!

 

Previous articleCreate A Budget Tracker in HTML CSS & JavaScript
Next articleHow to Create A Chrome Extension in HTML CSS & JavaScript

LEAVE A REPLY

Please enter your comment!
Please enter your name here