loading...
Cover image for Explain XKCD To Me

Explain XKCD To Me

yechielk profile image Yechiel Kalmenson Originally published at blog.yechiel.me on ・2 min read

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!

XKCD's "Ten Thousand" webcomic

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.

Explain XKCD logo

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!

Screenshot of the plugin in action
Notice the new button?

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

Discussion

pic
Editor guide
Collapse
garthvador profile image
Quentin Caillaud

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

Collapse
yechielk profile image
Yechiel Kalmenson Author

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.

Collapse
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

mamish a tikkun gadol for the tzibbur of xkcd lomdim, but does it have a haskomah from the mechaber?

Collapse
yechielk profile image
Yechiel Kalmenson Author

😂

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.

Collapse
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

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. 😁

Collapse
shoupn profile image
Nick Shoup

That's awesome. Thanks for making this a thing.

Collapse
yechielk profile image
Yechiel Kalmenson Author

Oh, the pleasure was mine 😀

Collapse
ggenya132 profile image
Eugene Vedensky

Nice and simple! I appreciate that it's just an anchor tag rather than some cumbersome, dreaded, modal...shudders

Collapse
yechielk profile image
Collapse
isaacdlyman profile image
Isaac Lyman

Been using this extension for a few weeks now. Super nice to have. Thanks Yechiel!

Collapse
yechielk profile image
Yechiel Kalmenson Author

Thanks! Glad you found it useful! 🤗

Collapse
dangolant profile image
Daniel Golant

Wow, this is a great idea!

Collapse
yechielk profile image
Collapse
designpuddle profile image
Chris Bertrand

That is awesome! Very clever, I never knew you could literally inject stuff into the dom like that! Nice work!

Collapse
yechielk profile image
Yechiel Kalmenson Author

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.

Collapse
scionofbytes profile image
Shaun

When is the Chromium port coming along? :D

Collapse
yechielk profile image
Yechiel Kalmenson Author

Ask and ye shall receive :)

I'll see if I have time over the weekend.

Collapse
maccabee profile image
Maccabee

I'm definitely downloading it when I get home.

Collapse
yechielk profile image
Yechiel Kalmenson Author

Thanks! Let me know how it works for you...