DEV Community

Cover image for Explain XKCD To Me
Yechiel Kalmenson
Yechiel Kalmenson

Posted on • Originally published at blog.yechiel.me on

Explain XKCD To Me

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

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

Top comments (18)

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

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

😂

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
 
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
Yechiel Kalmenson

Thanks!

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

Thanks! Glad you found it useful! 🤗

Collapse
 
dangolant profile image
Daniel Golant

Wow, this is a great idea!

Collapse
 
yechielk profile image
Yechiel Kalmenson

Thanks!

Collapse
 
chris_bertrand 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

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
 
badgerbadgerbadgerbadger profile image
Shaun

When is the Chromium port coming along? :D

Collapse
 
yechielk profile image
Yechiel Kalmenson

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

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

Collapse
 
yechielk profile image
Yechiel Kalmenson

Oh, the pleasure was mine 😀