Tale of a Tiger: Into The Darkness

Being a software developer usually means long hours of working on computer, staring at the screen as if the meaning of life was hidden somewhere in those lines.

Being a software developer usually means long hours of working on computer, staring at the screen as if the meaning of life was hidden somewhere in those lines of code. But developer or not, looking at bright screens for longer durations is very straining to the eyes for everyone. So I prefer setting my IDE's theme to Darkula, or a similar dark theme, to save my eyes from being scorched. And have to admit, it's very cozy. The nice and dark background with dim-florescent text soothes the eye like the cool brook water to the lonely traveler.
All looks fine so far, but then suddenly, there is this function I need to use, but I can't remember it's correct usage. Or a weird error I haven't seen before, and I can't figure it out. And the only way out? Google. This is where the problem arises. The Internet has somehow developed a fondness towards bright white/ off-white backgrounds. Every typical website has a pale white background and text in black, links in blue. Regular Internet standards, can't complain. But for someone who is just switching from a dark IDE screen to the browser, this transition can torch the eyes. (You're more likely to understand this if you too like dark themes for your IDEs, or work a lot with Photoshop or Illustrator.)
And then one day, I decided I've had enough. I _needed_ something to turn those glaring websites dark. Thus began a quest for browser extensions. I use Firefox as my default browser, AMO my only hope. Surprisingly enough, I couldn't find an add-on that would do what I needed done. There were some that made an overlay on the webpage and displayed only the main content, doing away with distracting images and links. But nah, this ain't what I want.
So I figured, "Hey, if there isn't a good add-on out there to do this, why not make one for myself". And in this moment, the idea of Owl was born. I began with Mozilla's blog post "How to develop a Firefox extension" and realized that this mini-project needs JavaScript. And I don't know JS. Yet.
First things first, I took a Udacity course on JavaScript Basics (nice course, easy peasy). Now that I had a basic idea of js, it was time to code.
I guess I'll take a slight detour from the story and get you familiar with the Firefox add-on development process. First, you need to get the SDK. Installation is simple, and the documentation fantastic. Just follow the link above and you'd be ready for dev even before you know it. (Psst.. One more thing, by default, the cfx tool is installed with the SDK. It's cool 'n all, but it's been recently deprecated. So, might wanna take a look at jpm. You can skip if you're not in the mood, doesn't matter so much right now.)
Installed and ready? Great. Let's get our hand dirty with some code. To create a new add-on skeleton (booooo....skeleton...boooo.. jk), pull up terminal and do

$ mkdir hellworld-addon

$ cd helloworld-addon

$ cfx init            # Assuming you have activated it. If not, go the SDK 
                      # directory and do '$ bin\activate'

For jpm, just replace cfx init by this

$ jpm init                    # jpm doesn't need to be initialized.

Tada, a new add-on has been created. But it doesn't do much yet.
Anyways, back to the story. I too followed these steps and created skeleton for Owl add-on. Now comes the tricky part. Code.
I need a piece of code that would change the background of the whole webpage to some dark color I want, and change the text and link colors accordingly. For this, I came with my first amateur solution. We know that HTML webpages contain div-elements. Sometimes, lots of them. What if we iterate through all the div-elements of the webpage, and set a dark background for each of them. The code looked something like this:
  

var divs = document.getElementsByTagName("div");

for(var i = 0; i < divs.length; i++){

   divs[i].style.backgroundColor = 'black';

}

To compile and run an add-on, we simple execute

$ cfx run

or for jpm,

$ jpm run

The results were, well, bad. It worked well on Google homepage. But that was about it. Everywhere else, one or the other element was left out. This wasn't working. At all.
So, back to the thinking chair. While surfing through the Add-on SDK documentation, I discovered that it was also possible to add CSS dynamically to webpages. So I dug a little deeper and figured out a way to add a seemingly-alright CSS to the webpages when they load. This time, the results were better. But still, no. Something wasn't working. (Actually, a lot it wasn't). Sometimes there'd be no change at all, sometimes the whole webpage would turn black. So Plan B failed too.
Nevertheless, the need to protect my (rather our) eyes from the glaring white webpages was strong enough to keep me looking. A week later, I stumbled upon this. Doesn't look like much, but it is actually a way to attach style sheets to a webpages without disturbing other content. So, there I was trying to make this work. Thanks a good example I found online (sorry, lost the link), I wrote (copied) a CSS style sheet that could modify the webpage's theme to what I want. (The final CSS I decided on was this). Compile and run. Fingers crossed.
Great Scott! It works! Though a couple of glitches, (some icons/images disappeared) but it was waaay better that any of the previous attempts. "That's it!", I said to myself. Now, all I need is an icon for this extension, and it's ready to be published. Quick google search of 'owl cartoon' gave a cute looking owl with big-bright eyes. I knew this is the one. Got the image, quickly edited with GIMP, made grayscale versions and done! There we have it.
To publish an extension, we are needed to bundle it up in .xpi file. Again, terminal to the rescue:

$ cfx xpi

or for jpm,

$ jpm xpi


And there we have the xpi. Now, simply drag and drop this xpi into firefox and it'll install automatically. There you go, a ready-to-use homebrew add-on.
Having made the add-on, I decided to publish it online, to the AMO. You know, maybe there are other people who need this? So I went ahead and published it here.
Not even a week passed since I put it up online, I get this email from I Free Software (a nice tech blog) that they have reviewed my add-on and they really liked it :). Check out this cool badge they sent me.

Is this amazing or what! Shout out to I Free Software for their awesome review.
Signing off,
Enjoy!

PS: The source code of the add-on is available on Github under MIT License. Feel free to play with it :)