DEV Community

Cover image for Here's how building a chrome extension went
Paul
Paul

Posted on • Updated on

Here's how building a chrome extension went

Soooo!

Recently I had a client for whom I had to make a landing page (will talk about this in another blog).

Something that I always hated the most is picking a font for a website. I have even watched hours of video on typography, and still find it difficult to pick a font. Oh! believe me when I say the font types you choose make a lot of difference and in a way it adds personality to a page. It can take your page from 🤮 to 🤯.

For example lets test 2 different fonts on the NYT (New York times) page

NYT

The one one the left is NYT's default "Cheltenham" and "Georgia". The one on the right is a "italiana" Guess which is more readable? Which page will you stay longer?

Or

look at some of the websites on Awwwards, you'll always notice almost all of them have great Typography that goes with the page.

Coming up with the idea

idea

Now testing different fonts on a website would take a lot of time, it's also due to the fact that most of us don't have a quick preview of the font on our website. (especially when coding it yourself)

This is when I realized having a quick preview of the fonts directly on the webpage would save me hours of guess working.

I wanted to preview Google fonts (my primary source for fonts) on any website and copy the code directly. The only way to achieve this was by making a browser extension.

So I took a week off and started building a tool called Font tester and open-sourced it so you can take a reference if you are building an extension.

Why I started with chrome?

Big

Well to no-one's surprise I decided to start with chrome extension because of its market dominance. Chrome has a market share of 65.41% followed by safari - 18.39% and Edge with 5.24%. (source)

Despite my primary browser being Edge I decided to make the extension for Chrome so many more people could use my extension, now don't get me wrong, I still use chrome, but sometimes it takes up huge chunk of my computers memory.
Plus porting an extension made for Chrome to Edge or chromium based browsers isn't that difficult (at-least that's what I read)

Injecting the widget Vs Popup

Now when you start going through the developer guide by Google, you'll see that there are multiple ways to show your extension.

I'll be focusing on the Popup and injecting the widget to the page.

The popup is the one that popups as shown below.

credit Google

It runs in an isolated container, has a separate DOM and JS context.

Now while this might be ideal for most use-cases, I didn't want the extension to be in one place. I wanted to allow people to move the widget around on the page, so its easier to use and less annoying

This is why I chose to inject the widget directly into the webpage so it looks something like show below

Github

Using Vanilla JS VS Library

I started developing this in plain Js, but quickly realised that using this approach, it would take me more time to develop the prototype, so I decided to use React.js.

Setting up things initially with React.js for extension took me sometime (mostly because I couldn't find much help with React+chrome extension), However, I was able to move faster during the development phase.

I also decided to choose a component library antd, so I won't have to reinvent the wheel and can prototype at a faster phase.

So if you are using React + Webpack setup for your extension feel free to take reference from Github

ShadowDOM 🦇

batman

So, one of the major problems of injecting your extension to different webpage is that, the webpage styling could affect how your extension's look.

This is when I came across a ShadowDOM, this was a totally new concept to me, had never heard of this before.

So essentially, any styling or JS on the page won't affect your extension's styling if you add it inside ShadowDOM.

So, once I understood what it was, I rewrote parts of my code to attach to shadowDOM instead of the wepage's DOM. This way the widget's styling wasn't affected by the page's styling.

Publishing to Chrome Store.

Finally, after testing, it was time to publish the extension to chrome store.

Publishing to chrome store is a bit different, it has a number of security questions set in place to ensure you are not publishing a malware. After publishing, I felt publishing to chrome had higher security standards than publishing to Play store, for Good reasons.

Now depending on the permissions in your manifest.json you'll have to justify why you need the permission in their form.

The review process can vary between few hours to week. My first review took around 2 days, which is when I noticed that the styles were not being applied in the widget. So I had to rebuild it along with the styles, and resubmit it before publishing, this time it took less than 24 hrs and finally I published my first chrome extension 😎

I won

And that's how writing my first chrome extension went.

Who am I?

For those who don't know me, I am Paul, I write open-source most of the time.

If you want to see more open-source you can follow me on Github and Twitter

Oh! and don't forget to check out the extension and let me know your feedback 🙃. Upcoming features can be found on the roadmap.


Extension badge

Font tester - Chrome Web Store

Test different fonts types on a webpage. Made for developers

favicon chromewebstore.google.com

Top comments (31)

Collapse
 
creativesparkst profile image
CreativeSparkStudios • Edited

Very nice extension - I'll surely use this to preview website fonts going forward!

A few nice-to-have features I thought of while testing it:

  1. The ability to filter fonts by serif/sans-serif and by classifications (monespace/display/handwriting/etc) like on the google fonts preview page.
  2. Being able to alter font-size for the selected text.
  3. The ability to step through fonts with arrow keys instead of having to open the dropdown and click through them.

But already very useful as it is, good job.

(Oh, just found your dev roadmap further down the thread and saw these features are already on there.)

Collapse
 
paul_freeman profile image
Paul

Thank you for kind words :)

(Oh, just found your dev roadmap further down the thread and saw these features are already on there.)

Ya, most of the requested features are already on the roadmap, stepping through fonts via arrow keys has been one of the most requested features. Lol, will definitely include it in the next release.

Collapse
 
bogomil profile image
Bogomil Shopov - Бого

Oh, this is a nice extension! Could it work with other sources?

Collapse
 
paul_freeman profile image
Paul

Other sources as in? Like other websites? if so yes, it works with most of the website, except Chrome's extension store page, which perhaps for security reason, doesn't allow any extension to run on their page

Collapse
 
bogomil profile image
Bogomil Shopov - Бого

I meant other font sources, not Google!

Thread Thread
 
paul_freeman profile image
Paul

Hmm, yes, its not yet implemented yet, but I am planning to add an upload button so, you'll be able preview downloaded fonts from the system, you can visit the roadmap to see upcoming features.

Plus, if enough people are interested, I'll add fonts from other sources including free Adobe fonts

Collapse
 
rfgonzalezweb profile image
rfgonzalezweb • Edited

You are right, there is little to no documentation about using react for building chrome extensions. I wish it would be easier to debug it too.

Great article btw

Collapse
 
siddsarkar profile image
Siddhartha Sarkar

Here is one i have created for developers chromewebstore.google.com/detail/p...

Collapse
 
paul_freeman profile image
Paul

Nice! I really loved the color choices for your extensions preview.

Collapse
 
siddsarkar profile image
Siddhartha Sarkar

Thanks mate 🍻

Collapse
 
gimli_app profile image
Gimli
Collapse
 
paul_freeman profile image
Paul • Edited

Wow! never knew we could add custom tools to the developer's tools. Nice work.

Collapse
 
codycodes profile image
Cody Antonio Gagnon

Thanks for sharing your experience and learnings along the way 😀

Collapse
 
paul_freeman profile image
Paul • Edited

you're welcome :)

Collapse
 
drfcozapata profile image
Francisco Zapata

Está simplemente GENIAL!!!
Cómo te escribí en la store, hacía falta algo así para quienes desarrollamos.
Gracias Paul por poner manos a la obra.
Bendiciones

Collapse
 
paul_freeman profile image
Paul • Edited

¡Muchas gracias! Me alegra mucho que te guste la herramienta. Tu apoyo significa mucho para mí :)

(Traducido por Google)

Collapse
 
streeterxs profile image
Afonso Araújo Neto

Can you speek a little bit more why the styles weren't being applied to the extension?

Collapse
 
paul_freeman profile image
Paul

There are two reasons, So, when you want to style a widget inside the ShadowDom, you need to add the styles insde the shadowDOM. Second reason was because of webpack configuration, it wasn't bundling styles properly.

Collapse
 
mohamed_karim_2dddebb42bd profile image
mohamed karim

Great thank for sharing

Collapse
 
vilce profile image
Ștefan Vîlce

Excellent article!
Thank you for the tips you shared with us!

Collapse
 
paul_freeman profile image
Paul

You're welcome :)

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more