DEV Community

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

Here's how building a chrome extension went

Paul on August 28, 2024

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 h...
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 :)

Collapse
 
em96 profile image
Emmanuel

Really great idea but the extension does not work :/

Collapse
 
paul_freeman profile image
Paul • Edited

Hi, I just reinstalled, to check, it seems to be working. Can you tell me for which site its not working? It won't work on the chrome extension store page, chrome disables for its page by default.

Thanks

Collapse
 
em96 profile image
Emmanuel • Edited

All good! I checked it again, and it works! Great tool. Thanks for developing it :)

Thread Thread
 
paul_freeman profile image
Paul

Oh! glad to know it works. Thank you for the feedback :)

Collapse
 
paul_freeman profile image
Paul

Hii!, thanks for letting me know, Can you tell me which browser you are using? also did you download it directly from extension store?

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Why I started with chrome?

Why indeed. The process of building for other browsers is damn near identical. You could do all at once

Collapse
 
paul_freeman profile image
Paul

Yes, I planned was to start with a just a prototype for Chrome, if people liked it, I planned to add it to other marketplaces as well. In this case I only had to test to see if it worked on Chrome. In case of Edge and chromium based browsers, i won't have to make changes, however for Firefox I'd have to make couple of changes.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

I've never had any issues with Firefox - other than tiny manifest tweaks, which are automatable

Thread Thread
 
paul_freeman profile image
Paul

Hmm, I am using chrome.scripting and chrome.runtime. However, Its should be portable with small changes, Plus since this is my first extension, I just wanted to quickly prototype and see what was possible.

Collapse
 
tatanka profile image
Tatanka.nl

Cool!

Some comments have been hidden by the post's author - find out more