Kittens-everywhere, a tutorial for building your first extension

Add-ons
#1

I am experimenting and learning how to create good content that helps developers in our community to learn how to create extensions.

I recently had a chance to teach a class on how to build extensions and I turned that into my first tutorial. In it, we build kittens-everywhere, an extension that turns images on a website with cute pictures of kittens and doggos. It also talks a bit in the beginning about what extensions are and provides inspiration through examples of what other developers do with them.

This tutorial is aimed for people who have never built an extension but would like to get started.

I would love to get some feedback from new developers on

  • was it helpful?
  • was it easy to follow?
  • did you learn useful things?

and from the experienced developers from the community on

  • did I do and explain things correctly?
  • are there better ways to build some features?

so I can improve the materials going forward.

You can find it here https://hamatti.org/posts/kittens-everywhere-how-to-build-a-browser-extension/

2 Likes
#2

Hello @juhis !

First things first, it’s a good thing that you created this. I honestly never interested myself in extension creation, because I was thinking it was out of my league. The fact that you created a tutorial made me read it, for my culture.

Your introduction, showcasing many extensions, is a good idea! I (re)discovered a few one, and it’s a good point to start and, as you say, “let’s build one and see what happens” seems to be a good approach.

My first remark will be for your paragraph “The tooling”. It seems clear that you’re on Linux, that you already have a code editor, and that everybody (should know how to) use it. As a NON developer, if I wanted to start, I would have expected either a full "recommended setup with Linux, Visual Code, and XYZ apps", or at least a sentence like "prerequisite : you already know how to develop and have a JavaScript environment for development installed. If not, go to https://GoLearn.here to start." Indeed, this is in contradiction with your “level 0 - tutorial 101” approach.

There might be a broken link in

If you navigate to any other website, for example hamatti.org, you should now see a thick green border at the edge of the site.

as https://hamatti.org/p/c4f819ad-9493-4fcd-9f5a-62de489fa95a/hamatti.org/ return a 404. Is it on purpose ?

Well, I have read the rest of it, and it seems pretty cool :slight_smile:

I like the idea of kitties’placeholder. That’s a wonderful idea.

So, here I go. Hope it helps !

:wave: Bye!

#3

Hi @HelloTheWorld!

Thank you!

You are right here. I skipped a step in my thinking and didn’t clearly convey that message to the reader. For me, the “level 0” here was someone with previous programming knowledge in Javascript but new to the extension development.

I’ll take a look at how I could provide good starter links in the blog post for those who are approaching it with less programming knowledge! Or at the minimum add expected prerequisites.

Thanks, fixed that.

Thank you so much for commenting, it was really nice to hear your thoughts and improvement ideas. I hope you’ll try out building extensions and find out that it’s fun and totally something you can do with a bit of practice. For me the ability to customize my own internet experience through extensions is such a game changer and I hope more people discovers that joy.

#4

Hello Juhis,
I’m happy to see a new blog about addons development! Did you posted it in Reddit?
If not, do it so it can reach more people! :slight_smile:

Now, I have some tips for your code:

  • you’ve put “Options page” into own folder, I would suggest doing the same for content scripts and for the background scripts (remember, new devs will copy your style and your code organization :slight_smile:)

  • you are using inconsistently semicolon at the lines end - I know it’s optional but you should stick with one style (I guess it’s more common to have it always there)

  • I’m happy you are using const, but again not always, which is super confusing (if you will use let only when it’s actually needed, you’ll know that this variable is being mutated later on)

  • in the last code block you have a line localStorage.then(function(res) {.
    I think since you have already used async/await to fetch storage before, it would be better to use it also here.
    (also, using name “localStorage” for a promise returned from “storage.local” may be confusing for inexperienced devs since there is a “localStorage” on the window object!)

  • this is a super important, don’t async function in the “onMessage” handler: browser.runtime.onMessage.addListener(async function (message) {
    The problem is, this handler ALWAYS returns a promise, so it will act as a “black hole” and consume all messages, even those that were send to a different handler. These bugs are then crazy hard to find. More info here.

Other than that, it all looks great, I like your code style and it’s great that you’ve included also comments!

Lastly, there is this “elephant in the room” called Chrome / manifest v3…
As you know, Chrome doesn’t accept V2 anymore, so this tutorial will work only for Firefox, which is OK for studying, but in real life, many devs will want to support other browsers as well (it’s hard to ignore browser with 60%+ market share :frowning:).
What I’m trying to say, it would be nice to have “yet another blog” :slight_smile:, this time about “Multi-browser extension development”. Something that would help to solve all those issues like - creating extension that’s compatible with Firefox v2 and Chrome v3, with separate manifest files, but same sources (so some simple build script is required).
I wanted to write one for a while now but somehow I can’t find a free time for that :frowning:.

Anyway, good job! :slight_smile:

#6

I have not. I don’t have a Reddit account.

Thanks for pointing it out, my new setup doesn’t have all consistent Prettier set up yet and I’m so used to all that happening automatically I forgot to double check here. Will fix once I update the post and example code.

Yeah, I think most of the unneeded let usage there stems from my earlier experiments that did some modifying and when I changed the code later, I forgot to change them to const.

Great point, thanks!

I did not know that, thanks for letting me know! I need to fix them and add a note about that in the post.

Absolutely, 100% right. The reason I did this one in MV2 now is that on the other hand, Firefox doesn’t yet support MV3 and I also haven’t had time to learn all the changes for MV3 yet so once those start to improve, there will definitely be more MV3 tutorial content too.

Absolutely, I definitely aim to write more about different aspects of extension development and cross-browser stuff and build processes to make it easier are on my list.

I know that feeling :smiley:

Thanks for the encouraging words and all the improvement ideas, I truly appreciate them. Will make fixes to the blog post and example next week after my travels.

1 Like