Ubiquity Tutorial: Turn Bookmarklets Into Commands
Bookmarklets are clickable actions (technically a link containing some Javascript) that can be added to the bookmarks bar of your browser. They’re a good way of getting control of the web back into users hands, by allowing them to add whatever new functionality they want to the websites they visit.
The main problem with bookmarklets is that they don’t provide a scalable solution for accessing their functionality. You can only have so many buttons on the toolbar before they become an unusable outbreak of pimples that clutter the browser’s interface.
With a new utility function in Ubiquity, it’s now trivial to turn any bookmarklet into a Ubiquity command. Here’s a short video tutorial on how to do it:
Here’s the source code for the command in the video. The bookmarklet comes from here.
CmdUtils.makeBookmarkletCommand({
name: "Embed Flickr Photo",
url: "javascript:(function(){if(window.page_p)window.open('http://www.elsewhere.org/mbedr/?p='+window.page_p.id);%20else%20alert('No%20Flickr%20photo%20found.');})()"
})
If you’ve got any favorite bookmarklets or great bookmarklet-based commands, put ‘em in the comments.
RT @azaaza Ubiquity Tutorial: Turn Bookmarklets Into Commands | Follow @azaaza on Twitter | All blog posts
Athan
Hy Aza, i m for the unable to download ubiquity 0.1.2 …
on the wiki …
Whatever, nice new utility …
Thanks
Athan
Aza Raskin
@Athan: That’s because we are releasing Ubiquity 0.1.2 tomorrow. Overly optimistic timing on my part :)
Gabriel
Here’s a list of bookmarklet commands sorted by usage: http://queri.ac/commands/bookmarklets?sort=down_by_queries_count_all
You can mouseover the name links to see the urls or just click on them individually
Ian
Share on friendfeed
Fredrik
This is excellent! I never use bookmarks – except for bookmarklets. This seems like a much better way to use bookmarklets. Can’t wait to try it out.
Athan
Hy Aza,
thanks for the release. I never wrote a line of command and create my first command thanks to these new ubiquity feature.
it’s “clip to evernote”. I shared it on gist.
Thanks a lot
Athan
Adrien
Great!
Is the opposite possible?
Do you have a clue how to execute ubiquity command from bookmarklet?
Mskadu
Interesting. But there’s a snag. For bookmarklets that open Windows, Firefox blocks it every time.
For example, try
CmdUtils.makeBookmarkletCommand({
name: “TwitSnip”,
url:”javascript:void(open(‘http://twitter.grader.com/twitsnipsave.php?Title=’+escape(document.title)+’&Text=’+escape(document.selection?document.selection.createRange().text:(window.getSelection?window.getSelection():(document.getSelection?document.getSelection:”)))+’&Referrer=’+escape(document.referrer)+’&URL=’+escape(location.href),’TwitSnip%20from%20Twitter.Grader.com’,’scrollbars=no,width=550,height=350,top=175,left=75,status=yes,resizable=yes’))”
})
How does one work around that?
thegeniusfiles
Wow, thanks for adding this capability! I have particularly wanted to add the Evernote bookmarklet; now I have it. I do think, however, that you could take it one step further and make this feature really user-friendly. Make it so you can just drag’n'drop the bookmarklet into the Ubiquity command box. Wouldn’t that be a lot nicer?
thegeniusfiles
oops, I futzed my link. this one should work.
Aza Raskin
@Mskadu Hmm. That is indeed a problem. Can you submit a bug report on that. Thanks!
@Athan, thegeniusfiles: That’s spectacular! Enabling everyone to be able to make their browser do what they want is what Ubiquity is all about.
@Adrien: It isn’t currently possible to call a Ubiquity command from a bookmarklet. That’s because bookmarklets run in content space, and Ubiquity requires full chrome privileges.
boardraider
I stumbled over a small problem using your code alongside the NoScript extension.
NoScript allows using Bookmarklets even on untrusted sites (JavaScript is disabled there). The provided Ubiquity code breaks this.
As a workaround I personally use this code:
http://code.google.com/p/boardraider-ubiquity-commands/wiki/BookmarkletsToCommands
Endolith
Shouldn’t you be writing an Ubiquity command to automatically create an Ubiquity command from a selected bookmarklet? :)
Aza Raskin
@Endolith: You are absolutely right. In fact, Ubiquity can just automatically scan your bookmarks, looking for a bookmarklet and add them as a Ubiquity command.
Endolith
I was imagining a command that would automatically read a bookmarklet on the web (like the Mbedr link you clicked on) and convert it into a command, instead of making you type it manually.
But yes, indexing all the user’s bookmarklets and Quick Searches and Quick Search bookmarklets that have keywords and converting them into commands would also be good.
http://getsatisfaction.com/mozilla/topics/using_bookmarks_with_keywords_in_ubiquity
http://www.endolith.com/wordpress/2007/02/10/quick-search-bookmarklets/
Ted Curran
I don’t know why but following your tutorial doesn’t work for me. My bookmarklet commands do not become ubiquity commands. What am I doing wrong?
Ivan
Hello, I’m trying to transform imageshack.us bookmarklet (http://reg.imageshack.us/content.php?page=transloader) to Ubiquity command, but it doesn’t work. Can you please check this out? Thanks.
yudi
Hi Aza,
First of all thank you.
I just want to bring to your notice that when I try to add the following two bookmarklets something goes wrong.
CmdUtils.makeBookmarkletCommand({
name: “print whatyoulike”,
url: “javascript:(function(){if(window['ppw']&&ppw['bookmarklet']){ppw.bookmarklet.toggle();}else{window._pwyl_home=”http://www.printwhatyoulike.com/”;_pwyl_bmkl=document.createElement(’script’);_pwyl_bmkl.setAttribute(‘type’,'text/javascript’);_pwyl_bmkl.setAttribute(’src’,_pwyl_home+’static/compressed/pwyl_bookmarklet_10.js’);_pwyl_bmkl.setAttribute(‘pwyl’,'true’);document.getElementsByTagName(‘head’)[0].appendChild(_pwyl_bmkl);}})();”
})
CmdUtils.makeBookmarkletCommand({
name: “printerfriendly”,
url: “javascript:(function(){function%20linkIsSafe(h){return(!/^mailto:/.exec(h)&&!/^javascript:/.exec(h));}%20var%20i,x,h;%20for(i=0;x=document.getElementsByTagName(‘a’)[i];i++)%20{%20h=x.innerHTML.toLowerCase();%20if(h.indexOf(‘print’)>-1%20&&%20h.indexOf(‘edition’)==-1%20&&%20h.indexOf(’subscri’)==-1%20&&%20h.indexOf(‘reprint’)==-1%20&&%20h.indexOf(’slogan’)==-1%20&&%20linkIsSafe(x.href))%20{%20x.focus();location=x.href;return;%20}}%20alert(“Can’t%20find%20link%20to%20printer%20friendly%20version.”);})()”
})
I successfully added five bookmarklets but not these two. They both deal with print function.
Appreciate your work.
Yudi
JS
Many thanks. Will turn my pornzilla bookmarklets into Ubiquity commands now. But then, you did too. You just didn’t tell us about it. ;) Flickr… pfft! :)
Zayıflama Lida Fx15 Ve Biber Hapı Zlfvbh
This is excellent! I never use bookmarks – except for bookmarklets. This seems like a much better way to use bookmarklets. Can’t wait to try it out.