My first Chrome extension 🦄

This is mainly a story about the first product I ever made as an owner. But if I’m being completely honest, my absolutely first extension came about on a dare my boss made, because I could not shut up about the difference between Blue and Indigo — it was my Hello, world extension. But I’ll start at the beginning.

A little push

I've been a full-stack developer for two years now, but to be honest, my real super-power is on the front-end side. A Chrome extension was never on my radar of things to do. First of all, it wasn’t in my taskboard, company, or otherwise. Second, where do you even start?! The extension section up there in the browser window always looked so intimidating, strange, and far from reach. I’d surely have to be an expert… or so I thought, but like pretty much everything in tech or life — all you need is a little push, some external motivation 💪

This seems doable

Once I set a goal for myself, I pull out my go-to weapons: Youtube videos and Google searches. Turns out, there is a manifest JSON file that sets the structure and permissions of your extension and that’s basically it. From there it’s all HTML, CSS, and Javascript. This seems doable, I thought. And so I did, and a few hours of coding later I had a very basic working Chrome extension 🎉

Happy and satisfied as I was, how do you show off an extension? I must let my co-workers know I’m better than them! 👑

This is the part where you need to be more committed. Hand over 5 dollars to create a Google developer account. After that, you’ll need to zip the whole thing up, write some descriptions, upload icons, some images, and add reasons for all the requested permissions (figuring out which permission you really need so there are fewer reasons to add). Once you’ve done all that, you’ll need to take your newborn beauty, and submit it to the Chrome gods for approval. This review process may take a few days. And that's it. It’s there, in the Google web store, among all the others 😌

In the right place at the right time

Grinning from ear to ear, I show all my peers my magnificent creation and collect buckets of praise. Now what? With this new and exciting skill I’ve earned, I was hungry for more! But there wasn’t more, I was back again to normal work/life routine with no real need or idea for a new Chrome extension 😿

“You should make unicorn emojis burst out of my curser each time I click it. That would be cool”, I heard my wife shrug in her corner of the room the following weekend. Her idea came in the right place at the right time. And she was right (as wives tend to be), I definitely should 😎

Here we go again

After a night of inner brainstorming, morning rolled around. With my son in school and my wife fast asleep, I open my computer… Here we go again! A new folder, some basic files, and the technical principle of working mainly in CSS with some mouse click events and random numbers from the script. The main tech is creating a unicorn div/divs on every click with offset-path and keyframes animation with an offset-distance change and removing it after a set time from the site. To make it extra pretty, I asked my designer wife for an icon. A few tests and some bug fixes later, voila! A new and beautiful Chrome extension was born — Clicks of Unicorns 🦄 🍾

The changing stats

My new baby got approved and published. I posted about it on my work Slack and some small CSS Facebook groups. The next day, I saw the extension was downloaded several times. I was feeling satisfied, but it also felt like this time around I had made something truly delightful. Spam clicking and shooting unicorns everywhere felt great. At this point, there is nothing to do but to follow the changing stats every couple of days 📈

A week or so from launch something very surprising happened — I began seeing some organic growth. More and more people were installing my extension from all over the world 🌍

users graph sorted by country

Where there are users, there’s user data

Up until this point in my life, I have never had a project with any real, consistent, and organic growth. And not for lack of trying, In a former life I was an aspiring musician. I had two hypotheses to explain the growth I was seeing: A, people who download Chrome extensions are more inclined to experiment with more esoteric ones. B, everyone loves unicorns 🦄

And so, it became a ritual of mine to look at the changing stats every day, trying to figure out who my users are. Even though at that point, I had less than 50 active users — where there are users, there’s user data. The first obvious thing I saw was that almost every user who installed the extension deleted it on the very same day. The extension was proving too much for some, and there wasn’t an OFF button. Then came a feature request. It came from my sister, who saw the flying unicorns and asked, “can you make it a strawberry instead?” 🍓

Upgrades!

With my new found data I set to improve my extension. Using the popup ability when you click on the extension icon I developed a select menu for the emojis. I added a bunch that I felt matched the overall style of the extension (plus some specific requests from family and friends). I also opted to add a ‘no emoji’ option to try and mitigate the problem I saw — by allowing users to take a break from the extension without uninstalling it altogether. To sync the selection in the popup to any other open tabs, I used the chrome.storage ability. This story has a happy ending: upgrades are up, the code is available on Github, and I can already see some improvement in the install/uninstall rate 🦾

choose wisely

What's next

My wife and I look at it like it’s our little product, and see opportunities to change and evolve it as an exercise in product management. Maybe a website? 🤷‍♂️

We’re happy to hear your suggestions in the comments!

A music composer turned front-end developer, married plus one, with a deep passion for all things CSS.