Giving the Squirt.io bookmarklet a favicon

#chrome #squirtio

Today I learnt about squirt.io, an open-source Spritz-like bookmarklet which helps you speed read the internet. From 250 words per minute all the way upto 950 words per minute. A bookmarklet is a javascript snippet which sits inside a bookmark on your "favourites bar", and allows you to execute that script on whichever website you're currently on.

I use Chrome mainly, and the only bug bear I have with bookmarklets is that they don't have favicons. As somebody who has a 1920 pixels of favicons stretching across the top of my browser, I can't stand to see that default white icon polluting the line of beautifully crafted icons.

There is a way to set the icon though!

Make sure you have the bookmarklet saved to your bookmarks bar. Then, go to squirt.io and bookmark it. Right click that bookmark, go to Bookmark manager. In the top left hand corner you'll see a menu Organise. Click it, and export your bookmarks to a HTML file.

Now open it up in your favourite text editor. I'm using Sublime. Search for squirt.io and you should find a line near the bottom of the file. It'll have a HREF pointing to squirt.io, an ADD_DATE, and more importantly, an ICON attribute.

<DT><A HREF="http://www.squirt.io/" ADD_DATE="1394700500" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABRElEQVQ4jZXSPUtcURAG4MeY+BVi0EJsBD8gRZogsk0Eu8XKRiSQwgj5CbYRLGyTKk0gTZoUsfCjEMFS/4EgRME2WwXUoEHN7qa4czfXu3dZM3A458y8874z5wzF1hH7BzzP+dpaCiyjjvW4P/gfgl4coRokC/clSQErkXiFW5yiX5s20uAozoMgu9ZyuJbqnyOhgi/YilYuMNaKJHU8w298x3gmPhekn3JiTeofA/imQGkT1xjJxtLEGgbwKs4/IjaMoTgf4xFe5wk6w1HOgF8GUR+6I16KpPnA1NLSHsa+KnmsJclP9GTKfxK+97jE43zvIkDy6rN4ireYwSSmsI1f+JPJazzUi6igEv3CLpYxIZmNM3zL5d25fJX8QhU7OMEB9v0bqFJB9Q2SQexpnsJ6lL5YpJ63LrzDIW7wExuYLlL+C3jqSJn7EH8tAAAAAElFTkSuQmCC">Squirt</A>

Above this bookmark, you should see your bookmarklet, where the HREF starts with javascript:. Notice how it doesn't have an ICON attribute set? Well, let's set that. Extract the ICON attribute from the squirt.io bookmark and inject it into the bookmarklet, like so:

<DT><A HREF="javascript:(function(){if(window.sq){window.sq.closed&&window.document.dispatchEvent(new Event('squirt.again'));}else{window.sq={};window.sq.userId='63c3f43e-7a2e-4652-ae1b-c8b309fbad5f';s=document.createElement('script');s.src='http://www.squirt.io/bm/squirt.js';s.s=window.location.search;s.idx=s.s.indexOf('sq-dev');if(s.idx!=-1){s.ampIdx=s.s.indexOf('&');s.host=s.s.substring(s.idx+7,s.ampIdx==-1?s.s.length:s.ampIdx);s.src='http://'+(s.host?s.host:'localhost')+':4000/bm/squirt.js';}document.body.appendChild(s);}})();" ADD_DATE="1394699165" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABRElEQVQ4jZXSPUtcURAG4MeY+BVi0EJsBD8gRZogsk0Eu8XKRiSQwgj5CbYRLGyTKk0gTZoUsfCjEMFS/4EgRME2WwXUoEHN7qa4czfXu3dZM3A458y8874z5wzF1hH7BzzP+dpaCiyjjvW4P/gfgl4coRokC/clSQErkXiFW5yiX5s20uAozoMgu9ZyuJbqnyOhgi/YilYuMNaKJHU8w298x3gmPhekn3JiTeofA/imQGkT1xjJxtLEGgbwKs4/IjaMoTgf4xFe5wk6w1HOgF8GUR+6I16KpPnA1NLSHsa+KnmsJclP9GTKfxK+97jE43zvIkDy6rN4ireYwSSmsI1f+JPJazzUi6igEv3CLpYxIZmNM3zL5d25fJX8QhU7OMEB9v0bqFJB9Q2SQexpnsJ6lL5YpJ63LrzDIW7wExuYLlL+C3jqSJn7EH8tAAAAAElFTkSuQmCC">Squirt</A>

Now save that file, go back to your Bookmark manager in Chrome, and import the file. Your bookmarklet will now be beautiful and all will be well with the world. Thanks again to Cameron Boehmer for this amazing bookmarklet, and to Readability and Spritz Inc too for their contributions!