JavaScript Tips Tab

In just one hour, build your own Chrome extension to show JS tips in new tabs!

Tens of thousands of Codecademy users each week make their own flash cards or notes to cement their new coding knowledge, and we thought we’d help out — with a dash of extra technology. Follow the steps in this project to build your own application that displays a new coding tip on every new tab in Chrome!

Our (slightly customized) version of the finished project, as seen on the Chrome Web Store

To complete this project, you’ll need some basic knowledge of HTML, CSS, and JavaScript. If you have made some progress with our free Learn JavaScript course, you should be able to complete this project. If you want to make any modifications to the look and feel of the project or more fully understand how it works, you should also finish our free Learn HTML and CSS course. Check out what your finished project will look like (without having to install anything) here!

If you’ve already downloaded a finished version of this Chrome Extension (found here on the Chrome Web Store), following this guide will show you how to make a new version of that project. By building it yourself, this extension can include all of your own notes and tips or have any new feature or content that you’d like!

Local Development

We are going to develop this app on your local computer. You’ll need Google Chrome and a text editor (we recommend Atom).

Download the starter project

This project focuses on writing JavaScript, which will enable us to interact with HTML elements. Since we are going to write JavaScript, we are going to provide the HTML, CSS, and project files to get you started.

The starter project includes an index.html, a CSS folder, and a JavaScript folder.

Generate a random tip

Open up the starter project in your text editor. Then, open up index.html in Chrome. It should look like this:

Let’s make this page come alive with JavaScript!

Take a look inside the main.js file inside the js folder. There are a couple things to notice. First, we’ve provided you with a tipsList array full of HTML-ified JavaScript Tips. Second, at the bottom of the file, there’s a bunch of code comments describing each expression and function we will write. Hopefully they will help us keep on track throughout the project.

Our first task is to display a random tip on the page. We’ll need to:

1. select a random tip

2. inject that random tip into the HTML

Random number generator

On line 30, write a function named generateNumber.

This function should returna random number between 0 and 11, since there are 11 items in the tipsListarray. Use functions like Math.random(), Math.floor(), and/or Math.round() to create a random number.

Select the tip HTML element

Around line 38, under the “Generate tip” comments, declare a function named generateTip.

Inside the generateTipfunction, we can utilize the generateNumberfunction to find a tip. Inside the generateTipfunction, create a variable named tip, equal to one tip from the tipsList array. To get one tip, you might write tipsList[0] or tipsList[1], but instead of writing an actual number inside the brackets, call the generateNumber function instead since it returns a number.

Checking in: At this point, your project should look something like this:

Make the button more clicky

Now that we have the tips, let’s make them change when we click the button.

Listen for clicks

Around line 54, declare a function named onTipButtonClick. Inside the function, create a variable named tipButton that uses document.querySelector to select the .tip-button element.

Now that we have the tipButton, we need to listen for any clicks on it. For this, we can utilize a function named addEventListener, which looks like this:

clickyClippy.addEventListener(‘click’, function() {

console.log(‘Hi, I am clippy, your helpful office assistant!’);

});

Remember Clippy? Clippy loved being clicked. In any case, the above code takes an element like clickClippy, and adds an event listener. The event we are listening for is a ‘click’. When that event happens, the proceeding function will be called. In this case, it would console.log a string to the console.

Use the above example to add a click event listener to the tipButton element inside the onTipButtonClickfunction.

One last thing: to start listening for click events, we need to call the onTipButtonClick function. Underneath the function, call it. Then, you can test it out by writing a console.log inside the click function and watching the console as you click the button.

At this point, your log to the console when you click the button should look like this:

Get new tips on clicks

Now let’s change the tip count, generate new tips when necessary, or change the look of the button if the tips run out.

Inside the click event listener, subtract 1 from the tipLimit variable, since each click should lessen the remaining tips.

Then, write an ifstatement that calls the generateTip function if the tipLimit is greater than or equal to zero.

Inside the same if statement, write another nested if statement to change the button text and style. Write an if statement whose condition is if the tipLimit is exactly zero. If it is, set the inner HTML of the tipButton to say “See you in another tab!”

In addition to changing the text, let’s change the style of the button to be greyed out and disabled. In the styles.css file, there’s a class named disabled. We can add it like this:

myButtonElement.classList.add(‘disabled’);

The above code will add the class disabled to the myButtonElement. Use this example to add the disabled class to the tipButton element.

Make this app into a Chrome Extension

Inside the starter project, there’s a file in the parent folder named manifest.json. Feel free to take a look. This file will enable us to use this project as a Chrome Extension.

Make sure to save your JavaScript Tips Tab folder in a location where you can find it (like Documents or Desktop).

Now, in Chrome, let’s make the magic happen. Open a new tab, and navigate to chrome://extensions. Inside this tab, click on the Developer Mode checkbox in the top right corner:

Once that is checked, some buttons will appear. Click on Load Unpacked Extension…

This will open up a file browser. Navigate to your JavaScript Tips Tab project folder and select it. This enables the extension.

Now, for the moment of truth: Open a new tab!

Great work!

You just made a Chrome Extension. With this knowledge, you could make any web app into an extension. Oh, the possibilities!

If you enjoyed this project, please let us know in the comments, or by clicking the green heart. We wholeheartedly encourage you to add more features, more tips, and make this project your own. If you do use build something cool based on what you’ve learned here, share it with us and your fellow community members on our forums! By sharing your changes and additions, you could help thousands of other learners like you to learn these essential skills.