Today, I will demonstrate to you generally accepted methods to make Chrome expansion in vanilla JavaScript?—?that is, plain JavaScript with no extra systems like React, Angular, or Vue. 

Building a Chrome augmentation is exceptionally easy?—?in my first year of programming, I discharged two expansions, and I made both utilizing just HTML, CSS, and plain JavaScript. In this article, I'll walk you through how to the same in only a couple of minutes. 

I'll be demonstrating to you proper methodologies to make a basic Chrome augmentation dashboard without any preparation. On the off chance that you have your own particular thought for an expansion, in any case, and simply need to realize what to add to your current task records to make it work in Chrome, you can skip down to the area on altering your own particular manifest.json document and symbol. 

About Chrome Extensions 

A Chrome augmentation is basically only a gathering of documents that tweaks your involvement in the Google Chrome program. There are a couple of various types of Chrome augmentations; some initiate when a specific condition is met, similar to when you're on a store checkout page; some just fly up when you tap on a symbol; and some seem each time you open another tab. Both of the augmentations that I distributed for this present year are 'new tab' expansions; the first is Compliment Dash, a dashboard that keeps a plan for the day and compliments the client, and the second is an instrument for ministers called Liturgical.li. In the event that you know how to code an essential site, at that point you can code this sort of augmentation without an excessive amount of trouble.

Essentials 

We will keep things straightforward, so in this instructional exercise, we'll simply be utilizing HTML, CSS, and some essential JavaScript, and additionally modifying a manifest.json document that I'll incorporate beneath. Chrome expansions fluctuate in multifaceted nature, so fabricating a Chrome augmentation can be as straightforward or convoluted as you need it to be. After you take in the nuts and bolts here, you'll have the capacity to make something substantially more muddled utilizing your own range of abilities. 

How to Play Audio After Few Seconds or Delay in JavaScript

Setting Up Your Files 

For this instructional exercise, we will make a basic dashboard that welcomes the client by name. How about we call our augmentation Simple Greeting Dashboard. 

To begin, you'll need to make three documents: index.html, main.css, and main.js. Place these in their own particular envelope. Next, fill the HTML record with fundamental HTML archive setup, and associate it to the CSS and JS documents:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Simple Greeting Dashboard</title>
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
   <!-- My code will go here -->
   <script src="main.js"></script>
</body>
</html>

Customizing Your manifest.json file
These files won’t be enough to get your project working as a Chrome extension. For that, we need a manifest.json file that we’ll customize with some basic information about our extension. You can download that file on Google’s developer portal, or just copy/paste the following lines into a new file and save it as manifest.json in your folder:

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

Presently, we should refresh the example document with somewhat more data about our expansion. We'll need to change just the initial three estimations of this code: name, rendition, and portrayal. How about we fill in our name and a one-line depiction, and since this is our first form, we should keep that incentive at 1.0. The manifest_version number ought to be kept the same.

Next, we’re going to add a few lines to tell Chrome what to do with this extension.

Making an Icon 

Since we don't have the symbol record yet, next, we'll make a symbol for Simple Greeting Dash. Don't hesitate to utilize the one I made underneath. On the off chance that you'd jump at the chance to make your own, you can without much of a stretch do as such utilizing Photoshop or a free administration like Canva. Simply make certain the measurements are 128 x 128 pixels, and that you spare it as icon.png in indistinguishable envelope from your HTML, CSS, JS, and JSON records. 

Transferring Your Files (If You're Coding Your Own Page) 

The data above is all you truly need to know to make your own new tab Chrome augmentation. After you redo your manifest.json record, you can outline whatever sort of new tab page you need in HTML, CSS, and JavaScript and transfer it as demonstrated as follows. Be that as it may, in the event that you'd jump at the chance to perceive how I will make this straightforward dashboard, skip down to "Making a Settings Menu." 

Once you're finished styling your new tab page, your Chrome expansion is done and prepared to transfer to Chrome. To transfer it yourself, go to chrome://augmentations/in your program and flip on Developer Mode in the upper right. 

Next, select the envelope where you're putting away your HTML, CSS, JS, and manifest.json documents, and your icon.png, and transfer. The augmentation should work each time you open another tab! 

Once you're finished with your augmentation and have tried it out yourself, you can get a designer record and it to the Chrome expansion store. This guide on distributing your expansion should help. 

On the off chance that you aren't making your own augmentation at this moment and simply need to perceive what's conceivable with Chrome expansions, read on to perceive how to make an exceptionally basic welcome dashboard.

Three dots ( … ) in JavaScript

Creating a Settings Menu
For my extension, the first thing I’ll want to do is create an input where my user can add their name. Since I don’t want this input to be visible all the time, I’m going to put it in a div called settings, which I’ll make visible only when the Settings button is clicked.

<button id="settings-button">Settings</button>
<div class="settings" id="settings">
   <form class="name-form" id="name-form" action="#">
      <input class="name-input" type="text"
        id="name-input" placeholder="Type your name here...">
      <button type="submit" class="name-button">Add</button>
   </form>
</div>

Right now, our settings look like this:
so I’m going to give them some basic styles in CSS. I’ll give the button and input both some padding and an outline, and then put a little space between the settings and the form.

.settings {
   display: flex;
   flex-direction: row;
   align-content: center;
}
input {
   padding: 5px;
   font-size: 12px;
   width: 150px;
   height: 20px;
}

button {
   height: 30px;
   width: 70px;
   background: none; /* This removes the default background */
   color: #313131;
   border: 1px solid #313131;
   border-radius: 50px; /* This gives our button rounded edges */
   font-size: 12px;
   cursor: pointer;
}
form {
   padding-top: 20px;
}
Now our settings look a bit better:

But let’s make them hidden when the user hasn’t clicked on Settings. I’ll do this by adding the following to .settings, which will cause the name input to disappear off the side of the screen:

transform: translateX(-100%);
transition: transform 1s;

Now let’s create a class called settings-open that we’ll toggle on and off in JavaScript when the user clicks the Settings button. When settings-open is added to settings, it will not have any transformations applied to it; it’ll just be visible in its normal position.
.settings-open.settings {
   transform: none;
}

Let’s get the class toggle working in JavaScript. I’m going to make a function called openSettings() that will toggle the class settings-open on or off. To do this, I’ll first get the element by its ID of "settings", then use classList.toggle to add the class of settings-open.

function openSettings() {
   document.getElementById("settings").classList.toggle("settings-open");
}

 

Now I’ll add an event listener that will trigger the function whenever the Settings button is clicked.

document.getElementById("settings-button").addEventListener('click', openSettings)
This will make your settings appear or disappear whenever you click the Settings button.

Creating a Personalized Greeting
Next, let’s create the greeting message. We’ll make an empty h2 in HTML, and then fill it using innerHTML in JavaScript. I’m going to give the h2 an ID so I can access it later, and put it inside a div called greeting-container to center it.

<div class="greeting-container">
   <h2 class="greeting" id="greeting"></h2>
</div>

Now, in JavaScript, I’m going to create a basic greeting using the user’s name. First I’ll make variable to hold the name, which I’ll keep empty for now, and add to later.

var userName;
Even if userName wasn’t empty, if I just put userName into a greeting in my HTML, Chrome wouldn’t use the same name if I open it in another session. To make sure Chrome remembers who I am, I’m going to have to work with local storage. So I’ll make a function called saveName().

function saveName() {
    localStorage.setItem('receivedName', userName);
}
The function localStorage.setItem() takes two arguments: the first is a keyword I’ll use to access the information later, and the second is the information it needs to remember; in this case, the userName. I’m going to get this saved information through localStorage.getItem, which I’m going to use to update the userName variable.

Handling Errors in JavaScript: The Definitive Guide

var userName = localStorage.getItem('receivedName');

Before we link this to an event listener in the form, I want to tell Chrome what to call me if I haven’t told it my name yet. I’ll do this using an if statement.

if (userName == null) {
   userName = "friend";
}
And now, let’s finally hook up our userName variable to our form. I want to do this inside of a function, so that I can call that function whenever the name is updated. Let’s call the function changeName().

function changeName() {
   userName = document.getElementById("name-input").value;
   saveName();
}

I want to call this function each time someone submits a name using the form. I’ll do this with an event listener, in which I’ll call the function changeName() and also prevent the page’s default of refreshing when a form is submitted.

document.getElementById("name-form").addEventListener('submit', function(e) {
   e.preventDefault()
   changeName();
});

Finally, let’s create our greeting. I’ll put this in a function as well, so that I can call it both when the page is refreshed, and whenever changeName() occurs. Here’s the function:

function getGreeting() {
   document.getElementById("greeting").innerHTML  = `Hello, ${userName}. Enjoy your day!`;
}

getGreeting()

Now I’ll call getGreeting() in my changeName() function and call it a day!

Finally, Style Your Page
Now it’s time to add the finishing touches. I’m going to center my header using flexbox, make it bigger, and add a gradient background to the body in CSS. And to make the button and h2 pop against the gradient, I’ll make them white.

.greeting-container {
   display: flex;
   justify-content: center;
   align-content: center;
}
.greeting {
   font-family: sans-serif;
   font-size: 60px;
   color: #fff;
}
body {
   background-color: #c670ca;
   background-image: linear-gradient(45deg, #c670ca 0%, #25a5c8 52%, #20e275 90%);
}
html {
   height: 100%;
}
And that’s it! Your page will look like this:

It may not be much, but it’s a great foundation for you to create and style your own Chrome dashboards.

Live word counter from HTML textarea in JavaScript

Introduction to JavaScript

10 things to learn on the way to becoming a JavaScript Master

JavaScript Arrays

JavaScript Built-in Types