I recently took an evening to make basic Chrome extension, and streamed the whole thing on my Twitch Coding Channel while I did it.

I made Preach! — A simple extension to help you get 👏 your 👏 point 👏 across👏.

https://twitter.com/samjarman/status/831788666695610370

Here are some things I learned along the way, that seemed non-obvious to a reasonably novice JavaScript developer. Enjoy.

You can debug extensions

It’s actually possible to debug extensions by using the “background page”. To do this, use the same Extensions page as you are for loading your extension, and simply click background page.

Once that’s open, you have the full Chrome inspector to find that semicolon you definitely didn’t forget.

Only content scripts can modify the DOM

This totally makes sense, and it’s reasonably easy to do this. Simply add the permissions to your extension manifest. This will define what pages these run on, what file to embed in the page and when to run the JS associated

https://gist.github.com/samjarman/35314425daf139e8790eda394df35dec

Use JS message passing to pass the message from one to another

So how do I make DOM changes from my background.js or popout.js to the page DOM? Use JavaScript Messaging. This technique lets you publish messages in contexts and have them received in other context. For my extension, I wanted to receive the modified text the extension generates and display an alert on the screen (modifying the DOM).

The success dialog of Preach!

Here’s an example of how it works in Preach!

https://gist.github.com/samjarman/a39e344539a521b428317ff5d2f9cf25

Chrome Web Store listings aren’t free

Nope. Joining the Google developer programme is $5 USD. Not surprising really, and a lot cheaper than say, the Apple developer Programme. I suspect the $5 fee helps remove spam and low quality extensions. Didn’t stop me though 😏😅.

Chrome Extension listing is easy

Seriously, the whole listing process for an extension is super easy. Excluding making the Chrome Web Store assets (3 images), the whole process for listing a free extension (preaching is free) is really easy.

Chrome Extension stats take a while

The statistics on Chrome extensions (if you don’t use Google Analytics) can take a few days to come through and they’ll remain on a similar delay. It’s annoying. I’d recommend GA if you really do care about the speed of these.

Overall, Chrome extension dev is really fun. If you’re new to coding, it’s a great way to get something small written, publish it to many countries, up to 1 billion people and see who likes it. If you’re an old hat, it’s a great and easy way to scratch that “I want to ship something” itch. Sure was for me.

Watch me code on Twitch here — Twitch.tv/Samjarman. You can also follow me on Twitter — @samjarman

Finally, thanks to Ben and Jacob for their help with this one. Couldn’t have done it without you.