The way to Create a Chrome Extension With Vanilla JavaScript

The way to Create a Chrome Extension With Vanilla JavaScript
The way to Create a Chrome Extension With Vanilla JavaScript


 This tutorial will cowl the right way to construct a minimalistic homepage Chrome extension, with JavaScript, designed to assist customers keep productive.

A Chrome extension is a program that enhances and customizes the shopping expertise for Chrome customers. Among the many numerous sorts of extensions obtainable, homepage extensions are the preferred. These extensions permit customers to personalize their browser’s begin web page, usually including options and instruments to enhance productiveness.

The homepage will comprise the next parts:

  • A component displaying the present climate
  • A component displaying the present date and time
  • A search bar
  • Random quotes on the backside of the web page

By the tip of this tutorial, we may have a pleasant minimalistic homepage that appears like this:

Parts of a Chrome Extension

A chrome extension will sometimes include the next elements:

  • A manifest file
  • Utility information which embrace HTML information, JavaScript information, CSS information, photos, icons, and some other belongings vital for the extension’s performance.

Manifest

A manifest is a .json file that incorporates the directions of the right way to run the extension. It additionally consists of permissions which the extension requires. Our manifest file will appear like this:

1
{
2
  "manifest_version": 3,
3
  "title": "Minimalistic homepage",
4
  "model": "1.0",
5
  "description": "A Minimalistic homepage for my Chrome browser",
6
  "chrome_url_overrides": {
7
    "newtab": "house.html"
8
  }
9
}

The file incorporates the next fields:

  • manifest_version: This specifies the model of the manifest file format that your extension is utilizing. The present model is 3. The manifest model is outlined by Chrome and dictates the set of options and guidelines obtainable to the extension. Utilizing manifest_version: 3 ensures that your extension adheres to Chrome’s newest requirements and practices.
  • title: that is the title of the extension.
  • description: this can be a brief description of the extension.
  • chrome_url_overrides: Chrome, by default, gives a brand new tab web page; with chrome_url_overrides, we’re telling Chrome that we are going to override the brand new tab web page with a customized one.

Utility Construction

The applying construction will include the next information:

  • house.html
  • types.css
  • index.js

HTML Construction

The HTML construction might be created utilizing Bootstrap. Bootstrap is a front-end framework that enables builders to construct web sites and functions quicker.

Begin by including the hyperlink to the Bootstrap CDN information within the <head> part of your house.html file.

1
<hyperlink
2
  href="https://cdn.jsdelivr.web/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
3
  rel="stylesheet"
4
  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
5
  crossorigin="nameless"
6
/>

We are going to then add a div on the prime proper of the web page. The div will comprise:

  • A <span> factor to show the climate.
  • A climate icon.
  • A <p> tag to show the present consumer’s location.
1
<div class="position-fixed top-0 end-0 mt-2 me-3 py-2">
2
  <span id="climate"></span>
3
  <img id="weather-icon" class="weather-icon" alt="Climate Icon" />
4
  <p id="location"></p>
5
</div>

The principle part will include a Bootstrap container factor with the next elements:

  • date and time factor
  • Search bar part

Create the container factor that can home the weather above.

1
<div class="container mt-5 pt-5">
2

3

4
</div>

Contained in the container factor, let’s begin by including the date and time parts:

1
<div class="text-center pt-5 mt-5">
2
    <p id="current-day"></p>
3
    <h1 id="current-time"></h1>
4
</div>

The <p> tag will show the date, whereas the <h1> tag will show the present time.

Subsequent, we may have a responsive bootstrap column consisting of an enter textual content factor and a search button.

1
<div
2
  class="row justify-content-center align-items-center w-100 mt-5 pt-5"
3
>
4
  <div class="col-12 col-md-8 col-lg-6">
5
    <div class="input-group mb-3">
6
      <div class="input-group-prepend">
7
        <span class="input-group-text">
8
          <img
9
            src="https://www.google.com/photos/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
10
            alt="Google"
11
            peak="24"
12
          />
13
        </span>
14
      </div>
15
      <enter
16
        sort="textual content"
17
        id="search"
18
        class="form-control outline-none"
19
        placeholder="Search the online..."
20
      />
21
      <div class="input-group-append">
22
        <button id="search-btn" class="btn btn-primary">Search</button>
23
      </div>
24
    </div>
25
  </div>
26
</div>

The <div class="input-group-prepend"> is utilized in Bootstrap to create a container that holds parts that can seem earlier than the enter subject in an enter group. It will permit us so as to add an icon earlier than the enter subject.

The final part is the random quotes part, which might be mounted on the backside middle. Contained in the part, we may have a <p> tag to show the random quotes.

1
<div
2
  class="fixed-bottom text-center bg-light py-2 pt-3"
3
  id="quote-container"
4
>
5
  <p id="random-quote" class="mb-3"></p>
6
</div>

CSS Performance

Add some customized CSS akin to a customized font, customized border radius to the form-control group, and customized measurement for the climate icon.

1
@import url("https://fonts.googleapis.com/css2?household=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&show=swap");
2
.input-group-text {
3
  background-color: white;
4
  border-radius: 30px 0 0 30px;
5
  border-right: none;
6
}
7
physique {
8
  font-family: "DM Mono", monospace;
9
}
10
.form-control {
11
  border-radius: 0 30px 30px 0;
12
  border-left: none;
13
}
14

15
.weather-icon {
16
  width: 60px;
17
  peak: 60px;
18
}

JavaScript Performance

To show the climate, we’ll use these 2 APIs

  • ipapi.co is an API that will get the present location from the consumer’s IP deal with
  • api.openweathermap.org is an API that enables builders to entry present climate information, forecasts, and historic climate information for any location on the planet.

 

Let’s begin by getting the climate parts:

1
const weatherElement = doc.getElementById('climate');
2
const weatherIcon = doc.getElementById('weather-icon');
3
const locationElement = doc.getElementById('location');

Subsequent, create a operate known as getWeather. Inside this operate, we’ll make a POST request to the ipapi.co API to get the present consumer’s location, then we’ll use the consumer’s location to get the present climate.

Inside a strive block, make a name to the ipapi.co API,

1
async operate getWeather() {
2

3
 const locationResponse = await fetch('https://ipapi.co/json/');
4
  const location = await locationResponse.json();
5
  locationElement.textContent = location.metropolis;
6

7
}

  • fetch('https://ipapi.co/json/'): This line of code sends a request to the ipapi.co API to retrieve location information based mostly on the consumer’s IP deal with.
  • const location = await locationResponse.json(); waits for the response and parses it as a JSON.
  • locationElement.textContent = location.metropolis; retrieves the town from the JSON information above and updates the textContent of the placement factor to the present metropolis.

The openweather API permits us to get the placement utilizing the town title as a parameter, so let’s ship a request to the climate API utilizing the town title.

1
async operate getWeather() {
2
    strive {
3
      const locationResponse = await fetch('https://ipapi.co/json/');
4
      const location = await locationResponse.json();
5
      locationElement.textContent = location.metropolis;
6

7
      const ApiKey = '04419024fb0f20edd3f1abd06e46dd6d';
8
      const url = `https://api.openweathermap.org/information/2.5/climate?q=${location.metropolis}&items=metric&appid=${ApiKey}`;
9

10
      const response = await fetch(url);
11
      const weatherData = await response.json();
12
      console.log(weatherData)
13
  
14
    } catch (error) {
15
      console.error('Error fetching climate information:', error);
16
      locationElement.textContent = "Error fetching climate";
17

18
    }
19
  }

Within the code above:

  • First, we declare our API_KEY variable.
  • Subsequent, we assemble a url by becoming a member of the climate API endpoint with the consumer’s present metropolis and the API_key.
  • const response=awaitfetch(url); Then, we carry out a fetch request to the constructed url.
  • const weatherData=awaitresponse.json(); we parse the response as JSON and retailer the item in a variable known as weatherData.

The weatherData logged to the console seems to be like this:

From the data above, we need to get the temperature and the icon code. We are going to replace the weatherElement to point out the present temperature and the weatherIcon factor to point out the url of the present climate icon .

Replace the getWeather operate:

1
async operate getWeather() {
2
    strive {
3
      const locationResponse = await fetch('https://ipapi.co/json/');
4
      const location = await locationResponse.json();
5
      locationElement.textContent = location.metropolis;
6

7
      const ApiKey = '04419024fb0f20edd3f1abd06e46dd6d';
8
      const url = `https://api.openweathermap.org/information/2.5/climate?q=${location.metropolis}&items=metric&appid=${ApiKey}`;
9

10
      const response = await fetch(url);
11
      const weatherData = await response.json();
12
      console.log(weatherData)
13
  
14
      const temperature = weatherData.principal.temp;
15
      const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherData.climate[0].icon}.png`;
16
  
17
      weatherElement.textContent = `${Math.spherical(temperature)}°C`;
18
      weatherIcon.src = weatherIconUrl;
19
    } catch (error) {
20
      console.error('Error fetching climate information:', error);
21
      locationElement.textContent = "Error fetching climate";
22

23
    }
24
  }
25
  
26
getWeather();

Within the up to date code we do the next:

  • const temperature = weatherData.principal.temp; will get the temperature from the climate object.
  • const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherData.climate[0].icon}.png`; constructs a climate icon url from the present climate icon.
  • weatherElement.textContent = `${Math.spherical(temperature)}°C`; updates the weatherElement with the worth of the present temperature rounded off to the closest complete quantity.

The subsequent step is to point out the present date and time. Create a operate known as updateTime, which seems to be like this:

1
  operate updateTime() {
2
    const now = new Date();
3
    const choices = {
4
      weekday: "lengthy",
5
      yr: "numeric",
6
      month: "lengthy",
7
      day: "numeric",
8
    };
9
    const formattedTime = now.toLocaleTimeString("en-US", {
10
      hour: "2-digit",
11
      minute: "2-digit",
12
      second: "2-digit",
13
    });
14
    currentTimeElement.textContent = ` ${formattedTime}`;
15

16
    const formattedDate = now.toLocaleDateString("en-US", choices);
17
    currentDay.textContent = `${formattedDate} `;
18
  }

Within the code above we do the next:

  • const now = new Date(); will get the present date and time.
  • const formattedTime = now.toLocaleTimeString("en-US"{ hour: "2-digit", minute: "2-digit", second: "2-digit"}); will get the present time and codecs it in hours, minutes, and seconds format.
  • currentTimeElement.textContent = ` ${formattedTime}`; updates the currentTimeElement with the formatted time.
  • const formattedDate = now.toLocaleDateString("en-US", { weekday: "lengthy", yr: "numeric", month: "lengthy", day: "numeric" }); Right here we’re utilizing the toLocaleDateString() technique to format the date right into a string displaying the complete day of the week, month, numeric day of the month and yr. For instance, a pattern date will appear like this (Monday, June 10, 2024).
  • currentDay.textContent=`${formattedDate} `; updates the currentDay factor to point out the formatted date.

To replace the date and time in actual time, use the setInterval technique to name the updateTime() operate after each second.

1
 setInterval(updateTime, 1000);
2
  updateTime();

The final performance is to show random inspirational quotes on the backside of the web page.

Create an array of quotes which seems to be like this:

1
const quotes = [
2
    "The best way to get started is to quit talking and begin doing. - Walt Disney",
3
    "The pessimist sees difficulty in every opportunity. The optimist sees opportunity in every difficulty. - Winston Churchill",
4
    "Don’t let yesterday take up too much of today. - Will Rogers",
5
    "You learn more from failure than from success. Don’t let it stop you. Failure builds character. - Unknown",
6
    "It’s not whether you get knocked down, it’s whether you get up. - Vince Lombardi",
7
    "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you. - Steve Jobs",
8
    "People who are crazy enough to think they can change the world, are the ones who do. - Rob Siltanen",
9
    "Failure will never overtake me if my determination to succeed is strong enough. - Og Mandino",
10
    "Entrepreneurs are great at dealing with uncertainty and also very good at minimizing risk. That’s the classic entrepreneur. - Mohnish Pabrai",
11
    "We may encounter many defeats but we must not be defeated. - Maya Angelou"
12
  ];

Subsequent create a operate known as getQuote() which seems to be like this:

1
operate getQuote(){
2
    const quoteIndex = Math.flooring(Math.random() *quotes.size);
3
    const randomQuote = quotes[quoteIndex];
4
    doc.getElementById('random-quote').textContent = randomQuote;
5
  }
6
getQuote();

Contained in the operate, we’re updating the factor with the id “random_quote” with the results of choosing a random quote from the quotes array and setting it because the textual content content material of the factor.

The way to Add a Chrome Extension

Guarantee all of your are in the identical folder. Your folder construction ought to now appear like this:

1
.
2
├── house.html
3
├── index.js
4
├── manifest.json
5
└── types.css

Subsequent, navigate to Chrome’s extensions web page. You may also go on to chrome://extensions/. On the prime proper, allow Developer mode.

On the highest left, click on the Load unpacked button and choose the folder containing all of your information. As soon as the information have been uploaded, the extension will seem in your listing of extensions, and your homepage will now get replaced by the brand new customized homepage.

Right here is the demo.

Conclusion

In conclusion, you now know the right way to construct and deploy a Chrome extension! With this information, you’re able to create much more customized instruments to boost and personalize your shopping expertise.

Leave a Reply

Your email address will not be published. Required fields are marked *