DEV Community

Olavo
Olavo

Posted on

1

Creating a Google Chrome Extension using HTML + CSS + Javascript

Image description

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

Image description

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 ;)

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay