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!
Top comments (1)
Awesome 👍. I've been looking for a way to add icons to my bookmarking and snippets bookmarklets - Bookmarks.dev/bookmarklets