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
Top comments (18)
Very good idea ! I often go to ExplainXKCD after reading XKCD, even when the meaning of the daily comic is obvious, it's always interesting.
I just added you add-on on Firefox !
(on my first use of it I was thinking it may be better to have the link with
target="_blank"but indeed without it it's the same behavior than the link from ExplainXKCD to XKCD, so your choice is totally coherent.)Lol now that you mention it, when I envisioned the functionality that's how I imagined it, I guess I forgot to implement that :)
I'll see if I decide to leave it as is or fix it in a later update.
mamish a tikkun gadol for the tzibbur of xkcd lomdim, but does it have a haskomah from the mechaber?
😂
No, I made it Al Da'as Atzmi, though I'm sure Reb Munro Shlita won't be Makpid. Bifrat that it was done Lezakos Harabim and Sheloi Al M'nas L'kabel Prass.
Mamish a zchus otzum to be mezakeh the oilum letoieles, and clearly there's no chashash of koichi veoitzem yoddi since you were oimer dovor besheim oimroi. 😁
Nice and simple! I appreciate that it's just an anchor tag rather than some cumbersome, dreaded, modal...shudders
Thanks!
Been using this extension for a few weeks now. Super nice to have. Thanks Yechiel!
Thanks! Glad you found it useful! 🤗
Wow, this is a great idea!
Thanks!
That is awesome! Very clever, I never knew you could literally inject stuff into the dom like that! Nice work!
Yeah, a plugin is just a JavaScript file that gets run whenever a certain page (that you specify in the manifest) gets displayed.
It can do anything that JavaScript can do.
When is the Chromium port coming along? :D
Ask and ye shall receive :)
I'll see if I have time over the weekend.
I'm definitely downloading it when I get home.
Thanks! Let me know how it works for you...
Oh, the pleasure was mine 😀