Creating a Google Chrome Extension using HTML + CSS + Javascript

An extension can be useful for several projects and specific situations, so I decided to make it available to you so that you understand a little more about how an extension for Google Chrome can be useful and simple to implement. In addition, you who are probably a regular reader of TabNews, will have an easy way to follow the articles.

You can check this out on GitHub.

Feel free to send your PR and improve the implementation of this small project. Below I describe a little more how it is and some challenges to implementing it.

TabNews Reader

Press enter or click to view image in full size

TabNews RSS reader with recent article listing function and Dark Mode option enabled according to user’s default selection.

Challenges

Logically, this is not an official TabNews project, so access to RSS is blocked via CORS. To get around reading the data, I used a free routing proxy that basically loads the data and returns it to the application.

Usage

Sign in on Google Chrome
More Tools;
Extensions;
Activate “Developer Mode” at the top right;
“Load without compression” top left button;

Ready. The TabNews Reader extension will be installed in your browser. Just access it along with the other extensions.

Google Chrome Store

It is possible to package and submit the extension to the Chrome Store, but at a one-time cost for extension developers. As this is not my case, I will not go up to the store (for now) ;)

For those who want to know more about uploading their extension to the Google Chrome Store: https://developer.chrome.com/docs/webstore/register/

Finishing

Well, that’s it. I hope this material is useful to you and your projects. Follow me on Linkedin and stay on top of many things to come ;)