Making My First Browser Plugin

I have a feeling most of my followers know about XKCD already, the webcomic that has become a staple of nerd culture, and if you haven’t then congratulations! You are one of today’s lucky 10,000!

I have been following XKCD religiously for years now, and have enjoyed pretty much every single one of the comics. However, occasionally, there will be one that I don’t get; perhaps an obscure math reference or a programming reference back before that became my thing. On days like that, I was thankful for Explain XKCD, a wiki-like website where nerds get together to explain all of the webcomics.

A few days ago I was looking for a small project to help me get into the world of browser plugins, and the idea occurred to me to add a link to each XKCD comic that would take a user directly to the corresponding page on Explain XKCD.

When I started, I didn’t know what was involved in making a browser plugin, but I figured I’d give it a night to get started and maybe finish it off over the weekend.

I ended up being surprised at how easy it was, within 2 hours of sitting down at the computer I had read the documentation, written a working plugin, packaged it, and gotten it approved on Mozilla’s add-on store!

Mozilla has excellent documentation that describes the entire process from beginning to end, including sample plugins you can code along.

The process itself is relatively straightforward. At it’s minimum all a browser plugin contains is a manifest.json file that contains information about the plugin (name, version, the URLs it should work on), and a JavaScript file with the actual code.

Of course, the JavaScript can get as complex as you want it to, but in my case, the whole plugin contained less than 20 lines of code.

If you like XKCD as much as I do I’d appreciate it if you downloaded the extension (you can find it here for Firefox and here for Chrome) and let me know how it works for you!

Feedback is always welcome at the GitHub project page.

This article has been cross-posted from my blog Rabbi On Rails.
You can read more about my coding journey there, or by following me on Twitter @yechielk