section-engineering-education / engineering-education

“Section's Engineering Education (EngEd) Program is dedicated to offering a unique quality community experience for computer science university students."
Apache License 2.0
363 stars 890 forks source link

[Languages] How to build a Chrome Extension that displays motivational quotes using Javascript. #4129

Closed deverten closed 2 years ago

deverten commented 3 years ago

How to build a Chrome Extension that displays motivational quotes using Javascript.

[Javascript] Developing a Chrome extension using Javascript.

Every Chrome Extension that exists on the chrome web store performs a specific task. Over the years I have had to install a couple of extensions that either helped me accomplish tasks at work, or enabled me to maximize productivity. Having used the Pomodoro timer extension in the last few months, I noticed a steep increase in productivity so I thought to myself “I am going to build something similar” - A Chrome Extension that will display motivational quotes at scheduled intervals (cheesy right!). I had zero knowledge about how to build one until this point. Luckily, the official Chrome documentation helped me understand the concepts I needed to just get started with building what I wanted.

Chrome Extensions are relatively easy to develop, and yes you can create them locally on your machine and have them interact with any page on the web. Think of them as small applications residing on the browser and with their help we can access information about a website, and build awesome things with them.

In this tutorial, you the reader, and I are going to build a Chrome Extension using Javascript. its major functionality is to display random motivational quotes from an API. You would have learned about the core concepts used in this work, and this will just be sufficient to enable you to build something similar or even more complex.

At the end of the article the reader should be able to :

Article quality

In comparison to other articles, I came across while trying to build this project I could not get enough support on how to make scheduled API calls (plain javascript doesn't do it). No article applied this. I am happy that people who want to schedule API calls in their extensions will find this article invaluable. Also, most of the articles I read preferred to use a popup at the top right of the page. They also needed to click the extension icon for the popup to display. I opted for notifications that display at the bottom right corner instead(so it doesn't cause a distraction), the same place where Windows notifications are received on your desktop. You do not need to click an icon to get a notification. I automated it.

References

Conclusion

The reader will learn how to build a Chrome Extension and make scheduled API calls using chrome.alarms

ahmadmardeni1 commented 3 years ago

Good afternoon and thank you for submitting your topic suggestion. Your topic form has been entered into our queue and should be reviewed (for approval) as soon as a content moderator is finished reviewing the ones in the queue before it.

ahmadmardeni1 commented 3 years ago

Sounds like a helpful topic - let's please be sure it adds value beyond what is in any official docs and/or what is covered in other blog sites. (the articles should go beyond a basic explanation - and it is always best to reference any EngEd article and build upon it). @deverten

Please be attentive to grammar/readability and make sure that you put your article through a thorough editing review prior to submitting it for final approval. (There are some great free tools that we reference in EngEd resources.) ANY ARTICLE SUBMITTED WITH GLARING ERRORS WILL BE IMMEDIATELY CLOSED.

Please be sure to double-check that it does not overlap with any existing EngEd articles, articles on other blog sites, or any incoming EngEd topic suggestions (if you haven't already) to avoid any potential article closure, please reference any relevant EngEd articles in yours. - Approved