I’ve casually been learning some JS via Mimo and Udemy for the past couple of months. It is fun and I get some dopamine seeing a nice animation when completing a lesson on Mimo, however, it is pretty abstracted from a real environment.

I learn things best under two conditions:

• the learning is synchronous with a cohort and other learners are alongside me to regularly discuss content
• I have some real-world application for the content I am consuming

I figured I’d try and build a simple project calling on the help of ChatGPT when stuck.

As a designer I end up inspecting CSS regularly to find typography styles. Based on this, I decided upon an extension to fetch typography styles based on the active page.

Aside: At Jenni we are considering building an extension to help users save web content to their reference library. I thought it would help me understand the Chrome extension ecosystem a little bit better in the process, too.

Defining the scope

Deciding what to build and what the simplest version of it would look like.

• As a designer, I want to ensure the web team has implemented the correct type styles
• Jenni is a text editor so 90% of the UI is text, we must have clear type hierarchy and ensure that implementation is correct
• I generally like seeing type choices from various websites I visit and inspecting CSS is slow

File setup (2m)

I’m convinced the complexity with setting up the correct directories and developer environment prevents most people from starting any projects. To kick off I asked GPT for a simple structure based on the project goal

Build (10m)

The first stumbling block was the correct version of manifest.json which describes the extension’s behavior. GPT was giving me manifest v2 but Google now uses v3.

I styled the popover with vanilla CSS

After testing, I realized there was limited utility in just returning a page’s base type style. I wanted to know the properties of different chunks of text on a page. Most sites combine typefaces, too.

I added mouseover functionality that would allow me to identify any typography across a page rather than just base. This required event listeners which I don’t understand too well, but GPT’s code snippet worked first time after I created a content.js file.

After mouseover was added, upon triggering the extension a blank popover would show until the mouse interacted with some text. Here I added an empty state to guide the user to hover over text content.

To finish up I added another property which was font color.

Fixing bugs (20m)

Most of my time was spent here.

• Somewhere in my js file I had written function as functions
• I was testing in the developer console of the Google web store and realized they block any extension interacting with Google pages

Submitting to Chrome Web Store (20m)

To submit an extension you must build a profile, pay a small fee, and fill in some legal docs.

GPT helped me write a privacy policy and justifications for activeTab.

I spent 10 mins designing simple assets for the web store in Figma. Speaking of typography, I came across Apfel and just wanted an excuse to use it. I used it for the main story banner.

Approval from Google took approximately 24 hours.

Future updates

At some point, I’ll add the ability to copy each property to the clipboard.

You can give it a try here 🙌.