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",
      "default_popup":"popup.html"
    }
  }

 

 

 

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">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text" id="color" placeholder="Enter color" />   
  <button>Change Color</button>
  <script src="popup.js"></script>
</body>
</html>

 

 

 

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) {
   changeColor(request)
})

function changeColor(request){
    document.body.style.backgroundColor = request
}

 

 

 

Download Source Code

 

 

DOWNLOAD SOURCE CODE

 

 

 

Leave a Reply