Build a Custom Google Chrome Extension in HTML5 and Javascript Full Tutorial For Absolute Beginners 2020

Build a Custom Google Chrome Extension in HTML5 and Javascript Full Tutorial For Absolute Beginners 2020




Get Started



In order to get started by building a custom google chrome extension you need to understand three important concepts in google chrome extensions.

We are talking about the three important files in google chrome extension which are as follows


manifest.json file


This is the main configuration file of your chrome extension in which we have the important information related to your extensions such as name and `version and all other important things. This is a mandatory file to create when publishing the extension to the  chrome store.


Content Script


This is the main business logic of the chrome extension. In this file we write the javascript code which directly interacts with the Webpage with the help of DOM.


Popup HTML


This is the actual interface which the user sees when operating the chrome extension. In this file you will write your html code and take the user input and then pass this data to the Content Script and Background Script Using Chrome API



Background Script



This is the last portion when it comes to chrome extensions. These are background scripts which runs all the time when your chrome extension operates. In this file you can write javascript code which constantly monitor some tasks which the user is doing and then communicate that thing to the Content Script.



Building Chrome Extension


See also  Build a Node.js XML Document to JSON Object Parser or Converter Using xml2json Library in TypeScript Full Project For Beginners


Now in this blog post we will be building a very simple Chrome extension in which we will be simply changing the color of the webpage when clicked the extension.


Now create a new folder and make a manifest.json file and copy paste the following code which is shown below



    "name": "changecolor",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    "browser_action": {
      "default_title": "Change Color",




As mentioned earlier this file contains the information about your extension. After creating this file you can now go to this address inside your browser and type this url chrome://extensions and press enter and then you can load your extensions something like this as shown below







Now simply click the load unpacked button and then a select file window will appear now select your folder where manifest.json file resides and then your chrome extension will be activated like this as shown below









Now inside the same directory create another file called as popup.html and then copy paste the below code




<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <input type="text" id="color" placeholder="Enter color" />   
  <button>Change Color</button>
  <script src="popup.js"></script>




So now you can see in this file we have a simple button which has a label change color and also we are including the custom script file called popup.js.

See also  Build a Light (Day) & Dark (Night) Mode Switch Toggle Button For Website Visitors Using HTML5 CSS3 and Javascript Full Project For Beginners


Now create popup.js file and copy paste the following code which is shown below



document.addEventListener('DOMContentLoaded', function () {
   document.querySelector('button').addEventListener('click', onclick, false)
     function onclick () {
       var color = document.getElementById("color").value  
       chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
         chrome.tabs.sendMessage(tabs[0].id, color)
  }, false)





Now in this file we are writing the javascript code when the user clicks the button we are attaching the event listener and then we are getting the user input i.e. the color entered by the user and then we are passing this color to the content.js file .


Now create a new file in the same directory called as content.js and copy paste the following code which is shown below



chrome.runtime.onMessage.addListener(function (request) {

function changeColor(request){ = request




Download Source Code







Leave a Reply