Tale of a Tiger: Bling Bling Blink

Inspiration from a simple yet beautiful Chrome extension took me on an adventure with Firefox add-ons. As want turns into need, this is what happens when developers _need_ something.

Hey, do you use Google Chrome most of the time? All the time? Good for you. 'Cause I don't. I like Firefox better. I have my own reasons (not getting into that here). But you know what, I'm jealous of you. No seriously, I am jealous of Chrome users. I mean, you have an extension for everything. Literally. Need something to dim the webpages at night? Bang! There's an extension. Need a prettier new tab page? Boom! There you have it. And why do they have to be pretty? Why does every extension in Google Chrome have to be pretty and smooth and bursting with colors? What is it, Disneyland? If you've read my last blog post, you'd probably know what this is one is about. This post is about... (drum rolls) ... another Firefox add-on. This time, it's about Blink. A Firefox add-on I made to make the new tab page more interesting. Here's how it started:

Fading out, Ripple effect, Entering black and white flashback

It was a bright sunny day in the city of Delhi. I was in college hanging out with my buddies, happy and oblivious to what was going to happen next. One of them was doing something on his laptop. And there, I saw a glimpse of something so intriguing and enticing, that could not help but ask what that beautiful webpage was called. Turns out, it wasn't a web page. It was his new tab page. Yes, New Tab page. The most ignored browser tab i the history of computer. My friend told me it was a Chrome extension called Tabbie. A lovely piece of software craftsmanship and curios innovation. I wanted it. I needed it. I had to have it. Just like a 6 year old needs that Superman action figure.

Ripple effect.. Fade back in.. Back to the future present

But alas, no one cares to make pretty extensions for Firefox. 'No problem, I'll make one' said a voice inside my head. And there it started.
There were already some New Tab replacement add-ons for Firefox, but nothing like what I wanted. Oh, did I forget to tell what Tabbie (and now Blink) do? Silly me. Well, you know how there's a tonne of websites and webpages you follow to keep you updated with stuff you like? You might enjoy some beautiful art and animations from Dribbble, or some tech news from TechCrunch or the likes. That's exactly what they do. These extensions bring the latest news from around the world right to your New Tab page. Why new tab page? Because that is the one page you open the most, and yet never pay attention to. It's the perfect spot to put some nice content and grab your attention. So there I was, spending most of my spare time in searching and experimenting things for Blink. There were a few key checkpoints I am particularly fond of. Here they are:

<geek>

1. Clearing the URL bar when opening a custom New Tab page. One thing we don't want is to see an ugly url in the URL bar of the New Tab page. It should be empty, without fail. To do that in Firefox, we can use gInitialPages list of the browser. Adding a URL to this list makes Firefox show it as a blank url. So, adding our custom New Page's url to this list should serve our purpose well. Here's a code snippet that shows how to do this,

const clearTabUrl = function() {
    let windows = windowMediator.getEnumerator(null);
    while (windows.hasMoreElements()) {
        let window = windows.getNext();
        if(window.gInitialPages.indexOf(newTabURL) == -1)
            window.gInitialPages.push(newTabURL);
    }
}

That does the trick. You see that I saved the current New Tab url for later use. That's because currently the user cannot manually change the newtab.url property (unless they edit it from about:config page). So, it is very important to remove your url from this list when your add-on is uninstalled/disabled in order to restore previous settings. For that, we can simply set an unload listener for the add-on and remove the url from it. Something like


const clearSettings = function() {
    services.set("browser.newtab.url", oldNewTab);
    let windows = windowMediator.getEnumerator(null);
    while (windows.hasMoreElements()) {
        let window = windows.getNext();
        if(window.gInitialPages.indexOf(newTabURL) > -1)
            window.gInitialPages.splice(window.gInitialPages.indexOf(newTabURL), 1); 
    }
}

Ok, hate to admit, but I'm not a genius. I didn't figure this out by myself. The credit goes to this post on Michael Kaply's blog. Check it out for more on overriding the new tab page.

2. Another thing I'm particularly excited about is that Blink allows the users to configure their feeds. That is, you can add new content to your feed simply by adding the link to its RSS feed. (Yeah, Blink works on RSS). Making that part of Blink was a brainer. Not because it's tough, but because it's not so intuitive. I'll give you a hint on how I managed it: simple-storage module and message-passing. Got it? No? Chill, the code for it is here. See the two pagemods and a couple of scripts that run when certain pages are loaded? That's it. Those scripts are doing a classic Firefox add-on style message passing dance. That's new feeds can be added and unwanted be removed, by just passing around the list of desired feeds.
3. Parsing the feed.
   I know covering this would basically cover the whole add-on code, but sorry, can't help it. This is the part I learned partly from here and partly by experimenting with Google Feed API and the DOM API. For a quick run-through, check this code out:

function addContent(url) {
  console.log("Parsing feed from: " + url);
  var container = document.getElementById('cards-container');
  $.ajax({
    url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + 
        encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      $.each(data.responseData.feed.entries, function(key, value) {
        var title = value.title;
        var imageSource = getImageSource(value.content);
        var contentSnippet = value.contentSnippet;
        var link = value.link;
        // create card
        if(title.length > 0 && link.length > 0) {
          var cardsource = newHope(title, imageSource, contentSnippet, link);
          var card = document.createElement('div');
          card.setAttribute("class", "col s12 m4");
          card.appendChild(cardsource);
          container.appendChild(card);
        }
      });
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("jqXHR: " + JSON.stringify(jqXHR) + 
                    "\nstatus: " + textStatus + "\nerror: " + errorThrown);
    }
  });
}

The method calls for getting card and image facilitate creating the material cards in which the news items are shown. It uses the Materialize CSS framework. You can check the full code out here.

</geek>

So, that was that. Blink is available here for your evaluation. It's ready for use by people, even though just v0.2.1 (It's stable, don't worry). Want a sneek-peak right away? here:

There are a couple more features I want to add to Blink. And honestly, I too feel a complete UI overhaul is required. But because of the imminent change in the Firefox SDK as declared by Firefox here, some API features will be removed. (The one that concerns Blink, and even Owl for that matter, is the Chrome authority). So, I'll pause the development of Blink till I know better. Feel free to check out the Blink's source on Github, it's under MIT License, so go crazy!

See you soon.
Stay Hungry, stay foolish :)