How To Make A Chrome Extension From Scratch ~ Appychip

Creating A Chrome Extension To Show Notification

If you are a chrome user then you must have seen some cool chrome extension which are very useful in daily life but did you ever wondered, how they are build? Are you curios to know? If yes, then this post if for you to get started on how to write your own chrome extension.

Here we will be building a chrome extension to show a popup which will have a button and on the click of which a notification will appear.

video Tutorial:

The basic structure of our application looks like following:

Manifest file (manifest.json) - It is the main component of chrome extension. It includes information about versioning, permissions, and other useful metadata for extension. It should be placed in the root of project folder.
popup page ( popup.html) - This page will open up a popup on clicking the extension icon. The popup will have a button clicking on which will show a notification.
popup javascript file (popup.js) - The javascript file which contains the logic of showing notification on the click of button in popup.
Favicon image (appychip.png) - An Image to be displayed on the chrome extension bar

manifest.json

{
 "name": "myextension",
 "description": "Extension to show notification",
 "version": "1.0",
 "manifest_version":2,

 "content_security_policy":"script-src 'self'; object-src 'self'",

 "browser_action": {
  "default_popup": "popup.html",
  "default_icon": "appychip.png"
 },
 "permissions": ["notifications", "tabs"]
}

popup.html

<!-- popup.html -->

<html>
 <head>
 <script src="popup.js"></script>
 </head>
 <body>
  Hey there!!!
  <input type="button" id="show" value="show notification"/>
 </body>
</html>

popup.js

// popup.js

document.addEventListener('DOMContentLoaded', function() {
    var show = document.getElementById('show');
    
    // onClick's logic below:
    show.addEventListener('click', function() {

 // Let's check if the browser supports notifications
 if (!("Notification" in window)) {
   alert("This browser does not support desktop notification");
 }

 // Let's check if the user is okay to get some notification
 else if (Notification.permission === "granted") {
   // If it's okay let's create a notification
   var notification = new Notification("Hi there!");
 }

 // Otherwise, we need to ask the user for permission
 // Note, Chrome does not implement the permission static property
 // So we have to check for NOT 'denied' instead of 'default'
 else if (Notification.permission !== 'denied') {
   Notification.requestPermission(function (permission) {

       // Whatever the user answers, we make sure we store the information
       if(!('permission' in Notification)) {
         Notification.permission = permission;
       }

       // If the user is okay, let's create a notification
       if (permission === "granted") {
         var notification = new Notification("Hi there!");
       }
    });
    }

 });
});

appychip.png

Steps To Install Extension:

Visit chrome://extensions in your chrome browser and click on "load unpacked extension"

Select project directory of chrome extension and the extension must be visible now as shown below:

Open a new tab (preferably with url example.com). The favicon must be visible by now chrome extension bar.

Click on the favicon. This will open a popup which will have button and clicking on which will display notification.

This is how the notification looks. You can beatify the popup and notification and also do some cool stuff like accessing API to fetch data and display it.

Appychip

Monday, 20 November 2017