Content
About Chrome Web Store badges
What I built that earned the Featured badge
How I approached developing it
The Chrome Web Store grants 2 types of badges to extensions: one is a Established Publisher badge, and the other is the Featured badge. The publisher badge looks like this:
It’s important because it means the publisher hasn’t demonstrated a history of policy violations. Violations can be anything from malicious code to dirty stuff like copyright infringement. Look for this badge when you want to use an extension from a reputable, trusted developer.
The second badge is the Featured badge and looks like this:
Below I’ll talk more about what the badge means, what I made that earned the badge, and how I built it.
What I built
Passport is a browser extension I created that replaces your browser’s new tab page with beautiful images, quotes, and a daily intention for those who want a mindful inspiration as they go about their digital day. I designed it to be unobtrusive, yet something that would encourage you to pause on occasion as you go about your workday. I wanted to give you something to think about, and a space to breathe. It’s available for Chrome, Edge, Firefox, and Safari for macOS.
The Chrome Web Store team recently granted it the Featured badge. Here’s how they describe extensions they grant the badge to:
“The Featured badge is assigned to extensions that follow our technical best practices and meet a high standard of user experience and design. Chrome team members manually evaluate each extension before it receives the badge, paying special attention to the following:
Adherence to Chrome Web Store’s best practices guidelines, including providing an enjoyable and intuitive experience, using the latest platform APIs and respecting the privacy of end-users.
A store listing page that is clear and helpful for users, with quality images and a detailed description.“
Source: Google blog
This is the first thing I’ve ever designed on my own, rather than collaborating with an actual designer. I’ve found that it’s a more intensely personal exercise than engineering. When you approach building an idea just as engineer, you outsource parts of the experience to the expertise of others: maybe it’s the founder, the marketer, or the designer, but most often in our work someone else is responsible for some other element of the project. Owning the full widget really makes you responsible for all of the outcome. It’s a bit of a vulnerable feeling. And it’s not to say I think I’ve found the end state and am “great” at any one of these jobs, but rather that I took a small step on that journey that I feel good about.
How it’s made
I actually designed it as if it were going to be a website originally, so the initial prototype was done in Framer. If I were doing it again I’d use Figma, as I understand how to customize the primitives better than I do in Framer and I think that tool lends itself better to mocking things outside of the context of a web page. However, Framer was great for mocking up the general design quickly and seeing how typography would work to express my intent. I kept it simple because I wanted something clean; it didn’t hurt that I literally didn’t know how to make a complicated design at the time. When I used to try to “design in code” by just building things, I found myself over-complicating things quickly because I was able to add features at a whim. It turns out the constraint of thinking it through, and then being able to express that in a tool I’m not good at, was helpful.
On the engineering side, it was made with React and that’s about it: everything else was intentionally kept as vanilla as possible. Some engineers love reinventing the wheel, others use so many 3rd-party scripts that you can never make the experience as performant and custom to the vision as what you’d want. I made an intentional trade-off to be in the middle: I use a view library, React, to handle most of the heavy lifting of a reactive component-based architecture, and wrote the rest in vanilla JS using native browser APIs for things like modals so that it would never be an experience you’re stuck waiting for. The extension is about 791KiB to install, which compares favorably with larger competitors which in some cases are up to 14MB. It’s not a merely engineering-driven interest to keep that size low: you can feel it every time you open the new tab page. The slowness of other offerings was one reason I decided to make my own.
Last but not least, I’m mindful of users privacy. While I’m interested in tracking usage broadly, I’ve intentionally kept a privacy-first approach. For awhile analytics were handled by Plausible, but the limitations in understanding usage were too much, so I struck a balance with an EU-hosted Mixpanel project.
All of this came together into an experience I think users appreciate for its simplicity and beauty. I’m grateful the Chrome Web Store team agreed!
Follow for more
My writing is also posted on Medium, where you can follow to receive notifications for new posts, comment, and more: https://michael-flores.medium.com/