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
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>- 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
gInitialPageslist 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, - 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.
- 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:
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);
}
}
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);
}
}
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);
}
});
}
</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 :)
