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.
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.)
Replace new tab page with a personal dashboard featuring todo, weather, and inspiration.
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
- 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
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…
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.)
Make a project
That’s all we need.
Okay, this is the first version.
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.
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.
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.
New style for the input tag.
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…
Don’t worry, we just need to add one more property in manifest.json.
Good, now we’re ready to code in the script.js file.
What I want to do first is:
- Make users type their name.
- Store into Cookie (let’s just use the most popular code)
- Fade out the input form and fade in the greeting message.
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.
Time: Current time
Greeting Message: What is your name?
Input form: Visible
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.
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.
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.
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.
If you create the application, you will see the ‘Keys’ part from the redirected website.
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.
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.
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.
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.
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.
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
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.