Create your own Chrome Extensions!

Chrome Extension is a small application program that improves or customizes the browsing experience. Custom extension can be built just as per the requirement of the user to simplify things in the browser. There are thousands of chrome extensions pre made which has a problem to solve. It can be anything. For e.g adblocker, website blocker, etc. Putting it simple, basically a chrome extension is a popup which works in a browser DOM and can be used to manipulate the content on the user DOM of any webpage.

It is just a bunch of js, html codes added on a manifest.json file.

Creating a chrome extension must have a following line of code.

Create a manifest.json file in any of the text editor.
Manifest.json file must have following
“name”:
“description”:
“manifest_version”:
“version”:
(Make sure to use the quotation mark)
Make sure to use the quotation mark for every values except manifest_version

Create a file manifest.json

"name":"Hello World!",
"description":"This extension displays Hello world",
"manifest_version":2,
version:"1.0"

There are other various fields like browser action (eg: what should be done when user clicks on the extension,etc )

"name":"Hello World!",
"description":"This extension displays Hello world",
"manifest_version":2,
version:"1.0",
"browser_action": {
	"default_popup":"popup.html",
        "default_icon": "clock.png"
}

Default_popup is a array of objects that generates the popup after the extension is pressed. popup.html file can have any content according to the need of the user.

Default_icon has the icon that is to be displayed on the extension.

Here is a basic example of chrome extension showing the mouse position only inside the popup.

Creating manifest.json file

{
	"manifest_version":2,
	"name": "Mouse",
	"version": "0.1",
	"browser_action": {
   
   "default_popup": "popup.html"
}
}

Creating popup.html

<!doctype html>
<html>
  <head>
    <title>Mouse position</title>
    
  </head>
  <body>
  	<h1>Mouse position</h1>
<p>
    X: <span id="x-value"></span>
</p>
<p>
    Y: <span id="y-value"></span>
</p>
    
  <script src="content.js"></script>
  </body>
</html>

Creating content.js file

window.addEventListener('mousemove', function (e) {
    document.getElementById('x-value').textContent = e.x;
    document.getElementById('y-value').textContent = e.y;
});

To add your very own extension to the chrome follow: