DEV Community

Cover image for Exploring Front-End Adventures: Building Chrome Extensions, Navigating Trends, and Embracing Challenges
Rodrigo Antunes
Rodrigo Antunes

Posted on • Updated on

Exploring Front-End Adventures: Building Chrome Extensions, Navigating Trends, and Embracing Challenges

TL;DR
I built two Chrome extensions 🎉

Internally, we have a front-end chapter every two weeks at the company I work at where we encourage our team to share their initiatives and ongoing projects. Additionally, we discuss relevant information from surveys like those found at https://stateofjs.com/ and https://stateofcss.com/. These resources help us understand current trends in the development community. Recently, we noticed a decrease in the community's interest in TypeScript, but we can address that topic another time since many people are talking about this.

Following the plan to promote initiatives, I decided to embark on a new project for me: developing a Google Chrome extension 🧑🏻‍💻 After all, how can I ask something of the team if I don't challenge myself to step out of my comfort zone too?

Planning project

My initial idea was to recreate something I had seen a long time ago but couldn't find anymore. If I'm not mistaken, it was a Firefox extension called Pendulum, which I used around 2011 or 2012. Among other features, this extension displayed web page elements in a topographical map-like format. Essentially, it changed the background color of page elements using a grayscale scale, ranging from lighter to darker shades, highlighting them in overlapping blocks. I used it regularly while learning about web design early in my career.

I tried to create this extension over a weekend but faced challenges related to the Chrome API, scripting permissions, and style injection. I realized this would take a bit more time. During research on the topic to better understand the process, I learned that the technologies used were HTML, CSS, and JavaScript. So, I already had the necessary knowledge to start creating something. Additionally, I was curious about the extension documentation and approval process. I decided to create another extension that simply makes a request to an API that returns a quote from a well-known figure. This reminded me of a quote attributed to Pablo Picasso: "Inspiration exists, but it has to find you working."

Smiling face

That's how I built CSS Terrain and Quotidian Quotables in just under a month. The names and content of the pages were 100% generated by #ChatGPT. I simply described what the extensions do, and within minutes, with some adjustments here and there, I chose the names and descriptions. In a few minutes playing around in Figma, I also created the extension logos.

Top comments (0)