Today, I will show to you by and large acknowledged techniques to make Chrome development in vanilla JavaScript?—?that is, plain JavaScript with no additional frameworks like React, Angular, or Vue.
Building a Chrome growth is extraordinarily easy?—?in my first year of programming, I released two extensions, and I made both using just HTML, CSS, and plain JavaScript. In this article, I’ll walk you through how to the same in just several minutes.
I’ll be showing to you legitimate strategies to make an essential Chrome enlargement dashboard with no planning. In case you have your own specific idea for an extension, regardless, and essentially need to acknowledge what to add to your present assignment records to make it work in Chrome, you can skirt down to the zone without anyone else specific manifest.json report and image.
About Chrome Extensions
A Chrome enlargement is fundamentally just a get-together of archives that changes your association in the Google Chrome program. There are several different kinds of Chrome expansions; some start when a particular condition is met, like when you’re on a store checkout page; some simply fly up when you tap on an image; and some appear to be each time you open another tab. Both of the growthes that I circulated for this present year are ‘new tab’ extensions; the first is Compliment Dash, a dashboard that keeps an arrangement for the day and compliments the customer, and the second is an instrument for clergymen called Liturgical.li. If you know how to code a fundamental site, by then you can code this kind of growth without an unreasonable measure of inconvenience.
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.
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.
Also Read:- How to Create Calculator Using HTML, CSS and JavaScript
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.
{
“name”: “Simple Greeting Dashboard”,
“version”: “1.0”,
“description”: “This Chrome extension greets the user each time they open a new tab”,
“manifest_version”: 2
“incognito”: “split”,
“chrome_url_overrides”: {
“newtab”: “index.html”
},
“permissions”: [
“activeTab”
],
“icons”: {
“128”: “icon.png”
}
}
The esteem “in disguise”: “split” instructs Chrome with this augmentation when it’s in undercover mode. “split” will enable the expansion to keep running in its own procedure when the program is in secret; for different alternatives, see the Chrome engineer documentation.
As you can likely observe, “chrome_url_overrides” advises Chrome to open index.html at whatever point another tab is opened. The estimation of “consents” will give the client a fly up telling them that this expansion will supersede their new tab when they endeavor to introduce it.
Also Read:- How to Create Multiplication Table Using JavaScript
At long last, we’re disclosing to Chrome what to show as our favicon: a record called icon.png, which will be 128 x 128 pixels.
Making an Icon
Since we don’t have the image record yet, next, we’ll make an image for Simple Greeting Dash. Try not to falter to use the one I made underneath. In case you’d seize the opportunity to make your own, you can without a lot of a stretch do in that capacity using Photoshop or a free organization like Canva. Essentially make certain the estimations are 128 x 128 pixels, and that you save it as icon.png in unclear envelope from your HTML, CSS, JS, and JSON records.
Exchanging Your Files (If You’re Coding Your Own Page)
The information above is all you really need to know to make your own new tab Chrome expansion. After you re-try your manifest.json record, you can layout whatever kind of new tab page you require in HTML, CSS, and JavaScript and exchange it as exhibited as pursues. Nevertheless, in the occasion that you’d seize the opportunity to see how I will make this direct dashboard, skirt down to “Making a Settings Menu.”
Once you’re done styling your new tab page, your Chrome development is done and arranged to exchange to Chrome. To exchange it yourself, go to chrome://increases/in your program and flip on Developer Mode in the upper right.
Next, select the envelope where you’re securing your HTML, CSS, JS, and manifest.json reports, and your icon.png, and exchange. The expansion should work each time you open another tab!
Once you’re done with your enlargement and have given it a shot yourself, you can get a creator record and it to the Chrome extension store. This guide on disseminating your extension should help.
In case you aren’t making your own growth right now and just need to see what’s possible with Chrome extensions, read on to see how to make a particularly fundamental welcome dashboard.
Also Read:- How to count the occurrence / frequency of array elements 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.
Also Read:- How to Open a Link in a New Window And Print New Window Using JavaScript
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.
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.
