Best HTML, CSS, Javascript Practice : Chrome Extension

For people who just finished Codecademy.

When you study programming, the most efficient way of self-studying is developing a product. This approach is much faster than taking any programming course to improve your programming skills.

Normally, people start to learn programming with HTML, CSS, and basic Javascript in web programming, however, before they reach the server-side part it’s difficult to make a meaningful application.

So, I always tried to convince the students like this,

It’s gonna be fun if you start to learn server-side and launch some application. Please, don’t give up.

but many students stop learning programming while at the HTML and CSS stage.

(Maybe, starting with HTML is not a good idea in order to encourage people to study programming.)

One day, I opened my Chrome browser to start work. Then I realized that I had actually been using the best application that you can build using only HTML, CSS, and Javascript.

Momentum

To be brief, if you install this extension on Chrome, every time you open a new tab there will be a greeting message over a super cool picture. The number of downloads is already several million. If you haven’t used this, I highly recommend you to install it. Maybe you’ll only experience this application for 2 to 3 seconds per new tab, but you can relax for that little moment.

Let’s try to clone this application!

Phase 1: Things to prepare

  • HTML
  • CSS
  • Javascript
  • Nice picture: from unsplash
  • manifest.json (to be loaded from Chrome)

The way I developed the application quickly was by focusing on the present, not the future. Of course, it’s important to have a concrete plan when it’s not your solo project. But! The lifetime of self-motivation is very short, so when you feel like developing something you better finish it very quickly. If you start to think about other options that will improve your product, you’ll never finish your project.

Let’s keep it simple.

We’re making one website with one big picture, one big greeting message and maybe the current time.

Find a picture

If you go to the Unsplash website you can find tons of cool license-free images.

Since I’m in Norway, I decided to use this picture.
Thanks, Vidar Nordli-Mathisen. (It’s always important to acknowledge their talent.)

Image for post
Image for post
Photo by Vidar Nordli-Mathisen on Unsplash

Make a project

Image for post
Image for post
Simple Simple Simple

One HTML file, one CSS, one Javascript, and one manifest file.

That’s all we need.

Okay, this is the first version.

Image for post
Image for post

This is a simple webpage. Now, to be loaded from Chrome, you have to add the following manifest.json file.

“chrome_url_overrides” is the most important property in this application.

Image for post
Image for post
Go to the extension page
Image for post
Image for post
Click “Load unpacked” button
Image for post
Image for post
Click select button inside of your project folder
Image for post
Image for post
Our humble extension…
Image for post
Image for post
Every time you open the new tab, it will show your simple webpage.

There you go, we’ve just finished our first project.

You can use it with only this functionality. Maybe you can edit the text to something you want to motivate yourself with, such as “ impossible is nothing”, “just do it”, “we are the world”, something-something. Or maybe you can put your family photo instead.

But let’s make it better than this.

Phase 2: Things to be added

  • Current time
  • Name changing function
  • Picture changing function

To include those three new features, I changed the HTML file like below.

CSS should be changed too.

Then the new page will be like below.

Image for post
Image for post
Oh, I thought it was Momentum :)

Updating manifest.json

Now, we’ll add two features.

First of all, we’ll add an input form to this application so that people can put their name on it. We’ll add this form under the “Hello, Jungwon Seo” message.

Image for post
Image for post
This is ugly, let’s fix it

New style for the input tag.

Image for post
Image for post
Okay, much better.

From now on, we need to think about how to store this information.

We’ll use “cookie”, but you can’t use “cookie” if you just open the HTML file from Chrome Browser. Try to test after loading as a Chrome extension.

There was incorrect information about the storage permission in the previous post. You don’t need the ‘storage’ permission to use ‘Cookie’.

Also, since I still prefer using jQuery, let’s add it.

I tried to add jQuery CDN, but…

Image for post
Image for post

Don’t worry, we just need to add one more property in manifest.json.

Check out line 9

Good, now we’re ready to code in the script.js file.

What I want to do first is:

  1. Make users type their name.
  2. Store into Cookie (let’s just use the most popular code)
  3. Fade out the input form and fade in the greeting message.
Something like this.

Now, this is the first time that we have to think like a real developer.

Case 1: When you open it for the first time.
Case 2: When you open it after you type your name.

We need to decide what should be visible and what shouldn’t be.

Case 1:
Time: Current time
Greeting Message: What is your name?
Input form: Visible

Case 2:
Time: Current time
Greeting Message: Hello, <name>!
Input form: Invisible

And, the way to differentiate these two cases is to check if the cookie has the key ‘username’.

With time updating function, the new script.js will be like below.

Now it’s quite long…
Image for post
Image for post
Before typing the name
Image for post
Image for post
After typing the name

Okay, it seems to be working.

Of course, there are some things we still need to improve, such as transition effects.

But, I’ll give it to you.

Now, what else?

We need to add the functionality that allows users to change their picture.

Unsplash API

You can easily register your app and get a token from this page.

To use Unsplash API, you have to register your application in their developer page.

Image for post
Image for post
By clicking ‘New Application’ you can register yours.

For the demo product, you’ll be allowed to use up to 50 requests per hour. And that’s enough for us.

Just fill out the below form however you want.

Image for post
Image for post
Type any name

If you create the application, you will see the ‘Keys’ part from the redirected website.

Image for post
Image for post
I have deleted this application, so no point to try.

You just need to copy ‘Access Key’ and assign it into your javascript variable ‘ACCESS_KEY’.

We’ll use the search API.

Here’s the scenario. All people have different interests. So I want to ask their interest first, and then I’ll search that image using the Unsplash API. After that, I’ll keep updating the image every 12 hours (same keyword, different picture).

So the AJAX function will be like below.

MIND ACCESS_KEY

And this function will be called after you type your interest.

Then, as you can expect, we need to be a developer again.

Case 1–1: Very first time
Case 1–2: After the name
Case 2: After you type your interest
Case 3: 12 hours later.

Okay, let’s decide one by one.

In Case 1–1, we just need to hide all the image related part. Skip this.

In Case 1–2, just shows the input form for the interest.

In Case 2, call AJAX and save the image information.

In Case 3, let’s just set the expiration time to 12 hours and if the cookie is empty, call AJAX request again.

Image for post
Image for post
Keyword: London

Yes, it’s working.

Phase 3: Final touches

It’s not mandatory to credit the photographer, but why not?

We can write a couple more lines of code and credit the photographer’s name and page to the top-left side.

check line 14,15

So that we can use the photographer’s information when you check the cookie for the first time.

One more thing, what if somebody want’s to change their interest?

Let’s add that functionality that allows people to re-type their interest.

Add a button
Give some style
Image for post
Image for post
Before you click the button

There you go. If you click the button “Choose a new interest”, it will trigger to open the input form where you typed your interest before.

Image for post
Image for post
After you click the button

Phase 4: Make your own product.

I just wanted you to experience the process of developing a product through this post.

Still, to fully absorb the skills that you’ve learned, you need to improve this product on your own.

Maybe, you can start it by adding extra functions that you think good to include, for example, the way to choose the random picture.

Also, may think some of my codes are inefficient. You can improve it with better code.

Good luck and don’t give up!

The complete version can be found here: https://github.com/thejungwon/MyChromeExtension

Image for post
Image for post

This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

Written by

Lecturer at Yonsei University

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store